:root{
  --canvas:#ECEBE6;
  --board:#FFFFFF;
  --ink:#111110;
  --ink-2:#64625C;
  --line:rgba(17,17,16,.12);
  --line-2:rgba(17,17,16,.2);
  --sel:#2F6BFF;
  --sel-text:#1C4BD0;
  --brand:#FF4A1C;
  --ok:#00A35C;
  --surface:#FFFFFF;
  --text-2:#2B2A27;
  --on-ink:#FFFFFF;
  --skeleton:#E6E5E0;
  --paper-2:#FBFAF6;
  --header-bg:rgba(236,235,230,.88);
  --chip-bg:rgba(255,255,255,.7);
  --map-dim:rgba(17,17,16,.22);
  --dot:rgba(17,17,16,.12);
  --g:clamp(16px,2.2vw,36px);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Funnel Display","Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,0,1);
}
/* Dark theme: the palette of the "Consola" direction */
:root[data-theme="dark"]{
  --canvas:#0F1012;
  --board:#17191C;
  --surface:#16181B;
  --ink:#ECE9E2;
  --ink-2:#97948D;
  --text-2:#CFCBC2;
  --on-ink:#0F1012;
  --line:rgba(236,233,226,.12);
  --line-2:rgba(236,233,226,.2);
  --sel:#4D7DFF;
  --sel-text:#86A6FF;
  --brand:#FF5A2C;
  --ok:#3BD671;
  --skeleton:#24272B;
  --paper-2:#1A1C20;
  --header-bg:rgba(15,16,18,.86);
  --chip-bg:rgba(22,24,27,.8);
  --map-dim:rgba(236,233,226,.2);
  --dot:rgba(236,233,226,.09);
}
:root[data-theme="dark"] html,:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--canvas);color:var(--ink);color-scheme:light;-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.3px);background-size:20px 20px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
em{font-style:normal;color:var(--brand)}
::selection{background:var(--sel);color:#fff}
:focus-visible{outline:2px solid var(--sel);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:0;line-height:1.45}
.muted{color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:8px;transition:top .2s}
.skip:focus{top:12px}

/* Header */
header.top{position:fixed;top:0;left:0;right:0;z-index:60;height:52px;display:flex;align-items:center;gap:22px;padding:0 var(--g);
  background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.file{display:flex;align-items:center;gap:7px;color:var(--ink-2);white-space:nowrap}
.file b{color:var(--ink);font-weight:500}
nav.main{display:flex;gap:clamp(14px,1.8vw,26px);margin-left:auto}
nav.main a{position:relative;font-size:15px}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--sel);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.main a:hover::after{transform:scaleX(1)}
.theme{width:30px;height:24px;border:1px solid var(--ink);border-radius:99px;display:grid;place-items:center}
.theme i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.theme:hover{border-color:var(--sel)}
nav.main + .theme{margin-left:4px}
.lang{display:flex;border:1px solid var(--ink);border-radius:99px;overflow:hidden}
.lang span,.lang b{padding:2px 9px;font-weight:500}
.lang span{background:var(--ink);color:var(--canvas)}
.lang:hover b{background:var(--sel);color:#fff}

/* ———————————————— Taller: sticky sequence ———————————————— */
.taller{position:relative;height:300vh}
/* The scene stays hidden until fonts and boards are measured, then fades in; never longer than 3 s */
.js:not(.ready) .taller .stage{opacity:0;animation:scene-fallback 0s 3s forwards}
.js .taller .stage{transition:opacity .5s}
/* Nothing inside may animate while hidden, or the reset to the blank boards would still be fading when the scene appears */
.js:not(.ready) .taller .stage *{transition:none!important;animation:none!important}
@keyframes scene-fallback{to{opacity:1}}
.stage{position:sticky;top:0;height:100svh;overflow:clip;padding-top:52px;background-color:var(--canvas);
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.3px);background-size:20px 20px}

.chapters{position:absolute;top:62px;right:var(--g);z-index:30;display:flex;gap:6px;align-items:center}
.chapters button,.chapters .skipseq{position:relative;display:flex;gap:6px;align-items:center;padding:4px 8px;border:1px solid var(--line-2);border-radius:99px;background:var(--chip-bg);color:var(--ink-2);overflow:hidden;font:inherit}
.chapters button span{color:var(--ink-2)}
.chapters button i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--sel);transform-origin:left;transform:scaleX(var(--p,0))}
.chapters button.on{color:var(--ink);border-color:var(--ink)}
.chapters button.on span{color:var(--sel-text)}
.chapters .skipseq{background:var(--ink);color:var(--on-ink);border-color:var(--ink);margin-left:6px}
.chapters .skipseq:hover{background:var(--sel);border-color:var(--sel);color:#fff}

.map{position:absolute;left:3%;right:3%;top:12%;bottom:32%;pointer-events:none;opacity:0;transition:opacity .6s}
.map span{position:absolute;transform:translate(-50%,-50%);font:500 clamp(8px,.7vw,10.5px)/1 var(--mono);color:var(--map-dim)}
.map span.lit{color:var(--brand)}
.map span.me{color:var(--ink);font-weight:700;font-size:13px}
.pub .map{opacity:1}

.boards{position:absolute;left:var(--g);right:var(--g);top:calc(52px + 7svh);display:flex;gap:var(--gap,20px);align-items:flex-start;justify-content:center;transition:opacity .6s}
.ab{position:relative;flex:none}
.ab .lab{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:8px;white-space:nowrap;color:var(--ink-2);max-width:100%;overflow:hidden}
.ab .lab b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.ab .frame{position:relative;background:var(--board);border:1px solid var(--line-2);overflow:hidden;container-type:inline-size;box-shadow:0 1px 0 rgba(17,17,16,.05),0 24px 50px -36px rgba(17,17,16,.35)}
.ab.d .frame{width:var(--dw,600px);aspect-ratio:16/10}
.ab.t .frame{height:var(--bh,300px);aspect-ratio:820/1180;border-radius:12px}
.ab.m .frame{height:calc(var(--bh,300px) * .88);aspect-ratio:390/844;border-radius:18px}

/* Mini site inside each board (container queries) */
.mini{position:absolute;inset:0;display:flex;flex-direction:column;padding:4.2cqw 4.6cqw;gap:3cqw;transition:background-color .5s}
.mini .nav{display:flex;align-items:center;gap:2.4cqw;font:500 max(7px,1.25cqw)/1 var(--mono)}
.mini .nav .logo{font-family:var(--disp);font-weight:800;font-size:max(9px,1.9cqw);letter-spacing:-.02em;margin-right:auto}
.mini .nav .bg{display:none;width:4.4cqw;height:2.6cqw;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.mini .h1{font-family:var(--disp);font-weight:700;font-size:9.6cqw;line-height:.88;letter-spacing:-.05em;margin-top:auto}
.mini .lead{font-size:max(8px,1.9cqw);line-height:1.3;max-width:44ch}
.mini .acts{display:flex;gap:1.6cqw}
.mini .acts span{font:500 max(7px,1.3cqw)/1 var(--mono);padding:1.2cqw 1.8cqw;border:1px solid var(--ink);border-radius:99px}
.mini .acts span:first-child{background:var(--ink);color:var(--on-ink)}
.mini .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw}
.mini .cards div{aspect-ratio:16/10;border-radius:1cqw;overflow:hidden;position:relative;background:var(--skeleton)}
.mini .cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .45s}
@container (max-width:520px){
  .mini{padding:7cqw 6cqw;gap:5cqw}
  .mini .nav{font-size:8px}
  .mini .nav a{display:none}
  .mini .nav .bg{display:block;width:6cqw;height:3.6cqw}
  .mini .nav .logo{font-size:13px}
  .mini .h1{font-size:14.5cqw}
  .mini .lead{font-size:max(9px,3.6cqw)}
  .mini .acts span{font-size:max(8px,2.6cqw);padding:2cqw 3cqw}
  .mini .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini .cards div:nth-child(3){display:none}
}
@container (max-width:260px){
  .mini{padding:9cqw 8cqw 10cqw}
  .mini .h1{font-size:20cqw}
  .mini .lead{font-size:max(9px,5.6cqw)}
  .mini .acts span{font-size:max(8px,4.4cqw);padding:3cqw 4.4cqw}
  .mini .cards{grid-template-columns:minmax(0,1fr)}
  .mini .cards div:nth-child(n+2){display:none}
}
.mini [data-s]{transition:color .45s,background-color .45s,border-color .45s,opacity .45s}
.mini [data-s]:not(.on){color:transparent!important;background:var(--skeleton)!important;border-color:transparent!important;border-radius:4px}
.mini [data-s]:not(.on) img{opacity:0}
.mini [data-s]:not(.on) em{color:transparent}
.mini.styled{background:var(--paper-2)}
.mini.styled .acts span:first-child{background:var(--brand);border-color:var(--brand)}
.mini.blank [data-s]{opacity:0}


.sel{position:absolute;z-index:20;border:1.5px solid var(--sel);pointer-events:none;transition:left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease),opacity .25s;opacity:0}
.sel.on{opacity:1}
.sel i,.hover-sel i{position:absolute;width:7px;height:7px;background:var(--surface);border:1.5px solid var(--sel)}
.sel i:nth-child(1){left:-4px;top:-4px}.sel i:nth-child(2){right:-4px;top:-4px}.sel i:nth-child(3){left:-4px;bottom:-4px}.sel i:nth-child(4){right:-4px;bottom:-4px}
.sel b,.hover-sel b{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);background:var(--sel);color:#fff;font:500 10px/1 var(--mono);padding:3px 6px;border-radius:3px;white-space:nowrap}
.sel span,.hover-sel span{position:absolute;left:-1.5px;bottom:calc(100% + 4px);color:var(--sel);font:500 10.5px/1 var(--mono);white-space:nowrap}

.title{position:absolute;z-index:15;left:var(--g);top:calc(52px + 24svh);transform-origin:0 0;will-change:transform}
.title .h1d{font-family:var(--disp);font-weight:700;font-size:clamp(64px,8.6vw,190px);line-height:.88;letter-spacing:-.05em;white-space:nowrap}
.intro{position:absolute;z-index:14;left:var(--g);right:var(--g);bottom:7svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.intro p{grid-column:1/7;font-family:var(--disp);font-size:clamp(22px,2.2vw,36px);line-height:1.12;letter-spacing:-.025em;font-weight:500}
.intro p span{color:var(--ink-2)}
.intro .cue{display:inline-grid;place-items:center;width:1.3em;height:1.3em;margin-left:.3em;border:1.5px solid var(--ink);border-radius:50%;font-size:.7em;vertical-align:.12em;color:var(--ink);animation:cue 1.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.intro .hint{grid-column:9/13;justify-self:end;text-align:right}
.intro .hint b{display:block;color:var(--sel-text);font-weight:500;margin-bottom:4px}

.info{position:absolute;left:var(--g);right:var(--g);bottom:3.5svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(14px,2vw,32px);align-items:end;opacity:0;transition:opacity .5s;pointer-events:none}
.work-on .info{opacity:1;pointer-events:auto}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;counter-reset:s;list-style:none}
.steps li{display:flex;gap:8px;align-items:baseline;color:var(--ink-2);font:500 12px/1.3 var(--mono);transition:color .3s}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero)}
.steps li.on{color:var(--ink)}
.steps li.on::before{color:var(--sel-text)}
.steps li.done{color:var(--ink)}
.steps li.done::after{content:"✓";color:var(--ok)}
.say{font-family:var(--disp);font-size:clamp(22px,2vw,32px);line-height:1.1;letter-spacing:-.025em;font-weight:600;margin-bottom:14px}
.say span{color:var(--ink-2);font-weight:400}
.log{color:var(--ink-2);min-height:3em;margin-top:8px}
.log b{color:var(--ink);font-weight:500}
.log .ok{color:var(--ok)}
.log a{color:var(--ink);font-weight:500;border-bottom:1.5px solid var(--ink);margin-left:6px}
.log a:hover{color:var(--sel-text);border-color:var(--sel-text)}
.wf{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;box-shadow:0 14px 34px -22px rgba(17,17,16,.4)}
.wf .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.wf .hd b{font-family:var(--disp);font-size:clamp(20px,1.8vw,28px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wf .r{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;height:24px;border-top:1px solid var(--line)}
.wf .r>span{font:500 11px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf .tr{position:relative;height:100%}
.wf .bar{position:absolute;top:28%;bottom:28%;left:0;width:0;display:flex;min-width:2px;transition:width .6s var(--ease),left .6s var(--ease)}
.wf .bar .cn{background:repeating-linear-gradient(-45deg,var(--c) 0 2px,transparent 2px 5px);border:1.5px solid var(--c);border-right:0;width:0}
.wf .bar .rs{background:var(--c);flex:1}
.wf .bar em{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font:500 11px/1 var(--mono);color:var(--ink);white-space:nowrap}
.wf .r.off .bar{border:1.5px dashed var(--ink-2);width:12%}
.wf .r.off .bar .rs{background:none}

.tools{position:absolute;left:50%;bottom:3.5svh;transform:translateX(-50%);z-index:30;display:flex;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:5px;box-shadow:0 10px 30px -14px rgba(17,17,16,.35);transition:opacity .4s}
.tools span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:500 13px/1 var(--mono);color:var(--ink-2)}
.tools span.on{background:var(--sel);color:#fff}
.tools .pub{width:auto;padding:0 12px;background:var(--ink);color:var(--on-ink);font-size:11.5px;gap:6px;display:flex;align-items:center;transition:background .3s}
.tools .pub.go{background:var(--brand)}
.work-on .tools{opacity:0;pointer-events:none}

/* Static mode: no JS or reduced motion — show the finished state */
:is(.static,.no-js) .taller{height:auto}
:is(.static,.no-js) .stage{position:relative;height:auto;min-height:100svh;padding-bottom:28px;display:flex;flex-direction:column;gap:28px}
:is(.static,.no-js) .intro,:is(.static,.no-js) .sel,:is(.static,.no-js) .tools,:is(.static,.no-js) .chapters,:is(.static,.no-js) .map{display:none}
:is(.static,.no-js) .title{position:relative;left:auto;top:auto;transform:none!important;padding:calc(7svh + 10px) var(--g) 0}
:is(.static,.no-js) .title .h1d{white-space:normal;font-size:clamp(52px,8vw,150px)}
:is(.static,.no-js) .boards{position:relative;left:auto;right:auto;top:auto;padding:calc(7svh + 18px) var(--g) 0;flex-wrap:wrap}
:is(.static,.no-js) .info{position:relative;left:auto;right:auto;bottom:auto;opacity:1;pointer-events:auto;padding:0 var(--g)}

:is(.static,.no-js) .title{order:-1}
.no-js .wf,.no-js .log{display:none}
.no-js .info{grid-template-columns:minmax(0,1fr)}

/* ———————— Mobile hero: a plain page that plays once on load ———————— */
.mh{display:none}
@media (max-width:860px){
  .taller{display:none}
  .mh{display:flex;flex-direction:column;gap:18px;min-height:100svh;padding:calc(52px + 20px) var(--g) 26px;
    background-color:var(--canvas);background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.3px);background-size:20px 20px}
}
.mh-k{color:var(--ink-2);max-width:30ch}
.mh-name{position:relative;margin-top:auto;align-self:flex-start;font-family:var(--disp);font-weight:700;font-size:min(22vw,12.5svh,120px);line-height:.86;letter-spacing:-.055em}
.mh-name p{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mh-name span{display:block}
.mh-name em{color:var(--brand);display:inline-block;font-style:normal}
.mh-sel{inset:-8px -10px -4px -8px}
.mh-sel b{left:auto;right:-1.5px;transform:none}
.mh-lead{font-size:16.5px;line-height:1.42;color:var(--text-2);max-width:34ch}
.mh-acts{display:flex;gap:10px;flex-wrap:wrap}
.mh-acts .btn:first-child{background:var(--brand);border-color:var(--brand);color:#fff}
.mh-deploy{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;box-shadow:0 18px 40px -30px rgba(17,17,16,.45);font-size:12.5px}
.mh-dh{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2);margin-bottom:10px}
.mh-dh b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.mh-bar{display:block;height:5px;border-radius:5px;background:var(--line);overflow:hidden}
.mh-bar i{display:block;height:100%;background:var(--ok);transform-origin:left}
.mh-log{list-style:none;margin:12px 0 0;display:flex;flex-direction:column;gap:5px;color:var(--ink-2)}
.mh-log li::before{content:"✓ ";color:var(--ok)}
.mh-log b{color:var(--ink);font-weight:500}

/* Load sequence. Hidden states apply only with JS and motion allowed, and give up after 3 s
   so a script failure never leaves the hero empty */
@media (prefers-reduced-motion:no-preference){
  .js .mh:not(.go) .mh-name span{transform:translateY(105%);animation:mh-show 0s 3s forwards}
  .js .mh:not(.go) .mh-name em{transform:scale(0);animation:mh-show 0s 3s forwards}
  .js .mh:not(.go) :is(.mh-k,.mh-lead,.mh-acts),.js .mh-deploy:not(.go){opacity:0;transform:translateY(14px);animation:mh-show 0s 3s forwards}
  .js .mh-deploy:not(.go) .mh-bar i{transform:scaleX(0)}
  .js .mh-deploy:not(.go) .mh-log li{opacity:0}
  .js .mh:not(.go) .mh-sel{opacity:0}
  .mh .mh-name span{transition:transform .9s var(--ease)}
  .mh .mh-name p:nth-child(2) span{transition-delay:.08s}
  .mh .mh-name p:nth-child(3) span{transition-delay:.16s}
  .mh .mh-name em{transition:transform .5s cubic-bezier(.3,1.6,.5,1) .95s}
  .mh .mh-k{transition:opacity .6s,transform .6s var(--ease)}
  .mh .mh-lead{transition:opacity .6s .55s,transform .7s var(--ease) .55s}
  .mh .mh-acts{transition:opacity .6s .68s,transform .7s var(--ease) .68s}
  /* --d: the deploy card waits for the name when it is on screen at load, otherwise it plays when scrolled to */
  .mh .mh-deploy{transition:opacity .6s var(--d,0s),transform .7s var(--ease) var(--d,0s)}
  .mh .mh-bar i{transition:transform 1.3s cubic-bezier(.6,0,.2,1) calc(var(--d,0s) + .25s)}
  .mh .mh-log li{transition:opacity .35s}
  .mh .mh-log li:nth-child(1){transition-delay:calc(var(--d,0s) + .6s)}
  .mh .mh-log li:nth-child(2){transition-delay:calc(var(--d,0s) + 1.05s)}
  .mh .mh-log li:nth-child(3){transition-delay:calc(var(--d,0s) + 1.55s)}
  /* The selection box frames the name while it lands, then lets go */
  .mh.go .mh-sel{animation:mh-sel 2.2s .25s both}
}
.mh-sel{opacity:0}
@keyframes mh-show{to{opacity:1;transform:none}}
@keyframes mh-sel{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}

/* ———————————————— Sections ———————————————— */
.section{position:relative;padding:16vh var(--g) 10vh;border-top:1px solid var(--line)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:16px;align-items:end;margin-bottom:8vh}
.kicker{grid-column:1/13;color:var(--sel-text)}
.head h2{grid-column:1/10;font-family:var(--disp);font-weight:700;font-size:clamp(44px,6.2vw,112px);line-height:.9;letter-spacing:-.05em}
.head .lede{grid-column:1/7;font-size:clamp(18px,1.5vw,22px);line-height:1.38;color:var(--text-2);max-width:46ch}

/* Work */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9vh var(--g)}
.card{display:flex;flex-direction:column;gap:22px}
.card:nth-child(even){margin-top:14vh}
.shots{position:relative;display:block;aspect-ratio:16/11.5}
.shots .sd,.shots .st,.shots .sm{position:absolute;overflow:hidden;background:#000;border:1px solid var(--line-2);box-shadow:0 26px 50px -30px rgba(17,17,16,.5);transition:transform .7s var(--ease)}
.shots .sd{left:0;top:0;width:84%;aspect-ratio:16/10;border-radius:8px}
.shots .st{right:6%;bottom:0;width:26%;aspect-ratio:820/1180;border-radius:10px}
.shots .sm{right:0;bottom:4%;width:14%;aspect-ratio:390/844;border-radius:12px;z-index:2}
.shots img{width:100%;height:100%;object-fit:cover;object-position:top}
.card:hover .shots .sd{transform:translateY(-6px)}
.card:hover .shots .st{transform:translate(-8px,-12px)}
.card:hover .shots .sm{transform:translate(4px,-18px)}
.meta h3{font-family:var(--disp);font-weight:700;font-size:clamp(34px,3.4vw,58px);line-height:.92;letter-spacing:-.04em;margin:6px 0 12px}
.meta>p:not(.mono):not(.row){max-width:52ch;color:var(--text-2)}
.meta dl{display:grid;grid-template-columns:100px minmax(0,1fr);margin-top:16px;border-top:1px solid var(--ink)}
.meta dt,.meta dd{padding:7px 0;border-bottom:1px solid var(--line)}
.meta dt{color:var(--ink-2)}
.meta .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:7px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.status.rev i{background:#E7A33A}
.go{font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:1px}
.go:hover{color:var(--brand);border-color:var(--brand)}

/* Services */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.svc article{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:18px 18px 22px;display:flex;flex-direction:column;gap:10px;min-height:250px}
.svc article span{color:var(--sel-text)}
.svc h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2vw,32px);line-height:1;letter-spacing:-.03em;margin-top:auto}
.svc p{font-size:15.5px;color:var(--text-2)}
.internal{margin-top:9vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);border-top:2px solid var(--ink);padding-top:18px}
.internal .ih{grid-column:1/5}
.internal h3{font-family:var(--disp);font-weight:600;font-size:clamp(22px,1.8vw,28px);letter-spacing:-.025em;line-height:1.1;margin-bottom:6px}
.internal .ilist{grid-column:5/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.internal h4{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.015em;margin-bottom:6px}
.internal p{font-size:15px;color:var(--text-2)}

/* About */
.about .head h2{grid-column:1/12;font-size:clamp(38px,4.8vw,86px)}
.about .cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px}
.about .txt{grid-column:1/7;display:flex;flex-direction:column;gap:18px;font-size:clamp(18px,1.35vw,21px);line-height:1.5;color:var(--text-2)}
.about .quest a{font-weight:700;border-bottom:2px solid var(--ink);color:var(--ink)}
.about .quest a:hover{color:var(--brand);border-color:var(--brand)}
.skills{grid-column:8/13;align-self:start;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:16px}
.skills h3{color:var(--ink-2);font-weight:500;margin-bottom:12px}
.skills ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.skills li{border:1px solid var(--line-2);border-radius:99px;padding:5px 11px;font-size:14px;background:var(--canvas)}

/* Path: version history */
.versions{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.versions ol{grid-column:1/11;list-style:none;border-left:1.5px solid var(--ink);margin-left:6px}
.versions li{position:relative;display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:var(--g);padding:0 0 46px 26px}
.versions li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--canvas);border:2px solid var(--ink)}
.versions li:first-child::before{background:var(--sel);border-color:var(--sel);box-shadow:0 0 0 5px rgba(47,107,255,.15)}
.versions li.edu::before{border-radius:2px}
.versions .v{padding-top:4px}
.versions .v b{display:inline-block;margin-left:6px;background:var(--sel-text);color:#fff;font-weight:500;border-radius:99px;padding:1px 7px}
.versions .kind{color:var(--ink-2)}
.versions h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.2vw,36px);line-height:1;letter-spacing:-.03em;margin:4px 0 6px}
.versions .o{font-weight:600}
.versions .d p:last-child{color:var(--text-2);max-width:60ch}
.versions .btn{grid-column:1/13;justify-self:start;margin:8px 0 0 32px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);border-radius:99px;padding:12px 18px;font-weight:600;font-size:15px;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--sel);border-color:var(--sel)}
.btn.small{padding:7px 12px;font-size:13px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* Contact */
.contact .head h2{font-size:clamp(52px,8vw,150px)}
.dialog{max-width:760px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 30px 70px -40px rgba(17,17,16,.5);overflow:hidden}
.dh{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.dr{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.dr:last-child{border-bottom:0}
.dr .value{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr .value:hover{color:var(--sel)}

/* Footer */
.foot{display:grid;grid-template-columns:1fr auto auto;gap:var(--g);align-items:center;padding:34px var(--g) 40px;border-top:1px solid var(--line)}
.foot b{color:var(--ink);font-weight:600}

.nf{border:0;min-height:100svh}
.nf h1{grid-column:1/13;font-family:var(--disp);font-weight:700;font-size:clamp(52px,9vw,170px);line-height:.88;letter-spacing:-.05em}
.nf-acts{display:flex;gap:10px;flex-wrap:wrap}


/* Project cards: links and scores */
.meta h3 a:hover{color:var(--sel-text)}
.meta .row.links{justify-content:flex-start;gap:18px;margin-top:10px}
.go.ghost{border-bottom-style:dotted}
.lh{color:var(--ink-2);white-space:nowrap}

/* Easter egg */
.qegg{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--g)}
.qegg .px{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr)}
.qegg .px span{background:#14141a;transform:scale(0);transition:transform .28s steps(3) var(--d)}
.qegg.on .px span{transform:scale(1.02)}
.qegg .qbox{position:relative;max-width:560px;background:#1b1d2a;color:#f4f0e6;border:4px solid #f4f0e6;box-shadow:8px 8px 0 #3BD671;padding:24px 24px 18px;font-family:var(--mono);opacity:0;transform:translateY(12px);transition:opacity .3s .45s,transform .3s steps(4) .45s}
.qegg.on .qbox{opacity:1;transform:none}
.qegg .qbox p{font-size:14px;line-height:1.5;margin-bottom:12px}
.qegg .qbox .mono{font-size:11px;color:#3BD671;text-transform:uppercase;letter-spacing:.08em}
.qegg .qbox .muted{color:#9a96a8;margin:6px 0 0}
.qegg .qt{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6vw,64px)!important;line-height:.9!important;letter-spacing:-.04em;color:#FFD23F}
.qegg .qacts{display:flex;gap:10px;flex-wrap:wrap}
.qegg .btn{background:#FFD23F;color:#14141a;border-color:#FFD23F;border-radius:0}
.qegg .btn.ghost{background:transparent;color:#f4f0e6;border-color:#f4f0e6}

/* ———————— Case page ———————— */
.case{padding-top:52px}
.c-hero{padding:6vh var(--g) 6vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:22px}
.crumb{grid-column:1/13;display:flex;justify-content:space-between;color:var(--ink-2)}
.crumb a:hover{color:var(--sel-text)}
.c-head{grid-column:1/9}
.c-head .kicker{color:var(--sel-text);margin-bottom:10px}
.c-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(56px,9vw,170px);line-height:.86;letter-spacing:-.055em}
.c-head h1 em{color:var(--c)}
.c-head .lede{margin-top:20px;font-size:clamp(19px,1.6vw,24px);line-height:1.35;max-width:46ch;color:var(--text-2)}
.c-facts{grid-column:9/13;align-self:end;display:grid;grid-template-columns:110px minmax(0,1fr);border-top:1.5px solid var(--ink)}
.c-facts dt,.c-facts dd{padding:8px 0;border-bottom:1px solid var(--line)}
.c-facts dt{color:var(--ink-2)}
.c-visit{grid-column:1/13;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.c-video{grid-column:1/13;justify-self:center;width:min(100%,960px);margin-top:10px;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#0E0E0D;box-shadow:0 40px 80px -50px rgba(17,17,16,.6)}
.frame-chrome{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.frame-chrome .lights{display:flex;gap:5px}
.frame-chrome .lights i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.c-video video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.c-body{padding:10vh var(--g);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);border-top:1px solid var(--line)}
.c-col h2,.c-metrics h2,.c-screens h2{color:var(--sel-text);font-weight:500;margin-bottom:14px}
.c-col .big{font-family:var(--disp);font-size:clamp(20px,1.6vw,26px);line-height:1.25;letter-spacing:-.015em}
.c-dec{list-style:none;counter-reset:d;display:flex;flex-direction:column;gap:12px}
.c-dec li{counter-increment:d;display:grid;grid-template-columns:30px minmax(0,1fr);font-size:16px;color:var(--text-2)}
.c-dec li::before{content:counter(d,decimal-leading-zero);font:500 11.5px/1.9 var(--mono);color:var(--c)}
.c-notes{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.c-notes li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--text-2)}
.c-metrics{padding:8vh var(--g);border-top:1px solid var(--line)}
.gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);max-width:900px}
.gauge{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.gauge svg{width:min(120px,100%);height:auto}
.gauge circle{fill:none;stroke-width:5}
.gauge .bg{stroke:var(--line)}
.gauge .fg{stroke:var(--ok);stroke-linecap:round}
.gauge.ok .fg{stroke:#E7A33A}
.gauge.low .fg{stroke:var(--brand)}
.gauge b{position:absolute;top:calc(min(120px,100%) / 2);left:50%;transform:translate(-50%,-50%);font-family:var(--disp);font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em}
.gauge span{color:var(--ink-2)}
.vitals{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:12px;row-gap:4px;margin:26px 0 14px;font-size:13px}
.vitals dt{color:var(--ink-2)}
.vitals dd{margin-right:26px;font-weight:500}
.c-metrics p.mono{margin-top:6px}
.c-screens{padding:8vh var(--g);border-top:1px solid var(--line)}
.c-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:start}
.c-grid figure{overflow:hidden;border:1px solid var(--line-2);background:#0E0E0D;box-shadow:0 24px 50px -34px rgba(17,17,16,.5)}
.c-grid img{width:100%;height:100%;object-fit:cover;object-position:top}
.c-grid .sd{grid-column:span 6;aspect-ratio:16/10;border-radius:10px}
.c-grid .st{grid-column:span 3;aspect-ratio:820/1180;border-radius:14px}
.c-grid .sm{grid-column:span 3;aspect-ratio:390/844;border-radius:20px;max-height:100%}
.c-next{padding:8vh var(--g) 12vh;border-top:1px solid var(--line)}
.c-next a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--g);align-items:center}
.c-next span{grid-column:1;color:var(--ink-2)}
.c-next b{grid-column:1;font-family:var(--disp);font-size:clamp(46px,7vw,130px);line-height:.88;letter-spacing:-.05em}
.c-next img{width:100%;height:auto;grid-column:2;grid-row:1/3;border-radius:10px;border:1px solid var(--line-2);aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.c-next a:hover b{color:var(--c)}
.c-next a:hover img{transform:translateY(-6px) rotate(-1deg)}

/* Hover selection (signature detail) */
.hover-sel{position:fixed;left:0;top:0;z-index:55;border:1.5px solid var(--sel);pointer-events:none;opacity:0;transition:opacity .15s}
.hover-sel.on{opacity:1}

/* Reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1100px){
  .file{display:none}
  nav.main{gap:14px}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  header.top{gap:12px}
  nav.main{display:none}
  .lang{margin-left:auto}
  .tools{display:none}
  .head{grid-template-columns:minmax(0,1fr)}
  .head>*{grid-column:1!important}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card:nth-child(even){margin-top:0}
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc article{min-height:0}
  .internal,.about .cols,.versions{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .internal>*,.about .cols>*,.versions>*{grid-column:1!important}
  .internal .ilist{grid-template-columns:minmax(0,1fr)}
  .versions li{grid-template-columns:minmax(0,1fr);gap:4px;padding-bottom:34px}
  .versions .btn{margin-left:0}
  .dr{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .dr>span.mono{grid-column:1/3}
  .c-hero,.c-grid{grid-template-columns:minmax(0,1fr)}
  .c-hero>*,.c-grid>*{grid-column:1!important}
  .c-body{grid-template-columns:minmax(0,1fr)}
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vitals{grid-template-columns:auto auto}
  .c-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-grid .sd{grid-column:1/3!important}
  .c-grid .st,.c-grid .sm{grid-column:auto!important}
  .c-next a{grid-template-columns:minmax(0,1fr)}
  .c-next img{grid-column:1;grid-row:auto}
  .chapters .skipseq{margin-left:0}
  .chapters{flex-wrap:wrap;right:var(--g)}
  .foot{grid-template-columns:minmax(0,1fr)}
}
@media print{.js .rv{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .rv{opacity:1;transform:none}
}