/* ── Fonts, self-hosted (7 Sep 2026: no Google Fonts request — GDPR and one fewer connection). Figtree variable 300–700, Instrument Serif italic; latin + latin-ext (Ł, ń, ś). Files in public/fonts/, from the Google Fonts CSS API. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 700;font-display:swap;src:url(public/fonts/figtree-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 700;font-display:swap;src:url(public/fonts/figtree-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(public/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(public/fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Studio Light — redesign prototype
   Every value traces to DESIGN-SYSTEM.md. Audit via AGENT.md.
   ============================================================ */

:root{
  --bg:#FEFEFD;
  --ink:#131316;
  --muted:#61656E;
  --line:rgba(19,19,22,.12);
  --fill:#F1F2F4;
  --grad-accent:linear-gradient(90deg,#F6EEF7 -27%,#C9A0DC 112%);
  --grad-butter:linear-gradient(270deg,#FFD9A0 0%,#FFF3DC 100%);
  --flat-accent:#C9A0DC;
  --sans:'Figtree',system-ui,sans-serif;
  --accent:'Instrument Serif',Georgia,serif; /* Luke's pick, 1 Sep 2026 */
  --shadow-hover:0 24px 48px -24px rgba(19,19,22,.18);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);   /* scene moves: fast start, long settle */
}

/* The artboard trick: 1rem = 10px at 1920, scaling with the window. */
html{font-size:2.6667vw}
@media(min-width:768px){html{font-size:clamp(8.5px,.694444vw,10px)}} /* 10px from 1440 up, never under 8.5px (body ≥13.6px) */

*{box-sizing:border-box;margin:0}
body{
  transition:opacity .3s var(--ease-out);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.8rem;   /* Body 18px — perfect-fourth scale (Luke, 5 Sep): 18 · 24 · 32 · 42 · 56 */
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
html{overflow-x:clip}   /* body's clip alone still let the viewport scroll sideways to the hero mass (scrollTo(600) reached x=512, 5 Sep) — clip the root too */
body.-leaving{opacity:0}
/* Cross-document view transitions: a clicked work tile (or the pager's next
   card) morphs into the project hero media; the page beneath cross-fades
   quickly so the morphing element carries the eye. Browsers without the API
   get the 0.3s body fade instead (main.js). */
@view-transition{navigation:auto}
::view-transition-group(project-media){animation-duration:.52s;animation-timing-function:var(--ease-out)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:var(--ease-out)}
::view-transition-old(project-media),::view-transition-new(project-media){animation:none;mix-blend-mode:normal;height:100%;overflow:clip}
.phero .pmedia{view-transition-name:project-media}
.phero .pmedia.reveal{opacity:1;transform:none;transition:none} /* must be visible the instant the page arrives, or the morph lands on nothing */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.acc{font-family:var(--accent);font-style:italic;font-weight:400;letter-spacing:0}
.label{
  font-size:1.2rem;font-weight:500;line-height:1.2;   /* 12px — the 11px label sat under the readable floor (audit, 7 Sep) */
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.wrap{max-width:144rem;margin-inline:auto;padding-inline:4rem}
section{padding-block:16rem}
@media(max-width:767px){section{padding-block:10rem}.wrap{padding-inline:2rem}}

h1,h2{font-weight:300;text-wrap:balance}
.display{font-size:6.8rem;line-height:1.04;letter-spacing:-.03em}
.h2{font-size:4.2rem;line-height:1.1;letter-spacing:-.025em}   /* H2 = Body × 1.333³ */
.lede{font-size:2.4rem;line-height:1.35;letter-spacing:-.01em;color:var(--muted)}
.ghostno{font-family:var(--accent);font-style:italic;font-size:4.2rem;line-height:1;color:var(--muted);opacity:.45}   /* = H2, the heading it sits beside */

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:1rem;height:4.4rem;padding:0 2.4rem;border:0;border-radius:999px;
  background:var(--grad-accent);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:1.4rem;font-weight:500;line-height:1.2;
  overflow:hidden;
}
.btn.-butter{background:var(--grad-butter)}
.btn.-sm{height:4rem}
.btn:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px}
.btn .rip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.btn .rip i{
  display:block;position:absolute;top:50%;left:0;width:100%;padding-top:100%;
  border-radius:50%;background:rgba(255,255,255,.85);
  transform:translateY(-50%) scale(0);transform-origin:center calc(50% + 3rem);opacity:0;
}
.btn:hover .rip i{opacity:1;transform:translateY(-50%) scale(1.1);transition:transform .7s,opacity .1s}
.btn .roll{position:relative;z-index:1;display:block;height:1.3em;overflow:hidden}
.btn .roll s{display:block;text-decoration:none;transition:transform .3s;white-space:nowrap}
.btn:hover .roll s{transform:translateY(-100%)}
.btn svg{position:relative;z-index:1;flex:none}

/* Bare CTA — no shape; label roll + arrow nudge, same speeds as pills. */
.btnbare{
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  font-size:1.4rem;font-weight:500;line-height:1.2;color:var(--ink);
}
.btnbare:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px}
.btnbare .roll{display:block;height:1.3em;overflow:hidden}
.btnbare .roll s{display:block;text-decoration:none;transition:transform .3s}
.btnbare:hover .roll s{transform:translateY(-100%)}
.btnbare svg{flex:none;transition:transform .3s}
.btnbare:hover svg{transform:translate(.3rem,-.3rem)}

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed;top:2rem;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:1rem;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:.8rem .8rem .8rem 2.4rem;box-shadow:0 12px 32px -20px rgba(19,19,22,.25);
}
.nav .logo{display:inline-flex;align-items:center;gap:1rem;font-weight:700;font-size:1.4rem;letter-spacing:-.01em;margin-right:1rem;white-space:nowrap}
.nav .logo .mark{width:2.4rem;height:2.4rem;display:block}
.nav a.link{font-size:1.4rem;font-weight:500;padding:.8rem 1.2rem;border-radius:999px}
.nav a.link:hover,.nav a.link[aria-current]{background:var(--fill)}
.nav a.link:focus-visible,.nav .logo:focus-visible,.mobilemenu a:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px}
.mobilemenu a[aria-current]{background:var(--fill)}
.skip{position:absolute;left:1rem;top:-6rem;z-index:100;background:var(--ink);color:var(--bg);padding:1rem 1.6rem;border-radius:999px;font-size:1.4rem;font-weight:500;text-decoration:none}
.skip:focus{top:1rem;outline:2px solid var(--flat-accent);outline-offset:2px}
.menubtn{display:none}
.mobilemenu{position:fixed;top:7.6rem;left:50%;transform:translateX(-50%);z-index:49;width:calc(100vw - 2rem);max-width:36rem;
  background:var(--bg);border:1px solid var(--line);border-radius:2.4rem;box-shadow:var(--shadow-hover);padding:1.6rem;display:grid}
.mobilemenu a{font-size:2.4rem;font-weight:300;letter-spacing:-.01em;padding:1.6rem 2rem;border-radius:1.6rem}
.mobilemenu a:hover{background:var(--fill)}
.mobilemenu[hidden]{display:none}
@media(max-width:767px){
  .nav{top:1rem;padding-left:1.6rem;max-width:calc(100vw - 2rem);gap:.8rem}
  .nav a.link{display:none}
  .nav .logo{font-size:0;gap:0;margin-right:.4rem;min-height:4.4rem;min-width:4.4rem;justify-content:center;align-items:center}
  .nav .logo .mark{width:2.8rem;height:2.8rem}
  .menubtn{all:unset;display:inline-flex;align-items:center;height:4rem;padding:0 1.6rem;border-radius:999px;border:1px solid var(--line);
    font-family:var(--sans);font-size:1.4rem;font-weight:500;cursor:pointer}
  .menubtn:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px}
  .menubtn[aria-expanded="true"]{background:var(--fill)}
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;padding-block:0;position:relative;overflow:visible}   /* visible: the mass folds DOWN out of the hero behind "Selected work"; body clips the x-overflow */
/* The mass v10 — the atmosphere: a pressure field, not an object. Four
   asymmetric ellipses with long alpha falloffs (index.html), no blur filter,
   no boundary; they drift imperceptibly and lean with the trade ⇄ habit
   sentence (motion.js). Typography is the action; this is the air. */
.mass{position:absolute;left:50%;top:50%;   /* centred behind the copy (Luke, 7 Sep — was 44%) */width:220rem;height:150rem;margin:-75rem 0 0 -110rem;overflow:visible;pointer-events:none;   /* v10 pressure field: viewBox -500…1500 × -350…1150, extends past the viewport on purpose */
  will-change:transform}   /* NEVER a CSS filter on the svg root — it clips the drawing to the box (Luke's cut, 4 Sep) */
/* The two italic words are physical objects in the headline (motion.js moves
   them independently); inline-block so a transform can apply. */
.hero .display .acc,.hero .display .w{display:inline-block;will-change:transform}   /* the exchange moves the italic words; the rest of each line re-seats */
.hero .wrap{display:grid;gap:4rem;justify-items:center;text-align:center;position:relative;z-index:1}
.hero .lede{max-width:64rem;font-size:2.6rem}
.hero .ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
/* Hero entrance and scroll recede are GSAP (motion.js). */
.display.-lines{opacity:1;transform:none}
.display .line{display:block}

@media(max-width:767px){
  .mass{width:160rem;height:110rem;margin:-55rem 0 0 -80rem}
  .hero .display .w{display:inline}   /* wrap as text on phones; the exchange re-seats lines only on desktop */
}

/* ── Work grid ───────────────────────────────────────────── */
/* Selected work (Luke's brief, 5 Sep): the artwork is the tile. No card, no
   hairline, no caption panel, no pill. Each PIECE is a frame (sets the row
   height and does NOT clip) holding a PLATE (clips: poster + Lottie in .art,
   a scrim above them) and two homes for the one title: .slot.-rest — small,
   in the corner the poster leaves quiet (data-corner) — and .slot.-in — the
   display-size seat at the opposite edge (data-anchor), where the arrow
   waits. work.js flies the title between them (REST → APPROACH → ACTIVE →
   SETTLE) and fades the scrim in only while the piece is active. Corners and
   ink are art-directed per piece against the POSTERS (rest = frame 0). */
:root{--plate-ar:1.1}                                   /* 2-col plate ratio w/h — Luke's pick, 5 Sep (400px plates at 1440); the lead follows so a row's plates share one height */
.workhead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:6rem}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem}
.piece{grid-column:span 2;display:flex;flex-direction:column;position:relative;color:inherit;text-decoration:none;outline:none}
.piece.-lead{grid-column:span 4}
.frame{position:relative;flex:1;min-height:0;aspect-ratio:var(--plate-ar)}
.-lead .frame{aspect-ratio:calc(var(--plate-ar) * 2.0455)}   /* (4 cols + 3 gaps) / (2 cols + 1 gap) on the 6-col grid */
.piece:focus-visible .frame{outline:2px solid var(--ink);outline-offset:4px;border-radius:1.6rem}
.plate{position:absolute;inset:0;overflow:hidden;border-radius:1.6rem;background:var(--fill);transform:translateZ(0)}
.art{position:absolute;inset:0;will-change:transform}
.art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block}
[data-focus="right"] .art img{object-position:right center}
.lottieholder{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.lottieholder.-ready{opacity:1}
.lottieholder svg{width:100%;height:100%;display:block}
.scrim{position:absolute;left:0;right:0;bottom:0;height:62%;opacity:0;pointer-events:none;background:linear-gradient(to top,var(--scrim-c) 0%,transparent 100%)}
[data-anchor^="t"] .scrim{top:0;bottom:auto;background:linear-gradient(to bottom,var(--scrim-c) 0%,transparent 100%)}
[data-ink="light"]{--scrim-c:rgba(8,8,10,.6)}
[data-ink="dark"]{--scrim-c:rgba(255,255,255,.72)}
.ttl{font-size:3.2rem;font-weight:300;line-height:1.15;letter-spacing:-.02em;margin:0;white-space:nowrap;transform-origin:0 0;will-change:transform;transition:color .18s var(--ease-out)}
.slot.-rest{position:absolute;top:2.2rem;left:2.4rem;z-index:2;pointer-events:none}
.slot.-rest .ttl{font-size:1.6rem;font-weight:500;letter-spacing:.01em;line-height:1.3}
[data-corner="tr"] .slot.-rest{left:auto;right:2.4rem}
[data-ink="light"] .slot.-rest .ttl{color:#fff}
.slot.-in{position:absolute;left:2.4rem;bottom:2.2rem;z-index:2;pointer-events:none;display:flex;align-items:baseline;gap:.4em}
[data-anchor="tl"] .slot.-in{top:2.2rem;bottom:auto}
[data-anchor="tr"] .slot.-in{top:2.2rem;bottom:auto;left:auto;right:2.4rem;flex-direction:row-reverse}
[data-anchor="br"] .slot.-in{left:auto;right:2.4rem;flex-direction:row-reverse}
.-lead .slot.-in .ttl{font-size:4.4rem;letter-spacing:-.03em}
[data-ink="light"] .slot.-in .ttl.-inside{color:#fff}
.arr{display:inline-block;width:.5em;height:.5em;font-size:3.2rem;opacity:0;transform:translate(-.4em,.4em);color:inherit;flex:none}
.-lead .arr{font-size:4.4rem}
[data-ink="light"] .arr{color:#fff}
.arr svg{width:100%;height:100%;display:block}
.more{grid-column:span 2;display:flex;flex-direction:column;color:inherit;text-decoration:none;outline:none}   /* v3 (Luke, 7 Sep): a tile like the pieces — a fill plate holding a fan of the three projects the bento doesn't show, title seated bottom-left. No gradient. */
.more .plate{background:var(--fill)}
.more .fan{position:absolute;left:50%;top:42%;width:30rem;height:16rem;transform:translate(-50%,-50%)}
.more .fan img{position:absolute;left:50%;top:50%;width:14rem;height:8.4rem;object-fit:cover;border-radius:.8rem;box-shadow:0 16px 32px -20px rgba(19,19,22,.45);transform:translate(-50%,-50%) rotate(var(--r)) translate(var(--x),var(--y));transition:transform .5s var(--ease-expo)}
.more .fan img:nth-child(1){--r:-10deg;--x:-6.4rem;--y:1.2rem}
.more .fan img:nth-child(2){--r:2deg;--x:0rem;--y:-.4rem}
.more .fan img:nth-child(3){--r:11deg;--x:6.4rem;--y:1.6rem}
.more:hover .fan img:nth-child(1),.more:focus-visible .fan img:nth-child(1){--r:-15deg;--x:-8.4rem}
.more:hover .fan img:nth-child(3),.more:focus-visible .fan img:nth-child(3){--r:16deg;--x:8.4rem}
.more .slot.-in{pointer-events:none}
.more .ttl{white-space:normal}
.more .arr{opacity:1;transform:translate(0,0);transition:transform .18s var(--ease-out)}
.more:hover .arr{transform:translate(.15em,-.15em)}
.more:focus-visible .frame{outline:2px solid var(--ink);outline-offset:4px;border-radius:1.6rem}
@media(hover:none){.piece .slot.-in .arr{display:none}}
@media(max-width:767px){.grid{grid-template-columns:1fr}.piece,.piece.-lead,.more{grid-column:auto}.-lead .frame{aspect-ratio:var(--plate-ar)}.ttl,.-lead .slot.-in .ttl{font-size:2.8rem}}
/* Tablet band (UI Lead, 3 Sep): the 8.5px floor left 13.6px body and 37px
   buttons on iPads. Root 9.4px here, 44px targets, a 2-up work grid. */
@media(min-width:768px) and (max-width:1023px){
  html{font-size:9.4px}
  .piece,.piece.-lead,.more{grid-column:span 3}.-lead .frame{aspect-ratio:var(--plate-ar)}
  .btn,.btnbare,.filterpill,.menubtn{min-height:44px}
  .abtcards{flex-wrap:wrap}
}

/* ── Pillars ─────────────────────────────────────────────── */
.pillars{position:relative}
.pillars .headrow{text-align:center;margin-bottom:8rem}
/* Pillars v6 — "wind through pages": no pinning. The row nearest the
   viewport centre opens as the section flies past, in either direction. */

.plist{max-width:96rem;margin-inline:auto;display:grid}
.pillar{position:relative;isolation:isolate;border-radius:1.6rem;
  /* wash: resting stops --ra → --rb, led in by a band of the other colour --fr.
     --sw is the sweep head (0% closed → 140% at rest); motion.js tweens it on open. */
  --sw:0%;--ra:rgba(201,160,220,.12);--rb:rgba(201,160,220,.26);--fr:rgba(255,217,160,.4)}
.pillar.-butter{--ra:rgba(255,217,160,.22);--rb:rgba(255,217,160,.46);--fr:rgba(255,243,220,.85)}
.pillar::before{content:"";position:absolute;top:0;left:3.2rem;right:3.2rem;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out),opacity .3s}
.pillar.-in::before{transform:scaleX(1)}
.pillar:first-child::before{display:none}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out);
  background:linear-gradient(90deg,var(--ra) 0%,var(--rb) calc(var(--sw) - 40%),var(--fr) calc(var(--sw) - 14%),transparent var(--sw))}
.pillar.-on{--sw:140%}
.pillar.-on::after{opacity:1}
.pillar.-on::before,.pillar.-on+.pillar::before{opacity:0}
.pillar>button{all:unset;display:flex;align-items:center;justify-content:space-between;gap:2rem;width:100%;box-sizing:border-box;padding:2.8rem 3.2rem;cursor:pointer}
.pillar>button:focus-visible{outline:2px solid var(--flat-accent);outline-offset:-2px}
.pillar h3{font-size:2.4rem;font-weight:300;letter-spacing:-.015em;line-height:1.15}   /* card titles = Lede step */
.pillar .ghostno{transition:opacity .3s}
.pillar.-on .ghostno{opacity:.9}
.pillar .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease-out)}
.pillar .body .bin{min-height:0;overflow:hidden}
.pillar .body p{padding:0 3.2rem 2.8rem;max-width:66ch;color:var(--muted);opacity:0;transform:translateY(1rem);transition:opacity .8s var(--ease-out) .1s,transform .8s var(--ease-out) .1s}
.pillar.-on .body p{opacity:1;transform:none}
.pillar.-on .body{grid-template-rows:1fr}

/* About flip cards — scattered trio, hover/tap turns them over (rotation, never scale). */
.abtcards{display:flex;justify-content:center;gap:3rem;margin-top:12rem}
.flipwrap{perspective:1200px;width:19rem;height:23rem}
.flipwrap:nth-child(1){transform:rotate(-3deg)}
.flipwrap:nth-child(2){transform:rotate(2deg)}
.flipwrap:nth-child(3){transform:rotate(-1.5deg)}
.flipwrap:nth-child(4){transform:rotate(2.5deg)}
.flipwrap:nth-child(5){transform:rotate(-2deg)}
.flip{all:unset;position:relative;display:block;width:100%;height:100%;cursor:pointer;transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.flipwrap:hover .flip,.flip.-flipped{transform:rotateY(180deg)}
.flip:focus-visible{outline:2px solid var(--flat-accent);outline-offset:4px;border-radius:1.6rem}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.6rem;border:1px solid var(--line);background:var(--bg);overflow:hidden;display:grid;place-content:center;gap:.8rem;padding:2.4rem;box-shadow:var(--shadow-hover)}
.face .num{font-family:var(--accent);font-style:italic;font-weight:400;font-size:7rem;line-height:.9;text-align:center}
.face.-front p{font-size:1.6rem;line-height:1.5;text-align:center;max-width:15rem;margin:0}
.face .lab{font-size:1.4rem;color:var(--muted);text-align:center}
.face.-back{transform:rotateY(180deg)}
.face.-back.-art{padding:0;background:var(--fill)}   /* v3 (Luke, 7 Sep): the back is the project's own artwork with a two-line label in its quiet corner — no gradient, no wash */
.face.-back.-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face.-back.-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(8,8,10,.62),transparent)}
.face.-back.-art[data-ink="dark"]::after{background:linear-gradient(to top,rgba(255,255,255,.78),transparent)}
.face.-back.-art .tag{position:absolute;left:1.6rem;right:1.6rem;bottom:1.6rem;z-index:1;display:grid;gap:.3rem;text-align:left;color:#fff}
.face.-back.-art[data-ink="dark"] .tag{color:var(--ink)}
.face.-back.-art .tag b{font-size:1.2rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.face.-back.-art .tag i{font-style:normal;font-size:1.4rem;font-weight:300;opacity:.8;line-height:1.3}
.face.-back p{font-size:1.6rem;text-align:center;max-width:15rem;margin:0}
@media(max-width:767px){
  .abtcards{gap:2rem;margin-top:6rem;flex-wrap:wrap}
  .flipwrap{width:15rem;height:19rem}
  .face .num{font-size:5.4rem}
}

/* ── Clients ─────────────────────────────────────────────── */
.clients .marquee{overflow:hidden;margin-top:8rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.clients .track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.clients .set{display:flex;align-items:center;gap:8rem;padding-right:8rem}
.clients .marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.clients img{height:4.4rem;width:auto;opacity:.6;filter:grayscale(1);transition:opacity .3s,filter .3s}
.clients img:hover{opacity:1;filter:none}
.clients .intro{max-width:52rem;margin:2rem auto 0;text-align:center}
.clients .headrow{text-align:center}

/* ── Footer ──────────────────────────────────────────────── */
.footer{
  position:relative;background:var(--ink);color:#fff;border-radius:2.4rem;
  margin:0 2rem 2rem;padding:8rem 0 3rem;overflow:hidden;
}
.footer .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,rgba(19,19,22,0),rgba(19,19,22,.72));pointer-events:none}
.footer .wrap{position:relative;z-index:1}
.footer .calside{display:grid;gap:1.6rem;justify-items:start}
.footer .calcard{background:var(--bg);border-radius:2.4rem;overflow:hidden;width:44rem;max-width:100%;box-shadow:var(--shadow-hover)}
.footer .calcard .label{color:var(--muted);padding:2.4rem 2.4rem 1.2rem}
.footer .calcard iframe{display:block;width:100%;height:50rem;border:0}
.footer .btnbare{color:#fff}
.footer .btnbare:focus-visible{outline-color:#fff}
.footer .finemark{display:inline-flex;align-items:center;gap:1rem}
.footer .finemark .mark{width:2rem;height:2rem;opacity:.6}
.footer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:4rem;flex-wrap:wrap}
.footer .h2{color:#fff;max-width:64rem}
.footer .lede{color:rgba(255,255,255,.6);max-width:52rem;margin-top:2rem}
.footer .cols{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  border-top:1px solid rgba(255,255,255,.14);padding-top:3rem;margin-top:6rem;
  max-width:52rem;
}
.footer .cols .label{color:rgba(255,255,255,.7);margin-bottom:1.6rem}
.footer .cols a{font-size:1.4rem;margin-right:2.4rem;opacity:.85}
.footer .cols a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.footer .fine{
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:3rem;
  margin-top:6rem;font-size:1.2rem;color:rgba(255,255,255,.8);
}
@media(max-width:767px){.footer{margin:0 1rem 1rem}.footer .cols a,.footer .btnbare{display:inline-flex;align-items:center;min-height:4.4rem}.footer .calcard{width:100%}.footer .calcard iframe{height:48rem}.footer .cols{grid-template-columns:1fr}}

/* ── Entrances ───────────────────────────────────────────── */
/* Entrances live in motion.js (GSAP + ScrollTrigger). CSS holds only the
   hidden start state so nothing flashes before JS, and the no-JS fallback. */
.reveal{opacity:0}
.reveal.-in{opacity:1}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .btn .rip i,.btn .roll s,.btnbare .roll s,.btnbare svg,.pillar,.pillar .body,.piece .art,.scrim{transition:none!important;animation:none!important}
  .clients .track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .flip,.pillar::before,.pillar::after{transition:none!important}
  .flipwrap:hover .flip{transform:none}
  .idxrow::before,.pillar::before{transform:scaleX(1);transition:none}
  .pullrow::before{opacity:.3;transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .display .line{clip-path:none;transform:none}
  .pname{color:var(--ink);-webkit-text-stroke:0;background:none}
  .corona{display:none}
  .phaseline i,.phasetexts p,.eclipse{transition:none!important}
  body{transition:none}
  .idxrow.-hide{transition:none!important}
  .clients .set[aria-hidden]{display:none}
  .clients .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ══ Subpages — project template + works index ═══════════════ */

/* Subpage hero */
.phero{padding:14rem 0 0}
.phero .h1{font-size:5.6rem;line-height:1.05;letter-spacing:-.03em;margin-top:3.2rem;max-width:24ch;text-wrap:balance}   /* H1 = Body × 1.333⁴; balanced so a two-line title splits evenly */
.phero .lede{max-width:120rem;margin-top:2rem;text-wrap:balance}
@media(max-width:767px){.phero .lede{text-wrap:pretty}}
.phero .metaline{font-size:1.4rem;color:var(--muted);margin-top:2rem}
.phero .actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:4rem}
.pmedia{position:relative;border:1px solid var(--line);border-radius:2.4rem;overflow:hidden;aspect-ratio:16/10;background:var(--fill)}
.phero .pmedia{margin-top:6.4rem}   /* only the hero's well carries a top margin; in the case-study flow the 20rem row gap is the rhythm (audit, 7 Sep: a free-standing well sat 280px below its chapter) */
.pmedia img,.pmedia video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pmedia.-square{aspect-ratio:1;width:min(100%,96rem);justify-self:center;margin-inline:auto}
.pmedia.-fourthree{aspect-ratio:4/3}   /* for 4:3 films the 16:10 well would crop (Resi4Rent's mobile collage) */

/* Meta row */
.pmeta{padding-block:12rem}
.metarow{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem;margin:0;padding:3.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}   /* Role · Scope · Development as one hairline row — cards were chrome for three short facts (audit, 7 Sep) */
.metarow>div{display:grid;gap:.8rem;align-content:start;min-width:0}
.metarow dd{margin:0;line-height:1.6}
/* Case study flow */
.casestudy{padding-block:0 16rem}   /* the meta row's own 12rem padding is the gap on both sides */
.flow{display:grid;grid-template-columns:minmax(0,1fr);row-gap:20rem}   /* minmax(0) — a wide child must never grow the column past the wrap */
@media(min-width:768px){
  .flow{grid-template-columns:8rem 1fr;column-gap:4rem}
  .flow>*{grid-column:2}
  .flow .rail{grid-column:1;grid-row:1/-1;position:sticky;top:14rem;align-self:start;display:grid;gap:1.6rem;align-content:start}
}
@media(max-width:767px){.rail{display:none}}
.rail a{font-family:var(--accent);font-style:italic;font-size:1.8rem;line-height:1;color:var(--muted);opacity:1;display:flex;align-items:center;gap:1rem;transition:opacity .3s,color .3s}
.rail a::before{content:"";width:1.6rem;height:1px;background:currentColor;transition:width .3s var(--ease-out)}
.rail a.-on{opacity:1;color:var(--ink)}
.rail a.-on::before{width:3.2rem}
.rail a:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px;border-radius:.4rem}
.chapter{display:grid;gap:6rem}
.chaphead{display:flex;align-items:baseline;gap:2rem;max-width:104rem}
.chaphead .h2{max-width:26ch}   /* ~2 lines at 42px; balance fills them evenly (no 1–2 word orphans) */
.chaphead .ghostno{flex:none}
.chaphead .h2{text-wrap:balance}
.prose{max-width:58ch;display:grid;gap:2rem;text-wrap:pretty}   /* no one-word last lines (8 Sep) */   /* the reading measure is a character count, never a container width. 58ch of Figtree ≈ 666px ≈ 70 characters a line (its "0" is wide: 65ch measured 76–84) */

/* ── Case-study layout system (7 Sep 2026) ────────────────────
   One 12-column grid, three section types, so a page has rhythm instead
   of a stack of 50/50 splits:
   1 · FULL-BLEED  — .pmedia / a full-width .figwell straight in the flow.
   2 · NARRATIVE   — .cs: text spans 5 columns and STICKS while the media
                     column (7) scrolls past it; media may be one well or a
                     .stack of several. No dead space under the text.
   3 · DEEP-DIVE   — .chapter.-center: centred head and a centred 58ch
                     narrative, then a multi-column grid (stats, terms,
                     takeaways).
   Phones and tablets: everything spans 12 and stacks; nothing sticks. */
.cs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3.2rem}
.cs>*{grid-column:span 12}
.cs .stack{display:grid;gap:2.4rem;align-content:start}
.cs .stack .figwell,.cs .stack .pmedia{margin:0}
@media(min-width:1200px){   /* 5/7 from 1200, not 1024: at 1024 the 5-column text measured 40 characters a line — a ribbon */
  .cs{gap:4.8rem}
  .cs .text{grid-column:span 5;position:sticky;top:11.2rem;align-self:start}
  .cs .media{grid-column:span 7;position:sticky;top:11.2rem;align-self:start}   /* both columns stick: whichever is shorter holds while the taller one scrolls — no dead space under either */
  .cs.-mediafirst .media{order:-1}
}
.chapter.-center .chaphead{flex-direction:column;align-items:center;gap:1.2rem;text-align:center;margin-inline:auto;max-width:88rem}
.chapter.-center>.prose{margin-inline:auto;width:100%;max-width:58ch}
.chapter.-center>.stats,.chapter.-center>.terms{width:100%}
/* Mobile-only clamp: scoped in CSS so a widened window never keeps it */
.readmore{display:none}
@media(max-width:767px){
  .prose.-clamped{overflow:hidden;position:relative}
  .prose.-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5rem;background:linear-gradient(180deg,rgba(254,254,253,0),var(--bg))}
  .prose.-clamped{max-height:calc(4 * 1.6 * 1.6rem)}
  .readmore{all:unset;display:inline-flex;align-items:center;gap:.8rem;margin-top:-2rem;justify-self:start;width:max-content;min-height:4.4rem;font-family:var(--sans);font-size:1.4rem;font-weight:500;line-height:1.2;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--ink);padding-bottom:.2rem}
  .readmore:focus-visible{outline:2px solid var(--flat-accent);outline-offset:4px}
  .readmore .roll{display:block;height:1.3em;overflow:hidden}
  .readmore .roll s{display:block;text-decoration:none}
}
.figwell{border:1px solid var(--line);border-radius:2.4rem;overflow:hidden;background:var(--fill);margin:0}
.figwell img,.figwell video{width:100%;height:auto;display:block}
.figwell.-lottie{position:relative;aspect-ratio:4/5;background:var(--fill)}
.figwell.-lottie.-landscape{aspect-ratio:4/3}
.figwell.-badged{position:relative}
.figbadge{position:absolute;left:2rem;bottom:2rem;display:grid;gap:.4rem;padding:2rem 2.4rem;border-radius:1.6rem;background:var(--grad-butter);box-shadow:var(--shadow-hover)}
.figbadge .num{font-family:var(--accent);font-style:italic;font-weight:400;font-size:4.2rem;line-height:.9}
.figbadge .lab{font-size:1.4rem;color:var(--ink);opacity:.7;line-height:1.2}

/* Pull-quote row — collapsed to a slim ruled strip; hover/tap unfolds the
   quote. The sanctioned full-accent moment, now claiming no space at rest. */
.pullrow{position:relative;overflow-x:clip;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pullrow::before{content:"";position:absolute;left:50%;top:60%;width:64rem;height:36rem;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,#F6EEF7 0%,#C9A0DC 38%,rgba(255,217,160,.55) 72%,rgba(255,217,160,0) 100%);
  filter:blur(40px);opacity:0;transition:opacity .8s var(--ease-out)}
.pullrow:hover::before,.pullrow.-open::before{opacity:.3}
.pullrow>.qmark,.pullrow .qbody{position:relative;z-index:1}
.pullrow>.qmark{display:flex;align-items:center;justify-content:center;padding:2.4rem 0}
.qdisc{display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:50%;background:var(--grad-accent);color:var(--ink)}
.qdisc svg{width:1.7rem;height:auto;display:block}   /* Luke's quote mark (8 Sep), 228.848×180 — ~40% of the disc, optically centred */
.qbody{overflow:hidden}   /* the quote is always unfolded (audit, 7 Sep: hover-only content was never seen by a reader who scrolls); the orb still blooms on hover */
.qbody p{font-family:var(--accent);font-style:italic;font-weight:400;font-size:4.2rem;line-height:1.1;letter-spacing:-.03em;text-align:center;max-width:104rem;margin:0 auto;padding:2rem 4rem 6rem;text-wrap:balance}
@media(max-width:767px){
  .pullrow::before{opacity:.3;width:40rem;height:26rem}
  .qbody p{font-size:3.2rem;padding:1rem 2rem 4rem}
}

/* Statement block — one centred declaration per page, ≤1 accent word */
.bigsay{font-size:3.2rem;font-weight:300;line-height:1.25;letter-spacing:-.02em;text-align:center;max-width:72rem;margin:0 auto;text-wrap:balance}   /* Statement = Body × 1.333² — one step under H2, never the H2 size (Luke, 5 Sep) */

/* Phase line — three eclipse phases on one rule; click/hover swaps the text */
.phases{display:grid;gap:4rem;position:relative}
.phaseline{position:relative;height:1px;background:var(--line);margin:0 16.666%;top:3.5rem}
.phaseline i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.phases[data-phase="1"] .phaseline i{transform:scaleX(.5)}
.phases[data-phase="2"] .phaseline i{transform:scaleX(1)}
.phasenodes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:-4rem}
.phase{all:unset;display:grid;justify-items:center;gap:.8rem;cursor:pointer;padding:1rem;border-radius:1.6rem;text-align:center}
.phase:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px}
.eclipse{position:relative;width:7rem;height:7rem;border-radius:50%;background:var(--grad-butter);overflow:hidden;box-shadow:0 0 0 .6rem var(--bg);transition:box-shadow .5s var(--ease-out)}
.eclipse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink)}
.eclipse.-early::after{transform:translateX(-45%)}
.eclipse.-total::after{transform:translateX(0)}
.eclipse.-return::after{transform:translateX(45%)}
.phase.-on .eclipse{box-shadow:0 0 0 .6rem var(--bg),0 0 0 .7rem var(--ink),0 0 calc(var(--glow,0) * 3.2rem) rgba(255,217,160,calc(var(--glow,0) * .9))}
.phase.-on .eclipse.-total{box-shadow:0 0 0 .6rem var(--bg),0 0 0 .7rem var(--ink),0 0 3.2rem rgba(255,217,160,.9)}
/* Corona reveal: phase names are serif italic, outline until the disc
   reaches them, then filled from the inside (--fill, motion.js). The disc
   itself is an ink eclipse with a butter corona. */
.pname{font-family:var(--accent);font-style:italic;font-weight:400;font-size:2.4rem;   /* phase names = Lede step (audit, 7 Sep) */line-height:1;color:transparent;
  -webkit-text-stroke:1.25px var(--muted);
  background:radial-gradient(circle at 50% 55%,var(--ink) var(--fill,0%),transparent calc(var(--fill,0%) + 1px));
  -webkit-background-clip:text;background-clip:text}
.psub{font-size:1.4rem;font-weight:500;color:var(--muted)}
.corona{position:absolute;top:50%;left:0;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 .5rem var(--bg),0 0 2.4rem .6rem rgba(255,217,160,.85)}
.phase .eclipse{box-shadow:0 0 0 .6rem var(--bg),0 0 calc(var(--glow,0) * 3.2rem) rgba(255,217,160,calc(var(--glow,0) * .9))}
.phasetexts{display:grid;max-width:72rem;justify-self:center;text-align:center}
.ptext{display:none}
.phasetexts p{grid-area:1/1;font-size:2.4rem;line-height:1.35;letter-spacing:-.01em;color:var(--muted);opacity:0;transform:translateY(1rem);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);pointer-events:none}
.phasetexts p.-on{opacity:1;transform:none}
@media(max-width:767px){
  .phaseline,.phasetexts{display:none}
  .pname{color:var(--ink);-webkit-text-stroke:0;background:none;font-size:2.4rem}
  .phasenodes{grid-template-columns:1fr;gap:3.2rem;margin-top:0;position:relative}
  .phasenodes::before{content:"";position:absolute;left:2.5rem;top:2.5rem;bottom:2.5rem;width:1px;background:var(--line)}
  .phase{grid-template-columns:5rem 1fr;column-gap:2rem;justify-items:start;text-align:left;align-items:start;padding:0;row-gap:.4rem}
  .eclipse{width:5rem;height:5rem;grid-row:1/4}
  .pname{color:var(--ink)}
  .ptext{display:block;color:var(--muted);margin-top:.4rem}
}
.stats.-three{grid-template-columns:repeat(3,1fr)}   /* a three-figure research row */

/* Term cards */
.terms{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.term{border:1px solid var(--line);border-radius:1.6rem;padding:3.2rem;background:var(--bg);min-width:0}
.term h3{font-size:2.4rem;font-weight:300;letter-spacing:-.015em;line-height:1.15}
.term p{color:var(--muted);margin-top:1rem}
.terms.-four{grid-template-columns:repeat(4,1fr)}
.terms.-four .term{display:grid;gap:1.6rem;align-content:start}
.terms.-four .ghostno{font-size:2.4rem}
@media(max-width:767px){.terms.-four{grid-template-columns:1fr 1fr}.terms.-four .term{padding:2.4rem 2rem}}

/* Results strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{display:grid;gap:1rem;align-content:start;border:1px solid var(--line);border-radius:1.6rem;padding:3.2rem;background:var(--bg)}
.stat .num{font-family:var(--accent);font-style:italic;font-weight:400;font-size:5.6rem;line-height:.9}   /* = H1 step */
.stat .lab{font-size:1.4rem;color:var(--muted);line-height:1.35}

/* Prev / next pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.pagercard{position:relative;display:grid;gap:1.6rem;align-content:start;border:1px solid var(--line);border-radius:2.4rem;padding:4rem;background:var(--bg);transition:box-shadow .3s}
/* next card: label / title · arrow / preview — the arrow is a grid item beside
   the title, not an absolutely placed float (it used to hang mid-card) */
.pagercard.-next{background:var(--grad-butter);border-color:transparent;grid-template-columns:1fr 22rem;column-gap:2rem;align-items:center}
.pagercard.-next>.label,.pagercard.-next>h3{grid-column:1}
.pagercard.-next .pwell{grid-column:2;grid-row:1/4;position:relative;aspect-ratio:16/10;border-radius:1.6rem;overflow:hidden;background:var(--bg)}
.pagercard:hover{box-shadow:var(--shadow-hover)}
.pagercard h3{font-size:2.4rem;font-weight:300;letter-spacing:-.015em;line-height:1.15}
.pagercard .disc{grid-column:1;grid-row:3;justify-self:start;margin-top:.4rem;display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:50%;background:var(--grad-accent);opacity:0;transform:translateX(-1rem);transition:opacity .3s,transform .3s}
.pagercard:hover .disc{opacity:1;transform:none}
.pagercard:focus-visible{outline:2px solid var(--flat-accent);outline-offset:4px}

/* Works index */
.indexlist{position:relative;padding-block:12rem 16rem}
.filters{display:flex;gap:1rem;flex-wrap:wrap;margin-top:4rem}
.filterpill{height:4rem;padding:0 2.4rem;border-radius:999px;border:1px solid var(--line);background:transparent;font-family:var(--sans);font-size:1.4rem;font-weight:500;line-height:1.2;color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s}
.filterpill:hover{background:var(--fill)}
.filterpill.-on{background:var(--grad-accent);border-color:transparent}
.filterpill:focus-visible{outline:2px solid var(--flat-accent);outline-offset:2px}
@media(max-width:767px){.filterpill{height:4.4rem}}
.idxrows{display:grid}
.idxrow{display:grid;grid-template-columns:8rem 1fr auto;align-items:baseline;gap:2rem;padding:3.2rem 0;position:relative}
.idxrow::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
.idxrow.-in::before{transform:scaleX(1)}
.idxrow.-hide{opacity:0!important;transform:translateY(1rem)!important;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)!important}
.idxrow:last-child{border-bottom:1px solid var(--line)}
.idxno{font-family:var(--accent);font-style:italic;font-weight:400;font-size:2rem;color:var(--muted);opacity:.45}
.idxmain{display:grid;gap:.4rem}
.idxtitle{font-size:4.2rem;line-height:1.1;letter-spacing:-.025em;font-weight:300;transition:transform .3s}
.idxrow:hover .idxtitle{transform:translateX(2rem)}
.idxrow:not([href]){cursor:default}
.idxrow:not([href]):hover .idxtitle{transform:none}
.idxrow:not([href]) .idxside::after{content:"Soon";font-size:1.4rem;color:var(--muted)}
.idxdesc{font-size:1.4rem;color:var(--muted);max-width:52rem}
.idxside{display:grid;gap:.4rem;justify-items:end}
.idxcat{font-size:1.4rem;font-weight:500;color:var(--muted)}
.idxyear{font-size:1.4rem;color:var(--muted)}
.idxpreview{position:fixed;left:0;top:0;z-index:40;width:36rem;aspect-ratio:16/10;border-radius:1.6rem;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-hover);pointer-events:none;opacity:0;transition:opacity .3s;background:var(--bg)}
.idxpreview.-on{opacity:1}
.idxpreview img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:767px){
  .phero{padding-top:12rem}
  .metarow,.terms,.pager{grid-template-columns:1fr}
  .metarow{gap:2.4rem}
  .pagercard.-next{grid-template-columns:1fr}
  .pagercard .disc,.pagercard.-next .pwell{display:none}   /* phones: no hover, so no hover-only arrow and no hover-only preview well — label + title only */
  .stats{grid-template-columns:1fr 1fr}
  .stats.-three{grid-template-columns:1fr}   /* an odd count never orphans a card */
  .flow{row-gap:12rem}.chapter{gap:4rem}   /* inside-chapter gap follows the chapter gap down (audit, 7 Sep) */
  .chaphead{flex-direction:column;gap:1rem}
  .idxrow{grid-template-columns:4rem 1fr auto;padding:2rem 0}
  .idxtitle{font-size:2.8rem}
  .idxdesc{display:none}
  .idxpreview{display:none}
  .idxrow:hover .idxtitle{transform:none}
}

/* ══ Mobile type column (DESIGN-SYSTEM §3) — last in the file so it wins
   over every component rule above. Headings step down hard, body holds. ══ */
@media(max-width:767px){
  .display{font-size:4.4rem;line-height:1.06;letter-spacing:-.02em}
  .h1,.phero .h1{font-size:4.2rem;line-height:1.05;letter-spacing:-.02em}
  .h2,.chapter .h2,.footer .h2{font-size:3.2rem;line-height:1.15;letter-spacing:-.02em}
  .lede,.phero .lede,.hero .lede{font-size:2rem;line-height:1.4}
  .bigsay{font-size:2.4rem;line-height:1.3;letter-spacing:-.01em}
  .ghostno{font-size:3.2rem}
  .chaphead .ghostno{font-size:3.2rem}   /* = phone H2 */
  .stat .num,.figbadge .num{font-size:4.2rem}
  .pillar h3,.pagercard h3,.term h3{font-size:2.4rem}
  .qbody p{font-size:3.2rem;line-height:1.15}
  .idxtitle{font-size:2.8rem}
}

/* Mobile follow-ups from the UI Lead review (3 Sep 2026) */
@media(max-width:767px){
  .btnbare{min-height:4.4rem}
  .nav .btn.-sm,.menubtn{height:4.4rem}
  .figbadge{padding:1.6rem 2rem}
  .figbadge .num{font-size:3.6rem}
  .footer .calcard iframe{height:56rem}
}

/* Tablet band, late overrides (after the base rules they beat): 2×2 questions — four 126px cells cannot hold "Apartment" — and 44px rail targets (rem would be 41px at the 9.4px root). */
@media(min-width:768px) and (max-width:1023px){
  .terms.-four{grid-template-columns:1fr 1fr}
  .rail a{min-height:44px}
}