:root{
  --bg:#fbfcfd; --ink:#32404f; --ink-2:#3f4d5c; --muted:#727d88; --faint:#9aa3ac;
  --line:#e8ebef; --line-2:#dde2e7; --accent:#e65f2e;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --pe:linear-gradient(135deg,#f6ddc4,#edc095);
  --bl:linear-gradient(135deg,#d2e1f7,#a6bdec);
  --la:linear-gradient(135deg,#ebdef1,#cfbce1);
  --pv:linear-gradient(135deg,#d6dbef,#b4bbe2);
  --mi:linear-gradient(135deg,#d6ece1,#aed8c4);
  --gy:linear-gradient(135deg,#e1e7ec,#c4ced8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6}
::selection{background:#fbe0d4}
.mono{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
a{color:var(--accent)}

/* nav */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,64px); background:rgba(251,252,253,.86); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line)}
.topbar .brand{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.topbar .brand span{color:var(--faint)}
.topbar nav{display:flex; gap:22px}
.topbar nav a{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.topbar nav a.active{color:var(--accent)}
.topbar nav a:hover{color:var(--ink)}

.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,64px)}

/* hero */
.hero{padding:clamp(64px,13vw,168px) 0 clamp(40px,6vw,72px)}
.hero .eyebrow{margin:0 0 24px}
h1{font-family:var(--serif); font-weight:500; font-size:clamp(40px,6.6vw,80px); line-height:1.02;
  letter-spacing:-.02em; margin:0; color:var(--ink); max-width:16ch}
h1 em{font-style:italic; font-weight:500}
.lead{font-family:var(--serif); font-size:clamp(18px,1.7vw,22px); line-height:1.55; color:var(--ink-2);
  max-width:58ch; margin:30px 0 0}

/* work listing */
.work{padding-bottom:clamp(80px,12vw,140px)}
.work .label{margin:0 0 26px; padding-top:26px; border-top:1px solid var(--line)}
a.card,.card{display:block; text-decoration:none; color:inherit}
.feature .block{aspect-ratio:16/7}
.block{position:relative; border-radius:4px; overflow:hidden; display:grid; place-items:center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease}
.block .vk{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(43,55,68,.5); background:rgba(255,255,255,.55); padding:7px 12px; border-radius:3px}
a.card:hover .block{box-shadow:0 18px 40px rgba(43,55,68,.13)}
.cap{display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-top:15px}
.cap .t{font-family:var(--serif); font-weight:500; font-size:clamp(18px,1.7vw,22px); line-height:1.25; color:var(--ink)}
a.card:hover .cap .t{color:var(--accent)}
.cap .m{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap; text-align:right}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,48px) clamp(26px,3vw,40px); margin-top:clamp(36px,4vw,52px)}
@media(max-width:680px){.cards{grid-template-columns:1fr; gap:36px}}
.cards .block{aspect-ratio:4/3}

/* footer */
.foot{padding:30px 0 60px; border-top:1px solid var(--line); margin-top:40px;
  font-family:var(--sans); font-size:13px; color:var(--faint); line-height:1.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--accent)}

/* case study + prose pages */
.case, .prose.narrow{padding:clamp(48px,9vw,104px) 0 clamp(56px,9vw,120px)}
.case .eyebrow{margin:0 0 22px}
.case .eyebrow a{color:var(--muted); text-decoration:none}
.case .eyebrow a:hover{color:var(--accent)}
.case-hero{aspect-ratio:16/7; margin:clamp(28px,4vw,44px) 0 clamp(8px,2vw,20px)}
.prose{max-width:68ch}
.prose.narrow{max-width:62ch}
.prose h2{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.4vw,28px); letter-spacing:-.01em;
  margin:2.2em 0 .5em; color:var(--ink)}
.prose p{font-size:18px; color:var(--ink-2); margin:1em 0}
.prose ul{font-size:18px; color:var(--ink-2); padding-left:1.1em; margin:1em 0}
.prose li{margin:.4em 0}
.prose strong{color:var(--ink); font-weight:600}
.prose hr{border:none; border-top:1px solid var(--line); margin:2.4em 0}
.prose em{color:var(--muted)}
.prose blockquote{margin:1.5em 0; padding:4px 0 4px 20px; border-left:2px solid var(--line-2); color:var(--ink-2); font-style:italic; font-size:19px}
.prose blockquote p{margin:.4em 0}
.prose ol{font-size:18px; color:var(--ink-2); padding-left:1.2em; margin:1em 0}
.prose ol li{margin:.5em 0}
/* tables (the case study uses many) */
.prose table{width:100%; border-collapse:collapse; margin:1.5em 0; font-size:15px; line-height:1.5}
.prose th,.prose td{text-align:left; vertical-align:top; padding:9px 13px; border:1px solid var(--line); color:var(--ink-2)}
.prose th{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); background:#f3f5f8; font-weight:500; white-space:nowrap}
.prose td strong{color:var(--ink)}
/* code + ASCII wireframes */
.prose code{font-family:var(--mono); font-size:.9em; background:#eef1f4; padding:2px 5px; border-radius:3px; color:var(--ink)}
.prose pre{background:#0f1216; color:#e7edf3; border-radius:7px; padding:18px 20px; overflow-x:auto; margin:1.6em 0;
  font-family:var(--mono); font-size:12px; line-height:1.5; -webkit-font-smoothing:auto}
.prose pre code{font-family:inherit; font-size:inherit; background:none; padding:0; color:inherit; white-space:pre}
.back{margin-top:3em}
.back a{color:var(--muted); text-decoration:none}
.back a:hover{color:var(--accent)}

/* résumé */
.resume-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap}
.btn{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border:1px solid var(--line-2); border-radius:4px; padding:11px 16px;
  background:#fff; transition:border-color .2s ease, color .2s ease; white-space:nowrap; margin-top:8px}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.resume .row{display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--line)}
.resume .row-main .t{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink)}
.resume .row-main .org{font-family:var(--serif); color:var(--muted); margin-left:8px}
.resume .row-main .note{font-size:16px; color:var(--ink-2); margin:.4em 0 0}
.resume .years{color:var(--faint); white-space:nowrap; padding-top:4px}