/* goksweb: calm and roomy. System font, warm neutrals, rounded cards. Light and dark themes. */
:root{
  --bg:#faf8f5; --card:#fff; --ink:#1f1d1a; --muted:#6b665e; --line:#e8e3db; --line-hi:#d6cfc4;
  --soft:#f2eee8; --link:#b5532f; --accent:#c2603a;
  --live:#1f9d55; --building:#c27c00; --idea:#9a948c; --retired:#c4beb6;
  --shadow:0 1px 2px rgba(20,18,16,.04),0 4px 16px rgba(20,18,16,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#161514; --card:#201f1d; --ink:#f1ede6; --muted:#a39d93; --line:#33302c; --line-hi:#4a4640;
  --soft:#262422; --link:#e48a62; --accent:#e48a62;
  --live:#4cc483; --building:#e0a43a; --idea:#77716a; --retired:#4f4b47;
  --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#161514; --card:#201f1d; --ink:#f1ede6; --muted:#a39d93; --line:#33302c; --line-hi:#4a4640;
  --soft:#262422; --link:#e48a62; --accent:#e48a62;
  --live:#4cc483; --building:#e0a43a; --idea:#77716a; --retired:#4f4b47;
  --shadow:none; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
code,pre{font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
pre{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto}
h1,h2,h3{font-weight:700;letter-spacing:-.015em}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.col{max-width:760px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* top bar: wordmark and links on the left, theme switch on the right */
.topbar{display:flex;align-items:center;gap:16px;padding:24px 0 0;min-height:64px}
.topbar .brand{font-weight:700;color:var(--ink);font-size:17px}
.topbar .brand:hover{text-decoration:none;color:var(--accent)}
.theme{margin-left:auto;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font:inherit;padding:0;
  transition:border-color .15s ease}
.theme:hover{border-color:var(--accent)}
.theme svg{width:18px;height:18px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .sun{display:none}
  :root:not([data-theme="light"]) .theme .moon{display:block}}

/* page heading */
.ph{padding:48px 0 8px}
.ph h1{margin:0;font-size:clamp(30px,5vw,40px);line-height:1.15}
.ph p{margin:10px 0 0;color:var(--muted);font-size:18px}

/* home */
.hero{padding:clamp(40px,8vw,72px) 0 0}
.hero h1{margin:0;font-size:clamp(34px,6vw,42px);line-height:1.1;letter-spacing:-.025em}
.hero .wave{display:inline-block;transform-origin:70% 70%}
.hero p{margin:16px 0 0;color:var(--muted);font-size:clamp(17px,2.2vw,19px)}
.cats{list-style:none;margin:clamp(36px,6vw,56px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.cat{display:block;height:100%;padding:32px 24px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;color:inherit;box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease}
a.cat:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-3px)}
.cat .ci{display:block;font-size:32px;line-height:1}
.cat .name{margin:20px 0 0;font-size:20px;line-height:1.25}
.cat .desc{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
.cat.soon{cursor:default}

/* project tiles */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:28px 20px}
.tile{display:block;color:inherit}
.tile:hover{text-decoration:none}
.thumb{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--soft);display:flex;align-items:flex-end;justify-content:center}
.thumb img{width:88%;height:94%;object-fit:contain;object-position:center bottom;transition:transform .2s ease}
.tile:hover .thumb img{transform:scale(1.03)}
.tile .name{margin:12px 0 0;font-size:17px;line-height:1.3}
.tile .desc{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.45}

/* lists (projects, blog posts) */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 12px}
.filters button{cursor:pointer;font:inherit;font-size:14px;padding:5px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);transition:border-color .15s ease,color .15s ease}
.filters button:hover{border-color:var(--line-hi);color:var(--ink)}
.filters button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
.summary{font-size:15px;color:var(--muted);margin:0 0 28px}
.group{margin:0 0 20px;padding:20px 24px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.group h2{margin:0 0 6px;font-size:14px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 14px;padding:10px 0;border-top:1px solid var(--line)}
.plist li:first-child{border-top:0}
.plist .pm{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;padding-top:2px}
.plist .pn{font-weight:600}
.plist .pn a{color:var(--ink)}
.plist .pd{grid-column:2;margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
@media (max-width:600px){.plist li{grid-template-columns:4.5rem minmax(0,1fr);gap:0 10px}.group{padding:16px 18px}}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}

/* stats */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:16px;margin:24px 0 36px}
.card{padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.card b{display:block;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.card span{display:block;margin-top:6px;color:var(--muted);font-size:14px}
.sub{margin:0;font-size:18px}

.note{color:var(--muted)}
.prose p,.prose li{max-width:65ch}
.prose h2{font-size:19px;margin:32px 0 10px}
.prose li{margin:4px 0}

/* blog posts */
.ph .back{margin:0 0 14px;font-size:15px}
.posts{margin-top:28px}
.posts .plist li{grid-template-columns:6.5rem minmax(0,1fr)}
@media (max-width:600px){.posts .plist li{grid-template-columns:minmax(0,1fr)}.posts .plist .pd{grid-column:1}}
.cover{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:14px;margin:28px 0 0}
.post{margin-top:28px;overflow-wrap:anywhere}
.post p{margin:0 0 1.1em}
.post h2,.post h3,.post h4{font-size:20px;line-height:1.3;margin:36px 0 12px}
.post img{max-width:100%;height:auto;border-radius:12px}
.post figure{margin:24px 0}
.post blockquote{margin:20px 0;padding:2px 0 2px 18px;border-left:3px solid var(--line-hi);color:var(--muted)}
.post hr{border:0;border-top:1px solid var(--line);margin:32px 0}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--muted);font-size:15px;padding:clamp(56px,10vw,96px) 0 40px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}
footer nav a{color:var(--muted)}
footer nav a:hover{color:var(--ink);text-decoration:none}
footer nav a[aria-current="page"]{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.tile:hover .thumb img,a.cat:hover{transform:none}}