/* ============================================================= tokens
   White, ash and graphite. The page is the same neutral end to end: what
   separates one plane from the next is how much light it has lost, never
   what hue it is. There is no accent colour, because on a page whose
   whole claim is precision an accent is a decoration with a job title. */
:root{
  --ink:#eef1f4;          /* the ash-white the hall stands in */
  --ink-2:#e4e8ec;        /* one step down */
  --bone:#14181e;         /* the reading colour */
  --bone-dim:#2b333d;     /* reading grey, on a white ground */
  --muted:#5c6672;        /* the quietest text still has to be read */
  --line:rgba(24,29,36,.16);
  --line-soft:rgba(24,29,36,.08);
  --cobalt:#1c2229;       /* the marking colour. Graphite, never blue. */
  --ice:#3f4854;
  --frost:#ffffff;
  --silver:#8a94a0;
  --pad:clamp(20px, 3.4vw, 56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
::selection{ background:var(--cobalt); color:#fff; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============================================================= layers */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0; background:#eef1f4;
}
#grain{
  position:fixed; inset:-1px; z-index:60; pointer-events:none;
  /* overlay on a near-white frame does almost nothing but wash it; on this
     page the grain has to take light away to be grain at all */
  opacity:.038; mix-blend-mode:multiply;
  background-repeat:repeat; background-size:180px 180px;
}
#vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(126,138,152,.30) 100%);
}
.page{ position:relative; z-index:10; }

/* ============================================================= type */
.eyebrow{
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim);
}
.jp{ font-weight:400; letter-spacing:.18em; }
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:-.005em; }
.display{
  text-transform:uppercase; line-height:1.055; letter-spacing:-.012em;
  font-weight:400; text-shadow:0 2px 34px rgba(247,249,251,.72);
}
.h-hero{ font-size:clamp(26px,3.05vw,46px); }
.h-sec{ font-size:clamp(30px,4.0vw,60px); }
.body-lg{ font-size:clamp(17px,1.3vw,21px); line-height:1.62; color:#20272f; font-weight:400; letter-spacing:-.004em; }
.body{ font-size:16.5px; line-height:1.64; color:#252d37; font-weight:400; }
.num{ font-size:clamp(26px,2.5vw,36px); font-weight:300; letter-spacing:-.02em; color:var(--bone); font-variant-numeric:tabular-nums; }

/* ============================================================= reveal */
[data-rv]{ opacity:0; }
[data-rv="up"]{ transform:translate3d(0,26px,0); }
[data-rv="fade"]{ transform:none; }
[data-rv].rv-in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out); }
.mask-line{ display:block; overflow:hidden; }
.mask-line:not(.word-reveal) > span{ display:block; transform:translate3d(0,110%,0); }
.rv-in .mask-line:not(.word-reveal) > span, .mask-line:not(.word-reveal).rv-in > span{ transform:none; }
.mask-line:not(.word-reveal) > span{ transition:transform 1.05s var(--ease-out); }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word{
  display:inline-block; opacity:0; transform:translate3d(0,112%,0); will-change:transform,opacity;
  transition:transform .82s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay:var(--word-delay,0ms);
}
.word-reveal.rv-in .word{ opacity:1; transform:none; }

/* ============================================================= preloader */
#pre{
  position:fixed; inset:0; z-index:100; background:#eef1f4;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-in{ width:min(420px,74vw); text-align:center; }
.pre-mark{ margin:0 auto 26px; width:44px; height:44px; opacity:.9; }
.pre-mark svg{ width:100%; height:100%; display:block; }
.pre-jp{ font-size:12px; letter-spacing:.5em; color:var(--bone-dim); margin-bottom:20px; }
.pre-bar{ position:relative; height:1px; background:rgba(24,29,36,.14); overflow:hidden; }
.pre-bar i{ position:absolute; inset:0 100% 0 0; background:var(--bone); transition:right .35s linear; }
.pre-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pre-meta b{ font-weight:500; color:var(--bone-dim); font-variant-numeric:tabular-nums; }

/* ============================================================= nav */
.nav{
  /* Width comes from --vw, not from right:0. A fixed element resolves its
     inset against the initial containing block, and the page's own horizontal
     overflow makes that block wider than the screen — 437 against a 390 phone,
     860 against a 768 tablet — which carried the burger off the right edge.
     --vw is the layout viewport, written on every resize. */
  position:fixed; top:0; left:0; width:var(--vw, 100%); height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:transform .55s var(--ease);
}
/* The sticky wash sits on its own layer rather than on the bar. A
   backdrop-filter promotes its element to the containing block for any
   position:fixed descendant, and the bar holds the mobile menu sheet — put the
   blur here and the sheet was measured against an 84px bar instead of the
   frame, for as long as the blur took to fade. */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(247,249,251,.62);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1; }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1; }
.nav.hide{ transform:translate3d(0,-101%,0); }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand svg{ display:none; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-size:14px; font-weight:600; letter-spacing:.2em; color:#0b0e13; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.32em; color:#6f7985; }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,46px); margin-left:auto; }
.nav-link{
  position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden;
}
.nav-link span{ display:block; height:15px; line-height:15px; transition:transform .55s var(--ease-out), color .3s; }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0); color:var(--bone); letter-spacing:.32em; }
.nav-link:hover span{ transform:translate3d(0,-100%,0); }
.nav-link:hover .alt{ transform:none; }
.nav-link.on{ color:var(--bone); }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--cobalt); }
.nav-burger{ margin-left:clamp(18px,2.6vw,42px); width:26px; height:16px; position:relative; flex:0 0 auto; }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone); transition:width .45s var(--ease-out), transform .45s var(--ease-out); }
.nav-burger i:nth-child(1){ top:4px; width:26px; }
.nav-burger i:nth-child(2){ top:11px; width:17px; }
.nav-burger:hover i:nth-child(2){ width:26px; }
.nav-burger:hover i:nth-child(1){ width:17px; }

/* ============================================================= hero */
.hero{ position:relative; min-height:100svh; padding:0 var(--pad); display:flex; flex-direction:column; }
.hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:46%; pointer-events:none;
  background:linear-gradient(rgba(247,249,251,.50), rgba(247,249,251,.22) 46%, transparent); }
.hero-top{ padding-top:calc(var(--nav-h) + clamp(12px,2.6vh,34px)); max-width:min(560px,46vw); position:relative; z-index:2; }
.hero-top .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.hero-top .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--cobalt); box-shadow:0 0 10px var(--cobalt); }
.hero h1{ margin-bottom:18px; }
.hero-sub{ max-width:322px; }
.hero-spacer{ flex:1 1 auto; min-height:clamp(140px,26vh,300px); }
.hero-foot{ padding-bottom:clamp(22px,4.2vh,42px); position:relative; z-index:2; }
.hero-cue{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:14px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.hero-cue .track{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero-cue .track i{ position:absolute; inset:0; background:var(--bone); transform-origin:left;
  animation:cue 2.8s var(--ease-io) infinite; }
.chapters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,40px);
  border-top:1px solid var(--line-soft); padding-top:18px;
}
.chip{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
.chip .num{ line-height:1; flex:0 0 auto; transition:color .4s, transform .5s var(--ease-out); }
.chip .tx{ min-width:0; padding-top:3px; }
.chip b{ display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:6px; transition:color .4s;
  text-shadow:0 1px 16px rgba(247,249,251,.9); }
.chip p{ margin:0; font-size:11px; line-height:1.5; color:#8a94a0; max-width:22ch;
  transition:color .4s; }
.chip:hover .num{ color:var(--ice); transform:translate3d(0,-2px,0); }
.chip:hover b{ color:var(--bone); }
.chip:hover p{ color:var(--bone-dim); }
.chip.on .num{ color:var(--ice); }
.chip.on b{ color:var(--bone); }
/* the floating window: a generated Sanmon still carried over the hero */
.peek{
  position:absolute; z-index:2; right:clamp(78px,11vw,190px); top:clamp(132px,25vh,238px);
  width:clamp(150px,16vw,262px); display:block;
  transition:transform .8s var(--ease-out);
}
.peek-fr{ display:block; aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(247,249,251,.04) 24%, rgba(247,249,251,.48) 100%),
    url('secret-pathways-assets/generated/kage-sanmon-preview.webp') center / cover no-repeat;
  outline:1px solid rgba(24,29,36,.16); outline-offset:-1px;
  box-shadow:0 34px 70px -30px rgba(28,36,46,.20); transition:outline-color .5s; }
.peek:hover{ transform:translate3d(0,-5px,0); }
.peek:hover .peek-fr{ outline-color:rgba(24,29,36,.42); }
.peek-play{ position:absolute; top:0; right:0; left:0; bottom:auto; aspect-ratio:16/10;
  display:grid; place-items:center; pointer-events:none; }
.peek-play svg{ width:clamp(30px,3.2vw,46px); height:auto; filter:drop-shadow(0 2px 12px rgba(28,36,46,.16));
  transition:transform .55s var(--ease-out); }
.peek:hover .peek-play svg{ transform:scale(1.14); }
.peek-cap{ display:flex; align-items:baseline; gap:9px; margin-top:9px; }
.peek-cap b{ font-size:11px; font-weight:400; letter-spacing:.24em; color:var(--bone-dim); }
.peek-cap i{ font-style:normal; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .peek{ display:none; } }

.hero-side{
  position:absolute; z-index:2; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none;
}
.hero-side .v{ writing-mode:vertical-rl; font-size:13px; letter-spacing:.62em; color:rgba(24,29,36,.5); }
@keyframes cue{ 0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }

/* ============================================================= sections */
.sec{ position:relative; padding:clamp(88px,15vh,190px) var(--pad); }
.sec::before{
  content:''; position:absolute; inset:-22% -4%; z-index:-1; pointer-events:none;
  /* This was an 88% wash over the left two thirds of every chapter. Against
     the old night scene a lit structure still burned through it; against a
     white room it is an eraser, and it is why the lattice, the channels, the
     graph and the slab all arrived as ghosts of themselves. The copy does not
     need it at that strength: it carries its own halo, and the fixed page
     scrim is already under the reading column. */
  background:radial-gradient(104% 58% at 26% 50%, rgba(247,249,251,.26), rgba(247,249,251,.14) 42%, rgba(247,249,251,.04) 74%, rgba(247,249,251,0));
  /* A chapter's scrim is there to hold its own copy off the sanctuary, and it
     is inset -22% so its edges never land as a seam. That overshoot, plus the
     section's top padding, means it was washing most of a screen of scene
     above the chapter — the frame stayed masked long after the hero had let
     go of it. The mask takes the top of it back off: nothing at the very top,
     full strength by the time the chapter's own first line arrives. */
  -webkit-mask-image:linear-gradient(transparent, #000 44%);
          mask-image:linear-gradient(transparent, #000 44%);
}
#pathways::before{ background:radial-gradient(108% 64% at 50% 50%, rgba(247,249,251,.70), rgba(247,249,251,.44) 50%, rgba(247,249,251,0)); }
#eternity::before{ background:radial-gradient(82% 58% at 50% 46%, rgba(247,249,251,.26), rgba(247,249,251,.66) 56%, rgba(247,249,251,.90) 82%, rgba(247,249,251,0)); }
.foot::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(247,249,251,.55), rgba(247,249,251,.94) 40%, rgba(247,249,251,.98));
}
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vh,66px); }
.sec-head .k{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.sec-head .k b{ color:var(--cobalt); font-weight:500; }
.rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }

/* — chapter I: the gate */
.gate-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px,5vw,90px); align-items:start; }
.gate-grid h2{ max-width:11ch; }
.gate-copy{ padding-top:6px; }
.gate-copy .lead{ font-size:clamp(19px,1.56vw,26px); line-height:1.5; color:#0c1017; font-weight:400; letter-spacing:-.014em; }
.gate-copy .lead + p{ margin-top:20px; }
.arrowlink{ display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); }
.arrowlink .ar{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .45s var(--ease), border-color .45s, transform .5s var(--ease-out); }
.arrowlink .ar svg{ width:13px; height:13px; transition:transform .5s var(--ease-out); }
.arrowlink:hover .ar{ background:var(--bone); border-color:var(--bone); }
.arrowlink:hover .ar svg{ transform:translate3d(2px,-2px,0); }
.arrowlink:hover .ar svg path{ stroke:#eef1f4; }
.gate-stats{ display:flex; gap:clamp(24px,4vw,62px); margin-top:clamp(46px,8vh,96px); border-top:1px solid var(--line-soft); padding-top:24px; }
.gate-stats div b{ display:block; font-size:clamp(22px,2.1vw,32px); font-weight:300; letter-spacing:-.02em; }
.gate-stats div span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* — chapter II: pathways cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); align-items:start; }
.card{ position:relative; cursor:pointer; }
.card:nth-child(1){ transform:translateY(0); }
.card:nth-child(2){ transform:translateY(clamp(26px,5vw,74px)); }
.card:nth-child(3){ transform:translateY(clamp(52px,10vw,148px)); }
/* the frame is a hole punched in the page — the scene is rendered straight
   into this rectangle with a scissored viewport, so each card is a live
   window onto a different corner of the sanctuary */
.card-fr{
  position:relative; aspect-ratio:4/5; background:transparent;
  outline:1px solid var(--line-soft); outline-offset:-1px;
  transition:outline-color .5s var(--ease);
}
.card:hover .card-fr{ outline-color:rgba(24,29,36,.30); }
.card-fr::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 46%, rgba(247,249,251,.80)); pointer-events:none; }
/* The fabric overdraws its card by CL_BLEED on every side so the billow and
   the contact shadow have somewhere to go, so the frame cannot clip it. The
   card's outline is not here at all: it is drawn in the cloth shader, where it
   can follow the folds instead of tracing the flat box behind them. */
.cloth-out{ position:absolute; pointer-events:none; z-index:1; }
.on-cloth{ background:none !important; outline:0 !important; overflow:visible; }
.on-cloth::after{ display:none; }

/* ------------------------------------------------------- the no-WebGL page
   If the hall cannot be built the page still has to read. The canvas goes,
   the wordmark moves out of the 3-D layer and into the document, and the
   layout carries the whole site on its own. */
.word-fb{ display:none; }
.no-webgl #gl, .no-webgl .peek-play{ display:none; }
.no-webgl body{ background:
  radial-gradient(38vw 32vw at 62% 34%, rgba(24,29,36,.10), rgba(24,29,36,.04) 54%, transparent 74%),
  radial-gradient(120% 80% at 50% 0%, rgba(126,138,152,.14), transparent 60%), #eef1f4;
  background-attachment:fixed; }
.no-webgl .word-fb{
  display:block; position:absolute; left:0; right:0; bottom:16%; z-index:1;
  font-family:'Wordmark','Onest',sans-serif; font-weight:500; font-size:23vw; line-height:.78;
  letter-spacing:.055em; text-align:center; pointer-events:none;
  background:linear-gradient(#4e5863, #929daa); -webkit-background-clip:text; background-clip:text;
  color:transparent; opacity:.9;
}
/* the live hero has no foot wash; the fallback needs one, because there the
   name stands on flat paper with nothing holding the cue off it */
.no-webgl .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  pointer-events:none; background:linear-gradient(transparent, rgba(247,249,251,.60) 52%, rgba(247,249,251,.92)); }
.no-webgl .sec::before{ background:none; }

.card-lab{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.card-lab b{ font-size:clamp(13px,1.15vw,17px); font-weight:400; letter-spacing:.02em; text-transform:uppercase; }
.card-lab .jp{ font-size:11px; letter-spacing:.3em; color:rgba(24,29,36,.62); }
.card-ar{ position:absolute; top:14px; right:14px; z-index:2; width:26px; height:26px;
  opacity:0; transform:translate3d(-4px,4px,0); transition:.5s var(--ease-out); }
.card:hover .card-ar{ opacity:1; transform:none; }
.card-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* — chapter III: curriculum */
.cur-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(28px,5vw,90px); align-items:end; margin-bottom:clamp(34px,6vh,72px); }
.cur-head h2{ max-width:13ch; }
.cur{ border-top:1px solid var(--line-soft); }
.les{
  position:relative; display:grid; align-items:center;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.25fr) 86px;
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:padding .5s var(--ease-out);
}
.les::before{ content:''; position:absolute; left:calc(var(--pad) * -1); right:0; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(28,34,41,.09), transparent 46%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.les:hover::before{ opacity:1; }
.les:hover{ padding-left:clamp(8px,1.2vw,18px); }
.les .k{ font-size:12px; letter-spacing:.16em; color:#3d4652; font-variant-numeric:tabular-nums; transition:color .4s; }
.les:hover .k{ color:var(--cobalt); }
.les h3{ font-size:clamp(17px,1.55vw,24px); font-weight:400; letter-spacing:-.008em; color:#0f1319; }
.les h3 em{ font-style:normal; font-family:'Onest',sans-serif; font-size:.72em; color:var(--muted); margin-left:12px; letter-spacing:.24em; }
.les p{ margin:0; font-size:15px; line-height:1.6; color:#232b35; font-weight:400; }
.les .t{ text-align:right; font-size:10px; font-weight:500; letter-spacing:.14em; color:#5b6570; font-variant-numeric:tabular-nums; }
.les .bar{ position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--cobalt);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out); }
.les:hover .bar{ transform:scaleX(1); }

/* — chapter IV: eternity */
.fin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.fin .eyebrow{ margin-bottom:26px; }
.fin h2{ font-size:clamp(38px,7.4vw,124px); line-height:.94; letter-spacing:-.03em; text-transform:uppercase; }
.fin p{ max-width:44ch; margin:26px auto 0; }
.cta{
  position:relative; display:inline-flex; align-items:center; gap:14px; margin-top:44px;
  padding:17px 30px; border:1px solid var(--line); border-radius:100px; overflow:hidden;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  transition:color .45s var(--ease), border-color .45s;
}
.cta i{ position:absolute; inset:0; background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform .62s var(--ease-out); z-index:-1; }
.cta span,.cta svg{ position:relative; z-index:1; }
.cta:hover{ color:#eef1f4; border-color:var(--bone); }
.cta:hover i{ transform:none; }
.cta:hover svg path{ stroke:#eef1f4; }

/* — footer */
.foot{ position:relative; padding:clamp(50px,8vh,96px) var(--pad) clamp(26px,4vh,40px);
  border-top:1px solid var(--line-soft); }
.foot-grid,.foot-base{ position:relative; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr)); gap:clamp(22px,4vw,60px); }
.foot h4{ margin:0 0 16px; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:14px; color:#4d5763; transition:color .35s; }
.foot li a:hover{ color:var(--bone); }
.foot-brand p{ margin:16px 0 0; max-width:38ch; font-size:14px; line-height:1.62; color:#4d5763; }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(38px,6vh,74px); padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================= progress rail */
.rail{ position:fixed; right:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:12px; align-items:center; }
.rail button{ width:22px; height:10px; display:grid; place-items:center; }
.rail i{ display:block; width:14px; height:1px; background:rgba(24,29,36,.26); transition:.5s var(--ease-out); }
.rail button.on i{ width:22px; background:var(--bone); }
.rail button:hover i{ width:22px; background:var(--bone-dim); }

/* ============================================================= cursor */
.cur-dot{ position:fixed; z-index:80; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(24,29,36,.42); border-radius:50%; pointer-events:none;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
             background .35s, border-color .35s, opacity .3s; opacity:0; }
.cur-dot.act{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(24,29,36,.07); border-color:rgba(24,29,36,.6); }
@media (hover:hover) and (pointer:fine){ .cur-dot{ opacity:1 } }

/* ============================================================= responsive */
@media (max-width:1080px){
  .hero-top{ max-width:none; }
  .gate-grid{ grid-template-columns:1fr; gap:26px; }
  .cur-head{ grid-template-columns:1fr; gap:18px; }
  .les{ grid-template-columns:44px minmax(0,1fr) 74px; }
  .les p{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav-links{
    display:flex; position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px);
    padding:calc(var(--nav-h) + 28px) var(--pad) 34px; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(247,249,251,.98); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .65s var(--ease-out), opacity .4s, visibility 0s linear .65s;
  }
  .nav.menu-open .nav-links{
    transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  .nav-links .nav-link{
    width:100%; height:auto; padding:17px 0; overflow:visible; border-bottom:1px solid var(--line-soft);
    font-size:17px; line-height:1.2;
  }
  .nav-links .nav-link span{ height:auto; line-height:1.2; transform:none !important; }
  .nav-links .nav-link .alt{ position:static; margin-top:6px; font-size:10px; color:var(--muted); }
  /* The links panel leaves the flow to become the slide-in sheet, taking its
     margin-left:auto with it, so without this the burger sits tucked against
     the wordmark instead of out at the edge where a thumb reaches. */
  /* A transform *or* a backdrop-filter makes an element the containing block
     for its position:fixed descendants. This panel is a child of the bar, so
     once the bar went sticky and started hiding on scroll the open panel was
     measured against the bar instead of the viewport: 146px tall, dragged off
     the top, with the page showing through beside it. Neither may apply while
     the sheet is open — it covers the frame, so there is nothing left to blur. */
  /* A hide transform still promotes the bar, so drop it the instant the sheet
     opens. Without transition:none it eases out over .55s and the sheet spends
     that whole time measured against the bar. */
  .nav.menu-open{ transform:none; transition:none; }
  .nav-burger{ margin-left:auto; }
  .nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg); }
  .nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
  html.nav-open,html.nav-open body{ overflow:hidden; }
  .rail{ display:none; }
  .hero-side{ display:none; }
  .chapters{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .chip p{ font-size:10px; }
  .cards{ grid-template-columns:1fr; gap:14px; }
  .card:nth-child(2),.card:nth-child(3){ transform:none; }
  .gate-stats{ flex-wrap:wrap; gap:20px 34px; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cue{ display:none; }
}
/* ================================================== section layouts (B set)
   The six sections ship their B compositions — hero split, story spread,
   gardens mosaic, chapter atlas, gallery closing, manifesto footer. They are
   keyed off stable body data attributes so the rules above keep reading as
   the plain grammar of the page and every B override stays in one block.   */

/* — hero B · split: an editorial reading column holds the left, a compact
     numbered index sits under it, and the live scene window becomes a low,
     right-hand counterweight. The scene itself remains untouched.

     The column carried a 90° scrim over the left three-quarters of the frame.
     It has gone: the sanctuary is already near-black behind the reading, and
     measured against it the copy loses almost nothing without it — the
     headline 15.98:1 to 15.47:1, the standfirst 7.94:1 to 7.75:1, the index
     16.11:1 to 16.08:1, all far past what either needs. It was darkening the
     approach, the gate and the lower steps to buy half a point of contrast
     nobody was short of. */
body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:min(590px,46vw); }
body[data-layout-hero="b"] .hero-foot{ width:min(480px,40vw); margin-left:0; }
body[data-layout-hero="b"] .hero-cue{ justify-content:flex-start; }
body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body[data-layout-hero="b"] .chip{ position:relative; flex-direction:column; gap:0; }
body[data-layout-hero="b"] .chip .num{ font-size:clamp(29px,3.1vw,48px); }
body[data-layout-hero="b"] .chip .tx{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}
/* the live window drops into the open right corner, away from the reading
   column and the oversized 3-D wordmark */
body[data-layout-hero="b"] .peek{
  left:auto; right:var(--pad); top:auto; bottom:clamp(38px,7vh,96px);
}
body[data-layout-hero="b"] .peek-cap b.jp{ font-size:clamp(20px,2.2vw,34px); letter-spacing:.18em; }
/* The Japanese title reads down the right edge, hung under the navigation —
   the one mark on that side of the frame now that the romanization has gone. */
body[data-layout-hero="b"] .hero-side{
  left:auto; right:var(--pad); top:calc(var(--nav-h) + clamp(14px,3vh,42px));
  bottom:auto; transform:none; display:block;
}
body[data-layout-hero="b"] .hero-side .v{
  position:static; transform:none;
  font-size:clamp(30px,3.2vw,54px); letter-spacing:.12em; color:rgba(24,29,36,.62);
}

/* — story B · spread: the title crosses two columns, the reading column is
     held to the right, and the figures become a ruled band. */
body[data-layout-story="b"] .gate-grid{
  grid-template-columns:minmax(120px,.38fr) minmax(0,1.08fr) minmax(280px,.88fr);
  gap:clamp(20px,3vw,54px);
}
body[data-layout-story="b"] .gate-grid h2{ grid-column:1 / 3; max-width:13ch; }
body[data-layout-story="b"] .gate-copy{ grid-column:3; }
body[data-layout-story="b"] .gate-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
body[data-layout-story="b"] .gate-stats div{ min-height:108px; padding:18px; border-left:1px solid var(--line-soft); }
body[data-layout-story="b"] .gate-stats div:last-child{ border-right:1px solid var(--line-soft); }

/* — gardens B · mosaic: one immersive live window beside two stacked ones.
     The cards stretch to their rows and the frames flex, so the two small
     viewports meet the tall one exactly instead of drifting apart. */
body[data-layout-gallery="b"] .cards{
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px; align-items:stretch;
}
body[data-layout-gallery="b"] .card{ transform:none; display:flex; flex-direction:column; min-height:0; }
body[data-layout-gallery="b"] .card-fr{ aspect-ratio:auto; flex:1 1 auto; min-height:0; }
body[data-layout-gallery="b"] .card:first-child{ grid-row:1 / 3; }
body[data-layout-gallery="b"] .card:first-child .card-fr{ flex:0 0 auto; height:min(72vh,760px); }
body[data-layout-gallery="b"] .card:not(:first-child) .card-fr{ min-height:200px; }

/* — chapters B · atlas: a two-then-three plate grid instead of a syllabus.
     Number and title sit at the top of each plate, the running time drops to
     the foot of it. */
body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:minmax(0,.72fr) minmax(0,1.2fr); align-items:start; }
body[data-layout-curriculum="b"] .cur{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
body[data-layout-curriculum="b"] .les{
  display:flex; flex-direction:column; align-items:flex-start; min-height:250px;
  padding:24px; gap:14px; border:0; background:rgba(247,249,251,.84); overflow:hidden;
}
body[data-layout-curriculum="b"] .les:nth-child(-n+2){ grid-column:span 3; }
body[data-layout-curriculum="b"] .les:nth-child(n+3){ grid-column:span 2; }
body[data-layout-curriculum="b"] .les::before{ left:0; background:linear-gradient(145deg,rgba(28,34,41,.13),transparent 58%); }
body[data-layout-curriculum="b"] .les:hover{ padding-left:32px; }
body[data-layout-curriculum="b"] .les h3{ font-size:clamp(20px,2vw,30px); }
body[data-layout-curriculum="b"] .les p{ display:block; max-width:34ch; }
body[data-layout-curriculum="b"] .les .t{ text-align:left; margin-top:auto; }

/* — closing B · gallery: the title hangs vertically on the right while the
     chapter mark, the last line and the call to action run down the left. */
body[data-layout-closing="b"] .fin{
  display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); grid-template-rows:auto auto auto;
  align-content:center; align-items:end; text-align:left;
  column-gap:clamp(40px,7vw,120px); row-gap:clamp(16px,2.6vh,30px);
}
body[data-layout-closing="b"] .fin .eyebrow{ grid-column:1; grid-row:1; margin:0; }
body[data-layout-closing="b"] .fin h2{
  grid-column:2; grid-row:1 / 4; align-self:center; justify-self:end;
  font-size:clamp(52px,6vw,82px); writing-mode:vertical-rl;
}
body[data-layout-closing="b"] .fin p{ grid-column:1; grid-row:2; margin:0; }
body[data-layout-closing="b"] .fin .cta{ grid-column:1; grid-row:3; justify-self:start; margin-top:4px; }

/* — footer B · manifesto: the statement leads, the navigation becomes a
     compact ruled index beneath it. */
body[data-layout-footer="b"] .foot-grid{ grid-template-columns:repeat(3,1fr); }
body[data-layout-footer="b"] .foot-brand{
  grid-column:1 / -1; display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center;
  padding-bottom:34px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-brand svg{ width:54px; height:54px; }
body[data-layout-footer="b"] .foot-brand p{
  margin:0; max-width:48ch; font-size:clamp(18px,2vw,30px); line-height:1.35; color:var(--bone-dim);
}
body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){
  padding-left:clamp(18px,2.2vw,34px); border-left:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-base{ display:grid; grid-template-columns:1fr auto 1fr; }
body[data-layout-footer="b"] .foot-base span:last-child{ text-align:right; }

/* ================================================= foreground layers (KAGE)
   The transparent PNG library in secret-pathways-assets/foreground/png is
   introduced as a near plane. Each section carries one .fg box holding a few
   cut-outs that stand between the live sanctuary and the reading: the scene
   itself is untouched, this is only the garden that grows in front of it.

   The cut-outs are the nearest plane on the page, so they sit in front of the
   reading rather than behind it. Inside .page — itself z-index:10, above the
   #gl canvas at 0:
     -1   .sec::before / .foot::before   the section scrims
      2   headings, copy, links, cards, stats, CTA
      3   .fg                            the cut-outs: aria-hidden, inert
   .page caps everything it holds at tier 10, which is under the fixed
   furniture (rail 45, nav 50), so the chapter's live near plane is moved out
   to #fg-sky at 52 — over the layout and the navigation both, and still under
   the passes that treat the frame as one image: vignette 55, grain 60,
   cursor 80.

   A stage is only ever shown while its own chapter holds the viewport, and
   only in the fixed bottom-anchored form. Parked back in its section it is
   inert and invisible: a near plane that scrolls with the page reads as
   wallpaper printed on the document rather than as something standing between
   the camera and the scene, so there is no second, section-owned appearance.
   Every piece is therefore placed from the bottom edge of that fixed plane —
   left/right and bottom, never top.

   The entrance is driven by the chapter, not by the scroll observer: each
   [data-fg-in] piece rises from the edge it is anchored to when its stage goes
   live, one every 90ms in DOM order, and the reduced-motion block at the foot
   of this sheet flattens it. The wrapper owns the entrance and animates
   opacity and transform only; the artwork itself remains at full opacity, with
   the reading protected by the layer order rather than a translucent
   foreground treatment. */
.fg{
  position:absolute; inset:0; z-index:3;
  overflow:visible; pointer-events:none;
}
/* Nothing inside a section may widen the document. The foreground cut-outs and
   the cloth canvases are placed to hang past the frame edges on purpose, and as
   ordinary in-flow descendants they dragged the page box out with them — 194px
   past a 1440 frame. Clip the horizontal axis at the section, which is exactly
   viewport-wide, so each overhang is cut precisely where it leaves the screen.
   `clip` pairs with `visible` without coercing it, so no scroll container is
   created and every bit of vertical bleed survives. */
.sec, .foot{ overflow-x:clip; overflow-y:visible; }
/* the host for whichever chapter currently owns the near plane — no box of
   its own, since every stage it holds is position:fixed to the viewport */
#fg-sky{
  position:fixed; left:0; top:0; width:0; height:0;
  z-index:52; pointer-events:none;
}
.sec > *:not(.fg), .foot > *:not(.fg){ position:relative; z-index:2; }
.fg-el{ position:absolute; display:block; opacity:0; }
.fg-el > img{
  width:100%; height:auto;   /* the width/height attrs hold the box before the lazy image lands */
  opacity:1;
  filter:saturate(.88) brightness(.86);
}
.fg-el--flip > img{ transform:scaleX(-1); }
/* each piece waits off the edge it is anchored to until its chapter is called */
[data-fg-in="up"]   { transform:translate3d(0,13%,0); }
[data-fg-in="left"] { transform:translate3d(-11%,6%,0); }
[data-fg-in="right"]{ transform:translate3d(11%,6%,0); }
/* one slow breath, on the two lightest layers only */
@keyframes fg-sway{
  from{ transform:rotate(-.45deg) translate3d(0,2px,0); }
  to  { transform:rotate(.45deg)  translate3d(0,-6px,0); }
}
.fg-el--sway > img{ animation:fg-sway 21s var(--ease-io) infinite alternate; transform-origin:0% 45%; }

/* The active chapter owns a bottom-anchored near plane. Its former stage is
   retained only long enough to dissolve into the next chapter's scene. */
.fg.fg-active,.fg.fg-retiring{
  position:fixed; left:0; right:0; top:auto; bottom:0; height:min(56svh,680px);
  z-index:1; overflow:visible; pointer-events:none;
}
.fg.fg-active .fg-el{
  opacity:1; transform:none;
  transition:opacity 1.2s var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay:var(--fg-delay,0ms);
}
.fg .fg-el:nth-child(2){ --fg-delay:90ms; }
.fg .fg-el:nth-child(3){ --fg-delay:180ms; }
.fg .fg-el:nth-child(4){ --fg-delay:270ms; }
.fg.fg-retiring .fg-el{
  opacity:0; transform:translate3d(0,8vh,0) scale(.98); filter:blur(18px);
  transition:opacity .68s var(--ease-out),transform .78s var(--ease-out),filter .78s var(--ease-out);
}

/* Placement is keyed off [data-fg] rather than the section id, because the
   stage of the live chapter is re-parented into #fg-sky and stops being a
   descendant of its own section for as long as it holds the near plane.

   Every piece is anchored from the bottom of that plane, which is the bottom
   of the viewport. The cut-outs in png/ are trimmed flush to their own lowest
   opaque row, so a negative bottom here is a real amount of artwork buried off
   the foot of the frame, not slack in the file — the ground-sitting pieces
   carry enough of it that their base line never lifts off the edge. */

/* — I · the gate: the wall runs along the lower-left frame, a pine holds the
     far edge, and one bank of grass closes the foot of the chapter */
/* Wall against the left edge, pine against the right: the chapter is framed
   by the two of them with the court open between.

   left:0, not a negative offset — the plate is trimmed to its own artwork, so
   pulling it off-frame cuts the gate itself rather than trimming empty margin.
   Its left edge sits on the viewport's. */
[data-fg="gate"] .fg-wall  { left:0; bottom:-30px; width:clamp(430px,47vw,780px); }
[data-fg="gate"] .fg-pine  { right:-4%; bottom:-46px; width:clamp(190px,21vw,370px); }
[data-fg="gate"] .fg-grass { left:3%;   bottom:-150px; width:clamp(420px,60vw,1050px); }

/* — II · still gardens: sakura and maple sweep in from the two lower corners
     and carry their whole length, a lit lantern and a low bush hold the edges */
[data-fg="pathways"] .fg-sakura { left:-6%;  bottom:-86px;  width:clamp(430px,50vw,880px); }
[data-fg="pathways"] .fg-leaves { right:-6%; bottom:-62px;  width:clamp(330px,38vw,670px); }
[data-fg="pathways"] .fg-lantern{ left:-1%;  bottom:-96px;  width:clamp(120px,13vw,215px); }
[data-fg="pathways"] .fg-bush   { right:-4%; bottom:-38px;  width:clamp(250px,30vw,530px); }
/* the lantern is the one lit object in the library — it keeps its ember */
[data-fg="pathways"] .fg-lantern > img{ filter:saturate(.96) brightness(1); }
[data-fg="pathways"] .fg-leaves > img{ transform-origin:100% 40%; }

/* — III · sacred craft: basalt and a low wall fragment bracket the atlas and
     a stand of grass ties them together, all three below the plate grid */
[data-fg="lessons"] .fg-wall   { right:-8%; bottom:-78px; width:clamp(390px,50vw,870px); }
[data-fg="lessons"] .fg-stones { left:-4%;  bottom:-48px; width:clamp(250px,30vw,530px); }
[data-fg="lessons"] .fg-grass  { left:24%;  bottom:-84px; width:clamp(280px,33vw,580px); }

/* — IV · afterlight: a far hill closes the horizon, the shrine ruins stand at
     the left of it, grass banks the right, one branch hangs into the corner */
[data-fg="eternity"] .fg-hill   { left:-8%; width:min(150vh,116%); bottom:calc(-1 * min(20vh,15.5vw)); }
[data-fg="eternity"] .fg-ruins  { left:-5%;  bottom:-32px; width:clamp(240px,28vw,500px); }
[data-fg="eternity"] .fg-grass  { right:-7%; bottom:-60px; width:clamp(300px,37vw,670px); }
[data-fg="eternity"] .fg-sakura { left:-15%; bottom:-70px; width:clamp(280px,33vw,580px); }

/* — colophon: one restrained planting along the lower edge, nothing above it */
[data-fg="foot"] .fg-bush   { left:-6%;  bottom:-110px; width:clamp(230px,28vw,480px); }
[data-fg="foot"] .fg-grass  { right:-5%; bottom:-98px;  width:clamp(255px,30vw,530px); }
[data-fg="foot"] .fg-stones { left:36%;  bottom:-104px; width:clamp(190px,22vw,370px); }

@media (max-width:1080px){
  /* the columns have collapsed and the copy has taken the width back, so the
     framing layers step down rather than crowd it */
  [data-fg="gate"] .fg-wall      { width:clamp(390px,42vw,600px); }
  [data-fg="pathways"] .fg-sakura{ width:clamp(400px,46vw,660px); }
  [data-fg="pathways"] .fg-leaves{ width:clamp(310px,35vw,500px); }
  [data-fg="lessons"] .fg-wall   { width:clamp(360px,45vw,640px); }
  [data-fg="eternity"] .fg-sakura{ width:clamp(260px,30vw,430px); }
}
@media (max-width:820px){
  /* one or two anchors per section: the stacked cards, the atlas plates and
     the call to action own the whole width here, so every duplicated piece
     of ornament goes and what stays is smaller */
  [data-fg="gate"] .fg-pine, [data-fg="pathways"] .fg-sakura,
  [data-fg="pathways"] .fg-leaves, [data-fg="lessons"] .fg-wall,
  [data-fg="eternity"] .fg-sakura, [data-fg="foot"] .fg-stones{ display:none; }
  [data-fg="gate"] .fg-wall     { left:-14%; bottom:-22px; width:min(82vw,440px); }
  [data-fg="gate"] .fg-grass    { left:auto; right:-10%; bottom:-76px; width:min(94vw,530px); }
  [data-fg="pathways"] .fg-lantern{ left:-4%;   bottom:-58px; width:clamp(80px,20vw,128px); }
  [data-fg="pathways"] .fg-bush   { right:-10%; bottom:-38px; width:min(72vw,400px); }
  [data-fg="lessons"] .fg-stones  { left:-8%; bottom:-34px; width:min(66vw,360px); }
  [data-fg="lessons"] .fg-grass   { left:auto; right:-8%; bottom:-44px; width:min(70vw,380px); }
  [data-fg="eternity"] .fg-ruins  { left:-8%;   bottom:-25px; width:min(54vw,300px); }
  [data-fg="eternity"] .fg-grass  { right:-12%; bottom:-34px; width:min(80vw,440px); }
  [data-fg="foot"] .fg-bush  { left:-12%;  bottom:-26px; width:min(68vw,340px); }
  [data-fg="foot"] .fg-grass { right:-12%; bottom:-30px; width:min(74vw,380px); }
}
@media (prefers-reduced-motion:reduce){
  .fg-el--sway > img{ animation:none; }
  .fg.fg-retiring .fg-el{ transition:none !important; filter:none !important; }
}

@media (max-width:1080px){
  body[data-layout-hero="b"] .chapters{ gap:16px 20px; }
  body[data-layout-story="b"] .gate-grid{ grid-template-columns:1fr; }
  body[data-layout-story="b"] .gate-grid h2,
  body[data-layout-story="b"] .gate-copy{ grid-column:auto; }
  body[data-layout-story="b"] .gate-grid h2{ max-width:16ch; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:span 3; }
  body[data-layout-curriculum="b"] .les:last-child{ grid-column:span 6; }
}
@media (max-width:820px){
  /* the split collapses and the copy takes the page back */
  body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:none; }
  body[data-layout-hero="b"] .hero-foot{ width:100%; }
  /* The four-column strip is set on a selector specific enough to survive the
     plain .chapters override below 820, so it has to be unset here by name or
     the chips stay four across on a phone and wrap a word to a line. */
  body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  body[data-layout-hero="b"] .chip{ flex-direction:row; gap:14px; }
  /* Same shape of bug: the layout selector outranks the plain single-column
     rule, so the heading kept a 37% column while its words are set at 30px —
     "CHAPTERS." alone is wider than that, and it spilled over the paragraph. */
  body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(26px,8vw,36px); }
  body[data-layout-hero="b"] .chip .tx{
    position:static; width:auto; height:auto; overflow:visible; clip:auto;
    clip-path:none; white-space:normal;
  }

  body[data-layout-story="b"] .gate-stats{ grid-template-columns:repeat(2,1fr); border-right:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div{ min-height:86px; padding:14px; }
  body[data-layout-story="b"] .gate-stats div:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div:last-child{ border-right:0; }

  /* the mosaic unstacks, but the rhythm survives: the lead window stays the
     tall one and the two field notes stay letterbox */
  body[data-layout-gallery="b"] .cards{ grid-template-columns:1fr; grid-template-rows:auto; }
  body[data-layout-gallery="b"] .card:first-child{ grid-row:auto; }
  body[data-layout-gallery="b"] .card-fr{ flex:0 0 auto; height:auto; }
  body[data-layout-gallery="b"] .card:first-child .card-fr{ height:auto; aspect-ratio:4 / 5; }
  body[data-layout-gallery="b"] .card:not(:first-child) .card-fr{ aspect-ratio:16 / 10; min-height:0; }

  body[data-layout-curriculum="b"] .cur{ grid-template-columns:1fr; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:auto; min-height:0; padding:20px; }
  body[data-layout-curriculum="b"] .les:hover{ padding-left:20px; }

  body[data-layout-closing="b"] .fin{ display:flex; align-items:center; text-align:center; gap:0; }
  body[data-layout-closing="b"] .fin .eyebrow{ margin:0 0 26px; }
  body[data-layout-closing="b"] .fin h2{ writing-mode:horizontal-tb; font-size:clamp(38px,7.4vw,124px); }
  body[data-layout-closing="b"] .fin p{ margin:26px auto 0; }
  body[data-layout-closing="b"] .fin .cta{ margin-top:40px; }

  body[data-layout-footer="b"] .foot-grid{ grid-template-columns:1fr; }
  body[data-layout-footer="b"] .foot-brand{ grid-column:auto; grid-template-columns:minmax(0,1fr); row-gap:16px; }
  body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){ padding-left:0; border-left:0; }
  body[data-layout-footer="b"] .foot-base{ display:flex; }
  body[data-layout-footer="b"] .foot-base span:last-child{ text-align:left; }
}

/* On a phone two columns leave the chip's copy about 110px once the numeral
   and its gutter are taken out, which is narrow enough to wrap a single word
   to a line. Standing the numeral above the label gives the copy the whole
   column back. */
@media (max-width:560px){
  body[data-layout-hero="b"] .chip{ flex-direction:column; gap:4px; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(22px,7.4vw,30px); }
  body[data-layout-hero="b"] .chip .tx{ padding-top:0; }
  body[data-layout-hero="b"] .chip p{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .mask-line > span,.word{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   ELYRIS — additions on top of the base system.
   Everything above this line is the inherited layout and motion system.
   Everything below is this site's own.
   ===================================================================== */

/* ---------------------------------------------------------- preloader word */
.pre-word{
  font-family:'Wordmark','Onest',sans-serif; font-weight:500;
  font-size:13px; letter-spacing:.44em; color:var(--bone-dim);
  margin-bottom:20px; text-indent:.44em;
}

/* --------------------------------------------------------- the big metric
   The one number the page is built around. It is set on the same optical
   line as the section headline rather than in a card, because a number in
   a card reads as a statistic and this one is the argument. */
.metric-hero{
  margin:clamp(28px,5vw,60px) 0 clamp(34px,6vw,74px);
  padding-bottom:clamp(24px,3.4vw,40px);
  border-bottom:1px solid var(--line-soft);
}
.metric-lead{
  display:flex; align-items:baseline; gap:clamp(10px,1.6vw,26px);
  flex-wrap:wrap; line-height:.92;
}
.metric-big{
  font-family:'Wordmark','Onest',sans-serif;
  font-size:clamp(58px,11.5vw,168px); font-weight:500;
  letter-spacing:-.035em; color:var(--bone);
  font-variant-numeric:tabular-nums;
  text-shadow:0 4px 60px rgba(247,249,251,.8);
}
.metric-big em{
  font-style:normal; font-family:'Onest',sans-serif; font-weight:400;
  font-size:.20em; letter-spacing:.22em; color:var(--bone-dim);
  margin-left:.36em; vertical-align:.34em;
}
.metric-big--t{ color:var(--bone-dim); }
.metric-slash{
  font-size:clamp(34px,6vw,92px); font-weight:200; color:var(--cobalt);
  transform:translateY(-.06em);
}
.metric-cap{
  margin:clamp(16px,2vw,24px) 0 0; max-width:56ch;
  font-size:clamp(16px,1.24vw,20px); line-height:1.62; color:#242c36; font-weight:400;
  letter-spacing:-.004em;
}
.metric-cap::before{
  content:''; display:block; width:34px; height:1px;
  background:var(--cobalt); margin-bottom:14px; opacity:.8;
}

/* ------------------------------------------------------- engine list tags
   The right-hand tag on each engine row is a scope label, not a duration.
   It carries the honest limit of that engine, so it is coloured by weight:
   a decision-grade engine is bright, a context engine is not. */
.les .t{ letter-spacing:.16em; text-transform:uppercase; font-size:9.5px; }
.les:nth-child(1) .t, .les:nth-child(2) .t{ color:var(--ice); }

/* ------------------------------------------------------------ card labels */
.card-lab span{ letter-spacing:.2em; text-transform:uppercase; font-size:9px; }

/* --------------------------------------------------------- no-webgl fallback
   If the hall cannot be built the page still has to read. The canvas goes,
   the wordmark fallback comes in, and the layout carries the whole site. */
.no-webgl #gl, .no-webgl #vignette{ display:none; }
.no-webgl body{ background:#eef1f4; }
.no-webgl .word-fb{ opacity:.62; }   /* the fallback name is the page's only
                                        mark; at .16 it was a watermark */
.no-webgl .card-fr, .no-webgl .peek-fr{
  background:linear-gradient(150deg, #e2e7ec, #e9edf1 60%);
}

/* ------------------------------------------------------------- the scrim
   A live world behind live text is a legibility problem that text-shadow
   alone does not solve: the shadow follows the glyph, and what the reader
   loses is the whole column when a lit face drifts under it.

   The scrim is one fixed layer between the canvas and the page. It is
   dark down the reading edge and along the bottom, and clear through the
   middle and the upper right, which is where the hall is allowed to be
   the loudest thing on screen. It costs one composited layer and it is
   the difference between a demo and a page somebody can read. */
#scrim{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:
    /* The reading wash is an ellipse anchored to the top-left, not a
       column. A full-height column also darkened the bottom-left, which is
       where the first letter of the wordmark sits — the name was arriving
       one letter short of readable on every wide frame. */
    radial-gradient(70% 66% at 0% 24%,
      rgba(247,249,251,.62) 0%,
      rgba(247,249,251,.30) 44%,
      rgba(247,249,251,0)   78%),
    linear-gradient(0deg,
      rgba(247,249,251,.56) 0%,
      rgba(247,249,251,.20) 16%,
      rgba(247,249,251,0)   34%),
    linear-gradient(180deg,
      rgba(247,249,251,.50) 0%,
      rgba(247,249,251,0)   17%);
}
/* On a narrow frame the reading column is the whole width, so a scrim that
   darkens one edge does nothing. The wash turns vertical: dark where the
   copy is, open through the middle where the hall and the wordmark are, and
   dark again under the chapter list. */
@media (max-width: 900px){
  #scrim, body.at-fin #scrim{
    background:linear-gradient(180deg,
      rgba(247,249,251,.94) 0%,
      rgba(247,249,251,.80) 24%,
      rgba(247,249,251,.34) 46%,
      rgba(247,249,251,.30) 62%,
      rgba(247,249,251,.72) 80%,
      rgba(247,249,251,.93) 100%);
  }
}

/* =====================================================================
   THE HERO, AS THE TEMPLATE COMPOSES IT

   The reference composition puts the reading column hard left and short,
   the scroll cue directly under it, the live window down in the open
   right corner, and the name across the whole lower half of the frame.
   Everything below restores that geometry. The single largest thing on
   the page has to be the name; every other element in the hero is placed
   so that it does not compete with it.
   ===================================================================== */
.hero-top{ margin-left:0; max-width:min(600px,47vw); }
.hero-foot{ width:min(480px,40vw); margin-left:0; }
.hero-cue{ justify-content:flex-start; }

/* the live window drops into the open right corner, away from both the
   reading column and the name */
.peek{
  left:auto; right:var(--pad); top:auto; bottom:clamp(38px,7vh,96px);
  width:clamp(168px,17vw,278px);
}
/* A white card on a white world, so the frame is the whole object: a
   hairline, a lift, and a caption set under it rather than on it. */
.peek-fr{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.34));
  outline:1px solid rgba(24,29,36,.26); outline-offset:-1px;
  box-shadow:0 26px 54px -26px rgba(28,36,46,.34), 0 2px 8px -4px rgba(28,36,46,.20);
}
.peek:hover .peek-fr{ outline-color:rgba(24,29,36,.50); }
.peek-play svg{ filter:drop-shadow(0 1px 6px rgba(28,36,46,.45)); }
.peek-play svg path{ fill:#eef1f4; stroke:rgba(24,29,36,.55); stroke-width:1.1; }
.peek-cap b{ color:var(--bone); letter-spacing:.22em; font-size:10.5px; text-transform:uppercase; }

/* the standing label reads down the right edge, hung under the bar */
.hero-side{
  left:auto; right:var(--pad); top:calc(var(--nav-h) + clamp(14px,3vh,42px));
  bottom:auto; transform:none; display:block;
}
.hero-side .v{
  position:static; transform:none; text-transform:uppercase;
  font-size:clamp(15px,1.5vw,23px); letter-spacing:.44em; color:rgba(24,29,36,.42);
}

/* =====================================================================
   THE SHEET

   Two doors close over the page from either side and the index is set on
   the seam where they meet. It is the way into the site at every width,
   not a small-screen fallback: four chambers, in order, at a size you
   read rather than scan.
   ===================================================================== */
.sheet{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  visibility:hidden; transition:visibility 0s linear .78s;
}
html.nav-open .sheet{ pointer-events:auto; visibility:visible; transition-delay:0s; }
html.nav-open, html.nav-open body{ overflow:hidden; }

.sheet-door{
  position:absolute; top:0; bottom:0; width:50.4%;
  background:linear-gradient(180deg,#f4f6f8,#e6eaee);
  transition:transform .78s var(--ease-out);
  will-change:transform;
}
.sheet-l{ left:0;  transform:translate3d(-101%,0,0); border-right:1px solid rgba(24,29,36,.10); }
.sheet-r{ right:0; transform:translate3d( 101%,0,0); }
html.nav-open .sheet-door{ transform:none; }

.sheet-in{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + clamp(20px,5vh,60px)) var(--pad) clamp(24px,5vh,54px);
  opacity:0; transition:opacity .4s var(--ease);
}
html.nav-open .sheet-in{ opacity:1; transition-delay:.42s; }

.sheet-head{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  margin-bottom:clamp(20px,4vh,48px);
}
.sheet-head .rule{ flex:1 1 auto; height:1px; background:var(--line); }

.sheet-nav{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft); }
.sheet-nav a{
  position:relative; display:grid; align-items:baseline;
  grid-template-columns:clamp(46px,5vw,86px) minmax(0,auto) minmax(0,1fr);
  gap:clamp(12px,2.4vw,38px);
  padding:clamp(15px,2.4vh,30px) 0; border-bottom:1px solid var(--line-soft);
  transition:padding-left .55s var(--ease-out);
}
.sheet-nav a::before{
  content:''; position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); top:0; bottom:0;
  background:rgba(24,29,36,.045); opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
}
.sheet-nav a:hover::before{ opacity:1; }
.sheet-nav a:hover{ padding-left:clamp(8px,1.4vw,20px); }
.sheet-nav .n{
  font-size:11px; letter-spacing:.16em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.sheet-nav .t{
  font-family:'Wordmark','Onest',sans-serif; font-weight:500;
  font-size:clamp(30px,5.2vw,68px); letter-spacing:-.02em; line-height:1;
  text-transform:uppercase; color:var(--bone);
}
.sheet-nav .d{
  font-size:clamp(13.5px,1.08vw,16px); line-height:1.6; color:#252d37;
  max-width:44ch; justify-self:end; text-align:right;
}
.sheet-foot{
  display:flex; flex-wrap:wrap; gap:8px clamp(18px,3vw,48px);
  margin-top:clamp(20px,4vh,44px);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:820px){
  .sheet-door{ width:100.5%; }
  .sheet-r{ display:none; }
  .sheet-l{ border-right:0; }
  .sheet-nav a{ grid-template-columns:44px minmax(0,1fr); }
  .sheet-nav .d{ display:none; }
}

/* =====================================================================
   THE ENGINE LIST

   Five rows carrying the honest scope of five engines. It was set at the
   size of a table of contents, which is the wrong size for the one place
   on the page where the reader is being told what the product will not
   claim. It is set as reading now.
   ===================================================================== */
.les{ grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr) 116px; }
.les h3{ font-size:clamp(20px,1.9vw,31px); color:#080b0f; }
.les h3 em{ font-size:.52em; letter-spacing:.2em; margin-left:14px; }
.les p{ font-size:clamp(15px,1.18vw,18px); line-height:1.62; color:#232b35; font-weight:400; }
.les .t{ font-size:10px; }
@media (max-width:1080px){
  .les{ grid-template-columns:48px minmax(0,1fr) 104px; }
}

/* the closing chamber is the one place the page speaks in the first
   person, so it is set at the size of a statement */
.sec.fin .body-lg{ max-width:62ch; font-size:clamp(15px,1.2vw,19px); }

/* =====================================================================
   READING AGAINST A WHITE WORLD

   The template was drawn light-on-dark, where a rule at 13% alpha is a
   clear line. Inverted, the same rule is a rumour. Everything below is a
   contrast correction, not a restyle: the frames, the small caps and the
   scope tags all had to come back up to a weight you can actually see on
   paper this bright.
   ===================================================================== */
.card-fr{
  outline-color:rgba(24,29,36,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),
             0 22px 46px -28px rgba(28,36,46,.34);
}
.card:hover .card-fr{ outline-color:rgba(24,29,36,.46); }
.card-fr::after{
  background:linear-gradient(transparent 40%, rgba(247,249,251,.86));
}
.card-lab b{ color:var(--bone); }
.card-lab span{ color:var(--bone-dim); }
.card-meta{ color:var(--muted); }

/* the scope tag is the honest limit of an engine. It is the last thing on
   the page that should be a whisper. */
.les .t{ color:var(--bone-dim); font-weight:500; }
.les:nth-child(1) .t, .les:nth-child(2) .t{ color:var(--bone); }
.les h3 em{ color:#8a94a0; }

.sec-head .k{ color:var(--bone-dim); }
.sec-head .rule{ background:var(--line); }
.eyebrow{ color:var(--bone-dim); }
.hero-cue{ color:var(--bone-dim); }

/* ---------------------------------------------------- the bar over the sheet
   The bar has to outrank the doors. Below them the burger goes under the
   panel the moment it opens, and the only way back out of the menu is the
   Escape key — which is not a way out for anybody using a trackpad. */
.nav.menu-open{ z-index:95; transform:none; transition:none; }
html.nav-open .nav-links{ opacity:0; pointer-events:none; transition:opacity .25s; }
/* the burger becomes the close mark at every width, not only on a phone */
.nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg); }
.nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
.nav-burger i{ background:var(--bone); }

/* the index column reads as a caption on the row, so it must not wrap into
   a second line under its own title */
.sheet-nav .d{ max-width:40ch; }

/* -------------------------------------------------------------- narrow frames
   The hero composition above holds the reading column to under half the
   frame, which is right on a wide screen and impossible on a phone: at
   390 pixels, 47vw is 183, and the headline simply ran off the side. The
   column goes full width again, and the standing label — which crosses
   the headline at this size — goes away. */
@media (max-width:1080px){
  .hero-top{ max-width:none; }
  .hero-foot{ width:auto; }
}
@media (max-width:820px){
  .hero-side{ display:none; }
  .sheet-in{ justify-content:flex-start; }
}

/* =====================================================================
   THE CLOSING CHAMBER

   It was centred, which put the reading column directly over the one
   object the whole page is an argument for. Everything that made the
   copy legible there — the section wash, the closing scrim — was landing
   on the evidence slab, and the slab came back the colour of the room.

   So the two stop sharing a space. The copy holds the left, the slab
   lands to the right of it, and neither needs anything taken off the
   other to be read.
   ===================================================================== */
.sec.fin{ align-items:flex-start; text-align:left; }
.sec.fin .eyebrow{ margin-bottom:22px; }
.sec.fin h2{ max-width:none; }
.sec.fin p{ margin:26px 0 0; max-width:38ch; }
.sec.fin .body-lg{ max-width:38ch; }
.sec.fin .cta{ margin-top:40px; }
@media (min-width:901px){
  .sec.fin > *{ max-width:min(620px,46vw); }
}

/* =====================================================================
   READABILITY WITHOUT PLATES

   The world behind the type is near white. So the answer is not a panel
   under the words — a panel reads as a grey box stuck on the render.
   The answer is ink: darker colour, more weight, larger size. Nothing
   is drawn behind a paragraph anywhere on this page.
   ===================================================================== */
#mechanism .les:last-child{ border-bottom:0; }

/* --- the mechanism haze ----------------------------------------------
   Chapter 03 puts five rows of specification across the full width of
   the busiest part of the hall, so it is the one chapter where the
   scene wins the contrast fight. It gets more of the same wash every
   chapter already has — not a panel, not an edge, not a rectangle: the
   same radial haze, wider and a little denser, feathered to nothing far
   outside the section. You should not be able to point at it. You
   should only find that the words came forward. */
#mechanism::before{
  /* The base scrim is masked transparent-at-top, solid-at-bottom, which is
     right for a soft wash and wrong for a strong one: at this density the
     solid end lands as a straight white line across the top of chapter 04.
     So this one carries its own fade at BOTH ends. Nothing is a rectangle:
     the wash starts at nothing above the chapter, holds through the list,
     and is back to nothing before the next chapter begins. */
  inset:-8% -6%;
  background:linear-gradient(180deg,
    rgba(249,251,253,0)    0%,
    rgba(249,251,253,.34) 10%,
    rgba(249,251,253,.74) 22%,
    rgba(249,251,253,.80) 50%,
    rgba(249,251,253,.74) 78%,
    rgba(249,251,253,.30) 91%,
    rgba(249,251,253,0)  100%);
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
/* the rows themselves take the last of the contrast: full ink, and the
   hairlines darkened to match, so the list reads as a table and not as
   text floating on a render */
#mechanism .les p{ color:#161d26; }
#mechanism .les h3{ color:#05080c; }
#mechanism .les{ border-bottom-color:rgba(24,29,36,.16); }

/* =====================================================================
   CHAPTER 02 — THE THREE PILLARS, WITH SOMETHING IN THEM

   They were three windows with a caption. A window with a caption is a
   picture, and a picture on a page like this has to earn its space or
   be cut. Each one now carries the physical quantity it stands for, the
   line that says why that quantity decides an outcome, and a way in.
   ===================================================================== */
.cards{ align-items:stretch; }
.card{ display:flex; flex-direction:column; }
.card-fr{ aspect-ratio:4/3.4; }
.card-body{
  position:relative; z-index:1; flex:1 1 auto;
  padding:clamp(18px,1.7vw,26px) clamp(18px,1.8vw,28px) clamp(20px,2vw,30px);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  box-shadow:0 0 0 1px rgba(24,29,36,.07), 0 26px 60px -42px rgba(16,20,26,.42);
  transition:box-shadow .5s var(--ease), transform .5s var(--ease-out);
}
.card:hover .card-body{ box-shadow:0 0 0 1px rgba(24,29,36,.16), 0 30px 66px -38px rgba(16,20,26,.5); }
.card-body h3{
  margin:0; font-size:clamp(17px,1.42vw,22px); font-weight:400;
  letter-spacing:-.01em; color:#0f1319;
}
.card-body h3 em{
  display:block; margin-top:7px; font-style:normal;
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#6f7985;
}
.card-body p{
  margin:14px 0 0; font-size:14.5px; line-height:1.58; color:#39424d; font-weight:400;
}
.card-spec{
  display:flex; gap:clamp(14px,1.6vw,26px); margin-top:18px;
  padding-top:15px; border-top:1px solid rgba(24,29,36,.10);
}
.card-spec div{ flex:1 1 0; min-width:0; }
.card-spec b{
  display:block; font-size:clamp(15px,1.24vw,19px); font-weight:400;
  letter-spacing:-.015em; color:#171c23; font-variant-numeric:tabular-nums;
}
.card-spec span{
  display:block; margin-top:5px; font-size:9.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:#6f7985; line-height:1.4;
}
.card-go{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#171c23;
}
.card-go i{
  width:22px; height:1px; background:#171c23; display:block;
  transition:width .5s var(--ease-out);
}
.card:hover .card-go i{ width:34px; }
.card-meta{ padding:0 clamp(18px,1.8vw,28px); }
@media (max-width:900px){
  .cards{ grid-template-columns:1fr; gap:34px; }
  .card:nth-child(1),.card:nth-child(2),.card:nth-child(3){ transform:none; }
}

/* =====================================================================
   THE INTEREST FORM

   The page ends on a question, so it should end on a way to answer it.
   Set as a document, not a widget: real labels, real field heights, and
   no placeholder standing in for a label.
   ===================================================================== */
/* The closing chapter is a fold of its own. Evidence ends, the page takes a
   breath, and the form owns one screen: the head at the top of it, the two
   columns level, and nothing of the next thing showing. */
.sec.contact{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:clamp(96px,14vh,170px);
  padding-bottom:clamp(96px,14vh,170px);
}
.sec.contact .sec-head{ margin-bottom:clamp(40px,7vh,90px); }
.sec.contact .form-wrap{ flex:1 1 auto; align-content:center; }
/* the closing fold sits on the busiest part of the hall. Same wash as
   chapter 03: fades in from nothing, fades back to nothing, no edge. */
.sec.contact::before{
  inset:-6% -6%;
  background:linear-gradient(180deg,
    rgba(249,251,253,0)    0%,
    rgba(249,251,253,.40) 12%,
    rgba(249,251,253,.72) 26%,
    rgba(249,251,253,.76) 52%,
    rgba(249,251,253,.66) 80%,
    rgba(249,251,253,.26) 93%,
    rgba(249,251,253,0)  100%);
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.form-wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,5vw,86px); align-items:start;
}
.form-head h2{ max-width:13ch; }
.form-head{ align-self:center; }
.form-head p{ margin:22px 0 0; max-width:34ch; }

.form-note{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:13px; line-height:1.62; color:#5b6570; max-width:34ch;
}
.form{
  position:relative; z-index:1;
  padding:clamp(26px,2.8vw,42px) clamp(24px,2.8vw,44px) clamp(28px,3vw,46px);
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.94));
  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 0 0 1px rgba(24,29,36,.08),
    0 34px 80px -46px rgba(16,20,26,.44);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.6vw,24px); }
.fld{ display:block; margin-bottom:clamp(16px,1.6vw,22px); }
.fld > span{
  display:block; margin-bottom:9px;
  font-size:9.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:#5b6570;
}
.fld > span b{ color:#8d3b3b; font-weight:500; }
.fld input, .fld select, .fld textarea{
  width:100%; display:block; font:inherit; font-size:15px; font-weight:400; color:#14181e;
  background:rgba(255,255,255,.72); border:1px solid rgba(24,29,36,.16); border-radius:0;
  padding:12px 13px; transition:border-color .3s, background .3s, box-shadow .3s;
  -webkit-appearance:none; appearance:none;
}
.fld select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2339424d' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px;
  padding-right:34px; cursor:pointer;
}
.fld textarea{ min-height:112px; resize:vertical; line-height:1.55; }
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:0; border-color:var(--bone); background:#fff;
  box-shadow:0 0 0 3px rgba(24,29,36,.07);
}
.fld input::placeholder, .fld textarea::placeholder{ color:#9aa3ae; }
.form-send{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:clamp(8px,1vw,14px); flex-wrap:wrap;
}
.form-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; border:1px solid var(--bone); color:var(--bone);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:color .45s var(--ease);
}
.form-btn i{
  position:absolute; inset:0; background:var(--bone);
  transform:translate3d(0,101%,0); transition:transform .55s var(--ease-out);
}
.form-btn span, .form-btn svg{ position:relative; z-index:1; }
.form-btn:hover{ color:#fff; }
.form-btn:hover i{ transform:none; }
.form-btn[disabled]{ opacity:.5; pointer-events:none; }
.form-small{ font-size:11.5px; line-height:1.5; color:#6f7985; max-width:30ch; }
.form-msg{
  margin-top:20px; padding:14px 16px; font-size:14px; line-height:1.55;
  border-left:2px solid var(--bone); background:rgba(24,29,36,.045); color:#2c343e;
  display:none;
}
.form-msg.on{ display:block; }
.form-msg.bad{ border-left-color:#8d3b3b; background:rgba(141,59,59,.06); }
.form.sent .form-fields{ display:none; }
@media (max-width:900px){
  .form-wrap{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}