/* STEPHEN PHAN - full-screen scenes. Media is always shown at its native aspect ratio.
   DESIGN SYSTEM - every size below comes from these tokens; nothing is set by eye.
   · One fluid unit --u follows the viewport width but never outgrows its height, so a wide-and-short
     screen keeps the same proportions as a laptop. Every type and space step is clamp(min, k·u, max).
   · Media boxes are sized by their own container (container queries: cqw / cqh), never by the window. */
:root{
  /* colour */
  --bg:#0B0B0B;--bg-1:#111;--bg-2:#161616;--bg-3:#1C1C1C;--panel:#141414;
  --fg:#F4F2EC;--fg-2:rgba(244,242,236,.78);--fg-3:rgba(244,242,236,.58);--fg-4:rgba(244,242,236,.42);
  --line:rgba(244,242,236,.16);--line-2:rgba(255,255,255,.08);
  --ok:#3BD16F;--scrim:rgba(0,0,0,.55);
  --sh-1:0 20px 60px rgba(0,0,0,.5);--sh-2:0 40px 110px rgba(0,0,0,.55);

  /* type */
  --display:'Archivo',system-ui,sans-serif;--dw:64%;--body:'Manrope',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --u:min(1vw,1.65vh);
  --t-2xs:clamp(10px,calc(var(--u)*.72),11px);   /* micro labels */
  --t-xs:clamp(11px,calc(var(--u)*.8),12.5px);   /* mono labels, captions */
  --t-sm:clamp(12px,calc(var(--u)*.92),14px);    /* small text */
  --t-md:clamp(14px,calc(var(--u)*1.12),18px);   /* body */
  --t-lg:clamp(17px,calc(var(--u)*1.5),26px);    /* lead */
  --t-xl:clamp(24px,calc(var(--u)*2.6),44px);    /* figures, display lists */
  --t-2xl:clamp(36px,calc(var(--u)*4.8),92px);   /* scene titles */
  --t-3xl:clamp(48px,calc(var(--u)*7.6),150px);  /* statements */
  --t-hero:clamp(64px,calc(var(--u)*15),280px);  /* the name */
  --lh-tight:.86;--lh-snug:1.15;--lh-body:1.6;
  --tr-display:-.005em;--tr-mono:.03em;

  /* space */
  --s-1:clamp(4px,calc(var(--u)*.3),6px);
  --s-2:clamp(6px,calc(var(--u)*.55),10px);
  --s-3:clamp(10px,calc(var(--u)*.85),16px);
  --s-4:clamp(14px,calc(var(--u)*1.2),24px);
  --s-5:clamp(20px,calc(var(--u)*1.8),36px);
  --s-6:clamp(28px,calc(var(--u)*2.8),56px);
  --s-7:clamp(40px,calc(var(--u)*4.2),84px);
  --s-8:clamp(56px,calc(var(--u)*6.4),128px);

  /* layout */
  --pad:clamp(20px,4vw,80px);
  --top:clamp(72px,12vh,140px);
  --bottom:clamp(64px,11vh,130px);
  --gutter:var(--s-7);
  --ctl:clamp(40px,calc(var(--u)*3.4),56px);       /* round controls */
  --ctl-sm:calc(var(--ctl)*.82);
  --ic:clamp(16px,calc(var(--u)*1.25),20px);       /* icon */
  --dot:clamp(6px,calc(var(--u)*.5),8px);
  --bar:clamp(26px,calc(var(--u)*2.2),34px);       /* browser bar */
  --r-1:4px;--r-2:8px;--r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.76,0,.24,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-panel:cubic-bezier(.7,0,.2,1);
  --d-1:.3s;--d-2:.5s;--d-3:.8s;--d-4:1.2s;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overflow:clip;overscroll-behavior:none;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--t-md);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:var(--t-xs);font-weight:400;letter-spacing:var(--tr-mono);text-transform:uppercase}
.display{font-family:var(--display);font-stretch:var(--dw);font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-display)}
::selection{background:var(--fg);color:var(--bg)}

/* ---------- scenes ---------- */
.scenes{position:fixed;inset:0;overflow:clip}
.scene{position:absolute;inset:0;overflow:hidden;overflow:clip;visibility:hidden;background:var(--sbg,var(--bg));color:var(--sfg,var(--fg))}
.scene.on{visibility:visible}
.scene .inner{position:absolute;inset:var(--top) var(--pad) var(--bottom)}

/* ---------- chrome ---------- */
.chrome{position:fixed;z-index:50;pointer-events:none;color:#fff;mix-blend-mode:difference}
.chrome>*{pointer-events:auto}
.brand{top:calc((var(--top) - var(--ctl)) / 2);height:var(--ctl);left:var(--pad);display:flex;align-items:center;gap:var(--s-3)}
.brand b{font:800 var(--t-md)/1 var(--display);font-stretch:var(--dw);letter-spacing:.02em}
.brand span{opacity:.6}
.clock{top:calc((var(--top) - var(--ctl)) / 2);height:var(--ctl);left:50%;transform:translateX(-50%);display:flex;gap:var(--s-3);align-items:center}
.clock i{width:var(--dot);height:var(--dot);border-radius:50%;background:currentColor;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.menu-btn{position:fixed;top:calc((var(--top) - var(--ctl)) / 2);right:var(--pad);pointer-events:auto;z-index:80;mix-blend-mode:normal;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}   /* a solid disc, never inverted by what passes beneath, so it always reads as the top layer */
/* language switch: a mono word beside the menu disc, same height and baseline as the other chrome */
.lang{pointer-events:auto;top:calc((var(--top) - var(--ctl)) / 2);right:calc(var(--pad) + var(--ctl) + var(--s-3));height:var(--ctl);display:flex;align-items:center;padding:0 var(--s-2);font-size:var(--t-xs);letter-spacing:var(--tr-mono)}
.lang::after{content:"";position:absolute;left:var(--s-2);right:var(--s-2);bottom:calc(50% - .9em);height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--d-2) var(--ease)}
.lang:hover::after{transform:scaleX(1);transform-origin:left}
.prog{left:var(--pad);right:var(--pad);bottom:calc(var(--bottom) * .36);display:flex;gap:var(--s-2);align-items:flex-end}
.prog button{flex:1;padding-top:var(--s-3);text-align:left;opacity:.45;transition:opacity var(--d-1);position:relative;min-width:0}
.prog button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;opacity:.35}
.prog button::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:currentColor;transition:width var(--d-3) var(--ease)}
.prog button.on{opacity:1}
.prog button.on::after,.prog button.done::after{width:100%}
.prog span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--d-1)}
.prog button.on span,.prog:hover span{opacity:1}
/* the current scene's label is never cut: it runs past its own segment (the others' labels are hidden), and near
   the right end it hangs from the segment's right edge instead */
.prog button.on{align-self:stretch}
.prog button.on span{overflow:visible;width:max-content}
.prog button.on:nth-last-child(-n+3) span{position:absolute;right:0;top:var(--s-3)}
.prog:hover button.on span{position:static;overflow:hidden;width:auto}   /* every label shows on hover, each within its own segment */

/* icons and round controls */
.ic{width:var(--ic);height:var(--ic);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.ib{position:relative;display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);border-radius:50%;border:1px solid color-mix(in srgb,currentColor 35%,transparent);color:inherit;overflow:hidden;isolation:isolate;transition:border-color var(--d-1)}
.ib::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;transform:scale(0);transition:transform var(--d-2) var(--ease);z-index:-1}
.ib:hover{border-color:currentColor}
.ib:hover::before{transform:scale(1)}
.ib .ic{transition:color var(--d-1)}
.ib:hover .ic{color:var(--sbg,var(--bg))}
.ib.solid{background:currentColor;border-color:currentColor}
.ib.solid .ic{color:var(--sbg,var(--bg))}
.ib.solid::before{background:var(--sbg,var(--bg))}
.ib.solid:hover .ic{color:var(--sfg,var(--fg))}
.ib.sm{width:var(--ctl-sm);height:var(--ctl-sm)}

/* menu disc: three bars (same length, uneven at rest) that morph into a cross about the disc centre */
.mono-btn{width:var(--ctl);height:var(--ctl);display:block;color:#fff}
.mono-btn svg{width:100%;height:100%;overflow:visible;display:block}
.mono-btn .disc{fill:currentColor;transform-origin:26px 26px;transition:transform var(--d-2) var(--ease)}
.mono-btn path{fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round;transform-box:view-box;transform-origin:26px 26px;transition:transform .6s var(--ease-panel),opacity var(--d-1)}
.mono-btn .b2{transform:translateX(4px) scaleX(.6)}   /* bars hang from the right edge, shortening toward the left */
.mono-btn .b3{transform:translateX(2px) scaleX(.8)}
.mono-btn:hover:not(.x) .b2,.mono-btn:hover:not(.x) .b3{transform:none}
.mono-btn:hover .disc{transform:scale(1.1)}
.mono-btn.x .b1{transform:rotate(45deg) translateY(6.5px)}
.mono-btn.x .b2{transform:scaleX(0);opacity:0}
.mono-btn.x .b3{transform:rotate(-45deg) translateY(-6.5px)}

/* cursor */
#cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none;mix-blend-mode:difference;--c:calc(var(--ctl) * .27)}
#cursor span{position:absolute;width:var(--c);height:var(--c);margin:calc(var(--c) / -2) 0 0 calc(var(--c) / -2);border-radius:50%;background:#fff;transition:width var(--d-1) var(--ease),height var(--d-1) var(--ease),margin var(--d-1) var(--ease)}
#cursor b{position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;color:#000;transition:opacity var(--d-1),transform var(--d-1) var(--ease)}
#cursor b .ic{width:calc(var(--ic) * 1.2);height:calc(var(--ic) * 1.2);stroke-width:1.6}
#cursor.hover{--c:var(--ctl)}
#cursor.label{--c:calc(var(--ctl) * 1.45)}
#cursor.pin{--c:calc(var(--ctl) * .14)}
#cursor.label b{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:hover) and (pointer:fine){#cursor{display:block}body,a,button{cursor:none}}

/* reveal helpers - masks keep headroom for Vietnamese accents */
.mask{display:block;overflow:hidden;padding:.32em 0 .1em;margin:-.32em 0 -.1em}
.mask>*{display:block}
.ch{display:inline-block;will-change:transform}
.intro-name h1>span,.p-name>span,.wk-title>span,.h-title>span,.cs-name>span{overflow:hidden;padding-top:.32em;margin-top:-.32em;vertical-align:top}

/* rolling label: the word slides up and is replaced by its twin, which waits .7em lower */
.rl{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.2;padding:.32em 0 .14em;margin:-.32em 0 -.14em}
.rl>span{display:block;position:relative;transition:transform .55s var(--ease)}
.rl>span::after{content:attr(data-t);position:absolute;left:0;top:calc(100% + .7em);white-space:nowrap}
a:hover .rl>span,button:hover .rl>span{transform:translateY(calc(-100% - .7em))}

/* text button: a fill enters from the left and leaves to the left (482/466ms expo.out), label rolls up */
.cta{position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s-3);height:var(--ctl);padding:0 var(--s-4) 0 var(--s-5);border-radius:var(--r-pill);border:1px solid color-mix(in srgb,currentColor 40%,transparent);font:500 var(--t-xs) var(--mono);text-transform:uppercase;letter-spacing:var(--tr-mono);overflow:hidden;isolation:isolate;transition:color var(--d-1),border-color var(--d-1)}
.cta::before{content:"";position:absolute;inset:0;background:currentColor;transform:translateX(-101%);transition:transform .48s var(--ease-out);z-index:-1}
.cta:hover{border-color:currentColor}
.cta:hover::before{transform:none}
.cta>.rl,.cta>.ic{transition:color var(--d-1)}
.cta:hover>.rl,.cta:hover>.ic{color:var(--sbg,var(--bg))}
.cta.solid{background:var(--fg);color:var(--sbg,var(--bg));border-color:var(--fg)}
.cta.solid::before{background:var(--acc,#fff)}
.cta.solid:hover>.rl,.cta.solid:hover>.ic{color:var(--bg)}
.cta .ic{width:calc(var(--ic) * .9);height:calc(var(--ic) * .9)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips>*{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill)}

/* ============ INTRO: the ring ============ */
.s-intro{--sbg:var(--bg)}
.intro-role{position:absolute;left:var(--pad);right:var(--pad);top:var(--top);overflow:hidden;opacity:.75;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);cursor:grab;touch-action:pan-y;user-select:none}
.intro-role.hold{cursor:grabbing}
.mq{display:flex;width:max-content;animation:mq 38s linear infinite}
.intro-role:hover .mq,.intro-role.hold .mq{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex:none}
.mq-set>*{white-space:nowrap;padding:0 var(--s-4);position:relative}
.mq-set>*::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:currentColor;opacity:.5}
.mq-set a{color:var(--fg);border-bottom:1px solid currentColor;padding:0 0 1px;margin:0 var(--s-4)}
@keyframes mq{to{transform:translateX(-50%)}}
.ring-wrap{position:absolute;left:0;right:0;top:calc(var(--top) * .5);height:58vh;perspective:1600px;perspective-origin:50% 40%;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ring-wrap.drag{cursor:grabbing}
.ring{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.r-card{position:absolute;left:0;top:0;transform-style:preserve-3d;backface-visibility:visible;will-change:transform,opacity}
.r-card .rv{width:100%;height:100%;clip-path:inset(100% 0 0 0)}
.r-card img{width:100%;height:100%;border-radius:var(--r-1);box-shadow:var(--sh-1);pointer-events:none;user-select:none}
.r-me{position:absolute;left:0;top:0;pointer-events:none;transform-style:preserve-3d}
.r-me canvas{display:block}
.intro-name{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--bottom);container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--gutter);align-items:end}
/* the name keeps one line and leaves ~42% of the row to the side column: STEPHEN PHAN is 5.5em wide */
.intro-name h1{--name-em:5.5;font:800 min(var(--t-hero),calc(100cqi * .58 / var(--name-em)))/.8 var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);white-space:nowrap;text-transform:uppercase}
.intro-side{display:grid;gap:var(--s-4);justify-items:end;text-align:right}
.intro-side h2{font:500 var(--t-lg)/1.1 var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);max-width:20ch}
.intro-side p{font:300 var(--t-sm)/var(--lh-body) var(--body);opacity:.7;max-width:46ch}
.intro-cta{display:flex;gap:var(--s-2);justify-content:flex-end}

/* ============ PROJECT: the site in a browser window ============ */
.s-proj .inner{display:grid;grid-template-columns:minmax(0,52%) minmax(0,1fr);gap:var(--gutter);align-items:center}
/* the stage is a size container: the window fits it at 16:10, whatever the screen */
.p-stage{position:relative;height:86%;container-type:size}
.p-media{position:absolute;left:0;top:0;bottom:0;margin:auto 0;width:min(100cqw,calc(100cqh * 1.6));height:min(100cqh,calc(100cqw / 1.6));z-index:2;display:flex;flex-direction:column;border-radius:var(--r-2);overflow:hidden;background:var(--bg-3);box-shadow:var(--sh-2),0 0 0 1px var(--line-2)}
.p-bar{flex:none;display:flex;align-items:center;gap:var(--s-2);height:var(--bar);padding:0 var(--s-3);background:#1f1f1f;border-bottom:1px solid var(--line-2)}
.p-bar i{width:var(--dot);height:var(--dot);border-radius:50%;background:rgba(255,255,255,.18)}
.p-bar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:var(--s-3);padding:2px var(--s-3);border-radius:var(--r-pill);background:rgba(255,255,255,.06);opacity:.7;font-size:var(--t-2xs);text-transform:none}
.p-view{position:relative;flex:1;overflow:hidden;background:#fff}
.p-page{width:100%;height:auto;will-change:transform}
.p-prog{position:absolute;right:var(--s-1);top:calc(var(--bar) + var(--s-1));bottom:var(--s-1);width:2px;border-radius:2px;background:rgba(0,0,0,.12)}
.p-prog i{position:absolute;inset:0;border-radius:2px;background:var(--acc);transform-origin:top;transform:scaleY(0)}
/* CORTIS section-artist inside the window: slanted panels with even slanted gaps; the outer panels keep a
   straight vertical outer edge so every pv sits inside its panel. Everything is computed from the panels'
   own box (container query): --sl = slant over the full height (12°), --ow = width of the open panel. */
.p-panels{--gp:var(--s-2);--closed:var(--s-8);position:relative;flex:1;display:flex;overflow:hidden;background:var(--bg);container-type:size}
.p-pan{--sl:calc(100cqh * .2126);position:relative;flex:0 0 calc(var(--closed) + var(--sl));min-width:0;overflow:hidden;background:var(--bg-1);cursor:pointer;transition:flex var(--d-3) var(--ease-panel);clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%)}
.p-pan+.p-pan{margin-left:calc(var(--gp) - var(--sl))}
.p-pan:first-child{clip-path:polygon(0 0,100% 0,calc(100% - var(--sl)) 100%,0 100%)}
.p-pan:last-child{clip-path:polygon(var(--sl) 0,100% 0,100% 100%,0 100%)}
.p-pan.open{flex:1 1 auto}
.p-pan .pv{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.p-pan .p-page{--ow:calc(100cqw - (var(--n) - 1) * (var(--closed) + var(--gp)));position:absolute;left:50%;top:0;width:var(--ow);max-width:none;height:auto;margin-left:calc(var(--ow) / -2);filter:grayscale(1) contrast(1.1) brightness(.55);transition:filter var(--d-3)}
.p-pan.open .p-page{filter:none}
.p-pan .pn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;color:#fff;letter-spacing:.06em;transition:opacity var(--d-1)}
.p-pan.open .pn{opacity:0}
.p-pan .po{position:absolute;right:calc(var(--sl) * .5 + var(--s-3));bottom:var(--s-3);display:grid;place-items:center;width:var(--ctl-sm);height:var(--ctl-sm);border-radius:50%;background:rgba(11,11,11,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;opacity:0;pointer-events:none;transition:opacity var(--d-1) .25s}
.p-pan:last-child .po{right:var(--s-3)}
.p-pan.open .po{opacity:1;pointer-events:auto}
.p-pan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--acc);transition:height var(--d-1)}
.p-pan.open::after{height:4px}
.p-info{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.p-no{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:var(--s-3);position:relative}
.p-no::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--acc-w,0%);background:var(--acc)}
.p-no span{display:flex;align-items:center;gap:var(--s-2);opacity:.7}
.p-no span::before{content:"";width:var(--dot);height:var(--dot);border-radius:50%;background:var(--acc)}
.p-no b{font:800 var(--t-xl)/1 var(--display);font-stretch:var(--dw);color:var(--acc)}
.p-name{font:800 var(--t-2xl)/var(--lh-tight) var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);overflow-wrap:anywhere;text-transform:uppercase}
.p-sum{font:400 var(--t-md)/var(--lh-body) var(--body);max-width:48ch;opacity:.82}
.p-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-4)}
.p-facts dt{font:800 var(--t-xl)/1 var(--display);font-stretch:var(--dw)}
.p-facts dd{font:400 var(--t-xs)/1.4 var(--body);opacity:.6;margin-top:var(--s-1)}
.p-tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.p-tags span{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);opacity:.85}
.p-cta{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}

/* ============ ROOM: category roster ============ */
.s-room{--sbg:var(--bg)}
.s-room .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gutter)}
.room-l{display:flex;flex-direction:column;justify-content:center;min-height:0;container-type:size}
.room-l>.mono{opacity:.7;margin-bottom:var(--s-4)}
.room-list{list-style:none}
.room-g{padding:var(--s-4) 0 var(--s-1);font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3)}   /* group heading: Website · Lĩnh vực / Thiệp online · Dịp */
.room-g:first-child{padding-top:0}
.room-list a{display:grid;grid-template-columns:3ch 1fr auto;gap:var(--s-4);align-items:baseline;padding:min(var(--s-1),.6cqh) 0;border-bottom:1px solid var(--line);color:var(--fg-3);transition:padding var(--d-2) var(--ease),color var(--d-1)}
.room-list a:hover,.room-list a.on{color:var(--fg)}
.room-list i{font:400 var(--t-xs) var(--mono);font-style:normal}
.room-list b{font:700 min(var(--t-xl),calc(100cqh / 14 * .5))/1.05 var(--display);font-stretch:var(--dw);text-transform:uppercase;letter-spacing:.005em}
.room-list a>span{font:400 var(--t-xs) var(--mono)}
.room-list a.on{padding-left:var(--s-4)}
.room-list a.on b{font-weight:900}
.room-r{position:relative;min-height:0}
.fan{position:absolute;inset:0}
.fan figure{position:absolute;left:50%;top:50%;border-radius:var(--r-2);overflow:hidden;box-shadow:var(--sh-2);background:var(--bg-2)}
.fan img{width:100%;height:auto}
.room-cap{position:absolute;right:0;bottom:0;text-align:right;max-width:36ch}
.room-cap p{font:400 var(--t-sm)/1.55 var(--body);opacity:.85;margin-top:var(--s-2)}

/* ============ HELLO: the closing scene ============ */
.s-hello{--sbg:var(--bg);--sfg:var(--fg)}
.s-hello .inner{display:grid;grid-template-columns:minmax(0,26%) minmax(0,1fr);gap:var(--gutter)}
.h-photo-box{position:relative;container-type:size;min-height:0}
.h-photo{position:absolute;left:0;bottom:0;width:min(100cqw,calc(100cqh * var(--ar)));height:min(100cqh,calc(100cqw / (var(--ar))));overflow:hidden;border-radius:var(--r-1);background:var(--bg-2)}
.h-photo img{width:100%;height:100%;object-fit:contain;transform-origin:50% 60%;transition:transform var(--d-4) var(--ease)}
.h-photo:hover img{transform:scale(1.03)}
.h-photo figcaption{position:absolute;left:var(--s-3);bottom:var(--s-2);color:var(--fg);opacity:.85;mix-blend-mode:difference}
.h-main{display:flex;flex-direction:column;min-width:0;min-height:0;container-type:size}
.h-kick{display:flex;justify-content:space-between;opacity:.7}
.h-kick>span:first-child{white-space:nowrap}   /* the bracketed kicker never breaks inside its brackets */
.h-live{display:flex;align-items:center;gap:var(--s-2)}
.h-live i{width:var(--dot);height:var(--dot);border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(59,209,111,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(59,209,111,0)}100%{box-shadow:0 0 0 0 rgba(59,209,111,0)}}
.h-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:var(--s-6);align-items:end}
.h-title{font:800 min(var(--t-2xl),9cqh)/.9 var(--display);font-stretch:var(--dw);text-transform:uppercase;margin:min(var(--s-4),2.4cqh) 0 min(var(--s-5),3cqh);max-width:22ch}
.h-mail{align-self:flex-start;display:flex;font:500 min(var(--t-xl),5.4cqh)/1.15 var(--body);letter-spacing:-.02em;border-bottom:1px solid currentColor;padding-bottom:var(--s-1)}
.h-mail span{display:block;overflow:hidden}
.h-mail i{display:block;position:relative;font-style:normal;white-space:pre;transition:transform var(--d-2) var(--ease) calc(var(--i) * 16ms)}
.h-mail i::after{content:attr(data-c);position:absolute;left:0;top:100%}
.h-mail:hover i{transform:translateY(-100%)}
.h-act,.h-alt{display:flex;gap:var(--s-2);align-items:center;margin-top:min(var(--s-4),2.4cqh)}
.h-act .mono{margin-left:var(--s-2);opacity:.6}
.h-about{font:400 var(--t-sm)/1.55 var(--body);opacity:.8}
.h-foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);padding-top:min(var(--s-4),2.4cqh);border-top:1px solid var(--line)}
.h-foot>div>.mono{opacity:.55;margin-bottom:var(--s-3)}
.h-list,.h-steps{list-style:none}
.h-list li,.h-steps li{display:grid;grid-template-columns:3ch 1fr;column-gap:var(--s-2);align-items:baseline;padding:min(var(--s-1),.5cqh) 0;border-bottom:1px solid var(--line)}
.h-list b,.h-steps b{font:700 var(--t-sm)/1.1 var(--display);font-stretch:var(--dw);text-transform:uppercase;letter-spacing:.01em}
.h-list small,.h-steps small{grid-column:2;font:400 var(--t-2xs)/1.35 var(--body);opacity:.55;margin-top:1px}
.h-list small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-list .mono,.h-steps .mono{opacity:.5}
.h-stack{margin-top:var(--s-3);opacity:.5;font-size:var(--t-2xs);line-height:1.6}

/* ============ MENU PANEL ============ */
.index-dim{position:fixed;inset:0;z-index:69;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.index-dim.on{opacity:1;visibility:visible}
.index{position:fixed;top:0;right:0;bottom:0;width:min(760px,100%);z-index:70;background:var(--panel);color:var(--fg);visibility:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto;gap:var(--s-5) var(--s-6);padding:var(--top) var(--s-6) var(--s-5);overflow-y:auto}
.index.open{visibility:visible}
.index h3{opacity:.5;margin-bottom:var(--s-3)}
.index ol{list-style:none}
.index .ix-g{padding:var(--s-3) var(--s-1) var(--s-1);font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;opacity:.55}
.index .ix-g:first-child{padding-top:0}
.index ol a{position:relative;display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-1) var(--s-1);font:800 var(--t-lg)/1.05 var(--display);font-stretch:var(--dw);text-transform:uppercase;isolation:isolate;overflow:hidden;transition:color var(--d-1)}
.index ol a::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateX(-101%);transition:transform .48s var(--ease-out);z-index:-1}
.index ol a:hover{color:var(--panel)}
.index ol a:hover::before{transform:none}
.index ol a i{font:400 var(--t-2xs) var(--mono);font-style:normal;opacity:.55}
.index-close{display:none}
.index-svc{grid-column:1/-1;align-self:end}
.index-svc h3{margin-bottom:var(--s-3)}
.index-svc div{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.index-svc a{position:relative;overflow:hidden;isolation:isolate;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);font:400 var(--t-xs) var(--mono);text-transform:uppercase;transition:color var(--d-1),border-color var(--d-1)}
.index-svc a::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateX(-101%);transition:transform .48s var(--ease-out);z-index:-1}
.index-svc a:hover{color:var(--panel);border-color:var(--fg)}
.index-svc a:hover::before{transform:none}
.index-svc a.more{border-style:dashed}
.index-foot{grid-column:1/-1;display:flex;gap:var(--s-2);align-items:center;border-top:1px solid var(--line);padding-top:var(--s-4)}
.index-foot>a:last-child{font:400 var(--t-xs) var(--mono);text-transform:uppercase;margin-left:var(--s-2);border-bottom:1px solid currentColor;padding-bottom:2px}
.peekimg{position:fixed;left:0;top:0;z-index:75;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity var(--d-1),transform var(--d-1) var(--ease);width:clamp(200px,26vw,440px)}
.peekimg.port{width:clamp(110px,12vw,200px)}
.peekimg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peekimg img{width:100%;height:auto;border-radius:var(--r-1);box-shadow:var(--sh-2)}

/* ============ CASE STUDY ============ */
.case{position:fixed;inset:0;z-index:65;background:var(--sbg,var(--bg-1));color:var(--sfg,var(--fg));visibility:hidden;clip-path:inset(100% 0 0 0);overflow-y:auto;overscroll-behavior:contain}
.case.open{visibility:visible}
/* the navbar band: content scrolling up fades out under the buttons instead of running beneath them */
.case::before{content:"";position:sticky;top:0;display:block;height:var(--top);margin-bottom:calc(var(--top) * -1);background:linear-gradient(var(--sbg,var(--bg-1)) 45%,transparent);z-index:1;pointer-events:none}
body.page::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--top);background:linear-gradient(var(--sbg) 45%,transparent);z-index:40;pointer-events:none}
.case-in{max-width:1240px;margin:0 auto;padding:var(--top) var(--pad) var(--s-8)}
.case-close{position:fixed;top:calc((var(--top) - var(--ctl)) / 2);right:calc(var(--pad) + var(--ctl) + var(--s-3));z-index:2;background:var(--sbg,var(--bg-1))}
.cs-kick{display:flex;align-items:center;gap:var(--s-2);opacity:.7}
.cs-kick::before{content:"";width:var(--dot);height:var(--dot);border-radius:50%;background:var(--acc)}
.cs-name{font:800 var(--t-3xl)/.84 var(--display);font-stretch:var(--dw);text-transform:uppercase;margin:var(--s-5) 0 var(--s-6)}
.cs-lead{font:400 var(--t-lg)/1.45 var(--body);max-width:40ch}
.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) var(--s-6);margin:var(--s-7) 0 var(--s-8);border-top:1px solid var(--line);padding-top:var(--s-5)}
.cs-meta dt{opacity:.55;margin-bottom:var(--s-2)}
.cs-meta dd{font:500 var(--t-md)/1.45 var(--body)}
.cs-shot{border-radius:var(--r-2);overflow:hidden;background:var(--bg-3);box-shadow:var(--sh-2),0 0 0 1px var(--line-2);margin-bottom:var(--s-8)}
.cs-scroll{max-height:78vh;overflow-y:auto;background:#fff;overscroll-behavior:contain}
.cs-scroll img{width:100%;height:auto;display:block}
.cs-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:var(--gutter);padding:var(--s-7) 0;border-top:1px solid var(--line)}
.cs-sec h2,.cs-sec h3{display:flex;gap:var(--s-3);align-items:baseline;opacity:.85}
.cs-sec h2 i,.cs-sec h3 i{font-style:normal;color:var(--acc)}
.cs-body p{font:400 var(--t-lg)/var(--lh-body) var(--body);max-width:52ch}
.cs-feat{list-style:none;counter-reset:f}
.cs-feat li{counter-increment:f;display:grid;grid-template-columns:3ch 1fr;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line);font:400 var(--t-md)/1.5 var(--body)}
.cs-feat li::before{content:counter(f,decimal-leading-zero);font:400 var(--t-xs) var(--mono);opacity:.5;padding-top:.3em}
.cs-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-6)}
.cs-figs>div{min-width:0}
.cs-figs b{display:block;overflow-wrap:anywhere;font:800 var(--t-3xl)/.9 var(--display);font-stretch:var(--dw);color:var(--acc)}
.cs-figs span{display:block;font:400 var(--t-md)/1.45 var(--body);margin-top:var(--s-3)}
.cs-figs small{display:block;margin-top:var(--s-2);opacity:.45;font-size:var(--t-2xs)}
.cs-body .cs-note,.cs-note{margin-top:var(--s-5);opacity:.4;font:400 var(--t-2xs)/var(--lh-body) var(--mono);max-width:none}
.case-scope{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.case-scope span{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill)}
.case-camps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-5)}
.case-camps img{width:100%;height:auto;border-radius:var(--r-1);transition:transform .7s var(--ease-out)}
.case-camps a:hover img{transform:translateY(-6px)}
.case-camps span{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s-3);opacity:.75}
.case-camps .ic{width:calc(var(--ic) * .8);height:calc(var(--ic) * .8)}
.cs-end{border-top:1px solid var(--line);padding-top:var(--s-8);margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-5)}
.cs-end>.mono{opacity:.6}
.cs-q{font:800 var(--t-3xl)/.88 var(--display);font-stretch:var(--dw);text-transform:uppercase;max-width:14ch}
.cs-next{margin-top:var(--s-7);display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s-2) var(--s-5);text-align:left;border-top:1px solid var(--line);padding-top:var(--s-5)}
.cs-next .mono{grid-column:1/-1;opacity:.55}
.cs-next b{font:800 var(--t-2xl)/.9 var(--display);font-stretch:var(--dw);text-transform:uppercase;transition:transform .6s var(--ease-out)}
.cs-next .ic{width:calc(var(--ic) * 2);height:calc(var(--ic) * 2);stroke-width:1.2;transition:transform .6s var(--ease-out)}
.cs-next:hover b{transform:translateX(var(--s-4))}
.cs-next:hover .ic{transform:translateX(var(--s-2))}

/* ============ CATEGORY PAGES ============ */
.s-cover{--sbg:var(--bg)}
.s-cover .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter)}
.cv-l{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.cv-l .back{align-self:flex-start;opacity:.6}
.cv-l .back:hover{opacity:1}
.cv-l h1{font:800 var(--t-3xl)/var(--lh-tight) var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);text-transform:uppercase}
.cv-l h1 .mask:nth-child(2){opacity:.45}
.cv-l p{font:300 var(--t-md)/var(--lh-body) var(--body);max-width:46ch;opacity:.8;margin-top:var(--s-5)}
.sheet{display:flex;flex-wrap:wrap;gap:var(--s-3);align-content:center;justify-content:center;min-height:0}
.sheet button{display:block;position:relative;flex:none;border-radius:var(--r-1);overflow:hidden;opacity:.85;transition:opacity var(--d-1),transform var(--d-2) var(--ease)}
.sheet button:hover{opacity:1;transform:translateY(-6px)}
.sheet img{height:100%;width:100%;display:block}
/* ============ WORKS AT A GLANCE ============ */
.s-works{--sbg:var(--bg)}
.s-works .inner{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--s-5)}
.wk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gutter)}
.wk-head .mono{opacity:.6}
.wk-title{font:800 var(--t-2xl)/var(--lh-tight) var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);text-transform:uppercase}
.wk-title .ch{display:inline-block}
.wk-title{white-space:nowrap;padding-top:.32em}   /* room for stacked accents (Ẩ) inside the phone scroller, which clips above its content */
.wk-head{flex-wrap:wrap}
.wk-sheet{align-content:center}
.wk-sheet:hover button{opacity:.45}
.wk-sheet button:hover{opacity:1}
.sheet .cap{position:absolute;left:0;right:0;bottom:0;display:flex;gap:var(--s-2);padding:var(--s-4) var(--s-3) var(--s-2);background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-size:var(--t-2xs);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .cap i{font-style:normal;opacity:.6}
.sheet .cap b{font-weight:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sheet .cap em{display:none}
.wk-cats{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.wk-cats a{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-2xs);transition:background var(--d-1),color var(--d-1)}
.wk-cats a i{font-style:normal;opacity:.5}
.wk-cats a:hover{background:var(--fg);color:var(--bg)}
.wk-cats .wk-room{border-color:var(--fg)}
.wk-g{margin-left:var(--s-3);font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;opacity:.55}   /* group label before its chips */
.wk-cats .wk-room .ic{width:1em;height:1em}
.s-item .amb{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(60px) saturate(1.3);opacity:.35;transform:scale(1.1)}
.s-item .inner{display:grid;grid-template-columns:minmax(0,var(--dev-col,56%)) minmax(0,1fr);gap:var(--gutter);align-items:stretch}
.s-item.phone .inner{--dev-col:36%}
.dev-box{position:relative;container-type:size;min-height:0}
.dev{position:absolute;inset:0;margin:auto;width:min(100cqw,calc(100cqh * var(--ar)));height:min(100cqh,calc(100cqw / (var(--ar))));overflow:hidden;box-shadow:var(--sh-2);background:var(--bg-2)}
.dev img{width:100%;height:auto}
.dev iframe{position:absolute;left:0;top:0;border:0;background:#fff}
.dev.live img{visibility:hidden}
.dev.phone{border-radius:calc(var(--r-2) * 3.6);box-shadow:0 0 0 9px var(--bg-2),0 0 0 10px var(--line-2),var(--sh-2)}
.dev.desk{border-radius:var(--r-2)}
.it-info{display:flex;flex-direction:column;justify-content:center;gap:var(--s-4);min-width:0;max-width:52ch}
.it-info h2{font:800 var(--t-2xl)/.88 var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);text-transform:uppercase}
.it-info p{font:300 var(--t-md)/var(--lh-body) var(--body);opacity:.85}
.s-next{--sbg:var(--fg);--sfg:var(--bg)}
.s-next .inner{display:flex;flex-direction:column;justify-content:center;gap:var(--s-5)}
.s-next h2{font:800 var(--t-hero)/.84 var(--display);font-stretch:var(--dw);letter-spacing:var(--tr-display);text-transform:uppercase}
.s-next a.big{display:block;transition:transform .7s var(--ease)}
.s-next a.big:hover{transform:translateX(var(--s-5))}

/* ============ LOADER - built from the intro's own parts ============ */
.loader{position:fixed;inset:0;z-index:90;background:var(--bg);color:var(--fg)}
body.loading .chrome{z-index:95}
.ld-label{position:fixed;opacity:.75}
.ld-n{position:fixed;display:flex;align-items:flex-end;gap:var(--s-4);overflow:hidden;padding-top:.32em;margin-top:-.32em}
.ld-n b{display:block;font-weight:800;font-family:var(--display);font-stretch:var(--dw);font-variant-numeric:tabular-nums}
.ld-n span{padding-bottom:.6em;opacity:.6}
body.loading .prog button::after{width:calc(var(--f,0) * 100%);transition:width .35s ease-out}
body.loading .prog span{opacity:0}
body.loading .prog button{opacity:1}

/* ============ SMALL SCREENS - the same tokens, re-based on a phone-sized unit ============ */
@media (max-width:860px){
  :root{
    --u:min(2.6vw,1.25vh);
    --pad:5vw;--top:clamp(64px,10vh,96px);--bottom:clamp(56px,10vh,90px);--gutter:var(--s-5);
    --t-hero:17vw;--t-3xl:12vw;--t-2xl:9.5vw;--t-xl:7vw;
  }
  /* the mono chrome stays on a phone: the role beside the name; the clock moves to the bottom-right and the
     current scene's label to the bottom-left, both on the line under the progress bars */
  .brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 2 * var(--pad) - var(--ctl) - 8em)}
  .prog span,.clock{font-size:var(--t-2xs);line-height:1.4}
  .prog:hover span{opacity:0}
  .prog button.on span,.prog button.on:nth-last-child(-n+3) span{opacity:1;position:fixed;top:auto;right:auto;overflow:hidden;width:auto;left:var(--pad);bottom:calc(var(--bottom) * .36);max-width:calc(100vw - 2 * var(--pad) - 19em)}
  .clock{top:auto;bottom:calc(var(--bottom) * .36);left:auto;right:var(--pad);transform:none;height:auto;gap:var(--s-2)}
  .ring-wrap{top:var(--top);height:44vh}
  .intro-name{grid-template-columns:1fr;gap:var(--s-4)}
  .intro-name h1{white-space:normal;font-size:var(--t-hero)}   /* stacked on its own row: full hero size */
  .intro-side{justify-items:start;text-align:left}
  .intro-cta{justify-content:flex-start}
  @media (max-height:700px){.intro-side p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
  .s-proj .inner{grid-template-columns:1fr;grid-template-rows:38% minmax(0,1fr);gap:var(--s-5);align-items:start}
  .p-stage{height:100%}
  .p-media{right:0;margin:auto}
  @media (max-height:780px){.p-sum{-webkit-line-clamp:2}}
  .p-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-sm)}
  /* the info column keeps to its grid row: tags stay on one line (fading out) and the summary gives way first */
  .p-info{min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden}
  .p-info>*{flex-shrink:0}
  .p-tags{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .p-tags span{flex-shrink:0}
  .p-tags::-webkit-scrollbar{display:none}
  .p-tags.end{-webkit-mask-image:none;mask-image:none}   /* scrolled to the last tag: nothing left to hint at */
  /* works on a phone: a scrolling two-column grid - bigger pictures, and every card says what it is */
  .s-works .inner{display:flex;flex-direction:column;gap:var(--s-5);padding-bottom:var(--s-6);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - var(--s-6)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--s-6)),transparent)}
  .s-works .inner::-webkit-scrollbar{display:none}
  .s-works .inner.scrolled{-webkit-mask-image:linear-gradient(transparent,#000 var(--s-5),#000 calc(100% - var(--s-6)),transparent);mask-image:linear-gradient(transparent,#000 var(--s-5),#000 calc(100% - var(--s-6)),transparent)}
  .wk-sheet{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-3);align-items:start;flex:none}
  .wk-sheet button,.wk-sheet:hover button{opacity:1;border-radius:0;overflow:visible;text-align:left}
  .wk-sheet button:hover{transform:none}
  .wk-sheet img{height:auto;border-radius:var(--r-1)}
  .wk-sheet .cap{position:static;display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-2);padding:var(--s-2) 0 0;background:none;color:inherit;white-space:normal;font-size:var(--t-2xs)}
  .wk-sheet .cap b{font:700 var(--t-md)/1.1 var(--display);font-stretch:var(--dw);text-transform:uppercase;overflow:visible}
  .wk-sheet .cap i{align-self:baseline}
  .wk-sheet .cap em{display:block;grid-column:2;font-style:normal;opacity:.55;line-height:1.45;text-transform:none;letter-spacing:0}
  .wk-cats{flex:none}
  .p-facts{display:none} /* the scope counts live in the case study; a phone shows summary, tags and the call */
  .s-room .inner{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 44%;gap:var(--s-4)}
  .room-cap{display:none}
  .s-hello .inner{display:block;overflow-y:auto;padding-bottom:var(--s-5)}
  .h-photo-box{height:42vh;margin-bottom:var(--s-5)}
  .h-photo{right:0;margin:0 auto}
  .h-top,.h-foot{grid-template-columns:1fr}
  .h-foot{gap:var(--s-5);margin-top:var(--s-6)}
  .index{grid-template-columns:1fr;padding-left:var(--pad);padding-right:var(--pad)}
  .cs-meta{grid-template-columns:1fr 1fr}
  .cs-sec{grid-template-columns:1fr;gap:var(--s-4)}
  .s-cover .inner{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:var(--s-5)}
  .s-item .inner,.s-item.phone .inner{grid-template-columns:1fr;grid-template-rows:52% minmax(0,1fr);gap:var(--s-5)}
}

/* phones: the hello column scrolls, so it is not a size container there */
@media (max-width:860px){.h-main{container-type:normal}}

/* people who ask for less motion get still scenes: no marquee drift, no long transitions */
@media (prefers-reduced-motion:reduce){
  .mq{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============ STATIC PAGES (case studies at du-an/<slug>/) - the same tokens, a normal scrolling page ============ */
html:has(body.page),body.page{height:auto;overflow:auto;overscroll-behavior:auto}
body.page{background:var(--sbg);color:var(--sfg)}
body.page .case-in{padding-top:calc(var(--top) * 1.4)}
.cs-pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-7)}
.cs-pn .cs-next{margin-top:0;grid-template-columns:1fr}
.cs-pn .cs-next:last-child{text-align:right}
@media (max-width:860px){.cs-pn{grid-template-columns:1fr}.cs-pn .cs-next:last-child{text-align:left}}
/* links for crawlers and screen readers, out of sight */
.seo-links{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}