/* Iryna Kostiuk — portfolio. Tokens first; dark is default, light via [data-mode="light"]. */
:root{
  --bg:#121211;        /* softened from #050505: less glare, still deep */
  --bg-2:#181817;
  --stage:#1D1D1B;
  --line:#272725;
  --line-2:#363632;
  --text:#E8E6E0;      /* headings: off-white, not pure */
  --text-2:#B9B7B0;    /* body: ~9:1 on bg, calm */
  --muted:#8C8A84;
  --faint:#62615D;
  --inv-bg:#E8E6E0;
  --inv-fg:#141413;
  --glow:0 0 12px 3px rgba(232,230,224,.28);
  --shadow:0 30px 60px -34px rgba(0,0,0,.85);
  --pulse:#E8E6E0;
  color-scheme:dark;
}
:root[data-mode="light"]{
  --bg:#F7F6F3;        /* clean, barely warm off-white */
  --bg-2:#EFEEEA;
  --stage:#E8E6E1;
  --line:#E1DFD9;
  --line-2:#C9C6BF;
  --text:#1A1A18;
  --text-2:#47463F;
  --muted:#716F68;
  --faint:#A3A099;
  --inv-bg:#1A1A18;
  --inv-fg:#F7F6F3;
  --glow:0 0 0 3px rgba(22,22,21,.12);
  --shadow:0 24px 50px -32px rgba(40,38,30,.45);
  --pulse:#161615;
  color-scheme:light;
}

:root{--side:440px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Geist',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--text);color:var(--bg)}

/* type */
.h{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-variation-settings:'wdth' 100;letter-spacing:-0.03em;line-height:1.08;margin:0;color:var(--text)}
.lbl{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:16px}
.p{margin:0;max-width:640px;color:var(--text-2)}
.p strong,.hl{color:var(--text);font-weight:500}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:22px;background:var(--inv-bg);color:var(--inv-fg);text-decoration:none;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.08em;font-weight:500;border:1px solid var(--inv-bg);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.pill:hover{transform:translateY(-2px);box-shadow:0 0 0 4px var(--line),0 10px 20px -12px rgba(0,0,0,.5)}
.pill:active{transform:translateY(0)}
.pill.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.pill.ghost:hover{border-color:var(--text);box-shadow:0 0 0 4px var(--line)}
.back{display:inline-flex;align-items:center;gap:8px;height:44px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--muted);text-decoration:none}
.back:hover{color:var(--text)}

/* theme switch */
.theme{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--muted);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em}
.theme:hover{color:var(--text)}
.theme .tr{position:relative;width:40px;height:24px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2)}
.theme .tk{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .3s ease}
:root[data-mode="light"] .theme .tk{transform:translateX(16px)}
.theme .t-dark{display:inline}.theme .t-light{display:none}
:root[data-mode="light"] .theme .t-dark{display:none}
:root[data-mode="light"] .theme .t-light{display:inline}

/* flow nav (shared by home + case) */
.fnav{position:relative;display:flex;flex-direction:column}
.fnav:before{content:'';position:absolute;left:5px;top:16px;bottom:16px;width:1px;background:var(--line-2)}
.navi{position:relative;display:flex;align-items:center;gap:14px;min-height:36px;padding-left:28px;text-decoration:none;font-size:15px;color:var(--muted);transition:color .25s ease}
.navi:hover,.navi.on{color:var(--text)}
.navi .nn{position:absolute;left:0;top:50%;margin-top:-5.5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--faint);transition:all .3s ease}
.navi.on .nn{background:var(--text);border-color:var(--text);box-shadow:var(--glow)}
.navi.soon{color:var(--faint);cursor:default}
.navi.soon:hover{color:var(--muted)}
.soon-w{display:inline-block;padding:0 7px;margin-left:2px;border-radius:9px;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.1em;line-height:18px;text-transform:uppercase;border:1px solid transparent;transition:all .25s ease}
.navi.soon:hover .soon-w{color:var(--text);border-color:var(--line-2);background:var(--bg-2)}
.navi.soon .nn{border-style:dashed}
.nnum{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.1em;width:22px;flex-shrink:0}

/* stage / figures */
.fig{margin:0}
.bare img{display:block;width:100%;height:auto}
.stage{background:var(--stage);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;align-items:center;justify-content:center}
.stage img{border-radius:6px;box-shadow:var(--shadow)}
.stage img.comp{border-radius:0;box-shadow:none}
.stage.bleed{padding-bottom:0;align-items:flex-end;overflow:hidden}
.stage video{display:block;width:100%;height:auto;border-radius:6px;box-shadow:var(--shadow);background:#F6F8F9}
.stage.vfill{padding:0;overflow:hidden}
.stage.vfill video{border-radius:0;box-shadow:none;background:var(--stage)}
.stage.vfill .vid-light{display:none}
:root[data-mode="light"] .stage.vfill .vid-light{display:block}
:root[data-mode="light"] .stage.vfill .vid-dark{display:none}
.stage .img-light{display:none}
:root[data-mode="light"] .stage .img-light{display:block}
:root[data-mode="light"] .stage .img-dark{display:none}
.cap{margin-top:12px;font-size:13px;line-height:1.45;color:var(--muted)}  /* sentence case, not mono — never reads as a section label */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pair .stage{padding:18px;height:100%}

/* video slot (placeholder until recorded) */
.video{border:1.5px dashed var(--line-2);border-radius:14px;padding:24px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;background:transparent}
.video .play{width:56px;height:56px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--text)}
.video ol{margin:8px 0 0;padding-left:18px;color:var(--text-2);font-size:15px;line-height:1.55}
.video .vt{font-size:15px;color:var(--text);margin-top:6px}

/* callout = the thing to read after the heading */
.call{max-width:640px;border-left:2px solid var(--text);background:var(--bg-2);border-radius:0 12px 12px 0;padding:18px 22px;display:flex;flex-direction:column;gap:8px}
.call .t{font-size:17px;line-height:1.5;color:var(--text)}
.li{display:flex;gap:12px;color:var(--text-2);line-height:1.5}
.li:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:9px;flex-shrink:0}
.call .li{color:var(--text)}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.stat{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--line)}
.sv{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:52px;letter-spacing:-0.04em;line-height:1;color:var(--text)}
.sl{font-size:14px;line-height:1.45;color:var(--muted)}
.imp{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--text-2);font-size:16px}
.imp b{font-weight:500;color:var(--text)}

/* ───────── case page ───────── */
.case{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.case-side{border-right:1px solid var(--line)}
.case-side .in{position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 44px 28px 52px;display:flex;flex-direction:column;scrollbar-width:none}
.case-side .in::-webkit-scrollbar{display:none}
.topbar{display:flex;justify-content:space-between;align-items:center}
.mhdr{display:none}
.hdr-r{display:flex;align-items:center;gap:6px}
.burger,.mmenu{display:none}
.facts{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 12px;font-size:14px;line-height:1.45;color:var(--text-2);margin-top:26px}
.facts .f{display:contents}
.facts .k{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted);padding-top:3px}
.case-main{padding:56px 88px 96px 72px;display:flex;flex-direction:column;gap:104px;min-width:0}
.sec{display:flex;flex-direction:column;gap:20px;scroll-margin-top:40px}
.sec>.h,.sec .proc-h{font-size:40px;max-width:760px}
.chal{display:flex;flex-direction:column;gap:14px;max-width:660px}
.chal .li{font-size:18px}
.steps{display:flex;flex-direction:column;gap:80px}
.step{display:flex;flex-direction:column;gap:18px}
.sn{display:flex;align-items:baseline;gap:14px}
.num{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-family:'Geist Mono',monospace;font-size:12px;color:var(--text);flex-shrink:0;transform:translateY(-4px)}
.h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:28px;letter-spacing:-0.025em;line-height:1.15;margin:0;color:var(--text);max-width:720px}
.chal b{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.15em;color:var(--text)}
.step.key{border-top:1px solid var(--line-2);padding-top:40px;gap:16px}
.step.key .h3{font-size:32px}
/* one working column: text, callouts and images share the same width and edges */
.case-main>*{width:100%;max-width:880px}
.case-main .p,.case-main .chal,.case-main .call,.case-main .subs,.case-main .lrn,.case-main .h3,.case-main .sec>.h,.case-main .proc-h{max-width:none}
.case-main .imp-box{max-width:none!important}
/* a case told in two parts: big divider before each side */
.side-head{display:flex;flex-direction:column;gap:14px;padding-top:56px;border-top:1px solid var(--line-2);scroll-margin-top:40px}
.side-head .h.side-t{font-size:64px}
.case-main .side-head .p{max-width:640px}
.side-head+.sec{margin-top:-48px}
.subs{max-width:660px;display:flex;flex-direction:column}
.sub{padding:14px 0 14px 20px;border-left:1px solid var(--line-2);color:var(--text-2);font-size:16px;line-height:1.55;position:relative}
.sub:before{content:'';position:absolute;left:-4px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1.5px solid var(--muted)}
.lrn{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line);max-width:760px;color:var(--text-2)}
.lrn:last-child{border-bottom:1px solid var(--line)}
.lrn .lbl{padding-top:5px}
.next{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:center;text-decoration:none;border:1px solid var(--line);border-radius:16px;padding:18px;transition:border-color .3s ease}
.next:hover{border-color:var(--muted)}
.next .stage{padding:12px;height:180px}
.next .stage img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;min-width:0}
.chips{display:none}
.side-cta{margin-top:auto;padding-top:28px;display:flex;gap:10px}
.mob-cta{display:flex;gap:8px;margin-top:16px}

/* ───────── home ───────── */
.home{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.home-side{border-right:1px solid var(--line)}
.home-side .in{position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 44px 28px 52px;display:flex;flex-direction:column;scrollbar-width:none}
.home-side .in::-webkit-scrollbar{display:none}
.name{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:46px;line-height:1;letter-spacing:-0.035em;margin:0}
.rule{display:flex;flex-direction:column;gap:14px;padding:18px 22px 20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.tgl{position:relative;width:44px;height:26px;border-radius:13px;border:1px solid var(--line-2);background:var(--stage);cursor:pointer;padding:0;transition:background .3s ease,border-color .3s ease}
.tgl.on{background:var(--text);border-color:var(--text)}
.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--faint);transition:transform .3s ease,background .3s ease}
.tgl.on .knob{transform:translateX(18px);background:var(--bg)}
.flow{position:relative;height:36px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}
.fline{position:absolute;left:30px;right:30px;top:17px;height:1px;background:var(--line-2)}
.fpulse{position:absolute;left:30px;top:15px;width:44px;height:5px;border-radius:3px;background:linear-gradient(to right,transparent,var(--pulse),transparent);opacity:.8;animation:fp 3.2s linear infinite}
@keyframes fp{from{transform:translateX(-44px)}to{transform:translateX(340px)}}
.fn{position:relative;z-index:1;height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--faint);background:var(--bg-2);display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--text);transition:transform .5s cubic-bezier(.3,1.4,.5,1),border-color .3s ease,color .3s ease}
.fn i{width:6px;height:6px;border-radius:50%;background:var(--text);box-shadow:var(--glow)}
.rule.off .fn{border-color:var(--line-2);color:var(--muted)}
.rule.off .fn i{background:var(--faint);box-shadow:none}
.rule.off .fline,.rule.off .fpulse{opacity:0}
.rule.off .fn.a{transform:translate(-4px,8px) rotate(-9deg)}
.rule.off .fn.b{transform:translate(6px,-8px) rotate(7deg)}
.rule.off .fn.c{transform:translate(-10px,6px) rotate(-5deg)}
.home-main{padding:56px 56px 56px;display:flex;flex-direction:column;gap:96px;min-width:0}
.card{display:flex;flex-direction:column;gap:18px;scroll-margin-top:48px}
.shot{display:block;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow);aspect-ratio:16/9;transition:transform .35s ease,border-color .35s ease}
.shot:hover{transform:translateY(-4px);border-color:var(--muted)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.shot.comp{background:var(--stage);padding:3.15%} /* 28px at desktop width, same proportion on mobile */
.shot.comp img{object-fit:contain;object-position:center}
.card-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.card .h{font-size:42px}
.card p{margin:10px 0 0;max-width:440px;font-size:16px;line-height:1.5;color:var(--text-2)}
.soon-row{display:flex;justify-content:space-between;align-items:flex-start;padding-top:28px;border-top:1px solid var(--line)}
.about{padding-top:56px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:56px;scroll-margin-top:0}
.about-top{display:flex;gap:56px;align-items:flex-start}
.photo{width:270px;aspect-ratio:27/35;border-radius:12px;overflow:hidden;border:1px solid var(--line);flex-shrink:0}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center 70%}
.job{display:grid;grid-template-columns:190px minmax(0,1fr) 140px;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.jc{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:22px;letter-spacing:-0.02em;line-height:1.1}
.jr{font-size:15px;color:var(--text-2)}
.jd{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);text-align:right}
.contact{padding-top:44px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:24px;scroll-margin-top:0}
.clink{font-size:20px;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:4px}
.clink:hover{border-color:var(--text)}
.small{font-size:13px;color:var(--muted);text-decoration:none}
.small:hover{color:var(--text)}

/* case side: spacing grows with screen height */
.case-side .kick{margin-top:clamp(20px,3.2vh,40px)}
.case-side .facts{margin-top:clamp(22px,4.5vh,56px);row-gap:clamp(10px,1.6vh,18px)}
.case-side .fnav{margin-top:clamp(24px,5vh,64px)!important}
.case-side .fnav .navi{min-height:clamp(32px,4.4vh,44px)}

/* copy tooltip */
.copy{position:relative;cursor:pointer}
.tip{position:absolute;left:0;bottom:calc(100% + 6px);transform:translateY(4px);padding:4px 9px;line-height:14px;border-radius:8px;background:var(--inv-bg);color:var(--inv-fg);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.copy.copied .tip{opacity:1;transform:translateY(0)}
/* room above the email rows so the tooltip sits in the gap, never over the buttons */
.side-foot{gap:34px!important}
.contact .links{margin-top:14px}

/* short laptop screens (13–14" MacBook ≈ 760–860px of viewport): keep the left column on one screen */
@media (min-width:961px) and (max-height:880px){
  .name{font-size:40px}
  .home-side .rule{margin-top:22px!important;gap:12px;padding:16px 20px 18px}
  .home-side .rule p{font-size:24px!important}
  .home-side .fnav{margin-top:22px!important}
  .home-side .intro{margin-top:16px!important}
  .navi{min-height:32px}
  .case-side h1{font-size:34px!important}
  .case-side .facts{margin-top:18px;gap:8px 12px}
  .case-side .fnav{margin-top:20px!important}
  .side-cta,.side-foot{padding-top:18px!important}
}

/* back to top (mobile) */
.totop{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;border:1px solid var(--inv-bg);background:var(--inv-bg);color:var(--inv-fg);box-shadow:0 6px 20px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:20}
.totop.show{opacity:1;pointer-events:auto}
.totop svg{stroke-width:2.4}

/* ───────── responsive ───────── */
@media (max-width:1180px){
  :root{--side:380px}
  .case-side .in{padding:20px 32px 24px 36px}
  .case-main{padding:48px 48px 80px 48px}
  .home-side .in{padding:20px 32px 24px 36px}
  .home-main{padding:48px 40px}
}
@media (min-width:961px){.totop,.mob-cta{display:none!important}}
@media (max-width:960px){
  body{font-size:16px}
  .case,.home{display:block}
  .case-side,.home-side{border-right:0}
  .case-side .in,.home-side .in{position:static;height:auto;overflow:visible;padding:8px 20px 0}
  .case-side .fnav,.case-side .side-cta{display:none}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
  .chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line-2);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--text-2);text-decoration:none}
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .facts .f{display:flex;flex-direction:column;gap:4px}
  .facts .f.w{grid-column:span 2}
  .case-main{padding:40px 20px 64px;gap:72px}
  .sec>.h,.sec .proc-h{font-size:30px}
  .side-head .h.side-t{font-size:44px}
  .side-head{padding-top:40px}
  .h3{font-size:22px}
  .stage{padding:14px;border-radius:12px}
  .pair{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .sv{font-size:40px}
  .nums.three{grid-template-columns:1fr}
  .nums.three .stat{flex-direction:row;align-items:baseline;gap:16px;padding:16px 0}
  .nums.three .sv{min-width:104px;font-size:36px}
  .steps{gap:56px}
  .imp{grid-template-columns:110px minmax(0,1fr)}
  .next{grid-template-columns:1fr;gap:14px}
  .video{grid-template-columns:1fr}
  .name{font-size:42px}
  .home-side .fnav{display:none}
  .home-side .side-foot{margin-top:28px}
  .home-main{padding:56px 20px 40px;gap:72px}
  .card .h{font-size:30px}
  .card-row{flex-direction:column;align-items:flex-start;gap:16px}
  .shot.comp{aspect-ratio:auto}
  .shot.comp img{height:auto} /* card hugs the picture: the same gap on every side */
  .about-top{flex-direction:column-reverse;gap:28px}
  .photo{width:100%}
  .job{grid-template-columns:1fr auto;gap:4px 16px}
  .job .jr{grid-column:1/-1;grid-row:2}
  .contact .h{font-size:64px!important}
  /* phones: keep the desktop order of sizes — page title > section title > step title > body */
  .about-h{font-size:40px!important}
  .stat-v{font-size:34px!important}
  .case-desc{font-size:16px!important}
  .step.key .h3{font-size:26px}
  .next-t{font-size:26px!important}
  .chal .li{font-size:17px}
  .call .t{font-size:16px}
}

/* phones: soft page change, home ↔ case */
@keyframes pg-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pg-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@media (max-width:960px){
  .home,.case{animation:pg-in .5s cubic-bezier(.2,.7,.2,1) backwards}
  html.leaving .home,html.leaving .case{animation:pg-out .22s ease-in both}
}

/* phones: once the top bar scrolls away, a fixed header slides in — name + theme switch */
@media (max-width:960px){
  html{scroll-padding-top:72px}
  .mhdr{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;z-index:30;height:56px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--line);transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s ease,background .3s ease}
  html.hdr-on .mhdr{transform:none;opacity:1;pointer-events:auto}
  .mhdr-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:19px;letter-spacing:-0.02em;color:var(--text);text-decoration:none}
}

/* phones: burger menu (Split mockup "Menu open") */
@media (max-width:960px){
  .burger,.mmenu a{-webkit-tap-highlight-color:transparent}
  .burger:focus:not(:focus-visible){outline:none}
  .burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer}
  .mmenu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:45;background:var(--bg);overflow-y:auto;opacity:0;transition:opacity .2s ease-out}
  .mmenu[hidden]{display:none}
  .mmenu.open{opacity:1}
  .mmenu:not(.open){transition-duration:.15s} /* closing: a touch quicker */
  /* opening: menu items rise 8px into place, slightly staggered; closing is a plain fade */
  .mmenu .mi,.mmenu .mm-foot{opacity:0;transform:translateY(8px);transition:opacity .15s ease,transform 0s .15s}
  .mmenu.open .mi,.mmenu.open .mm-foot{opacity:1;transform:none;transition:opacity .3s ease-out,transform .3s cubic-bezier(.2,.7,.2,1)}
  .mmenu.open .mi:nth-child(2){transition-delay:.03s}.mmenu.open .mi:nth-child(3){transition-delay:.06s}
  .mmenu.open .mi:nth-child(4){transition-delay:.09s}.mmenu.open .mi:nth-child(5){transition-delay:.12s}
  .mmenu.open .mm-foot{transition-delay:.15s}
  .mm-head{flex-shrink:0;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px}
  .mm-head{position:relative}
  .mm-head:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)} /* divider, edge to edge */
  .mm-sep{width:1px;height:14px;background:var(--line-2)}
  .mm-role{font-size:12px;color:var(--muted);white-space:nowrap}
  .mm-close{margin-left:auto}
  .mm-body{flex-grow:1;display:flex;flex-direction:column;padding:8px 20px calc(8px + env(safe-area-inset-bottom,0px))}
  .mm-nav{position:relative;margin-top:0}
  .mm-nav:before{content:'';position:absolute;left:6px;top:49px;bottom:27px;width:1px;background:var(--line-2)}
  .mi{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:76px;padding-left:46px;text-decoration:none;color:var(--text)}
  .mi .mt{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(22px,6.6vw,27px);line-height:1.05;letter-spacing:-0.03em}
  .mi .mm{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted)}
  .mi .nn{position:absolute;left:-46px;top:50%;margin-top:-6.5px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--faint)}
  .mi .nn.on{background:var(--text);border-color:var(--text);box-shadow:0 0 12px 3px rgba(255,255,255,.35)}
  :root[data-mode="light"] .mi .nn.on{box-shadow:0 0 10px 2px rgba(0,0,0,.18)}
  .mm-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px}
  .mm-links{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px}
  .mm-links .small{height:44px;display:inline-flex;align-items:center}
  body.menu-lock{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.mmenu,.mmenu .mi,.mmenu .mm-foot{transition:none!important;transform:none!important}}

/* lightbox: case images open full screen */
.fig .stage img,.fig .bare img{cursor:zoom-in}
.fig .stage video{cursor:zoom-in}
.stage.needs-tap{position:relative}
.stage.needs-tap::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--inv-bg);box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none}
.stage.needs-tap::before{content:"";position:absolute;z-index:1;left:50%;top:50%;margin:-11px 0 0 -7px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--inv-fg);pointer-events:none}
.lb video{display:none;max-width:100%;max-height:calc(100vh - 136px);width:auto;height:auto;margin:auto;border-radius:6px}
.lb.is-video img{display:none}
.lb.is-video video{display:block}
.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 24px 24px;background:rgba(5,5,5,.86);opacity:0;pointer-events:none;transition:opacity .25s ease;cursor:zoom-out}
.lb.open{opacity:1;pointer-events:auto}
.lb .lb-panel{max-width:min(1600px,100%);max-height:100%;background:var(--stage);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;overflow:auto;transform:scale(.97);transition:transform .25s ease}
.lb.open .lb-panel{transform:none}
.lb img{display:block;max-width:100%;max-height:calc(100vh - 136px);width:auto;height:auto;margin:auto;object-fit:contain}
.lb .lb-close{font-family:inherit;position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,20,20,.6);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb .lb-close:hover{background:rgba(40,40,40,.9)}
body.lb-lock{overflow:hidden}
@media (max-width:760px){.lb{padding:52px 10px 10px}.lb .lb-panel{padding:12px;border-radius:12px}.lb img,.lb video{max-height:calc(100vh - 90px)}}
/* phone held upright: turn the landscape prototype video sideways so it fills the screen */
@media (max-width:760px) and (orientation:portrait){
  .lb.is-video{padding:0;background:rgba(5,5,5,.96)}
  .lb.is-video .lb-panel{padding:0;border:0;background:transparent;overflow:visible}
  .lb.is-video video{width:calc(100vh - 72px);width:calc(100dvh - 72px);max-width:none;max-height:calc(100vw - 24px);object-fit:contain;position:fixed;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) rotate(90deg)}
}

/* placeholders for screens still to design (case 04) */
.video.slot{grid-template-columns:minmax(0,1fr);min-height:220px}
.shot-slot{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line-2);background:transparent;aspect-ratio:2400/1160}
.next .stage.shot-slot{border-radius:14px}

/* scrollable phone pair (case 04): header and tab bar fixed, the feed scrolls */
.stage.sp{gap:clamp(14px,4vw,56px);padding:36px 24px 30px;align-items:flex-end}
.sp-phone{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(300px,42%)}
.sp-lbl{font-size:10px;color:var(--muted)}
.sp-dev{width:100%;position:relative;aspect-ratio:686/1449;filter:drop-shadow(0 22px 34px rgba(0,0,0,.35))}
.sp-scr{position:absolute;left:1.895%;top:.621%;width:96.21%;height:98.76%;border-radius:13.94% / 6.43%;overflow:hidden;background:#fff}
.sp-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;border-radius:0!important;box-shadow:none!important}
.sp-body{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:calc(116 / 393 * 100%) 0 calc(95 / 393 * 100%)}
.sp-body::-webkit-scrollbar{display:none}
.sp-body img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.sp-hd,.sp-tb{position:absolute;left:0;width:100%;height:auto;pointer-events:none;border-radius:0!important;box-shadow:none!important;z-index:2}
.sp-hd{top:0}.sp-tb{bottom:0}
.sp-hint{position:absolute;right:8px;bottom:calc(95 / 852 * 100% + 8px);z-index:2;font:500 10px/1 "Geist Mono",monospace;letter-spacing:.06em;color:#fff;background:rgba(13,40,64,.72);padding:6px 8px;border-radius:999px;transition:opacity .3s;pointer-events:none}
.sp-phone.scrolled .sp-hint{opacity:0}
.sp-arrow{align-self:center;font-size:28px;color:var(--muted);margin-bottom:12%}
.sp-body:focus-visible{outline:2px solid #1A6FB8;outline-offset:-2px}