/* Portfolio design system: editorial, minimal, one accent, three-colour pixel art.
   Shared by portfolio.html and the three case-*.html pages. */

:root{
  --paper:#f2f1ec; --paper-sunk:#eae8e1; --paper-raised:#f7f6f3;
  --ink:#16150f; --ink-soft:#45443c; --muted:#7a776d; --hairline:#d8d5cb;
  --accent:#b7401f;

  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --type-display:clamp(3.25rem,12vw,10rem);
  --type-h1:clamp(2.5rem,7vw,5.5rem);
  --type-h2:clamp(1.75rem,3.4vw,3.125rem);
  --type-h3:clamp(1.25rem,1.9vw,1.75rem);
  --type-lead:clamp(1.125rem,1.7vw,1.5rem);
  --type-body:1.0625rem;
  --type-small:.9375rem;
  --type-mono:.75rem;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --gap:clamp(1rem,2.2vw,2rem);
  --section:clamp(5.5rem,13vh,11rem);
  --shell-max:1560px;
  --label:0px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#131210; --paper-sunk:#1b1a16; --paper-raised:#21201b;
  --ink:#efece4; --ink-soft:#bcb8ac; --muted:#8b8779; --hairline:#322f28;
  --accent:#e2643e;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --paper:#131210; --paper-sunk:#1b1a16; --paper-raised:#21201b;
    --ink:#efece4; --ink-soft:#bcb8ac; --muted:#8b8779; --hairline:#322f28;
    --accent:#e2643e; color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
html:not([lang="nl"]) [lang="nl"], html[lang="nl"] [lang="en"]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--type-body)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;transition:background .5s ease,color .5s ease;overflow-x:hidden}
::selection{background:var(--accent);color:var(--paper)}
a{color:var(--ink);text-decoration-color:var(--hairline);text-underline-offset:.22em;transition:color .35s ease,text-decoration-color .35s ease}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%}
p{margin:0 0 1.1em}
strong{font-weight:600}
code{font:.85em var(--mono);background:var(--paper-sunk);border:1px solid var(--hairline);padding:.05em .4em}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:60;font:var(--type-mono) var(--mono)}
.skip:focus{left:8px}

/* ---------- label treatment ---------- */
.mono,.eyebrow,.counter,.num,.tag,.meta dt,.rows .lab,.btn,.langbtn,.bar a.nav,figcaption .n{
  font-family:var(--mono);font-size:var(--type-mono);letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;line-height:1.5}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:var(--shell-max);margin:0 auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:var(--shell-max)}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);transition:background .5s ease}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.bar nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.75rem);flex-wrap:wrap}
.bar a.nav{color:var(--muted);text-decoration:none}
.bar a.nav:hover,.bar a.nav.back{color:var(--ink)}
.bar a.nav:hover{color:var(--accent)}
.bar .right{display:flex;align-items:center;gap:10px}
.themebtn{width:26px;height:26px;border-radius:50%;border:1px solid var(--ink);padding:0;cursor:pointer;
  background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);transition:transform .5s ease,border-color .35s ease}
.themebtn:hover{border-color:var(--accent)}
:root[data-theme="dark"] .themebtn{transform:rotate(180deg)}
.langs{display:flex;gap:6px}
.langbtn{display:inline-flex;align-items:center;gap:7px;color:var(--muted);background:transparent;border:1px solid var(--hairline);
  padding:5px 9px 5px 7px;cursor:pointer;transition:color .35s ease,border-color .35s ease}
.langbtn:hover{color:var(--ink);border-color:var(--ink-soft)}
.langbtn[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.langbtn svg{width:18px;height:12px;display:block}
@media(max-width:640px){.bar a.nav.opt{display:none}.langbtn span{display:none}.langbtn{padding:6px 8px}}

/* ---------- pixel sprites (ink, accent, muted) ---------- */
.sprite{display:block;line-height:0}
.sprite svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.sprite .i{fill:var(--ink)} .sprite .a{fill:var(--accent)} .sprite .m{fill:var(--muted)}

/* ---------- placeholder / hatch ---------- */
.hatch{background:var(--paper-sunk) repeating-linear-gradient(45deg,transparent 0 7px,var(--hairline) 7px 8px);box-shadow:inset 0 0 0 1px var(--hairline)}

/* ---------- headings ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:var(--type-h1)}
h2{font-size:var(--type-h2)}
h3{font-size:var(--type-h3);line-height:1.05}
.lead{font-size:var(--type-lead);line-height:1.4;color:var(--ink);max-width:52ch}
.muted{color:var(--muted)}

/* ---------- hero (case pages) ---------- */
.hero{position:relative;padding:clamp(3.5rem,9vh,7rem) 0 clamp(3rem,7vh,5rem);border-bottom:1px solid var(--hairline)}
.hero .wrap{position:relative}
.hero .sprite{width:84px;margin:0 0 1.75rem}
@media(min-width:900px){.hero .sprite{position:absolute;right:var(--gutter);top:0;width:clamp(120px,12vw,180px);margin:0}}
.eyebrow{color:var(--accent);margin:0 0 1.25rem}
.hero h1{font-size:var(--type-h1);max-width:12ch}
.pitch{font-size:var(--type-lead);line-height:1.4;max-width:46ch;margin:1.5rem 0 2rem;color:var(--ink)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem var(--gap);margin:0 0 1.75rem;padding:1.25rem 0 0;border-top:1px solid var(--hairline);max-width:960px}
.meta dt{color:var(--muted)}
.meta dd{margin:.2rem 0 0;font-size:var(--type-small);color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 2rem;list-style:none}
.chips li{font:var(--type-mono) var(--mono);letter-spacing:.04em;border:1px solid var(--hairline);border-radius:999px;padding:.3rem .8rem;color:var(--ink-soft)}
.linkrow{display:flex;flex-wrap:wrap;gap:.75rem}
.note{margin:1rem 0 0;font-size:var(--type-small);color:var(--muted);max-width:60ch}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;color:var(--ink);background:transparent;border:1px solid var(--ink);
  padding:.95em 1.5em;text-decoration:none;cursor:pointer;transition:background .4s ease,color .4s ease,border-color .4s ease}
.btn::after{content:"\2192";transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn:hover::after{transform:translateX(.25em)}
.btn.ghost{border-color:var(--hairline);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--accent);color:var(--paper)}
.tlink{font:var(--type-mono) var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--hairline);padding-bottom:2px;transition:color .35s ease,border-color .35s ease}
.tlink::after{content:" \2192";display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tlink:hover{color:var(--accent);border-color:var(--accent)}
.tlink:hover::after{transform:translateX(.25em)}

/* ---------- sections: numbering label hangs in the left margin, content is indented ---------- */
section{padding:var(--section) 0 0;border-top:1px solid var(--hairline);margin-top:var(--section)}
main > section:first-child{margin-top:0;border-top:0}
h2{display:block;position:relative;margin:0 0 1.5rem}
h2 small{display:block;font:var(--type-mono) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;font-variant-numeric:tabular-nums}
h2 small i{font-style:normal;color:var(--muted)}
section p{max-width:62ch}
section .lead{max-width:50ch}
section ul.tight{max-width:62ch;padding-left:1.2em;margin:0 0 1.1em}
section ul.tight li{margin:.4em 0}

/* ---------- chapters ---------- */
.chapter{position:relative;padding:2.5rem 0;border-top:1px solid var(--hairline)}
.chapter:first-of-type{margin-top:2rem}
.chapter .num{color:var(--accent);display:block;margin-bottom:.75rem}
.chapter h3{margin-bottom:1rem}
.chapter p{max-width:62ch}

@media(min-width:768px){
  :root{--label:clamp(120px,14vw,220px)}
  section > .wrap > *{margin-left:var(--label)}
  section > .wrap > .full{margin-left:0}
  h2 small{position:absolute;left:calc(var(--label) * -1);top:.7em;margin:0}
  .chapter .num{position:absolute;left:calc(var(--label) * -1);top:2.9rem;margin:0}
}

/* ---------- figures ---------- */
figure{margin:0}
figcaption{font-size:var(--type-small);color:var(--muted);margin-top:.6rem;line-height:1.45}
.frame{position:relative;overflow:hidden;background:var(--paper-sunk) repeating-linear-gradient(45deg,transparent 0 7px,var(--hairline) 7px 8px);box-shadow:inset 0 0 0 1px var(--hairline)}
.frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  font:var(--type-mono) var(--mono);letter-spacing:.04em;color:var(--muted);word-break:break-all}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--paper)}
.phone .frame{aspect-ratio:9/19.5}
.wide .frame{aspect-ratio:16/10}
.wide{margin-top:1.5rem}
.sq .frame{aspect-ratio:8/7}
.sq{max-width:760px}
.strip{display:flex;gap:var(--gap);overflow-x:auto;padding:.4rem 1px 1.1rem;margin:1.5rem 0 0;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--hairline) transparent;cursor:grab;-webkit-overflow-scrolling:touch}
.strip.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.strip.drag img{pointer-events:none}
.strip figure{flex:0 0 clamp(170px,22vw,230px);scroll-snap-align:start}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--hairline)}
.shots{display:grid;gap:var(--gap);margin-top:1.5rem}
@media(min-width:760px){.shots{grid-template-columns:1fr 1fr}}
.shots .frame{aspect-ratio:16/10}

/* ---------- stories, boxes, next ---------- */
.stories,.pair,.next-grid{display:grid;gap:var(--gap);margin-top:1.5rem}
.stories{border-top:1px solid var(--hairline)}
@media(min-width:760px){.stories{grid-template-columns:1fr 1fr}.pair{grid-template-columns:1fr 1fr}}
.story{padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
.story h3{font-size:var(--type-h3);margin-bottom:.8rem}
.story p{margin:0 0 .7em;color:var(--ink-soft);font-size:var(--type-small)}
.story p:last-child{margin:0;color:var(--ink)}
.story p:last-child::first-line{color:var(--ink)}
.box{border-top:1px solid var(--ink);padding-top:1rem}
.box h3{margin-bottom:.7rem}
.box p{color:var(--ink-soft);font-size:var(--type-small)}
.next-grid{border-top:1px solid var(--hairline)}
@media(min-width:760px){.next-grid{grid-template-columns:repeat(6,1fr)}.ncard.feature{grid-column:span 3}.ncard:not(.feature){grid-column:span 2}}
.ncard{padding:1.5rem 0 1.75rem;border-bottom:1px solid var(--hairline)}
.ncard h3{margin:.4rem 0 .8rem}
.ncard p{margin:0;color:var(--ink-soft);font-size:var(--type-small);max-width:52ch}
.tag{display:inline-block;color:var(--accent)}
.demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;margin:2rem 0 .5rem;padding:1.5rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline)}
.demo h3{margin-bottom:.6rem}
.demo p{margin:0;max-width:56ch;color:var(--ink-soft);font-size:var(--type-small)}

/* ---------- portfolio hub ---------- */
.p-hero{padding:clamp(3.5rem,10vh,7rem) 0 var(--section);position:relative}
.p-hero .grid{display:block}
@media(min-width:768px){.p-hero .grid{display:grid;grid-template-columns:calc(var(--label) - var(--gap)) minmax(0,1fr);column-gap:var(--gap)}}
.p-hero .counter{color:var(--accent);margin:0 0 1rem}
.p-hero h1{font-size:var(--type-display);line-height:.86;letter-spacing:-.035em;max-width:none;margin:0 0 1.25rem}
.p-hero .role{color:var(--muted);margin:0 0 2rem}
.p-hero .intro{font-size:var(--type-lead);line-height:1.4;max-width:46ch;margin:0 0 1.25rem}
.p-hero .philo{max-width:58ch;color:var(--ink-soft);margin:0}
.p-hero .cab{display:block;width:clamp(96px,14vw,200px);margin:0 0 2rem;text-decoration:none;color:var(--ink)}
.p-hero .cab .sprite{width:100%}
.cab .cap{display:block;text-align:center;margin-top:.9rem;color:var(--accent);animation:coin 1.2s steps(1) infinite}
.cab:hover .cap,.cab:focus-visible .cap{animation:none;color:var(--ink)}
.cab:hover .sprite{transform:translateY(-4px)}
.cab .sprite{transition:transform .35s steps(3)}
@media(min-width:768px){.p-hero .cab{position:absolute;right:var(--gutter);top:clamp(3.5rem,10vh,7rem);margin:0}}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
@keyframes coin{50%{opacity:0}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.now{display:grid;gap:1.1rem var(--gap);margin:2.75rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--hairline);max-width:900px}
@media(min-width:700px){.now{grid-template-columns:repeat(3,1fr)}}
.now dt{font:var(--type-mono) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.now dd{margin:0;font-family:var(--serif);font-size:var(--type-h3);line-height:1.1;letter-spacing:-.01em}
.now dd small{display:block;margin-top:.4rem;font:var(--type-small) var(--sans);color:var(--ink-soft);letter-spacing:0}

.ticker{overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:.9rem 0;margin-top:calc(var(--section) * -.4)}
.ticker .track{display:flex;width:max-content;gap:2.5rem;animation:tick 40s linear infinite}
.ticker span{font:var(--type-mono) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ticker span::after{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-left:2.5rem;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}

.quest{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);border-top:1px solid var(--hairline);counter-reset:lv}
@media(min-width:900px){.quest{grid-template-columns:repeat(4,1fr)}}
.quest li{position:relative;padding:1.5rem 0 1.5rem;border-bottom:1px solid var(--hairline)}
@media(min-width:900px){.quest li{border-bottom:0;padding-right:var(--gap)}}
.quest .ico{height:48px;margin-bottom:1.1rem;display:flex;align-items:flex-end}
.quest .ico .sprite{width:44px}
.quest .lv{color:var(--accent);margin:0 0 .6rem}
.quest .lv span{color:var(--muted);margin-left:.6em}
.quest h3{margin-bottom:.8rem}
.quest h3 small{display:block;font:var(--type-mono) var(--mono);letter-spacing:.04em;color:var(--muted);margin-top:.5rem;text-transform:none}
.quest li > p:not(.lv):not(.you){margin:0;color:var(--ink-soft);font-size:var(--type-small);max-width:44ch}
.quest .you{margin:1rem 0 0;color:var(--accent);animation:coin 1.2s steps(1) infinite}
.quest .you::before{content:"\25B6\00A0"}
.quest li.here .ico .sprite{animation:hop 1.6s steps(2) infinite}
.card-p .art .sprite{animation:hop 2.4s steps(2) infinite}
.card-p:nth-child(2) .art .sprite{animation-delay:-.8s}
.card-p:nth-child(3) .art .sprite{animation-delay:-1.6s}

.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
h2 small::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:.7em;vertical-align:.08em}

.sec-head{margin-bottom:2.5rem}
.sec-head .lead{margin:0 0 .8rem;max-width:56ch;font-size:var(--type-lead)}
.sec-head p{color:var(--ink-soft)}

.projects{display:grid;gap:calc(var(--gap)*1.5) var(--gap);border-top:1px solid var(--hairline);padding-top:var(--gap)}
@media(min-width:900px){.projects{grid-template-columns:repeat(3,1fr)}}
.card-p{display:flex;flex-direction:column;gap:.9rem}
.card-p .art{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--paper-sunk) repeating-linear-gradient(45deg,transparent 0 7px,var(--hairline) 7px 8px);box-shadow:inset 0 0 0 1px var(--hairline);overflow:hidden}
.card-p .art .sprite{width:min(96px,32%);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.card-p:hover .art .sprite{transform:scale(1.08)}
.card-p .metarow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--hairline);padding-top:.7rem}
.card-p .metarow .n{color:var(--accent)}
.card-p .metarow .c{color:var(--ink)}
.card-p h3{transition:color .35s ease}
.card-p:hover h3{color:var(--accent)}
.card-p .type{color:var(--muted);font-size:var(--type-small);margin:0}
.card-p p{margin:0;color:var(--ink-soft);font-size:var(--type-small)}
.card-p .why{color:var(--muted)}
.specs{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end;margin-top:auto;padding-top:.8rem}
.specs .chips{margin:0}
.specs .yr{font:var(--type-mono) var(--mono);color:var(--muted);letter-spacing:.08em;text-align:right}
.acts{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding-top:.4rem}

.rows{border-top:1px solid var(--hairline)}
.rows > .row{display:grid;gap:.5rem var(--gap);padding:1.4rem 0;border-bottom:1px solid var(--hairline)}
@media(min-width:768px){.rows > .row{grid-template-columns:calc(var(--label) - var(--gap)) minmax(0,1.1fr) minmax(0,2fr)}}
.rows .lab{color:var(--accent)}
.rows h3{font-size:var(--type-h3)}
.rows .row p{margin:0 0 .7em;color:var(--ink-soft);font-size:var(--type-small);max-width:62ch}
.rows .row p:last-child{margin:0}
.rows .row h3 small{display:block;font:var(--type-mono) var(--mono);letter-spacing:.04em;color:var(--muted);margin-top:.5rem;text-transform:none}
.block-title{font:var(--type-mono) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:3rem 0 1rem}
.prose p{max-width:62ch;color:var(--ink-soft)}
.prose p.first{font-family:var(--serif);font-size:var(--type-h2);line-height:1.05;letter-spacing:-.02em;color:var(--ink);max-width:30ch;margin-bottom:1.5rem}
.two{display:grid;gap:var(--gap)}
@media(min-width:768px){.two{grid-template-columns:1fr 1fr}}
.two ul{margin:0;padding-left:1.1em;color:var(--ink-soft);font-size:var(--type-small)}
.two li{margin:.35em 0}
.contact .big{font-family:var(--serif);font-size:var(--type-h1);line-height:.98;letter-spacing:-.02em;max-width:14ch;margin:0 0 1.5rem}
.contact .small{color:var(--ink-soft);margin:0 0 2rem}

footer{margin-top:var(--section);padding:2rem 0 3rem;border-top:1px solid var(--hairline);color:var(--muted);font-size:var(--type-small)}
footer .wrap{max-width:var(--shell-max)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.nojs .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .ticker .track{animation:none}
  .rv{opacity:1;transform:none}
}

/* ================= inner pages: about, path ================= */
.bar a.nav.cur{color:var(--ink)}
.bar a.nav.cur::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:.5em;vertical-align:.1em}
section.plain{border-top:0;margin-top:0;padding-top:clamp(2.5rem,6vh,4rem)}
section.plain + section{margin-top:var(--section)}

.pg-hero{padding:clamp(3.5rem,10vh,7rem) 0 clamp(2.5rem,6vh,4rem);border-bottom:1px solid var(--hairline)}
.pg-hero h1{font-size:var(--type-h1);line-height:.95;max-width:16ch;margin:0 0 1.5rem}
.pg-hero .lead{max-width:50ch;margin:0 0 1rem;color:var(--ink-soft)}
.jump{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--hairline)}
.jump a{color:var(--muted);text-decoration:none}
.jump a::before{content:"\2193\00A0";color:var(--accent)}
.jump a:hover{color:var(--accent)}
.xp{position:relative;margin-top:2.25rem;max-width:520px;height:10px;border:1px solid var(--ink);padding:2px}
.xp i{display:block;height:100%;background:var(--accent);transform-origin:left;animation:xp 1.6s steps(16) both}
.xp span{position:absolute;left:0;top:18px;color:var(--muted)}
@keyframes xp{from{transform:scaleX(0)}}

/* tiles on the home page */
.tiles{display:grid;gap:var(--gap);border-top:1px solid var(--hairline);padding-top:var(--gap)}
@media(min-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.5rem 1.5rem 1.4rem;border:1px solid var(--hairline);text-decoration:none;color:var(--ink);
  transition:background .4s ease,border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.tile:hover{background:var(--paper-sunk);border-color:var(--ink);transform:translateY(-3px);color:var(--ink)}
.tile .ico{display:block;width:52px;margin-bottom:.9rem}
.tile .ico .sprite{transition:transform .35s steps(3)}
.tile:hover .ico .sprite{transform:translateY(-5px)}
.tile .n{position:absolute;right:1.25rem;top:1.1rem;color:var(--muted)}
.tile h3{font-size:var(--type-h2);line-height:1}
.tile p{margin:0;color:var(--ink-soft);font-size:var(--type-small)}
.tile .go{margin-top:auto;padding-top:1rem;color:var(--accent)}
.tile .go::after{content:" \2192";display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tile:hover .go::after{transform:translateX(.3em)}

/* about: what I do */
.cards4{display:grid;gap:var(--gap)}
@media(min-width:700px){.cards4{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards4{grid-template-columns:repeat(4,1fr)}}
.card4{position:relative;padding:1.5rem;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--hairline);transition:box-shadow .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.card4:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-3px)}
.card4 .ico{display:block;width:44px;margin-bottom:1.5rem}
.card4 .n{position:absolute;right:1.25rem;top:1.1rem;color:var(--accent)}
.card4 h3{margin-bottom:.8rem}
.card4 p{margin:0;color:var(--ink-soft);font-size:var(--type-small)}

/* about: how I think, a dark band with big statements */
section.dark-band{background:var(--ink);color:var(--paper);border-top:0;margin-top:var(--section);padding-bottom:var(--section);--hl:color-mix(in srgb,var(--paper) 22%,transparent)}
section.dark-band h2,section.dark-band .says h3{color:var(--paper)}
section.dark-band h2 small{color:var(--accent)}
.says{list-style:none;margin:0;padding:0;counter-reset:say}
.says li{display:grid;gap:.4rem var(--gap);padding:clamp(1.5rem,4vh,2.75rem) 0;border-top:1px solid var(--hl);align-items:baseline}
.says li:last-child{border-bottom:1px solid var(--hl)}
@media(min-width:768px){.says li{grid-template-columns:calc(var(--label) - var(--gap)) minmax(0,1.5fr) minmax(0,1fr)}}
.says .n{color:var(--accent)}
.says h3{font-size:clamp(2rem,5vw,4.25rem);line-height:.95;transition:transform .5s cubic-bezier(.16,1,.3,1),color .35s ease}
.says li:hover h3{transform:translateX(.35em);color:var(--accent)}
.says p{margin:0;color:color-mix(in srgb,var(--paper) 72%,transparent);font-size:var(--type-small);max-width:34ch}

/* about: expandable curiosities */
.dives{border-top:1px solid var(--ink)}
.dive{border-bottom:1px solid var(--hairline)}
.dive summary{list-style:none;cursor:pointer;display:grid;gap:.3rem var(--gap);align-items:baseline;padding:1.5rem 3rem 1.5rem 0;position:relative}
@media(min-width:768px){.dive summary{grid-template-columns:calc(var(--label) - var(--gap)) minmax(0,1fr)}}
.dive summary::-webkit-details-marker{display:none}
.dive summary::after{content:"+";position:absolute;right:.25rem;top:50%;margin-top:-.7em;font:400 2rem/1 var(--mono);color:var(--accent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dive[open] summary::after{transform:rotate(45deg)}
.dive summary .n{color:var(--accent)}
.dive summary .t{font-family:var(--serif);font-size:var(--type-h2);line-height:1;letter-spacing:-.02em;transition:color .35s ease}
.dive summary:hover .t{color:var(--accent)}
.dive .body{padding:0 0 2rem}
@media(min-width:768px){.dive .body{margin-left:var(--label)}}
.dive .body p{max-width:62ch;color:var(--ink-soft)}
.dive[open] .body{animation:dive .5s cubic-bezier(.16,1,.3,1)}
@keyframes dive{from{opacity:0;transform:translateY(-8px)}}

/* path: a vertical timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:23px;top:0;bottom:0;border-left:2px dashed var(--hairline)}
.stop{position:relative;padding:0 0 clamp(2.5rem,6vh,4rem) 78px}
.stop .node{position:absolute;left:0;top:0;width:48px;height:48px;padding:6px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);display:block}
.stop.here .node{box-shadow:inset 0 0 0 2px var(--accent)}
.stop.here .node .sprite{animation:hop 1.6s steps(2) infinite}
.stop .card{padding:0 0 .5rem}
.stop .lv{color:var(--accent);margin:0 0 .5rem}
.stop .lv span{color:var(--muted);margin-left:.6em}
.stop h3{font-size:clamp(2.25rem,6vw,5rem);line-height:.95;margin-bottom:.6rem}
.stop .role{color:var(--muted);margin:0 0 1rem}
.stop .card p:not(.lv):not(.role):not(.you){max-width:58ch;color:var(--ink-soft)}
.stop .you{color:var(--accent);margin:.6rem 0 0;animation:coin 1.2s steps(1) infinite}
.stop .you::before{content:"\25B6\00A0"}
@media(min-width:900px){
  .tl::before{left:50%;margin-left:-1px}
  .stop{width:50%;padding:0 72px clamp(3rem,8vh,5.5rem) 0}
  .stop:nth-child(even){margin-left:50%;padding:0 0 clamp(3rem,8vh,5.5rem) 72px}
  .stop .node{left:auto;right:-24px}
  .stop:nth-child(even) .node{right:auto;left:-24px}
  .stop:nth-child(odd) .card{text-align:right}
  .stop:nth-child(odd) .card p{margin-left:auto}
}

/* path: education and awards */
.badges{display:grid;gap:var(--gap)}
@media(min-width:700px){.badges{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.badges{grid-template-columns:repeat(4,1fr)}}
.badge{position:relative;padding:1.4rem;box-shadow:inset 0 0 0 1px var(--hairline);display:flex;flex-direction:column;gap:.4rem}
.badge .n{color:var(--muted)}
.badge h3{font-size:var(--type-h3)}
.badge p{margin:0;color:var(--ink-soft);font-size:var(--type-small)}
.badge .yr{margin-top:auto;padding-top:.8rem;color:var(--accent)}
.badge.win{box-shadow:inset 0 0 0 1px var(--accent)}
.badge.win .n{color:var(--accent)}
.badge.win::after{content:"";position:absolute;right:1rem;top:1rem;width:10px;height:10px;background:var(--accent)}

/* next-page link */
.pager{border-top:0}
.next{display:flex;align-items:center;gap:1.5rem;padding:2rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink)}
.next .ico{width:48px;flex:none}
.next .ico .sprite{transition:transform .35s steps(3)}
.next:hover .ico .sprite{transform:translateX(6px)}
.next .t{display:block;flex:1}
.next .t .mono{display:block;color:var(--accent)}
.next strong{display:block;font:400 var(--type-h1)/.95 var(--serif);letter-spacing:-.02em;font-weight:400;transition:color .35s ease}
.next:hover strong{color:var(--accent)}
.next .arr{font:400 2.5rem/1 var(--mono);color:var(--accent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.next:hover .arr{transform:translateX(.3em)}

/* project cards: each one is a clearly separate box */
.projects{border-top:0;padding-top:0;gap:var(--gap)}
.card-p{padding:1.25rem 1.25rem 1.5rem;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--hairline);transition:box-shadow .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.card-p:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-3px)}
.card-p .art{margin:-1.25rem -1.25rem .35rem;box-shadow:inset 0 -1px 0 var(--hairline)}
.card-p .metarow{border-top:0;padding-top:0}
.card-p .acts{margin-top:.2rem;padding-top:1rem;border-top:1px solid var(--hairline)}
@media(max-width:899px){.projects{gap:2rem}}

/* hard size limits so an icon can never fill its container, even if styles load out of order */
.ico .sprite,.node .sprite{width:100%}
.ico .sprite svg,.node .sprite svg{width:100%;max-width:100%;height:auto}
.card4 .ico{width:36px}
.stop .node .sprite{width:100%;max-width:36px}
.next .ico{width:40px}
.tile{padding-top:1.4rem}

footer .wrap.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between}
footer .fine{margin:0;max-width:70ch;font-size:var(--type-small);color:var(--muted)}

/* player card: the portrait, arcade style */
.player{position:relative;width:min(100%,300px);margin:0 0 2.25rem}
.player .shot{position:relative;height:0;padding-bottom:100%;overflow:hidden;background:var(--ink);cursor:pointer;
  box-shadow:0 0 0 2px var(--ink),7px 7px 0 var(--accent);transition:transform .35s steps(3),box-shadow .35s steps(3)}
.player .shot:hover,.player .shot:focus-visible{transform:translate(-2px,-2px);box-shadow:0 0 0 2px var(--ink),10px 10px 0 var(--accent)}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.player .real{filter:contrast(1.06) saturate(.8)}
.player .pix{image-rendering:pixelated;opacity:1;transition:opacity .2s steps(2)}
.player .shot.on .pix,.player .shot:focus-visible .pix{opacity:0}
@media(hover:hover){.player .shot:hover .pix{opacity:0}}
.player .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.28) 100%)}
.player figcaption{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.1rem;color:var(--ink)}
.player figcaption .p{color:var(--accent);animation:coin 1.2s steps(1) infinite}
.player figcaption .lv{color:var(--muted)}
@media(min-width:768px){.p-hero .player{position:absolute;right:var(--gutter);top:clamp(3.5rem,10vh,7rem);width:clamp(220px,22vw,340px);margin:0}}
@media(min-width:768px) and (max-width:1100px){.p-hero .intro,.p-hero .philo,.p-hero .now{max-width:calc(100% - clamp(220px,22vw,340px) - 2rem)}.p-hero .now{display:block}}

/* ================= calm layout: nothing flies, everything sits on the same grid ================= */
.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}
.card-p:hover,.tile:hover,.card4:hover,.player .shot:hover,.player .shot:focus-visible{transform:none}
.card-p .art .sprite,.card-p:hover .art .sprite,.quest li.here .ico .sprite,.stop.here .node .sprite{animation:none;transform:none}
.tile:hover .ico .sprite,.next:hover .ico .sprite,.next:hover .arr,.cab:hover .sprite{transform:none}
.says li:hover h3{transform:none}
.dive[open] .body{animation:none}
.btn:hover::after,.tlink:hover::after,.tile:hover .go::after{transform:none}
.player .shot{transition:none}
/* inner page heroes line up with the section headings and the home hero */
@media(min-width:768px){
  .pg-hero .wrap > *{margin-left:var(--label)}
  .pg-hero .wrap > .xp{margin-left:var(--label)}
}

/* project cards: same art height, and on wide screens every row (art, meta, title, text, chips, links) lines up across the three cards */
.card-p .art{aspect-ratio:auto;height:150px}
@media(min-width:900px){
  @supports (grid-template-rows:subgrid){
    .projects{grid-template-rows:none}
    .card-p{display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:.9rem}
    .card-p .specs{margin-top:0}
  }
}