/* ============================================================================
   MEDICI ART CLUB — Elysium editorial "annual report" template
   Three poles · one grotesk at two volumes · print protocol (no shadow/radius/
   gradient) · palette-locked imagery. Every colour goes through :root tokens.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root{
  /* the three poles */
  --paper:#F0EDE8; --ink:#141414; --signal:#FF5500;
  /* derived text (never grey hexes) */
  --ink-2:rgba(20,20,20,.62);      /* secondary on paper — 4.9:1 */
  --paper-2:rgba(240,237,232,.66); /* secondary on ink — 7.3:1 */
  /* hairlines */
  --line-ink:rgba(20,20,20,.9); --line-paper:rgba(240,237,232,.35);
  --line-flag:rgba(20,20,20,.35); /* chapter hairline on orange/paper grounds */
  --scrim:rgba(20,20,20,.92);     /* ink modal scrim (v3b constellation) */
  /* type */
  --grotesk:'Schibsted Grotesk',Helvetica,Arial,sans-serif;
  --mono:'Fragment Mono','Courier New',monospace;
  /* motion */
  --ease-micro:cubic-bezier(.44,0,.56,1);  /* 0.2s hovers */
  --ease-reveal:cubic-bezier(.16,1,.3,1);  /* reveals */
  /* layout */
  --margin:16px; --gutter:16px; --max:1760px;
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}          /* guard against display resets */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.5 var(--grotesk);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4{font-weight:500}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
ul{margin:0;padding:0;list-style:none}
sup{font-size:.5em;vertical-align:super;line-height:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Layout primitives -------------------------------------------------- */
.container{width:calc(100% - 2*var(--margin));max-width:var(--max);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}

/* ---- Shared type slots -------------------------------------------------- */
.eyebrow{display:block;font:400 13px/1.4 var(--mono);letter-spacing:.04em;
  text-transform:uppercase}
.section-head{border-top:1px solid var(--line-ink);padding-top:16px}
.statement{font:500 clamp(30px,3.4vw,48px)/1.15 var(--grotesk);letter-spacing:-.03em}
.eyebrow--onink{color:var(--paper)}

/* Arrow / chevron SVG sizing */
.i{display:inline-block;flex:none}
.i-24{width:24px;height:24px}

/* ---- Reveal / motion base ---------------------------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(24px)}
html.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-reveal),transform .7s var(--ease-reveal)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:absolute;top:0;left:0;right:0;z-index:10;height:56px;display:flex;
  width:100%}
.nav__brand{background:var(--ink);color:var(--paper);flex:0 0 200px;
  display:flex;align-items:center;justify-content:center;padding:0 24px;gap:6px;
  font:500 20px/1 var(--grotesk)}
.nav__brand .ac{font:400 13px/1 var(--mono);color:var(--signal);letter-spacing:.06em;
  align-self:flex-end;padding-bottom:2px}
.nav__cta{background:var(--signal);color:var(--ink);flex:0 0 34%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:500 18px/1 var(--grotesk);min-height:56px}
.nav__cta .plus{display:inline-block;font:500 20px/1 var(--grotesk);
  transition:transform .2s var(--ease-micro)}
.nav__cta:hover .plus,.nav__cta:focus-visible .plus{transform:rotate(90deg)}
.nav__links{flex:1;background:var(--paper);display:flex;align-items:center;
  justify-content:flex-end;gap:40px;padding-right:24px}
.nav__links a{display:inline-flex;align-items:center;min-height:56px;padding:0 4px;
  font:500 18px/1 var(--grotesk)}
.nav__links a:hover{text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:2px}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;height:100svh;min-height:640px;overflow:clip;
  background:var(--paper);perspective:1200px;perspective-origin:50% 45%}
.hero__scene{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;
  will-change:transform}
.hero__collage{position:absolute;inset:0;transform-style:preserve-3d}
.cp{position:absolute;transform-style:preserve-3d}
.cp img{width:100%;height:auto;display:block}
/* placements — v5 scale-corrected grid, true wall-to-wall coverage */
.cp--01{left:1.1%;top:80.2%;width:13.96vw}
.cp--02{left:58.8%;top:60.6%;width:13.42vw}
.cp--03{left:30.3%;top:22.3%;width:15.58vw}
.cp--04{left:56.1%;top:18.4%;width:15.22vw}
.cp--05{left:41.2%;top:-0.1%;width:13.99vw}
.cp--06{left:71.6%;top:-2.2%;width:17.85vw}
.cp--07{left:85.9%;top:-1.4%;width:19.93vw}
.cp--08{left:30.4%;top:62.6%;width:20.81vw}
.cp--09{left:41.7%;top:78.9%;width:23.81vw}
.cp--10{left:85.2%;top:42.4%;width:21.62vw}
.cp--11{left:-1.1%;top:-1.0%;width:24.45vw}
.cp--12{left:14.6%;top:-3.0%;width:27.28vw}
.cp--13{left:70.3%;top:42.4%;width:14.18vw}
.cp--14{left:71.5%;top:78.7%;width:13.5vw}
.cp--15{left:27.1%;top:2.6%;width:14.55vw}
.cp--16{left:84.7%;top:59.8%;width:14.53vw}
.cp--17{left:69.8%;top:19.6%;width:15.55vw}
.cp--18{left:87.2%;top:77.3%;width:17.7vw}
.cp--19{left:-1.6%;top:39.4%;width:17.3vw}
.cp--20{left:12.7%;top:58.1%;width:19.33vw}
.cp--21{left:14.0%;top:78.7%;width:19.43vw}
.cp--22{left:69.7%;top:61.8%;width:24.13vw}
.cp--23{left:-1.8%;top:63.0%;width:26.06vw}
.cp--24{left:1.7%;top:22.1%;width:23.53vw}
.cp--25{left:28.5%;top:82.2%;width:14.36vw}
.cp--26{left:13.8%;top:22.9%;width:12.69vw}
.cp--27{left:58.3%;top:-1.3%;width:15.13vw}
.cp--28{left:16.3%;top:40.3%;width:15.9vw}
.cp--29{left:41.6%;top:58.3%;width:13.93vw}
.cp--30{left:57.3%;top:81.5%;width:14.74vw}
.cp--31{left:85.6%;top:22.5%;width:18.0vw}

/* depth wrapper owns position + engine transform; polaroid owns rotation + entrance */
.depth{position:absolute;transform-style:preserve-3d}
.depth--p2{left:8%;top:64%;z-index:2}
.polaroid{position:relative;background:var(--paper);padding:8px 8px 8px;
  --r:-2deg;transform:rotate(var(--r))}
.polaroid--1{--r:-2deg}
.polaroid--2{--r:1.5deg}
.polaroid img{display:block;width:100%}
.polaroid--2 .mat{background:var(--ink);width:190px;height:190px;
  display:flex;align-items:center;justify-content:center}
.polaroid--2 .mat img{width:96px;height:auto}

/* the rolodex, relocated from its old standalone section straight onto the
   landing view. The wordmark moved to a masthead band up top (below) to free
   dead-center for the ring — a full-size .sleeve sitting at the same z as the
   old design sat directly in front of the ring's front card and hid it
   completely, which defeats the point of moving it here. Ring rides the
   depth engine like every other hero layer via data-layer/data-z. Static on
   load — site.js module 8 keeps it inert until the visitor actually touches it. */
.hero__rolo{position:absolute;inset:0;margin:auto;z-index:2;
  width:min(60vw,760px);height:fit-content}
.hero__rolo .rolo{height:clamp(420px,58vh,620px)}

/* masthead band, pinned below the nav (nav is position:absolute, 56px tall) —
   no longer dead-center: that spot now belongs to the rolodex, and the
   wordmark law (never occluded) is easier to hold from a clear band up top
   than fighting the ring for the same pixels. */
.sleeve{position:absolute;left:0;right:0;top:96px;margin:0 auto;z-index:3;
  width:min(56vw,420px);aspect-ratio:1/0.5}
.sleeve__box{position:relative;background:var(--ink);color:var(--paper);
  width:100%;height:100%}
/* v2: the wordmark IS the hero thesis — fills the sleeve, paper on ink (15.8:1),
   readable the instant the page loads, on the front-most plane */
.sleeve__mark{position:absolute;left:20px;top:16px;right:20px;
  font:500 clamp(26px,4.4vw,54px)/.98 var(--grotesk);letter-spacing:-.04em;
  text-wrap:balance}
.sleeve__mark sup{font-size:.22em}
.sleeve__year{position:absolute;right:20px;bottom:14px;
  font:500 28px/1 var(--grotesk);letter-spacing:-.04em}

/* Hero entrance (js only; reduced-motion resets below) */
html.js .hero .cp{opacity:0;transition:opacity .8s var(--ease-reveal);
  transition-delay:var(--d,0s)}
html.js .hero.is-loaded .cp{opacity:1}
html.js .sleeve__box{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease-reveal),transform .8s var(--ease-reveal)}
html.js .hero.is-loaded .sleeve__box{opacity:1;transform:none}
html.js .polaroid{opacity:0;transform:rotate(calc(var(--r) - 4deg)) translateY(8px);
  transition:opacity .7s var(--ease-reveal),transform .7s var(--ease-reveal);
  transition-delay:.6s}
html.js .hero.is-loaded .polaroid{opacity:1;transform:rotate(var(--r))}

/* =====================================================================
   THE HOUSE POSITION (v5 — Patrons + Position merged into one dense field)
   Full-bleed floating collage, its own perspective scene, bold copy on an
   ink box riding the front-most plane. Patron names sit as a thin mono
   strip anchored to the bottom edge, over the collage.
   ===================================================================== */
.thesis{position:relative;min-height:100svh;overflow:clip;background:var(--ink);
  perspective:1300px;perspective-origin:50% 42%}
.thesis__field{position:absolute;inset:0;transform-style:preserve-3d}
.tp{position:absolute;transform-style:preserve-3d}
.tp img{width:100%;height:auto;display:block}
.tp--01{left:67.0%;top:-0.6%;width:16.08vw}
.tp--02{left:17.1%;top:72.9%;width:14.53vw}
.tp--03{left:81.6%;top:-2.8%;width:20.12vw}
.tp--04{left:-1.9%;top:-0.2%;width:18.76vw}
.tp--05{left:15.4%;top:48.4%;width:18.68vw}
.tp--06{left:84.0%;top:49.7%;width:19.96vw}
.tp--07{left:52.0%;top:2.0%;width:24.22vw}
.tp--08{left:17.7%;top:0.1%;width:20.99vw}
.tp--09{left:34.4%;top:74.4%;width:29.62vw}
.tp--10{left:81.6%;top:22.1%;width:30.56vw}
.tp--11{left:-1.2%;top:52.5%;width:16.15vw}
.tp--12{left:16.3%;top:22.4%;width:17.83vw}
.tp--13{left:67.4%;top:24.0%;width:16.8vw}
.tp--14{left:68.5%;top:51.5%;width:16.68vw}
/* v6: no backing panel — the copy floats directly over the collage. Legibility
   comes from a layered pseudo-3D text-shadow (crisp extrusion + soft pop),
   not a flat card, per owner direction ("big letters in front of the images"). */
.thesis__box{position:relative;z-index:2;max-width:min(640px,84vw);
  margin:0 auto;padding:64px var(--margin) 220px;color:var(--paper);
  text-align:left}
.thesis__box .eyebrow{margin-bottom:20px;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.thesis__h{font:500 clamp(40px,7vw,84px)/.98 var(--grotesk);letter-spacing:-.04em;
  text-wrap:balance;
  text-shadow:0 1px 0 #000,0 2px 0 #000,0 3px 0 #000,0 4px 0 #000,
    0 6px 16px rgba(0,0,0,.85),0 14px 34px rgba(0,0,0,.6)}
.thesis__sub{margin-top:24px;font:400 18px/1.5 var(--grotesk);color:var(--paper);
  max-width:52ch;text-shadow:0 1px 0 #000,0 2px 8px rgba(0,0,0,.85)}
.thesis__patrons{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;
  padding:20px var(--margin);background:rgba(20,20,20,.82);
  border-top:1px solid var(--line-paper)}
.thesis__patrons span{font:400 13px/1.4 var(--mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--paper-2)}

/* =====================================================================
   LEDGER BAND (full-bleed pair)
   ===================================================================== */
.ledger{display:grid;grid-template-columns:66% 34%;height:min(72vh,700px);
  perspective:1400px;overflow:clip}
.ledger__frame{overflow:clip;height:100%;transform-style:preserve-3d}
.ledger__img{width:100%;height:100%;object-fit:cover;display:block}
.ledger__panels{display:grid;grid-template-rows:1fr 1fr}
.stat-panel{padding:40px;display:flex;flex-direction:column;align-items:flex-start}
.stat-panel--orange{background:var(--signal);color:var(--ink)}
.stat-panel--ink{background:var(--ink);color:var(--paper)}
.stat-panel .num{font:500 clamp(56px,5.9vw,85px)/1 var(--grotesk);letter-spacing:-.04em}
.stat-panel .cap{margin-top:16px;font:400 16px/1.5 var(--grotesk);max-width:22ch}
.stat-panel--ink .cap{color:var(--paper-2)}

/* =====================================================================
   MISSION (v5 — dense collage field, copy on a paper box)
   ===================================================================== */
.mission{position:relative;min-height:100svh;overflow:clip;background:var(--ink);
  perspective:1300px;perspective-origin:50% 46%;display:flex;align-items:center;
  justify-content:center}
.mission__field{position:absolute;inset:0;transform-style:preserve-3d}
.mp{position:absolute;transform-style:preserve-3d}
.mp img{width:100%;height:auto;display:block}
.mp--01{left:1.9%;top:75.0%;width:13.88vw}
.mp--02{left:17.6%;top:49.2%;width:14.82vw}
.mp--03{left:64.8%;top:49.2%;width:16.09vw}
.mp--04{left:18.5%;top:74.2%;width:20.46vw}
.mp--05{left:1.9%;top:48.7%;width:23.1vw}
.mp--06{left:31.7%;top:74.8%;width:22.87vw}
.mp--07{left:17.8%;top:1.1%;width:20.61vw}
.mp--08{left:48.7%;top:73.9%;width:26.7vw}
.mp--09{left:17.0%;top:22.5%;width:26.28vw}
.mp--10{left:65.8%;top:0.4%;width:31.88vw}
.mp--11{left:48.4%;top:2.4%;width:16.56vw}
.mp--12{left:67.8%;top:75.3%;width:15.71vw}
/* v6: no backing card — paper text floats directly over the collage, same
   pseudo-3D shadow treatment as the House Position band for legibility. */
.mission__box{position:relative;z-index:2;max-width:min(560px,86vw);
  margin:96px auto;padding:44px var(--margin);color:var(--paper)}
.mission__intro{font:500 26px/1.4 var(--grotesk);letter-spacing:-.02em;
  text-shadow:0 1px 0 #000,0 2px 0 #000,0 3px 0 #000,
    0 5px 14px rgba(0,0,0,.85),0 12px 28px rgba(0,0,0,.6)}
.mission__box p{margin-top:28px;max-width:44ch;text-shadow:0 1px 0 #000,0 2px 8px rgba(0,0,0,.85)}
.mission__link{display:inline-flex;align-items:center;min-height:44px;margin-top:40px;
  font:500 18px/1 var(--grotesk);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-shadow:0 1px 0 #000,0 2px 8px rgba(0,0,0,.85)}
.mission__link:hover{text-decoration-thickness:2px}

/* =====================================================================
   VOICE (quote band, full-bleed split)
   ===================================================================== */
.voice{display:grid;grid-template-columns:41% 59%;min-height:560px;
  perspective:1400px;overflow:clip}
.voice__ink{background:var(--ink);color:var(--paper);padding:48px;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  overflow:clip;transform-style:preserve-3d}
/* the hound, full-bleed — was a 96px badge, now fills the whole block */
.voice__dog{position:absolute;inset:0;margin:0;z-index:0;transform-style:preserve-3d}
.voice__dog img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8}
.voice__quotemark{position:absolute;left:48px;top:24px;z-index:1;
  font:500 96px/1 var(--grotesk);color:var(--paper);
  text-shadow:0 1px 0 #000,0 2px 0 #000,0 3px 0 #000,0 4px 10px rgba(0,0,0,.85)}
.voice__by{position:relative;z-index:1;display:flex;flex-direction:column;gap:24px}
.voice__lyr{display:flex;align-items:center;width:100%}
.voice__by .name{font:500 16px/1.3 var(--grotesk);color:var(--paper);
  text-shadow:0 1px 0 #000,0 2px 0 #000,0 3px 8px rgba(0,0,0,.85)}
.voice__by .role{font:400 13px/1.4 var(--mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--paper-2);margin-top:6px;
  text-shadow:0 1px 0 #000,0 2px 6px rgba(0,0,0,.85)}
.voice__signal{background:var(--signal);color:var(--ink);padding:64px 56px;
  display:flex;align-items:center}
.voice__quote{font:500 clamp(30px,3.4vw,48px)/1.15 var(--grotesk);letter-spacing:-.03em;
  max-width:20ch}

/* =====================================================================
   CHAPTERS (×3) — the core; grounds rotate
   ===================================================================== */
.chapter{min-height:100vh;padding-bottom:96px;border-top:1px solid var(--line-flag);
  perspective:1500px;overflow:clip}
.chapter__grid{min-height:calc(100vh - 96px);align-items:stretch;padding-top:0;
  transform-style:preserve-3d}
.chapter__rail{grid-column:1/6;display:flex;flex-direction:column;min-height:100%;
  transform-style:preserve-3d}
.chapter__mark{margin-top:40px}
.chapter__num,.chapter__name{display:block;
  font:500 clamp(40px,5.6vw,80px)/.95 var(--grotesk);letter-spacing:-.04em}
.chapter__plate{margin-top:auto;width:min(40vw,577px);align-self:flex-start}
.chapter__plate img{width:100%;height:auto;display:block}
.chapter__body{grid-column:6/13;margin-top:48px}
.chapter__sub{font:500 26px/1.4 var(--grotesk);letter-spacing:-.02em;max-width:20ch}
.chapter__lede{margin-top:28px;max-width:456px;font:400 18px/1.5 var(--grotesk)}
.chapter__listlabel{margin-top:64px}
.chapter__list{margin-top:12px;max-width:456px}
.chapter__cta{margin-top:32px}

/* per-chapter palettes */
.chapter--works{background:var(--signal);color:var(--ink)}
.chapter--craft{background:var(--ink);color:var(--paper);border-top-color:var(--line-paper)}

/* Hairline list rows */
.hrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:48px;padding:14px 0;font:500 18px/1.3 var(--grotesk);
  border-bottom:1px solid var(--line-flag)}
.hrow .i{transition:transform .2s var(--ease-micro)}
.hrow:hover .i{transform:translateX(6px)}
.chapter--craft .hrow{border-bottom-color:var(--line-paper)}
/* "link row" variant: border-top */
.hrow--link{border-bottom:0;border-top:1px solid var(--line-ink)}

/* CTA bar */
.cta-bar{display:flex;align-items:center;justify-content:space-between;
  height:80px;padding:0 24px;width:100%;
  font:500 18px/1 var(--grotesk)}
.cta-bar .i{transition:transform .25s var(--ease-micro)}
.cta-bar:hover .i,.cta-bar:focus-visible .i{transform:translateX(8px)}
.cta-bar--ink{background:var(--ink);color:var(--paper)}
.cta-bar--signal{background:var(--signal);color:var(--ink)}

/* =====================================================================
   THE COLLECTION — v7 hardened collage wall (ink ground, real Art Hub pieces)
   Section is a 3D scene: perspective + scroll-following origin (JS).
   v7: pieces went from a tall in-flow grid to an absolute-positioned collage
   stage (same technique as the hero .cp field) — all 43 plates packed onto
   one short stage, deliberately overlapping corner-to-corner with only small
   gaps to the Webb backdrop, instead of one sparse row every screen-height.
   Scroll through this section dropped from many screens to under two.
   ===================================================================== */
.collection{position:relative;background:var(--ink);color:var(--paper);padding:96px 0 120px;
  perspective:1100px;overflow:clip}
.collection__inner{position:relative;z-index:1;transform-style:preserve-3d}
/* real Webb Space Telescope backdrop — sits deeper than the wall's own z-range
   (−850 max) so it always reads behind every piece; scale-corrected widths per
   the standard formula (target / ((p−z)/p)) so intended coverage holds on screen */
.collection__bg{position:absolute;inset:0;transform-style:preserve-3d;z-index:0}
.cbg{position:absolute;transform-style:preserve-3d}
.cbg img{width:100%;height:auto;display:block}
/* v7: the stage got short, so these were landing behind the headline (white
   type over a bright nebula = unreadable). Kept clear of the top-left title
   block; they now only ever show through the gaps in the collage. */
.cbg--01{left:40%;top:13%;width:31.72vw}
.cbg--02{left:68%;top:41%;width:22.0vw}
.cbg--03{left:3%;top:52%;width:34.31vw}
.cbg--04{left:50%;top:73%;width:24.91vw}
.collection .section-head{border-top-color:var(--line-paper)}
.collection__title{font:500 clamp(30px,3.4vw,48px)/1.15 var(--grotesk);
  letter-spacing:-.03em;max-width:16ch;margin-top:24px}
.collection__sub{margin-top:16px;font:400 18px/1.5 var(--grotesk);
  color:var(--paper-2);max-width:44ch}
/* the collage stage: fixed-height relative box, tiles are absolute children
   placed by --l/--t/--w (percent/vw, baked at authoring time). Height is a
   deliberately short multiple of viewport height — this is what makes the
   scroll short: the wall no longer grows with piece count, it density-packs. */
/* v7b: Luke — section read too short, tiles read bunched instead of spread.
   Height +40% (150vh->210vh); repacked as an 8-row brick stagger (alternating
   5/6 cols) instead of a jittered-grid that banded into visible clusters, so
   coverage now reaches every edge, not just a dense mid-band. */
/* margin-top raised from 72px: row-0 tiles were intruding on the subhead —
   the parallax engine's scroll-driven drift shifts tiles vertically on top
   of their authored position, so static clearance needs real headroom, not
   just enough to clear the text at rest. */
.wall{position:relative;margin-top:180px;height:210vh;transform-style:preserve-3d}
.wall__piece{position:absolute;left:var(--l);top:var(--t);width:var(--w);
  transform-style:preserve-3d}
/* the paper mat IS the frame — print protocol, no border/shadow/radius.
   A hairline-thin mat is what separates one overlapping plate from the next. */
.frame{position:relative;background:var(--paper);color:var(--ink);
  padding:6px}
.frame img,.frame video{width:100%;height:auto;display:block}

/* =====================================================================
   BREATHE (v7) — five water studies that wake as you reach them
   Same [data-ambient] governor as the rolodex: each plate
   holds its poster until it is ≥25% on screen, then plays, then settles.
   The five sit on their own z-planes so the row has real depth on scroll;
   reduced motion flattens the planes and the governor never starts them.
   ===================================================================== */
.breathe{position:relative;background:var(--ink);color:var(--paper);
  padding:96px 0 112px;perspective:1300px;overflow:clip}
.breathe__head{margin-bottom:64px}
.breathe__head .section-head{border-top-color:var(--line-paper)}
.breathe__h{margin-top:24px;max-width:18ch}
.breathe__sub{margin-top:16px;font:400 18px/1.5 var(--grotesk);
  color:var(--paper-2);max-width:56ch}
/* the row: five portrait plates, deliberately uneven so it reads as a held
   breath rather than a filmstrip. Paper mat per print protocol. */
.breathe__row{display:flex;justify-content:center;align-items:center;
  gap:clamp(12px,1.6vw,28px);padding:0 var(--margin);
  transform-style:preserve-3d}
.br{position:relative;flex:0 0 auto;width:clamp(150px,16vw,240px);
  background:var(--paper);padding:8px;transform-style:preserve-3d}
.br video{width:100%;height:auto;display:block;background:var(--ink)}
/* the uneven settle — each plate sits at its own height */
.br--01{margin-top:56px}
.br--02{margin-top:-32px}
.br--03{margin-top:24px}
.br--04{margin-top:-56px}
.br--05{margin-top:40px}

/* =====================================================================
   THE ROLODEX (v4) — a 3D rolodex of living portrait studies, relocated
   onto the hero landing view (was its own "Portraits" section).
   Seventeen cards stand on a real CSS cylinder; the ring turns on drag, wheel,
   arrows or by itself once touched. Only the front card plays (JS governs).
   Reduced motion collapses the ring to a flat scroll-snap rail — still every
   face, still real.
   ===================================================================== */
.rolo{position:relative;height:clamp(420px,60vh,640px);
  perspective:1500px;perspective-origin:50% 46%;touch-action:pan-y;cursor:grab}
.rolo.is-drag{cursor:grabbing}
.rolo__ring{position:absolute;inset:0;margin:0;padding:0;list-style:none;
  transform-style:preserve-3d;will-change:transform}
.rolo__card{position:absolute;left:50%;top:50%;margin:0;
  width:clamp(210px,20vw,300px);aspect-ratio:49/64;
  transform-style:preserve-3d;background:var(--paper);padding:10px;
  /* cards face outward, so the far half of the ring turns its back — cull it
     or the rear studies ghost through the front one */
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rolo__vid{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
/* the front card earns its weight; the rest recede */
.rolo__card{opacity:.42;transition:opacity .35s var(--ease-micro)}
.rolo__card.is-front{opacity:1}

.rolo__controls{position:absolute;left:0;right:0;bottom:-8px;z-index:3;
  display:flex;justify-content:center;gap:12px}
.rolo__btn{width:56px;height:56px;display:flex;align-items:center;
  justify-content:center;background:var(--ink);color:var(--paper);
  border:1px solid var(--line-paper)}
.rolo__btn:hover{background:var(--paper);color:var(--ink)}
.rolo__btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

@media (max-width:900px){
  .rolo{height:clamp(380px,54vh,520px);perspective:1100px}
  .rolo__card{width:clamp(180px,44vw,240px)}
}
/* JS-off and reduced-motion: no cylinder — a flat, snapping rail of every face */
html:not(.js) .rolo,
html:not(.js) .rolo__ring{position:static;height:auto;perspective:none}
html:not(.js) .rolo__ring{display:flex;gap:var(--gutter);overflow-x:auto;
  padding:0 var(--margin) 8px;scroll-snap-type:x mandatory}
html:not(.js) .rolo__card{position:static;flex:0 0 clamp(200px,42vw,280px);
  opacity:1;scroll-snap-align:center}
html:not(.js) .rolo__controls{display:none}
@media (prefers-reduced-motion:reduce){
  .rolo,.rolo__ring{position:static;height:auto;perspective:none;
    transform:none!important}
  .rolo__ring{display:flex;gap:var(--gutter);overflow-x:auto;
    padding:0 var(--margin) 8px;scroll-snap-type:x mandatory}
  .rolo__card{position:static;flex:0 0 clamp(200px,42vw,280px);opacity:1;
    transform:none!important;scroll-snap-align:center}
  .rolo__controls{position:static;margin-top:20px}
}

/* =====================================================================
   TABLE (newsletter) — the one centered section
   ===================================================================== */
.table{background:var(--ink);color:var(--paper);padding:160px var(--margin);
  text-align:center}
.table__inner{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;
  align-items:center}
.table__h{font:500 clamp(34px,3.75vw,54px)/1.1 var(--grotesk);letter-spacing:-.03em}
.table__sub{margin-top:20px;font:400 18px/1.5 var(--grotesk);color:var(--paper-2);
  max-width:46ch}
.table__form{display:flex;gap:0;width:min(664px,100%);margin-top:40px}
.table__form input{flex:1;height:60px;padding:0 24px;background:var(--paper);
  color:var(--ink);border:0;font:400 18px/1 var(--grotesk)}
.table__form input::placeholder{color:var(--ink-2)}
.table__submit{flex:0 0 124px;height:60px;background:var(--signal);color:var(--ink);
  font:500 18px/1 var(--grotesk);display:flex;align-items:center;justify-content:center}
.table__submit .lbl{transition:transform .2s var(--ease-micro)}
.table__submit:hover .lbl{transform:translateX(4px)}
.table__done{margin-top:40px;font:400 13px/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--paper)}
.table__legal{margin-top:40px;font:400 14px/1.5 var(--grotesk);color:var(--paper-2)}
.table__legal a{text-decoration:underline;text-underline-offset:2px;
  padding-block:13px}  /* invisible hit-area extension: 18px text → 44px target */

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--ink);color:var(--paper);padding:0 0 40px;
  perspective:1300px;overflow:clip}
.footer__scene{transform-style:preserve-3d}
.footer__ledger{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-paper);border-bottom:1px solid var(--line-paper)}
.footer__cell{padding:24px;border-left:1px solid var(--line-paper)}
.footer__cell:first-child{border-left:0}
.footer__cell .lg{margin-top:14px;font:500 26px/1.25 var(--grotesk);letter-spacing:-.02em}
.footer__cell .num{font:500 clamp(56px,5.9vw,85px)/1 var(--grotesk);letter-spacing:-.04em}
.footer__cell .num + .cap{margin-top:12px;font:400 16px/1.5 var(--grotesk);
  color:var(--paper-2)}
.footer__wordmark{font:500 clamp(44px,11.5vw,196px)/.95 var(--grotesk);
  letter-spacing:-.05em;white-space:nowrap;margin:96px 0 8px}
.footer__wordmark sup{font-size:.3em}
.footer__year{display:block;text-align:right;
  font:500 clamp(80px,16vw,270px)/.9 var(--grotesk);letter-spacing:-.05em}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;
  max-width:520px;margin-top:64px}
.footer__col h3{margin-bottom:16px}
.footer__col a{display:inline-flex;align-items:center;min-height:44px;
  font:500 18px/1.2 var(--grotesk)}
.footer__col li{display:block}
.footer__col a:hover{text-decoration:underline;text-underline-offset:2px}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
  margin-top:80px;padding-top:24px;border-top:1px solid var(--line-paper);
  font:400 14px/1.5 var(--grotesk);color:var(--paper-2)}
.footer__legal a{text-decoration:underline;text-underline-offset:2px}
.footer__legal .totop{display:inline-flex;align-items:center;gap:6px;
  min-height:44px;color:var(--paper)}

/* =====================================================================
   v3 — general video · the reel strip · the index
   (the Acquisitions viewports were folded into the Collection wall in v6)
   ===================================================================== */
video{display:block;width:100%;height:auto}


/* ---- The Index (v7 — the constellated forms) -------------------------
   Was a flat paper masonry appendix. Now the ledger assembles itself: the
   101 plates shrink to small uniform tiles and pack into six big geometric
   forms (wide block, square, ascending triangle, bar, column, descending
   triangle). Row-lengths in the markup ARE the silhouette, so a triangle and
   a rectangle use one mechanism. Ground flipped paper->ink so the real Webb
   night sky can sit behind them on deep z-planes for the parallax drift.
   Every plate still appears exactly once; the Constellation toggle is
   untouched (it reads constellation-data.json, never this DOM).            */
.index{position:relative;background:var(--ink);color:var(--paper);
  padding-top:72px;padding-bottom:120px;perspective:1100px;overflow:clip}
.index__inner{position:relative;z-index:1;transform-style:preserve-3d}
/* night sky — deeper than any form's z so it never crosses in front */
/* Guaranteed coverage lives HERE, on the untransformed wrapper: deep-z layers
   get pulled toward the perspective origin by the projection, so they can never
   reliably reach the section edges. The repeating star field fills the box
   exactly; the galaxy figures above it supply the parallax. Result: night sky
   wall to wall, no bare ink at any scroll position, no brown anywhere. */
.index__sky{position:absolute;inset:0;transform-style:preserve-3d;z-index:0;
  background:#0A0A12 url(../img/sky-quintet.webp) top center/100% auto repeat-y}
.sky{position:absolute;transform-style:preserve-3d}
.sky img{width:100%;height:auto;display:block}
/* v7: real night sky, wall to wall. No brown — the Carina/Pillars rust is gone;
   these are galaxies and star fields only (Stephan's Quintet, NGC 346, the
   Southern Ring, Uranus). Eight oversized tiles cover the section top to bottom
   with overlap, so no bare ink shows through at ANY scroll position. They
   composite seamlessly because Webb frames are already black at the edges.
   Drift is low and near-uniform: the sky moves as one deep plane behind the
   forms rather than racing about. */
.sky{opacity:.9}
.sky img{width:100%;height:auto;display:block}
.sky--01{left:-10%;top:-6%;width:62vw}
.sky--02{left:44%;top:-8%;width:64vw}
.sky--03{left:-12%;top:16%;width:60vw}
.sky--04{left:46%;top:20%;width:62vw}
.sky--05{left:-8%;top:40%;width:60vw}
.sky--06{left:48%;top:44%;width:58vw}
.sky--07{left:-10%;top:62%;width:64vw}
.sky--08{left:44%;top:66%;width:62vw}
.index .section-head{border-top-color:var(--line-paper)}
.index__head{margin-bottom:56px}
.index__h{margin-top:24px;max-width:18ch}
.index__sub{margin-top:16px;font:400 18px/1.5 var(--grotesk);color:var(--paper-2);
  max-width:52ch}
.index__meta{margin-top:20px;font:400 13px/1.4 var(--mono);letter-spacing:.04em;
  text-transform:uppercase}
.index__grid{margin-top:64px;display:flex;flex-direction:column;gap:clamp(36px,4vw,64px);
  transform-style:preserve-3d}
/* a form: rows of tiles, centred on each other. --align slides the whole form
   left / right / centre so the six don't stack up in one dead column. */
.shape{display:flex;flex-direction:column;gap:var(--gap,5px);
  align-self:var(--align,center);align-items:center;transform-style:preserve-3d}
.shape__row{display:flex;gap:var(--gap,5px)}
/* the tile — square so the geometry of the form reads; the plate is cropped
   to fill it, natural colour, no caption (house rule) */
.plate{width:var(--ts);aspect-ratio:1;margin:0;overflow:hidden;
  background:var(--ink)}
.plate img{width:100%;height:100%;display:block;object-fit:cover}

/* ---- The Constellation (v3b — WebGL ball↔galaxy explorer of the Index) ------ */
/* Toggle-activated alternate view of the same plates. The stage + canvas live in
   the DOM but stay [hidden] until activated; the toggle button is JS-inserted only
   when WebGL is available, so JS-off / unsupported GPUs keep the Ledger as the only
   view. Recolour of Keyside's Media-Galaxy: ink void, paper dust, signal frames. */
.index__mode{margin-top:40px}
.index__mode:empty{display:none}          /* no button (JS-off / no-WebGL) => no gap */
.mode-toggle{display:inline-flex;align-items:center;gap:10px;
  font:400 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper);background:transparent;border:1px solid var(--line-paper);
  padding:12px 20px;min-height:44px;cursor:pointer;
  transition:background-color .2s var(--ease-micro),color .2s var(--ease-micro)}
.mode-toggle:hover{background:var(--paper);color:var(--ink)}
.mode-toggle:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

.index__stage{position:relative;height:min(88vh,900px);background:var(--ink);
  overflow:hidden;margin-top:48px}
.index__stage #constellationCanvas{position:absolute;inset:0;display:block;
  width:100%;height:100%;touch-action:none;cursor:grab}
.stage__hint{position:absolute;left:0;right:0;top:0;z-index:2;margin:0;
  padding:16px var(--margin);pointer-events:none;
  font:400 13px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--paper-2)}
/* the plate modal — flat print protocol: ink scrim, centred plate,
   flat close glyph (no circle, no radius, no shadow). <dialog> gives focus-trap +
   Esc + backdrop for free. */
.plate-modal{border:0;padding:0;background:transparent;color:var(--paper);
  max-width:min(90vw,900px);max-height:92vh;overflow:visible}
.plate-modal::backdrop{background:var(--scrim)}
.plate-modal__inner{position:relative}
.plate-modal__img{display:block;width:100%;height:auto;max-height:92vh;
  object-fit:contain;background:var(--ink)}
.plate-modal__close{position:absolute;top:8px;right:8px;z-index:1;padding:0;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);border:1px solid var(--line-paper);color:var(--paper);
  font:400 24px/1 var(--grotesk);cursor:pointer}
.plate-modal__close:hover{background:var(--paper);color:var(--ink)}
.plate-modal__close:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

/* =====================================================================
   MOBILE DRAWING (≤900px)  §12
   ===================================================================== */
@media (max-width:900px){
  body{font-size:18px}

  /* nav: two segments only */
  .nav__brand{flex:1}
  .nav__cta{flex:0 0 44%}
  .nav__links{display:none}

  /* hero — sleeve stays a masthead band on phone too; rolodex gets most of
     the width since it no longer has to share dead-center with the sleeve */
  .hero__rolo{width:min(86vw,380px)}
  .hero__rolo .rolo{height:clamp(300px,44vh,420px)}
  .sleeve{top:100px;width:min(80vw,340px);aspect-ratio:1/0.6}
  .sleeve__mark{font-size:clamp(24px,7.4vw,36px);left:16px;top:14px;right:16px}
  .sleeve__year{font-size:22px;right:16px;bottom:12px}
  .depth--p2{display:none}
  /* v5 hero field: DEDICATED mobile grid (4x10, all 31 pieces) — a wide vw-based
     desktop layout doesn't reflow onto a narrow tall viewport, so this is a
     genuinely separate placement, not a thinned subset */
.cp--01{left:-0.1%;top:68.8%;width:38.5vw}
.cp--02{left:0.5%;top:9.3%;width:40.4vw}
.cp--03{left:-0.9%;top:1.1%;width:34.7vw}
.cp--04{left:23.3%;top:1.0%;width:36.4vw}
.cp--05{left:76.5%;top:38.9%;width:33.5vw}
.cp--06{left:26.2%;top:69.5%;width:35.9vw}
.cp--07{left:24.0%;top:31.3%;width:41.6vw}
.cp--08{left:49.7%;top:79.1%;width:39.5vw}
.cp--09{left:74.6%;top:22.0%;width:40.1vw}
.cp--10{left:1.6%;top:60.3%;width:34.1vw}
.cp--11{left:76.4%;top:80.0%;width:40.5vw}
.cp--12{left:-1.3%;top:90.1%;width:40.5vw}
.cp--13{left:1.8%;top:48.3%;width:37.8vw}
.cp--14{left:75.1%;top:90.8%;width:36.6vw}
.cp--15{left:51.3%;top:70.7%;width:38.2vw}
.cp--16{left:75.4%;top:69.8%;width:38.4vw}
.cp--17{left:25.7%;top:11.7%;width:34.4vw}
.cp--18{left:76.7%;top:60.2%;width:41.5vw}
.cp--19{left:1.9%;top:18.3%;width:34.0vw}
.cp--20{left:49.2%;top:-0.5%;width:33.2vw}
.cp--21{left:50.2%;top:32.0%;width:36.8vw}
.cp--22{left:48.8%;top:20.7%;width:35.6vw}
.cp--23{left:-0.9%;top:78.6%;width:36.8vw}
.cp--24{left:24.7%;top:90.1%;width:39.9vw}
.cp--25{left:76.8%;top:29.0%;width:35.2vw}
.cp--26{left:26.9%;top:18.7%;width:32.8vw}
.cp--27{left:74.6%;top:10.5%;width:38.6vw}
.cp--28{left:73.2%;top:49.3%;width:39.8vw}
.cp--29{left:49.9%;top:8.8%;width:38.0vw}
.cp--30{left:-0.7%;top:38.1%;width:33.8vw}
.cp--31{left:24.4%;top:59.5%;width:36.3vw}

  /* the house position — dedicated mobile grid (3x8, all 14 pieces) */
  .thesis__box{padding:48px 20px 24px}
  .thesis__patrons{padding:16px 20px;gap:10px 16px;position:static;background:var(--ink)}
  .thesis__patrons span{font-size:11px}
.tp--01{left:65.0%;top:85.7%;width:45.7vw}
.tp--02{left:33.6%;top:39.1%;width:53.6vw}
.tp--03{left:34.2%;top:25.1%;width:49.4vw}
.tp--04{left:33.0%;top:-0.1%;width:44.3vw}
.tp--05{left:33.8%;top:51.3%;width:48.1vw}
.tp--06{left:-1.2%;top:12.2%;width:50.8vw}
.tp--07{left:1.4%;top:73.5%;width:53.2vw}
.tp--08{left:66.1%;top:-1.7%;width:46.4vw}
.tp--09{left:65.8%;top:73.5%;width:50.9vw}
.tp--10{left:68.5%;top:26.1%;width:46.7vw}
.tp--11{left:-0.7%;top:1.0%;width:51.2vw}
.tp--12{left:33.5%;top:64.0%;width:55.5vw}
.tp--13{left:66.7%;top:48.8%;width:46.5vw}
.tp--14{left:-1.2%;top:25.3%;width:50.1vw}

  /* ledger band stacks */
  .ledger{grid-template-columns:1fr;height:auto}
  .ledger__img{min-height:240px;height:240px}
  .ledger__panels{grid-template-rows:auto auto}
  .stat-panel{padding:32px}

  /* mission — dedicated mobile grid (3x7, all 12 pieces) */
  .mission{min-height:auto;padding:56px 0}
  .mission__box{margin:40px auto;padding:32px 24px}
.mp--01{left:33.8%;top:70.6%;width:52.5vw}
.mp--02{left:68.1%;top:28.9%;width:51.6vw}
.mp--03{left:32.2%;top:86.3%;width:52.8vw}
.mp--04{left:0.5%;top:41.2%;width:45.9vw}
.mp--05{left:32.2%;top:57.9%;width:49.7vw}
.mp--06{left:1.3%;top:0.8%;width:54.5vw}
.mp--07{left:34.4%;top:14.4%;width:53.2vw}
.mp--08{left:66.5%;top:70.2%;width:49.8vw}
.mp--09{left:-1.8%;top:87.0%;width:45.1vw}
.mp--10{left:66.7%;top:44.5%;width:49.3vw}
.mp--11{left:32.7%;top:29.9%;width:51.4vw}
.mp--12{left:34.6%;top:-0.8%;width:51.6vw}
  .mp--02,.mp--05,.mp--08,.mp--11{display:none}

  /* voice stacks */
  .voice{grid-template-columns:1fr}
  .voice__ink{padding:32px;min-height:auto}
  .voice__quotemark{position:static;margin-bottom:16px}
  .voice__signal{padding:40px 24px}

  /* chapters: single column flow */
  .chapter{min-height:auto;padding:0 var(--margin) 64px}
  .chapter__grid{min-height:auto;display:block;padding-top:0}
  .chapter__rail{display:block;min-height:0}
  .chapter__mark{margin-top:40px}
  .chapter__num,.chapter__name{display:inline;font-size:40px}
  .chapter__num{margin-right:.35em}
  .chapter__body{margin-top:32px}
  .chapter__sub,.chapter__lede,.chapter__list{max-width:none}
  .chapter__cta{margin-top:32px}
  .cta-bar{height:64px}
  /* art plate AFTER the cta bar, full-width */
  .chapter__plate{margin-top:40px;width:100%;max-width:none}

  /* collection wall: dense collage, depth dialled down by the engine */
  .collection{padding:64px 0 80px}
  /* v7 collage wall — mobile gets its OWN packing (3 dense columns),
     not a thinned desktop set; widths corrected against the engine's
     0.45 mobile depth scale so the intended overlap actually lands. */
  .wall{height:200vh;margin-top:44px}
  .wp--01{--l:65.24%;--t:1.54%;--w:40.79vw}
  .wp--02{--l:34.66%;--t:-0.72%;--w:60.85vw}
  .wp--03{--l:-3.65%;--t:-2.33%;--w:36.64vw}
  .wp--04{--l:29.12%;--t:15.61%;--w:39.06vw}
  .wp--05{--l:4.47%;--t:16.13%;--w:39.02vw}
  .wp--06{--l:60.06%;--t:16.17%;--w:44.29vw}
  .wp--07{--l:3.97%;--t:28.93%;--w:46.63vw}
  .wp--08{--l:65.25%;--t:23.83%;--w:50.40vw}
  .wp--09{--l:35.34%;--t:24.94%;--w:37.41vw}
  .wp--10{--l:-3.44%;--t:37.76%;--w:54.76vw}
  .wp--11{--l:36.63%;--t:39.91%;--w:38.49vw}
  .wp--12{--l:66.47%;--t:40.36%;--w:45.45vw}
  .wp--13{--l:65.86%;--t:56.45%;--w:51.00vw}
  .wp--14{--l:-3.97%;--t:52.12%;--w:44.99vw}
  .wp--15{--l:31.34%;--t:50.19%;--w:36.55vw}
  .wp--16{--l:1.00%;--t:66.15%;--w:50.54vw}
  .wp--17{--l:64.15%;--t:67.19%;--w:59.76vw}
  .wp--18{--l:34.15%;--t:67.42%;--w:56.56vw}
  .wp--19{--l:73.97%;--t:81.70%;--w:46.11vw}
  .wp--20{--l:31.21%;--t:80.61%;--w:51.82vw}
  .wp--21{--l:0.34%;--t:77.95%;--w:46.58vw}
  .wp--22{--l:69.66%;--t:95.10%;--w:55.48vw}
  .wp--23{--l:-0.80%;--t:93.36%;--w:55.02vw}
  .wp--24{--l:32.97%;--t:90.08%;--w:39.86vw}
  .wp--25{--l:7.15%;--t:108.84%;--w:37.48vw}
  .wp--26{--l:37.03%;--t:104.74%;--w:43.32vw}
  .wp--27{--l:0.26%;--t:121.33%;--w:47.12vw}
  .wp--28{--l:66.25%;--t:122.71%;--w:41.08vw}
  .wp--29{--l:40.57%;--t:117.32%;--w:42.50vw}
  .wp--30{--l:38.28%;--t:130.17%;--w:52.91vw}
  .wp--31{--l:3.80%;--t:131.48%;--w:44.26vw}
  .wp--32{--l:71.81%;--t:135.29%;--w:44.85vw}
  .wp--33{--l:26.86%;--t:146.93%;--w:44.01vw}
  .wp--34{--l:67.23%;--t:145.13%;--w:38.76vw}
  .wp--35{--l:67.31%;--t:162.13%;--w:44.79vw}
  .wp--36{--l:-1.39%;--t:156.72%;--w:58.18vw}
  .wp--37{--l:30.98%;--t:161.72%;--w:60.19vw}
  .wp--38{--l:26.49%;--t:174.87%;--w:55.04vw}
  .wp--39{--l:-2.62%;--t:172.23%;--w:43.25vw}
  .wp--40{--l:62.90%;--t:173.30%;--w:47.56vw}
  .wp--41{--l:27.83%;--t:185.00%;--w:38.97vw}
  .wp--42{--l:-2.78%;--t:184.67%;--w:55.35vw}
  .wp--43{--l:62.47%;--t:189.90%;--w:42.84vw}
  .frame{padding:4px}

  /* breathe: five-across becomes a wrapped 2-up; stagger off */
  .breathe{padding:64px 0 80px}
  .breathe__head{margin-bottom:40px}
  .breathe__row{flex-wrap:wrap;gap:12px}
  .br{width:calc(50% - 6px)}
  .br--01,.br--02,.br--03,.br--04,.br--05{margin-top:0}

  /* acquisitions */
  .acq--1 .acq__intro{padding:64px 0 48px}

  /* table — stacked form: input must keep its height (flex-basis:0 collapses it) */
  .table{padding:96px 16px}
  .table__form{flex-direction:column;gap:12px}
  .table__form input{flex:0 0 auto;width:100%;height:60px}
  .table__submit{flex:0 0 56px;width:100%}

  /* footer */
  .footer__ledger{grid-template-columns:1fr 1fr}
  .footer__cell{min-height:88px}
  .footer__cell:nth-child(3),.footer__cell:nth-child(4){border-top:1px solid var(--line-paper)}
  .footer__cell:nth-child(odd){border-left:0}
  .footer__wordmark{font-size:clamp(30px,9.1vw,80px);margin:56px 0 4px}
  .footer__year{font-size:clamp(64px,20vw,120px)}
  .footer__cols{margin-top:48px}
  .footer__legal{gap:12px;margin-top:56px}
  .footer__legal > *{flex:0 0 100%}
}

@media (max-width:600px){
  /* acquisitions relax (Nº III cover keeps a full 100svh) */
  .acq--2,.acq--4{min-height:78svh}
  .acq__stage{min-height:78svh}
  .acq__work{--vw:94vw}
  .acq--2 .acq__work{--vw:94vw}
}

/* =====================================================================
   REDUCED MOTION — mandatory; zero information motion-gated
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1!important;transform:none!important}
  html.js .hero .cp,
  html.js .sleeve__box,
  html.js .polaroid{opacity:1!important;transform:rotate(var(--r,0deg))!important}
  html.js .sleeve__box{transform:none!important}
  /* collapse ALL depth planes to z=0 — flat static editorial layout */
  html.js [data-layer],
  html.js [data-cam]{transform:none!important}
}