/* ============================================================================
   ANTR PARTNERS — THE GOLDEN HORIZON
   Design tokens & complete visual system (desktop-first).
   Palettes: Smoked Bronze (dark) / Warm Ivory (light). See DESIGN-NOTES.md.
   ========================================================================== */

:root{
  /* — MIDNIGHT AURORA — cool continuous range (never leaves deep navy)     */
  --d-bg:        #10173D;   /* deep navy — principal atmosphere    */
  --d-el:        #1B2559;   /* elevated navy — local surfaces      */
  --umber:       #161F4A;   /* structural navy                     */
  --d-deep:      #23306E;   /* muted cobalt-deep                   */
  --molten:      #2E4098;   /* deep cobalt                         */
  --copper:      #4268E8;   /* electric cobalt — lines & energy    */
  --bronze:      #8FA6F5;   /* cobalt-light — mono labels/accents  */
  --champagne:   #C9D4FF;   /* strong mist — rules/glints (rationed) */
  --violet:      #7651F4;   /* ultraviolet — transitions           */
  --violet-l:    #9D7FF7;   /* violet-light — focus states         */
  --orchid:      #C65CE8;   /* orchid — peak accents (sparing)     */
  --pink:        #F58ACB;   /* pink illumination (rare)            */
  --warm-white:  #E6ECFF;   /* cool mist — primary text            */
  --d-ink:       #E6ECFF;
  --d-ink-2:     rgba(230,236,255,.75);
  --d-ink-3:     #96A3CC;   /* muted secondary text                */
  --d-hair:      rgba(201,212,255,.15);
  --d-hair-2:    rgba(201,212,255,.32);

  /* legacy aliases — remapped into the aurora range                        */
  --l-bg:        #1B2559;
  --l-el:        #23306E;
  --ink:         #E6ECFF;
  --ink-2:       #96A3CC;
  --bronze-l:    #8FA6F5;
  --bronze-ink:  #8FA6F5;
  --rule-l:      rgba(201,212,255,.4);
  --l-hair:      rgba(201,212,255,.15);

  /* — Type — */
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* — Rhythm — (paddings are generous: color blends live inside them) */
  --wrap: 1240px;
  --pad: clamp(28px, 5vw, 72px);
  --sec-pad: clamp(150px, 24vh, 280px);
  --ease: cubic-bezier(.22,.61,.21,1);
}

/* ============================== RESET / BASE ============================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

html{ background:var(--d-bg); }
body{
  font-family:var(--sans);
  font-size:17px; line-height:1.7;
  color:var(--ink);
  background:transparent;   /* the atmosphere canvas paints the environment */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-width:1024px; /* desktop-first phase; mobile is a separate art-direction pass */
}

/* ---------- continuous page atmosphere (js/atmosphere.js) ---------- */
#atmo{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
}
/* static approximation for no-JS / no-canvas — one page-length blend,
   still no hard cuts */
.atmo-fallback{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg,
    #0B0F26 0%, #10173D 10%, #161F4A 16%, #131A45 20%,
    #0E1433 28%, #121A44 34%, #101638 44%, #172050 52%,
    #131B47 60%, #182465 66%, #1B2A75 70%, #111842 76%,
    #131A45 82%, #0D1230 90%, #0B0F29 95%, #0A0E24 100%);
}
.atmo-on .atmo-fallback{ display:none; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:#4268E8; color:#FFFFFF; }

:focus-visible{ outline:2px solid var(--violet-l); outline-offset:3px; border-radius:2px; }
.tone-light :focus-visible{ outline-color:var(--bronze-l); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; inset-inline-start:24px; top:-64px; z-index:200;
  font:500 13px/1 var(--sans); letter-spacing:.02em;
  color:#10173D; background:var(--warm-white);
  padding:12px 18px; border-radius:6px;
  transition:top .3s var(--ease);
}
.skip-link:focus-visible{ top:20px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ============================== NAVIGATION ============================== */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(28px,4vw,56px);
  transition:padding .5s var(--ease), background .5s var(--ease),
             box-shadow .5s var(--ease);
  background:transparent;
}
.nav::after{ /* fine champagne divider — appears after leaving hero */
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--d-hair-2) 30%, var(--d-hair-2) 70%, transparent);
  opacity:0; transition:opacity .5s var(--ease);
}
.nav.scrolled{
  padding-block:15px;
  background:rgba(16,23,61,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
}
.nav.scrolled::after{ opacity:1; }

.nav-brand{ display:flex; align-items:center; gap:9px; opacity:.85; transition:opacity .4s; }
.nav-brand:hover{ opacity:1; }
.nav-brand img{ width:66px; height:auto; }
.nav-brand-word{
  font:500 11px/1 var(--sans); letter-spacing:.34em; text-transform:uppercase;
  color:var(--d-ink-2); translate:0 1px;
}

.nav-links{ display:flex; align-items:center; gap:clamp(20px,2.6vw,38px); }
.nav-links a:not(.btn){
  font:500 13.5px/1 var(--sans); letter-spacing:.015em;
  color:rgba(230,236,255,.62);
  padding-block:6px; position:relative;
  transition:color .35s;
}
.nav.scrolled .nav-links a:not(.btn){ color:rgba(230,236,255,.78); }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--champagne); transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--ease); opacity:.85;
}
.nav-links a:not(.btn):hover{ color:var(--warm-white); }
.nav-links a:not(.btn).active{ color:var(--warm-white); }
.nav-links a:not(.btn).active::after,
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); }

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:500 14px/1 var(--sans); letter-spacing:.015em;
  padding:15px 30px; border-radius:7px;
  color:#10173D;
  background:linear-gradient(180deg, #FFFFFF, #E6ECFF);
  border:1px solid rgba(66,104,232,.55);
  position:relative; overflow:hidden;
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn::before{ /* restrained metallic sheen — hover only */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform:translateX(-120%);
}
.btn:hover{
  border-color:rgba(66,104,232,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -12px rgba(66,104,232,.55);
}
.btn:hover::before{ transition:transform .9s var(--ease); transform:translateX(120%); }
.btn:active{ transform:translateY(1px); }

.btn-nav{
  padding:11px 22px; font-size:13px;
  background:transparent; color:var(--warm-white);
  border:1px solid rgba(66,104,232,.6);
}
.btn-nav:hover{
  background:rgba(118,81,244,.10); color:var(--warm-white);
  box-shadow:none; border-color:rgba(157,127,247,.85);
}

/* ============================== HERO — THE GOLDEN HORIZON ============================== */
.hero{
  position:relative; height:100vh; min-height:660px;
  overflow:hidden; background:transparent;
}
/* the volumetric field dissolves into the page atmosphere over its last fifth —
   no hard edge where the hero ends */
#gh-canvas, .hero-static{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
#gh-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.1s ease;
}
#gh-canvas.on{ opacity:1; }
/* once the live field renders, the static lattice yields to it */
.hero.field-on .hero-static{ opacity:0; transition:opacity 1.1s ease; }

/* Stationary composed field — shown before WebGL starts, without WebGL,
   and under prefers-reduced-motion (canvas then stays hidden).
   A quiet navy point lattice with soft aurora depth — no hard panel. */
.hero-static{
  position:absolute; inset:0;
  background-color:#0B0F26;
  background-image:
    radial-gradient(rgba(201,212,255,.30) 1px, transparent 1.3px),
    radial-gradient(rgba(143,166,245,.16) 1px, transparent 1.3px),
    radial-gradient(46% 38% at 32% 40%, rgba(66,104,232,.16), transparent 74%),
    radial-gradient(40% 34% at 72% 62%, rgba(118,81,244,.12), transparent 76%),
    linear-gradient(180deg, #0B0F26 0%, #10173D 48%, #121A47 62%, #0C1129 100%);
  background-size:26px 26px, 26px 26px, 100% 100%, 100% 100%, 100% 100%;
  background-position:0 0, 13px 13px, 0 0, 0 0, 0 0;
}
.hero-static::after{ /* soft edge falloff — the field dissolves at the borders */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 48%, transparent 55%, rgba(8,11,30,.55) 100%);
}

/* Legibility veil behind the lockup: a fixed, very soft navy pocket.
   No rectangle, no blend trickery — just quiet local depth. */
.hero-veil{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none;
}
.hero-veil::after{
  content:""; width:min(46vw, 640px); height:min(24vw, 340px);
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(11,15,38,.62), rgba(11,15,38,.34) 55%, rgba(11,15,38,.10) 78%, transparent 95%);
  opacity:.85;
}

.hero-center{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none;
}
.hero-logo{
  width:clamp(240px, 23vw, 330px);
  filter:drop-shadow(0 3px 26px rgba(4,6,18,.5));
}

.hero-cue{
  position:absolute; bottom:30px; left:50%; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font:500 10px/1 var(--mono); letter-spacing:.42em; text-transform:uppercase;
  color:rgba(230,236,255,.5); padding:10px;
  transition:color .4s;
}
.hero-cue:hover{ color:var(--champagne); }
.cue-word{ translate:2px 0; } /* optically centre the letterspaced word */
.cue-line{
  width:1px; height:44px;
  background:linear-gradient(180deg, rgba(201,212,255,.75), transparent);
}
.js .cue-line{ animation:cue-breathe 4.2s ease-in-out infinite; }
@keyframes cue-breathe{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* ============================== SECTION SCAFFOLD ==============================
   Sections own no background — the atmosphere shows through everywhere. */
.sec{ position:relative; padding-block:var(--sec-pad); scroll-margin-block-start:70px; }
.tone-light, .tone-dark{ color:var(--d-ink); }

/* ================= PINNED CHAPTERS (thesis / portfolio / advantage) =========
   html.scrub is added by js/scrub.js (JS on + no reduced-motion). Each
   chapter is a tall scroll container; its .stage is a sticky 100vh
   composition whose elements are driven by normalized scroll progress.
   Without .scrub (reduced motion / no JS) chapters read as normal
   document sections — nothing below hides content by default.          */
.chapter{ position:relative; }
html.scrub .chapter{ padding-block:0; }
html.scrub #thesis{ height:200vh; }
html.scrub #portfolio{ height:600vh; }
html.scrub .chapter .stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
html.scrub .chapter .stage > .wrap{ width:100%; }
/* compact stage rhythm so full compositions fit one viewport */
html.scrub .stage .sec-head{ margin-block-end:clamp(28px, 4.5vh, 46px); }
html.scrub .stage .headline{ font-size:clamp(34px, 3.9vw, 54px); }
html.scrub .stage .principles{ margin-block-start:clamp(34px, 5.5vh, 56px); }
html.scrub .stage .thesis-lead{ gap:clamp(40px, 4.5vw, 72px); }

/* portfolio states: layered inside the stage under scrub, stacked otherwise */
.pf-state{ position:relative; }
html:not(.scrub) .pf-state + .pf-state{ margin-block-start:clamp(64px, 9vh, 120px); }
html.scrub .pf-state{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; pointer-events:none;
}
html.scrub .pf-state > .wrap{ width:100%; }
html.scrub .pf-state .plate{ height:min(70vh, 620px); min-height:0; margin-block-end:0; }
.pf-close-inner{ display:grid; justify-items:center; gap:22px; text-align:center; }
.pf-close-inner .pf-note{ justify-self:center; max-width:44ch; }

/* ---------------- section headers, kickers, rules, headlines ---------------- */
.sec-head{
  display:flex; align-items:baseline; gap:22px;
  margin-block-end:clamp(56px, 7vh, 84px);
  container-type:inline-size;
}
.kicker{
  font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze-ink); white-space:nowrap;
  display:flex; align-items:baseline; gap:16px;
}
.tone-dark .kicker{ color:var(--bronze); }
.k-num{ color:currentColor; opacity:.62; }
.rule{
  flex:1; height:1px; position:relative; overflow:hidden; align-self:center;
  background:linear-gradient(90deg, var(--l-hair), rgba(143,166,245,.06));
}
.tone-dark .rule{ background:linear-gradient(90deg, var(--d-hair), rgba(201,212,255,.03)); }
.rule::after{ /* single light sweep when the section reveals */
  content:""; position:absolute; inset-block:0; width:110px;
  background:linear-gradient(90deg, transparent, rgba(201,212,255,.9), transparent);
  transform:translateX(-140px);
}
.js .sec-head.in .rule::after{ animation:rule-sweep 1.7s var(--ease) .25s 1 both; }
@keyframes rule-sweep{ to{ transform:translateX(calc(100cqw + 140px)); } }
.head-note{
  font:400 11px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--d-ink-3); white-space:nowrap;
}

.headline{
  font-size:clamp(40px, 4.4vw, 62px);
  line-height:1.08; font-weight:600; letter-spacing:-.022em;
  color:var(--ink); text-wrap:balance;
}
.headline-dark{ color:var(--warm-white); }

/* ============================== 01 · THESIS ============================== */
.thesis-lead{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap:clamp(48px, 6vw, 96px); align-items:start;
}
.thesis-copy{ padding-block-start:14px; }
.lede{
  font-size:clamp(19px, 1.5vw, 22px); line-height:1.65; font-weight:500;
  color:var(--ink);
}
.support{
  margin-block-start:22px; font-size:16.5px; color:var(--ink-2);
}

.principles{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(36px, 4vw, 64px);
  margin-block-start:clamp(72px, 9vh, 110px);
}
.principle{
  position:relative;
  padding-inline-start:clamp(22px, 2vw, 32px);
  padding-block:6px;
}
.principle::before{ /* fine line — scrub draws it via --pl */
  content:""; position:absolute; inset-block:4px; inset-inline-start:0; width:1px;
  background:linear-gradient(180deg, var(--d-hair-2), var(--d-hair));
  transform:scaleY(var(--pl, 1)); transform-origin:top center;
}
.p-num{
  font:500 11px/1 var(--mono); letter-spacing:.2em;
  color:var(--bronze-ink); margin-block-end:44px;
}
.principle h3{
  font-size:23px; font-weight:600; letter-spacing:-.012em;
  margin-block-end:12px; color:var(--ink);
}
.principle p:not(.p-num){ font-size:15.5px; color:var(--ink-2); max-width:34ch; }

/* ============================== 03 · PORTFOLIO ============================== */
.plate{
  position:relative; border-radius:18px; overflow:hidden;
  min-height:600px; background:#121A47; color:var(--d-ink);
  display:grid; align-items:end;
  margin-block-end:clamp(44px, 5vh, 64px);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.5);
}
.plate::before{ /* thin luminous edge */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(165deg, rgba(201,212,255,.5), rgba(66,104,232,.18) 32%, rgba(66,104,232,.06) 55%, rgba(201,212,255,.30));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
}
.plate-visual{ position:absolute; inset:0; z-index:0; }
.pv-svg{ width:100%; height:112%; display:block; position:absolute; inset-block-start:-6%;
  will-change:transform; }
.plate-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,18,48,.88) 0%, rgba(13,18,48,.55) 34%, rgba(13,18,48,.06) 62%, rgba(13,18,48,0) 78%);
}
.plate-mirror .plate-scrim{
  background:linear-gradient(270deg, rgba(13,18,48,.88) 0%, rgba(13,18,48,.55) 34%, rgba(13,18,48,.06) 62%, rgba(13,18,48,0) 78%);
}


.plate-logo{ margin-block-end:30px; }
.plate-logo-spacex{ width:min(330px, 30vw); height:auto; }
.plate-logo-xai{
  width:122px; height:auto; border-radius:27px;
  box-shadow:0 14px 40px -18px rgba(4,6,18,.85);
}
.plate-logo-avic{ width:138px; height:auto; }
.pm-wordmark{
  font:600 clamp(30px, 2.6vw, 38px)/1 var(--sans);
  letter-spacing:.33em; color:#fff;
  margin-inline-end:-.33em; /* optically balance the trailing tracking */
  white-space:nowrap;
}
.plate-sector{
  font:500 11px/1.6 var(--mono); letter-spacing:.19em; text-transform:uppercase;
  color:var(--bronze); margin-block-end:20px;
}
.plate-desc{ font-size:16.5px; line-height:1.75; color:var(--d-ink-2); margin-block-end:26px; }

.pf-further{
  font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--d-ink-3); text-align:center; margin-block-start:10px;
}
.f-dots{ color:var(--bronze); letter-spacing:.1em; margin-inline-end:8px; }

/* ============================== 06 · CONTACT ==============================
   The returning golden glow near Contact lives in the atmosphere canvas —
   the section itself owns no surface. */

.contact-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(56px, 7vw, 120px); align-items:start;
}
.contact-body{
  font-size:17px; color:var(--d-ink-2);
  margin-block:26px 44px; max-width:44ch;
}
.contact-form{ display:flex; flex-direction:column; gap:22px; }
.ff-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ff{ display:flex; flex-direction:column; gap:9px; }
.ff label{
  font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--d-ink-2);
}
.ff .opt{ color:var(--d-ink-3); letter-spacing:.12em; text-transform:none; }
.ff input, .ff select, .ff textarea{
  font:400 15px/1.5 var(--sans); color:var(--warm-white);
  background:rgba(27,37,89,.45);
  border:1px solid rgba(201,212,255,.17); border-radius:8px;
  padding:13px 15px;
  transition:border-color .35s, background .35s;
}
.ff select{ appearance:none;
  background-image:linear-gradient(45deg, transparent 49%, var(--bronze) 50%, transparent 56%),
                   linear-gradient(135deg, transparent 49%, var(--bronze) 50%, transparent 56%);
  background-position:calc(100% - 21px) 55%, calc(100% - 15px) 55%;
  background-size:6px 6px; background-repeat:no-repeat;
}
.ff select option{ background:#1B2559; }
.ff textarea{ resize:vertical; min-height:120px; }
.ff input:hover, .ff select:hover, .ff textarea:hover{ border-color:rgba(201,212,255,.32); }
.ff input:focus-visible, .ff select:focus-visible, .ff textarea:focus-visible{
  outline:none; border-color:rgba(157,127,247,.7);
  background:rgba(27,37,89,.7);
  box-shadow:0 0 0 3px rgba(118,81,244,.12);
}
.ff-actions{ display:flex; align-items:center; gap:26px; margin-block-start:8px; }
.form-note{
  font:400 10.5px/1.7 var(--mono); letter-spacing:.06em;
  color:var(--d-ink-3); max-width:34ch;
}

/* ---- two-part plate composition: copy column + interactive module ---- */
.plate-grid{
  position:relative; z-index:2; height:100%;
  display:grid; grid-template-columns:41% 1fr;
  gap:clamp(28px, 3.5vw, 56px);
  padding:clamp(40px, 4.5vw, 64px);
  align-items:stretch;
}
.plate-copy{
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-end; min-width:0;
}
.plate-bio{
  font-size:15.5px; line-height:1.7; color:var(--d-ink-2);
  margin-block-end:22px;
}
.plate-persp{
  border-inline-start:2px solid rgba(157,127,247,.5);
  padding-inline-start:18px;
}
.persp-label{
  font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--d-ink-3); margin-block-end:9px;
}
.persp-copy{ font-size:14px; line-height:1.7; color:var(--d-ink-2); font-style:italic; }

.plate-module{
  position:relative; min-width:0; overflow:hidden;
  cursor:crosshair;
}
.p-mod{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.p-gear{
  position:absolute; left:34%; bottom:-78px;   /* roughly half-clipped */
  width:156px; height:156px; pointer-events:none;
}
.js .p-gear{ animation:gear-turn 16s linear infinite; }
@keyframes gear-turn{ to{ transform:rotate(360deg); } }

/* the section marker travels with the first portfolio state */
.pf-mark{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:18px 22px;
  margin-block-end:clamp(20px, 3vh, 30px);
  container-type:inline-size;
}
.pf-mark .rule{ min-width:120px; }
.pf-mark-headline{
  flex-basis:100%;
  font-size:clamp(24px, 2.2vw, 32px); line-height:1.15;
  font-weight:600; letter-spacing:-.016em; color:var(--warm-white);
  text-wrap:balance;
}

/* ============================== FOOTER (minimal) ============================== */
.footer{
  background:transparent; color:var(--d-ink-2);
  padding-block:clamp(48px, 7vh, 80px) 40px;
}
.foot-min{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  border-block-start:1px solid rgba(201,212,255,.09);
  padding-block-start:34px;
}
.foot-logo{ width:96px; opacity:.92; }
.foot-links{ display:flex; gap:clamp(22px, 3vw, 44px); }
.foot-links a{
  font:500 13.5px/1 var(--sans); color:var(--d-ink-2); transition:color .3s;
}
.foot-links a:hover{ color:var(--warm-white); }
.foot-copy{ font-size:12.5px; color:var(--d-ink-3); }

/* ============================== REVEALS ============================== */
.js [data-rv]{ opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-rv].in{ opacity:1; transform:none; }

/* design-QA mode (?qasec= / ?qay=): reveals settled, no transitions —
   scrubbed chapters still render their exact position-derived state */
html.qa [data-rv]{ transition:none !important; opacity:1 !important; transform:none !important; }
html.qa .rule::after{ animation:none !important; }
html.qa .cue-line{ animation:none !important; }

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce){
  .js [data-rv]{ opacity:1; transform:none; transition:none; }
  .js .sec-head.in .rule::after{ animation:none; }
  .js .cue-line{ animation:none; }
  .btn::before{ display:none; }
  #gh-canvas{ transition:none; }
  .pv-svg{ transform:none !important; }
  .p-gear{ animation:none !important; }
  .plate-module{ cursor:default; }
}