/* ==========================================================
   aradnaksi — pixel system
   Palette from the Maxpay reference: cream / navy / cobalt, orange as the single accent.
   Radius is 0 everywhere. Depth is a hard offset shadow, never a blur.
   ========================================================== */
:root{
  --cream:#EDEBE2; --paper:#F7F6F0; --navy:#12172A; --cobalt:#2A45FF; --orange:#FF5B1F; --tan:#DCD2BC;
  --ink:#12172A; --ink-soft:#4A5068; --muted:#5C6178; --line:rgba(18,23,42,.18);
  --font:"Instrument Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --bar:58px; --px:2px;
  --bg:var(--cream); --fg:var(--navy);
}
body[data-page="about"],body[data-page="work"]{--bg:var(--cream);--fg:var(--navy)}
body[data-page="story"]{--bg:var(--tan);--fg:var(--navy)}
body[data-page="chat"]{--bg:var(--navy);--fg:var(--cream)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font);color:var(--fg);background:var(--bg);overflow:hidden;
  transition:background-color .62s var(--ease-io),color .62s var(--ease-io)}
h1,h2,.case-title,.cs-h-title{text-wrap:balance}
.lead,.work-desc,.cs-text p,.stub-p,.work-sub{text-wrap:pretty}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.work-link:focus-visible{outline-offset:-6px}
::selection{background:var(--cobalt);color:#fff}

/* ---------- shared bits ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.kick{font:500 .76rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 .95rem var(--font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  background:var(--cobalt);color:#fff;border:2px solid var(--cobalt);padding:12px 18px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--navy)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn--orange{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.textlink{font:600 .95rem var(--font);cursor:pointer;color:var(--fg);border-bottom:2px solid var(--orange);padding-bottom:1px}
.textlink:hover{border-color:var(--cobalt)}
.status{display:inline-flex;align-items:center;gap:10px;font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.status::before{content:"";width:10px;height:10px;background:var(--orange)}
.edge{display:block;width:100%;pointer-events:none}

/* ---------- top bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:80;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:var(--bg);color:var(--fg);border-bottom:2px solid var(--fg);
  transition:background-color .62s var(--ease-io),color .62s var(--ease-io),border-color .62s var(--ease-io),opacity .3s}
body.case-open .bar{opacity:0;pointer-events:none}
.logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;cursor:pointer}
.logo svg{width:28px;height:28px;display:block}
.logo-word{font:600 1.02rem var(--font);letter-spacing:-.035em}
nav{position:relative;display:flex;align-items:center}
nav a{position:relative;z-index:1;font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none;padding:10px 14px;cursor:pointer;white-space:nowrap;transition:color .25s}
nav a i{font-style:normal;opacity:.55;margin-right:7px}
nav a.active{color:#fff}
nav a.active i{opacity:.8}
.nav-pill{position:absolute;top:50%;left:0;height:36px;margin-top:-18px;width:0;background:var(--cobalt);z-index:0;pointer-events:none}
.nav-pill.ready{transition:transform .55s var(--ease-io),width .55s var(--ease-io)}

/* ---------- pixel overlays ---------- */
#trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
#gazeSvg{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none;opacity:0;transition:opacity .2s}
#gazeSvg.on{opacity:1}
#gazePath{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:7 6}
.gn-dot{fill:var(--orange)}
.gn-bg{fill:var(--navy)}
.gn-txt{fill:#F7F6F0;font:500 11px var(--mono);letter-spacing:.06em}

/* ---------- swipe shell ---------- */
.viewport{position:fixed;inset:0;overflow:hidden;z-index:2}
.track{display:flex;height:100%;width:400vw;transition:transform .62s var(--ease-io)}
.page{flex:0 0 100vw;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:var(--bar);position:relative}

/* ---------- ABOUT ---------- */
.page--about{display:flex;flex-direction:column}
.hero{width:100%;max-width:1280px;margin:0 auto;flex:1 0 auto;padding:28px 40px 20px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center}
.intro{min-width:0}
h1{font-weight:600;font-size:clamp(3.6rem,11.4vw,10rem);line-height:.84;letter-spacing:-.062em;margin:18px 0 0 -.04em;white-space:nowrap;color:var(--fg)}
.ch{display:inline-block;opacity:0;transform:translateY(.5em);animation:chin .8s var(--ease) forwards;animation-delay:calc(.1s + var(--i)*.05s)}
@keyframes chin{to{opacity:1;transform:none}}
.lead{font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.5;color:var(--ink-soft);max-width:46ch;margin-top:32px}
.lead b{color:var(--ink);font-weight:600}
.wink{font:500 .9em var(--mono);color:var(--cobalt);letter-spacing:-.02em}
.ctas{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;margin-top:34px}
.stage{display:flex;justify-content:center;min-width:0}
.scope{position:relative;width:min(100%,440px,calc((100dvh - 320px)*.8));min-width:300px;aspect-ratio:4/5;margin:0 0 34px;touch-action:none;user-select:none;overflow:visible}
.scope-clip{position:absolute;inset:0;overflow:hidden}
.scope-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(18,23,42,.22) 1px,transparent 1.3px);background-size:14px 14px}
.scope img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;-webkit-user-drag:none;transform:scale(1.2);transform-origin:50% 80%}
.scope .c{position:absolute;width:22px;height:22px;border:0 solid var(--navy)}
.c.tl{top:-8px;left:-8px;border-top-width:3px;border-left-width:3px}
.c.tr{top:-8px;right:-8px;border-top-width:3px;border-right-width:3px}
.c.bl{bottom:-8px;left:-8px;border-bottom-width:3px;border-left-width:3px}
.c.br{bottom:-8px;right:-8px;border-bottom-width:3px;border-right-width:3px}
.scope-cap{position:absolute;left:0;right:0;top:100%;margin-top:18px;display:flex;justify-content:space-between;gap:12px;font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-foot{margin-top:auto}
.hero-foot .edge{height:clamp(70px,13vh,140px)}
.strip{background:var(--cobalt);color:#fff;font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:15px 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- WORK ---------- */
.work-top{background:var(--cobalt);color:#fff;padding:64px 0 36px}
.work-top .kick{color:#CFD6FF}
.work-h{font-weight:600;font-size:clamp(3rem,8vw,7rem);line-height:.88;letter-spacing:-.055em;margin-top:16px}
.work-sub{font-size:1.1rem;line-height:1.5;color:#E3E7FF;margin-top:20px;max-width:52ch}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:52px}
.stat b{display:block;font-weight:600;font-size:clamp(2.8rem,6.4vw,5.4rem);letter-spacing:-.06em;line-height:.95}
.stat span{display:block;margin-top:12px;font-size:.95rem;line-height:1.4;color:#DDE2FF;max-width:26ch}
.work-edge{height:120px;margin-top:-1px}
.work-body{max-width:1200px;margin:0 auto;padding:0 40px 100px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.chip{font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);cursor:pointer;background:transparent;border:2px solid var(--navy);padding:9px 14px;transition:background-color .16s,color .16s,transform .16s var(--ease)}
.chip:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--navy)}
.chip.active{background:var(--navy);color:var(--cream)}
.work-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.work{grid-column:span 1;position:relative;background:var(--paper);border:2px solid var(--navy);opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .2s var(--ease)}
.work.in{opacity:1;transform:none}
.work.in:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--navy)}
.work.hide{display:none}
.work.is-wide{grid-column:1/-1}
.work-link{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:24px 24px 26px}
.work-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px 16px;flex-wrap:wrap}
.work-title-row{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap}
.work-no{font:500 .78rem var(--mono);letter-spacing:.06em;color:var(--cobalt);flex:none}
.work-title{font-weight:600;font-size:clamp(1.3rem,2vw,1.55rem);letter-spacing:-.035em;line-height:1.05;min-width:0;overflow-wrap:break-word}
.work-cat{display:inline-block;font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);border:1.5px solid var(--cobalt);padding:4px 8px;white-space:nowrap}
.work-desc{margin-top:14px;color:var(--ink-soft);line-height:1.5;font-size:1rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.work-more{display:inline-block;margin-top:18px;font:500 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--orange);padding-bottom:2px}
.work:hover .work-more{border-color:var(--cobalt)}
.frame{margin-top:20px;border:2px solid var(--navy);overflow:hidden;background:var(--cream)}
.frame-body{aspect-ratio:16/9;display:grid;place-items:center;position:relative;background:var(--cream)}
.frame-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.work:hover .frame-body img{transform:scale(1.035)}
.px-cover{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:2;pointer-events:none}
.frame--type .frame-body{background:var(--cobalt)}
.frame-type{font-weight:600;font-size:clamp(1.3rem,3.2vw,2.3rem);letter-spacing:-.045em;line-height:1.05;color:#fff;padding:0 20px;max-width:100%;overflow-wrap:anywhere;text-align:center;position:relative;z-index:1}
.work.is-wide .frame-type{font-size:clamp(1.8rem,4vw,3rem)}
.frame--type .frame-body::before{content:"";position:absolute;inset:0;background:conic-gradient(rgba(255,255,255,.14) 25%,transparent 0 50%,rgba(255,255,255,.14) 0 75%,transparent 0) 0 0/8px 8px}
.work.is-wide .work-link{display:grid;grid-template-columns:.78fr 1.22fr;column-gap:36px;align-content:center;align-items:center;padding:30px}
.work.is-wide .work-head,.work.is-wide .work-desc,.work.is-wide .work-more{grid-column:1}
.work.is-wide .work-title{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.work.is-wide .work-head{flex-direction:column;gap:12px}
.work.is-wide .work-desc{font-size:1.05rem;display:block}
.work.is-wide .work-more{justify-self:start}
.work.is-wide .frame{grid-column:2;grid-row:1/4;margin-top:0}
.work.is-wide.flip .work-link{grid-template-columns:1.22fr .78fr}
.work.is-wide.flip .work-head,.work.is-wide.flip .work-desc,.work.is-wide.flip .work-more{grid-column:2}
.work.is-wide.flip .frame{grid-column:1}
.load-note{color:var(--ink-soft);padding:26px;border:2px dashed var(--navy);text-align:center;line-height:1.55;grid-column:1/-1}
.load-note code{background:rgba(18,23,42,.08);padding:2px 6px;font:500 .9em var(--mono)}
.cursor{position:fixed;left:0;top:0;z-index:120;width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--orange);color:var(--navy);display:grid;place-items:center;
  font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transform:translate3d(-200px,-200px,0);scale:.4;opacity:0;transition:scale .3s var(--ease),opacity .2s;box-shadow:4px 4px 0 var(--navy)}
.cursor.on{opacity:1;scale:1}
body.has-bubble .work-link{cursor:none}

/* ---------- STORY ---------- */
.page--story{background:transparent}
.story{position:relative;z-index:2;min-height:calc(100dvh - var(--bar));display:grid;align-items:center}
.field{position:absolute;right:0;top:var(--bar);width:42%;height:calc(100vh - var(--bar));z-index:1;pointer-events:none}
.stub-h{font-weight:600;font-size:clamp(3rem,8vw,7rem);line-height:.88;letter-spacing:-.055em;margin-top:16px;color:inherit}
.stub-p{font-size:1.15rem;line-height:1.55;margin-top:22px;max-width:46ch;color:inherit;opacity:.82}
.tag{margin-top:26px;display:inline-block;background:var(--orange);color:var(--navy);font:600 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 13px}

/* story: intro + timeline, then colour bands for books / films / albums, then "now" */
.story-top{position:relative;z-index:2;padding:64px 0 88px}
.story-top .stub-p{max-width:52ch}
.story-top .intro-copy{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;margin-top:26px;max-width:46ch;letter-spacing:-.01em}
.tl-h{font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.045em;margin:72px 0 28px}
.tl{list-style:none;position:relative;max-width:820px}
.tl::before{content:"";position:absolute;left:127px;top:8px;bottom:8px;width:2px;background:var(--navy);opacity:.9}
.tl-item{position:relative;display:grid;grid-template-columns:112px 1fr;gap:0 40px;padding:0 0 38px}
.tl-year{font:500 .8rem var(--mono);letter-spacing:.08em;color:var(--cobalt);padding-top:2px;text-align:right}
.tl-item::before{content:"";position:absolute;left:121px;top:3px;width:14px;height:14px;background:var(--orange);border:2px solid var(--navy)}
.tl-body{padding-left:8px}
.tl-body h4{font-weight:600;font-size:1.25rem;letter-spacing:-.03em;line-height:1.15}
.tl-body p{margin-top:8px;line-height:1.55;max-width:56ch;opacity:.85}
.band-edge{position:relative;z-index:2;height:72px}
.band-edge .edge{height:72px}
.band{position:relative;z-index:2;padding:56px 0 84px}
.band--cobalt{background:var(--cobalt);color:#fff}
.band--navy{background:var(--navy);color:var(--cream)}
.band--paper{background:var(--paper);color:var(--navy)}
.band--tan{background:var(--tan);color:var(--navy)}
.band .kick{color:var(--cobalt)}
.band--cobalt .kick{color:#CFD6FF}
.band--navy .kick{color:#8FA0FF}
.shelf-h{font-weight:600;font-size:clamp(2.2rem,5.4vw,4.4rem);letter-spacing:-.055em;line-height:.92;margin-top:14px}
.picks{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:44px}
.cover{position:relative;display:block;width:100%;border:2px solid var(--navy);background:var(--paper);overflow:hidden;box-shadow:5px 5px 0 var(--navy);cursor:pointer;padding:0;font:inherit;color:inherit}
.cover--tall{aspect-ratio:2/3}
.cover--sq{aspect-ratio:1}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;transition:opacity .3s steps(4)}
.cover:hover canvas,.cover:focus-visible canvas,.cover.reveal canvas{opacity:0}
.cover--type{display:grid;place-items:center;background:var(--cobalt);color:#fff;padding:14px;text-align:center;cursor:default;box-shadow:5px 5px 0 var(--navy)}
.cover--type span{font-weight:600;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.band--cobalt .cover{border-color:var(--navy);box-shadow:5px 5px 0 var(--navy)}
.band--navy .cover{border-color:var(--cream);box-shadow:5px 5px 0 var(--cobalt)}
.band--navy .cover--type{background:var(--cobalt)}
.pick-meta{margin-top:20px}
.pick-no{font:500 .74rem var(--mono);letter-spacing:.08em;opacity:.8}
.pick-meta h4{font-weight:600;font-size:1.15rem;letter-spacing:-.03em;line-height:1.1;margin-top:4px;overflow-wrap:break-word}
.pick-by{font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:7px;opacity:.78}
.pick-note{font-size:.93rem;line-height:1.48;margin-top:10px;opacity:.9}
.now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}
.now div{border-top:2px solid var(--navy);padding-top:14px}
.now dt{font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.now dd{font-weight:600;font-size:1.25rem;letter-spacing:-.03em;line-height:1.2;margin-top:8px}
.story-end{position:relative;z-index:2;padding:8px 0 96px}
.story-end .btn{margin-top:8px}
.in-step{opacity:0;transform:translateY(14px);transition:opacity .6s steps(5),transform .6s var(--ease)}
.in-step.in{opacity:1;transform:none}

/* story: currently building (two interactive pixel scenes) */
.build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:44px}
.build-card{background:#fff;border:2px solid var(--navy);box-shadow:8px 8px 0 var(--navy);display:flex;flex-direction:column;min-width:0}
.build-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:2px solid var(--navy);font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.build-card--island .build-bar{background:var(--cobalt);color:#fff}
.build-card--tee .build-bar{background:var(--orange);color:var(--navy)}
.build-card--plain .build-bar{background:var(--navy);color:var(--cream)}
.build-bar .dots{display:flex;gap:6px}
.build-bar .dots i{width:9px;height:9px;background:currentColor;opacity:.9}
.build-chip{display:inline-flex;align-items:center;gap:8px}
.build-chip::before{content:"";width:8px;height:8px;background:currentColor}
.build-scene{position:relative;background:var(--cream);border-bottom:2px solid var(--navy)}
.build-scene canvas{display:block;width:100%;height:auto;image-rendering:pixelated;touch-action:manipulation}
.build-scene canvas.pop{animation:scenePop .3s steps(3)}
@keyframes scenePop{0%{transform:translateY(2px)}60%{transform:translateY(-2px)}100%{transform:none}}
.build-act{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 18px;border-bottom:2px solid var(--navy);background:var(--paper)}
.build-count{font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.btn--sm{padding:9px 14px;font-size:.88rem}
.build-text{padding:22px 22px 26px;display:flex;flex-direction:column;gap:0;flex:1}
.build-text h4{font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.05em;line-height:1}
.build-tag{margin-top:8px;font-weight:600;font-size:1.05rem;letter-spacing:-.02em;color:var(--cobalt)}
.build-body{margin-top:14px;line-height:1.55;color:var(--ink-soft);max-width:54ch}
.build-body p+p{margin-top:.8em}
.build-note{margin-top:16px;font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.build-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:auto;padding-top:22px}
.band--paper .build-links .textlink{color:var(--navy)}
.gal{position:relative;aspect-ratio:1/1;overflow:hidden;background:#F4F4EF;cursor:pointer}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.gal.crisp img,.gal.crisp .px-cover{image-rendering:pixelated}
.gal-cap{display:flex;flex-direction:column;gap:3px;padding:14px 18px;min-height:74px;border-bottom:2px solid var(--navy);background:#fff}
.gal-cap strong{font-weight:600;font-size:1.05rem;letter-spacing:-.03em}
.gal-cap span{font-size:.95rem;line-height:1.4;color:var(--ink-soft)}
.build-title{display:flex;align-items:center;gap:14px}
.build-logo{width:48px;height:48px;flex:none;border:2px solid var(--navy);image-rendering:pixelated;display:block}

/* ---------- CHAT ---------- */
.globe{position:absolute;left:0;right:0;bottom:0;width:100%;height:42vh;z-index:1;pointer-events:none}
.chat{position:relative;z-index:2;min-height:calc(100dvh - var(--bar))}
.chat .wrap{padding-top:72px}
.chat .kick{color:#8FA0FF}
.mail{display:inline-block;margin-top:30px;font-weight:600;font-size:clamp(1.4rem,6vw,4rem);letter-spacing:-.045em;color:var(--cream);text-decoration:none;border-bottom:4px solid var(--orange);padding-bottom:4px;white-space:nowrap;transition:border-color .2s}
.mail:hover{border-color:var(--cobalt)}
.ctas--chat{margin-top:30px}
.chat .btn--ghost:hover{box-shadow:4px 4px 0 var(--cobalt)}

/* ---------- CASE STUDY ---------- */
.case{position:fixed;z-index:95;top:0;left:0;width:0;height:0;background:var(--cream);overflow:hidden;color:var(--navy);
  box-shadow:10px 10px 0 var(--navy);
  transition:top .52s var(--ease-io),left .52s var(--ease-io),width .52s var(--ease-io),height .52s var(--ease-io)}
.case[hidden]{display:none}
.case.open{box-shadow:none}
.case-scroll{position:absolute;inset:0;overflow-y:auto;overflow-anchor:none;opacity:0;transition:opacity .28s ease}
.case.open .case-scroll{opacity:1;transition:opacity .4s ease .16s}
.case-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:var(--navy);color:var(--cream)}
.case-back{font:500 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;background:none;border:2px solid var(--cream);cursor:pointer;color:var(--cream);display:inline-flex;align-items:center;gap:8px;padding:8px 12px;transition:background-color .15s,color .15s}
.case-back:hover{background:var(--cream);color:var(--navy)}
.case-back svg{width:14px;height:14px}
.case-word{font:600 1.05rem var(--font);letter-spacing:-.035em}
.case-close{font-size:.95rem;background:none;border:2px solid var(--cream);width:38px;height:38px;cursor:pointer;display:grid;place-items:center;color:var(--cream);transition:background-color .15s,color .15s}
.case-close:hover{background:var(--cream);color:var(--navy)}
.case-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.case-inner{max-width:1080px;margin:0 auto;padding:56px 40px 70px}
.mark{display:inline-block;background:var(--cobalt);color:#fff;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px}
.case-head{display:grid;grid-template-columns:.82fr 1fr;gap:44px;align-items:start;padding-bottom:8px}
.case-title{font-weight:600;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.045em}
.case-title b{font-weight:700}
.case-summary{font-size:1.1rem;line-height:1.55;color:var(--ink)}
.case-challenge{margin-top:28px}
.case-challenge p{margin-top:12px;color:var(--ink-soft);line-height:1.55}
.case-metarow{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:30px}
.case-metarow > div{min-width:118px}
.case-metarow p{margin-top:11px;color:var(--ink-soft);line-height:1.4;white-space:pre-line}
.case-visit{display:inline-flex;align-items:center;gap:8px;margin-top:30px;text-decoration:none;background:var(--cobalt);color:#fff;font-weight:600;font-size:.95rem;padding:12px 18px;border:2px solid var(--cobalt);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.case-visit:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--navy)}
.case-visit svg{width:15px;height:15px}
.cs-cover{margin:28px 0 4px}
.cs-block{margin:40px 0}
.cs-banner{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:min(48vh,430px);margin:52px 0;overflow:hidden;display:grid;place-items:center;background:var(--navy)}
.cs-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-banner::after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(18,23,42,.5) 25%,transparent 0 50%,rgba(18,23,42,.5) 0 75%,transparent 0) 0 0/6px 6px}
.cs-banner-title{position:relative;z-index:2;color:#fff;text-align:center;font-weight:600;font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.045em;padding:0 24px;line-height:1;text-shadow:3px 3px 0 var(--navy)}
.cs-kicker{font:500 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.cs-h-title{font-weight:600;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.045em;margin-top:6px}
.cs-text{color:var(--ink-soft);line-height:1.65;font-size:1.08rem;max-width:66ch}
.cs-text p+p{margin-top:1em}
.cs-quote{border-left:6px solid var(--cobalt);padding:6px 0 6px 22px;margin:8px 0;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.4;color:var(--ink);max-width:60ch;font-weight:600;letter-spacing:-.02em}
.cs-list-label{font-weight:600;font-size:1.05rem;margin-bottom:10px;color:var(--ink)}
.cs-list{padding-left:1.25em;color:var(--ink-soft);line-height:1.7;max-width:62ch}
.cs-list li{margin:3px 0}
.cs-list li::marker{color:var(--cobalt);font-weight:700}
.cs-note{background:var(--tan);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy);padding:22px 24px;color:var(--navy);line-height:1.55;max-width:72ch}
.cs-figure{margin:0}
.cs-figure figcaption{margin-top:10px;font:500 .74rem var(--mono);letter-spacing:.04em;color:var(--muted)}
.cs-imgframe{border:2px solid var(--navy);overflow:hidden;background:var(--cream)}
.cs-imgframe img{display:block;width:100%}
.cs-gallery{display:grid;gap:16px}
.cs-gallery.n2{grid-template-columns:repeat(2,1fr)}
.cs-gallery.n3{grid-template-columns:repeat(3,1fr)}
.cs-colors-label{font-weight:600;font-size:1.05rem;margin-bottom:16px;color:var(--ink)}
.cs-color-groups{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}
.cs-color-group h4{font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cs-swatches{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.cs-swatch i{display:block;width:60px;height:60px;border:2px solid var(--navy)}
.cs-swatch span{display:block;margin-top:6px;font:500 .66rem var(--mono);color:var(--muted);text-align:center}
.case-foot{margin-top:60px;padding:26px 0 10px;border-top:2px solid var(--navy);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.case-foot .fn{font-weight:700;font-size:1.4rem;letter-spacing:-.04em}
.case-foot .fs{display:flex;gap:16px}
.case-foot .fs a{color:var(--navy);text-decoration:none;font:500 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--orange)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding:36px 26px 40px}
  .stage{order:2}
  h1{font-size:clamp(3.2rem,17vw,7rem)}
  .wrap,.work-body{padding-left:24px;padding-right:24px}
  .work-top{padding-top:44px}
  .stats{grid-template-columns:1fr;gap:20px;margin-top:36px}
  .stat{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:16px;align-items:end}
  .stat span{margin:0;max-width:none}
  .work-list{grid-template-columns:1fr}
  .work.is-wide .work-link{display:block;padding:24px 24px 26px}
  .work.is-wide .frame{margin-top:20px}
  .work.is-wide .work-head{flex-direction:row;gap:14px 16px}
  .work-desc,.work.is-wide .work-desc{display:block}
  .case-head{grid-template-columns:1fr;gap:22px}
  .case-inner{padding:44px 24px 60px}
  .field{width:100%;opacity:.55}
  .strip{padding:14px 24px}
  .strip-keys{display:none}
  .hero-foot .edge{height:110px}
}
@media (max-width:1000px){
  .picks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .build-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tl::before{left:7px}
  .tl-item{grid-template-columns:1fr;padding-left:30px}
  .tl-item::before{left:0}
  .tl-year{text-align:left;margin-bottom:6px}
  .tl-body{padding-left:0}
  .picks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:0 24px 18px;margin:40px -24px 0;-webkit-overflow-scrolling:touch;scroll-padding-left:24px}
  .pick{flex:0 0 62%;scroll-snap-align:start}
  .now{grid-template-columns:1fr;gap:20px}
  .bar{padding:0 14px}
  .logo-word{display:none}
  nav a{padding:10px 10px}
  nav a i{display:none}
  .work-link,.work.is-wide .work-link{padding:20px 18px 22px}
  .work.is-wide .work-head{flex-direction:column;gap:12px}
  .cs-gallery.n3{grid-template-columns:repeat(2,1fr)}
  .cs-color-groups{grid-template-columns:1fr}
  .stat{grid-template-columns:1fr;gap:6px}
  .mail{font-size:clamp(1.15rem,6.6vw,2rem)}
}
@media (prefers-reduced-motion:reduce){
  .track,.case,.case-scroll,body{transition:none}
  .ch{animation:none;opacity:1;transform:none}
  .work{opacity:1;transform:none;transition:none}
  .nav-pill.ready{transition:none}
  .frame-body img{transition:none}
  .btn,.chip,.case-visit{transition:none}
  .in-step{opacity:1;transform:none;transition:none}
  .cover canvas{transition:none}
  .build-scene canvas.pop{animation:none}
}