/* ============================================================
   THE ALETHEIA INSTITUTE — "The Unconcealment"
   Design system: Midnight & Gilt  (v2.1 — colorist-refined)
   Complementary scheme: analogous cool ground (H210–216)
   vs the gold metal family (H41–45). Gold now carries a
   bronze shadow stop; teal is demoted below the metal.
   ============================================================ */

/* ---------- Fonts (self-hosted — this site calls no one) ---------- */
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ----------
   THE LIVERY — the named tinctures of the Institute.
   In heraldry, azure signifies truth; or (gold), wisdom.
   Canonical values live in tokens.json; the test suite holds
   this file to them. Change them there, or not at all. */
:root{
  /* named tinctures */
  --aletheia-midnight:#0B1F33;   /* the brand azure — on the site, LIGHT, never ground */
  --midnight-ink:#0A0E14;        /* the ground — desaturated blue-black, jeweler's velvet */
  --veritas-gold:#E7C878;        /* the metal — or: wisdom, always foil, never flat */
  --ledger-bronze:#7A5E2A;       /* the metal's shadow turn */
  --institute-ivory:#F6F3EA;     /* the text tincture — gold's own light */
  --verity-teal:#3FBFAE;         /* signal only: live states, citations, evidence */

  /* functional aliases */
  --ink:var(--midnight-ink);
  --navy:var(--aletheia-midnight);
  --navy-2:#1B2431;            /* raised slate, not cobalt */
  --card:#141A23;              /* off-black card; gold hairlines carry elevation */
  --line:rgba(231,200,120,.16);
  --hairline:rgba(231,200,120,.28);
  --gold-shadow:var(--ledger-bronze);
  --gold-deep:#B99549;
  --gold:var(--veritas-gold);
  --gold-hi:#F7E3B0;
  --teal:var(--verity-teal);
  --ivory:var(--institute-ivory);
  --ivory-dim:rgba(246,243,234,.70);   /* raised from .62 — AAA on every surface */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --scrollv:0;                 /* scroll-velocity, written by JS */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;scroll-padding-top:84px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--ground);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(231,200,120,.28);color:var(--fg)}

a{color:var(--gold);text-decoration:none;transition:color .3s}
a:hover{color:var(--gold-hi)}
img,svg{max-width:100%}

/* Keyboard users get gold, always */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}
.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  background:var(--gold);color:var(--ground);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:3px;
  transform:translateY(-160%);transition:transform .25s;
}
.skip:focus-visible{transform:none;color:var(--ground)}

/* ---------- Atmosphere: layered aurora + candlelight + grain ----------
   Blur baked into radial gradients (no filter: cost) — colorist R5:
   an amber glow so light appears to emanate from the seal itself. */
/* The ground stays ink; azure appears only as breath — soft radial light,
   never a painted field. (Feedback-driven: the page must read editorial,
   not glossy; blue is illumination, not wallpaper.) */
.atmosphere{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 18% 12%, rgba(14,58,58,.12), transparent 60%),
    radial-gradient(55vw 55vw at 85% 30%, rgba(26,31,75,.14), transparent 62%),
    radial-gradient(70vw 60vw at 50% 95%, rgba(11,31,51,.28), transparent 65%),
    linear-gradient(180deg,var(--ground) 0%,#0D1219 55%,var(--ground) 100%);
}
.aurora{
  position:absolute;border-radius:50%;opacity:.13;
  will-change:transform;
  background:radial-gradient(circle, var(--c) 0%, rgba(0,0,0,0) 68%);
  translate:0 calc(var(--scrollv) * var(--lean, -14px));
  transition:translate .6s var(--ease-out);
}
.aurora.a1{--c:#0E5A52;--lean:-14px;width:46vw;height:46vw;left:-8vw;top:6vh;animation:drift1 34s ease-in-out infinite alternate}
.aurora.a2{--c:#232B6E;--lean:-20px;width:40vw;height:40vw;right:-6vw;top:34vh;animation:drift2 42s ease-in-out infinite alternate}
.aurora.a3{--c:#0E3A3A;--lean:-10px;width:52vw;height:52vw;left:24vw;bottom:-14vh;animation:drift1 50s ease-in-out infinite alternate-reverse}
.aurora.a4{--c:#3A2A0E;--lean:-8px;width:44vw;height:44vw;left:28vw;top:2vh;opacity:.12;animation:drift2 58s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-4vh,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-5vw,5vh,0) scale(.94)}}

/* Film grain — pure SVG feTurbulence; breathes with scroll velocity */
.grain{
  position:fixed;inset:-6%;z-index:60;pointer-events:none;
  opacity:calc(.05 + var(--scrollv) * .04);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}34%{transform:translate(3%,-5%)}
  51%{transform:translate(-3%,-2%)}68%{transform:translate(5%,4%)}85%{transform:translate(-2%,5%)}100%{transform:translate(0,0)}
}

/* ---------- Loader ----------
   Hidden unless JS runs (no-JS users go straight to content).
   No opaque backdrop of its own: the two shutters ARE the backdrop,
   and the artwork sits above them so the draw is actually visible. */
#loader{display:none}
.js #loader{
  display:flex;position:fixed;inset:0;z-index:100;
  align-items:center;justify-content:center;
}
#loader .shutter{position:absolute;left:0;width:100%;height:51%;background:var(--ground);z-index:0}
#loader .shutter.top{top:0;transform-origin:top}
#loader .shutter.bottom{bottom:0;transform-origin:bottom}
#loader .mark{position:relative;z-index:1;width:min(34vmin,240px);height:min(34vmin,240px)}
#loader .mark path,#loader .mark circle,#loader .mark line{
  fill:none;stroke:var(--gold);stroke-linecap:round;
}
#loader .word{
  position:absolute;z-index:1;bottom:12vh;left:0;right:0;text-align:center;
  font-family:var(--serif);font-size:12px;letter-spacing:7px;color:var(--gold);
  opacity:0;
}
body.no-loader #loader{display:none}

/* ---------- Progress hairline + cursor ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hi));
  transform-origin:left;transform:scaleX(0);
}
#cursor{
  position:fixed;z-index:90;width:26px;height:26px;border-radius:50%;
  pointer-events:none;left:0;top:0;
  background:radial-gradient(circle,rgba(231,200,120,.55),rgba(231,200,120,0) 70%);
  transition:width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s;
  opacity:0;
}
body.cursor-on #cursor{opacity:1}
#cursor.grow{width:64px;height:64px}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ---------- Nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background .5s,backdrop-filter .5s,border-color .5s,transform .6s var(--ease-out);
  border-bottom:1px solid transparent;
}
.js nav{transform:translateY(-100%)}
.js body.ready nav,body.ready nav{transform:translateY(0)}
nav.scrolled{background:rgba(7,10,15,.74);backdrop-filter:blur(14px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;max-width:1240px;margin:0 auto;gap:18px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:38px;width:38px}
.brand span{font-family:var(--serif);font-weight:600;letter-spacing:3px;font-size:13.5px;color:var(--fg)}
.nav-links{display:flex;gap:22px;font-size:13px;letter-spacing:.6px}
.nav-links a{color:var(--dim);position:relative;padding:12px 4px}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-cmdk{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:1px;color:var(--dim);
  background:rgba(246,243,234,.04);border:1px solid var(--line);border-radius:4px;
  padding:9px 14px;transition:color .3s,border-color .3s;
}
.nav-cmdk:hover{color:var(--gold);border-color:var(--hairline)}
.nav-cmdk kbd{
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--gold);
  border:1px solid var(--hairline);border-radius:3px;padding:1px 5px;
}
.nav-toggle{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .brand span{display:none}          /* the seal alone carries the brand on small screens */
  .nav-cmdk span.label{display:none}
  .nav-inner{padding:12px 16px}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;
    width:44px;height:44px;padding:10px;background:none;border:1px solid var(--line);border-radius:4px;
  }
  .nav-toggle span{display:block;height:1.5px;background:var(--gold);transition:transform .3s,opacity .3s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
#mobile-menu{
  position:fixed;inset:0;z-index:65;background:rgba(7,10,15,.96);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
#mobile-menu.open{display:flex}
#mobile-menu a{
  font-family:var(--serif);font-size:26px;color:var(--fg);padding:14px 30px;
}
#mobile-menu a:hover{color:var(--gold)}

/* ---------- Hero ---------- */
#hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:90px 24px 60px;overflow:hidden;
}
#constellation{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-seal-static{display:none}
.hero-content{position:relative;z-index:2;pointer-events:none}
.hero-content a{pointer-events:auto}
.hero-kicker{
  font-family:var(--serif);font-size:clamp(11px,1.2vw,13px);letter-spacing:8px;
  color:var(--gold);margin-bottom:26px;transition:color .4s;
}
.hero-kicker.flash{color:var(--teal)}
.hero-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(44px,8.4vw,118px);
  line-height:1.05;letter-spacing:-.01em;
}
/* the reveal mask must not amputate descenders: pad the mask past the
   baseline, pull the next line back up by the same amount */
.hero-title .line{display:block;overflow:hidden;padding-bottom:.25em;margin-bottom:-.17em}
.hero-title .line>span{display:inline-block}
/* Gold foil — 4-stop ramp; the bronze base gives the metal its shadow turn */
.foil{
  background:linear-gradient(100deg,var(--gold-shadow) 0%,var(--gold-deep) 22%,var(--gold) 45%,var(--gold-hi) 58%,var(--gold) 74%,var(--gold-shadow) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero-sub{
  margin:64px auto 0;max-width:620px;color:var(--dim);
  font-size:clamp(15px,1.6vw,18px);font-weight:400;
}
.hero-motto{
  margin-top:22px;font-family:var(--serif);font-size:12.5px;letter-spacing:5px;color:var(--gold);
}
.hero-motto em{font-style:italic;letter-spacing:1px;color:var(--dim);margin-left:12px;text-transform:none}
.hero-cta{margin-top:44px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.scroll-hint{
  font-family:var(--serif);
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--dim);font-size:10.5px;letter-spacing:3.5px;
}
.scroll-hint .stem{width:1px;height:52px;overflow:hidden;position:relative}
.scroll-hint .stem::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:fall 2.2s var(--ease-out) infinite;
}
@keyframes fall{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:15px 34px;font-weight:500;font-size:14px;letter-spacing:1px;
  border-radius:2px;position:relative;overflow:hidden;
  transition:color .35s,border-color .35s;
}
.btn-gold{background:linear-gradient(115deg,var(--gold-shadow),var(--gold-deep) 30%,var(--gold) 62%,var(--gold-hi));color:var(--ground)}
.btn-gold:hover{color:var(--ground);box-shadow:0 8px 34px -8px rgba(231,200,120,.5)}
.btn-gold:focus-visible{color:var(--ground)}
.btn-ghost{border:1px solid var(--hairline);color:var(--gold)}
.btn-ghost:hover{border-color:var(--gold)}

/* ---------- Section scaffolding ---------- */
section{position:relative;padding:130px 0}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* Azure as light: the brand navy pools softly behind the interactive
   surfaces — the terminal, the tiers, the inquiry — and nowhere else. */
.azure-pool{position:relative}
.azure-pool::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:6% 0 -10% 0;   /* never widen the layout — the ellipse bleeds, the box doesn't */
  background:radial-gradient(82% 62% at 50% 58%, rgba(20,42,66,.34), transparent 72%);
  transform:translateY(var(--pooly,0px));   /* parallax: the light lags the page */
}
/* section headings ride above anything parallaxing beneath them */
section .kicker,section h2.sec{position:relative;z-index:2}
.kicker{
  font-family:var(--serif);letter-spacing:4px;font-size:12px;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block;flex:none}
.kicker.replayable{cursor:pointer;user-select:none;transition:color .3s}
.kicker.replayable:hover{color:var(--gold-hi)}
h2.sec{
  font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.4vw,54px);
  line-height:1.08;letter-spacing:-.01em;max-width:820px;
}
.lead{color:var(--dim);max-width:720px;font-size:16.5px;margin-top:22px}

/* ---------- Manifesto (the unconcealment) ---------- */
#manifesto{padding:0}
.manifesto-pin{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
}
.beam{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.beam-spot{
  position:absolute;left:50%;top:0;width:92vw;height:92vw;
  margin-left:-46vw;margin-top:-46vw;
  background:radial-gradient(closest-side,rgba(231,200,120,.10),transparent);
  will-change:transform;
}
.manifesto-body{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:120px 28px}
.manifesto-text{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,3vw,34px);line-height:1.5;letter-spacing:.002em;
}
.manifesto-text .w{display:inline-block}
/* Resting words must still clear WCAG contrast on their own (axe-verified):
   .5 × ivory keeps 4.5:1+ on the field, then the light doubles them to full.
   Gold emphasis rests brighter (.68 → 5.5:1) — the truth previews itself. */
.js .manifesto-text .w{opacity:.5}
.js .manifesto-text .em .w{opacity:.68}
.manifesto-text .em{color:var(--gold)}
.manifesto-sig{
  margin-top:44px;font-family:var(--serif);font-size:13px;letter-spacing:3px;color:var(--gold);
}
.js .manifesto-sig{opacity:0;transform:translateY(14px)}

/* ---------- Tiers ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:64px;perspective:1400px}
@media(max-width:840px){.tiers{grid-template-columns:1fr}}
.tier{
  position:relative;border-radius:10px;padding:46px 42px;
  background:linear-gradient(160deg,rgba(26,33,43,.92),rgba(13,17,23,.95));
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:border-color .4s;
  overflow:hidden;
}
.tier::before{
  content:"";position:absolute;inset:0;border-radius:10px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(231,200,120,.5),transparent 38%,transparent 62%,rgba(122,94,42,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s;
}
.tier.t2::before{background:linear-gradient(140deg,rgba(63,191,174,.5),transparent 38%,transparent 62%,rgba(63,191,174,.22))}
.tier:hover::before{opacity:1}
.tier .numeral{
  font-family:var(--serif);font-weight:600;font-size:64px;line-height:1;margin-bottom:22px;
}
.tier.t2 .numeral.foil{
  background:linear-gradient(100deg,#14655B,var(--teal) 45%,#8fdccf 60%,var(--teal) 75%,#14655B);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tier .tn{font-family:var(--serif);letter-spacing:4px;font-size:11.5px;color:var(--gold);margin-bottom:12px}
.tier.t2 .tn{color:var(--teal)}
.tier h3{font-family:var(--serif);font-weight:600;font-size:26px;margin-bottom:16px}
.tier>p{color:var(--dim);font-size:15px;margin-bottom:24px}
.tier ul{list-style:none}
.tier li{
  padding:11px 0 11px 30px;position:relative;font-size:14.5px;
  border-top:1px solid rgba(246,243,234,.06);
}
.tier li::before{content:"✦";position:absolute;left:2px;top:11px;color:var(--gold);font-size:12px}
.tier.t2 li::before{color:var(--teal)}
.tier .shine{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(560px 560px at var(--mx,50%) var(--my,50%),rgba(246,243,234,.06),transparent 55%);
}
.tier:hover .shine{opacity:1}

/* ---------- Method ---------- */
#method .steps{position:relative;margin-top:70px}
.method-line{
  position:absolute;left:27px;top:0;bottom:0;width:1px;background:rgba(231,200,120,.12);
}
.method-line .fill{
  position:absolute;left:0;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,var(--gold),var(--gold-hi));
  transform-origin:top;transform:scaleY(0);
}
.step{
  display:grid;grid-template-columns:56px 1fr;gap:34px;align-items:start;
  padding:38px 0;position:relative;
}
.step .dot{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:15px;color:var(--gold);
  border:1px solid var(--hairline);background:var(--ground);
  position:relative;z-index:1;transition:box-shadow .5s,border-color .5s;
}
.step.lit .dot{border-color:var(--gold);box-shadow:0 0 34px -6px rgba(231,200,120,.55)}
.step h3{font-family:var(--serif);font-weight:600;font-size:24px;margin-bottom:8px}
.step p{color:var(--dim);max-width:560px;font-size:15px}
.step .g{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:120px;font-weight:300;color:rgba(231,200,120,.05);
  user-select:none;line-height:1;
}
@media(max-width:700px){.step .g{display:none}}

/* ---------- Demo terminal ---------- */
#demo{padding-bottom:150px}
.terminal{
  margin-top:64px;border-radius:12px;overflow:hidden;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,#0D1219,#090D13);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8),0 0 90px -50px rgba(231,200,120,.25);
  max-width:860px;
}
.term-bar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;
  background:rgba(246,243,234,.03);border-bottom:1px solid rgba(246,243,234,.06);
}
.term-bar .dot-r,.term-bar .dot-y,.term-bar .dot-g{width:11px;height:11px;border-radius:50%}
.dot-r{background:#E06C5F}.dot-y{background:#E7C878}.dot-g{background:#57BC8B}
.term-bar .title{
  flex:1;text-align:center;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11.5px;color:var(--dim);letter-spacing:1px;
}
.term-bar .badge{
  font-size:10.5px;letter-spacing:2px;color:var(--ground);font-weight:600;
  background:var(--gold);padding:3px 9px;border-radius:3px;
}
.term-body{
  padding:26px 28px 30px;min-height:300px;cursor:pointer;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13.5px;line-height:1.75;
}
.term-body .q{color:var(--gold)}
.term-body .q::before{content:"❯ ";color:var(--teal)}
.term-body .a{color:var(--fg);white-space:pre-wrap}
.term-body .cite{color:var(--teal);font-size:12px}
.term-body .caret{
  display:inline-block;width:8px;height:16px;background:var(--gold);
  vertical-align:text-bottom;animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.term-next{
  margin:18px 28px 26px;display:inline-block;cursor:pointer;
  font-size:12px;letter-spacing:2px;color:var(--dim);
  border:1px solid rgba(246,243,234,.14);padding:14px 22px;border-radius:3px;
  transition:color .3s,border-color .3s,opacity .3s;
  opacity:0;visibility:hidden;pointer-events:none;
  background:none;font-family:var(--sans);
}
.term-next.show{opacity:1;visibility:visible;pointer-events:auto}
.term-next:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- Principles ---------- */
#principles{overflow:hidden}
.glyph-field{position:absolute;inset:0;pointer-events:none;z-index:0}
.glyph{
  position:absolute;font-family:var(--serif);font-weight:300;
  color:rgba(231,200,120,.045);user-select:none;line-height:1;
}
.principles-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:96px;
}
@media(max-width:860px){.principles-grid{grid-template-columns:1fr}}
.pr{
  border-radius:10px;padding:40px 34px;
  background:rgba(20,26,35,.78);
  border:1px solid var(--line);
}
.pr h3{
  font-family:var(--serif);font-weight:600;letter-spacing:3px;font-size:15px;
  color:var(--gold);margin-bottom:16px;
}
.pr p{color:var(--dim);font-size:14.5px}

/* ---------- Inquiry: a conversation, not a form ---------- */
.inquiry{
  margin-top:56px;border-radius:12px;overflow:hidden;max-width:760px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,#0D1219,#090D13);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8),0 0 90px -50px rgba(231,200,120,.25);
}
.inq-body{padding:30px 32px 34px;min-height:280px}
.inq-dots{display:flex;gap:9px;margin-bottom:26px}
.inq-dot{width:8px;height:8px;border-radius:50%;background:rgba(246,243,234,.14);transition:background .3s}
.inq-dot.done{background:var(--gold-deep)}
.inq-dot.now{background:var(--gold);box-shadow:0 0 10px rgba(231,200,120,.6)}
.inq-q{
  font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);margin-bottom:20px;
  display:flex;gap:12px;align-items:baseline;
}
.inq-q .inq-prompt{color:var(--teal);font-family:ui-monospace,Menlo,monospace;font-size:18px;flex:none}
.inq-q label{cursor:text}
.inq-body input,.inq-body textarea{
  width:100%;background:rgba(246,243,234,.04);color:var(--fg);
  border:1px solid rgba(246,243,234,.14);border-radius:4px;
  font-family:var(--sans);font-size:16px;line-height:1.55;
  padding:14px 16px;outline:none;resize:vertical;
  transition:border-color .3s;
}
.inq-body input:focus,.inq-body textarea:focus{border-color:var(--gold)}
.inq-body ::placeholder{color:rgba(246,243,234,.38)}
.inq-err{color:#E8A48E;font-size:13px;min-height:22px;padding-top:6px}
.inq-nav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:14px}
.inq-actions{display:flex;gap:14px;align-items:center}
.inq-back,.inq-copy{
  background:none;border:1px solid rgba(246,243,234,.14);border-radius:3px;cursor:pointer;
  color:var(--dim);font-family:var(--sans);font-size:12px;letter-spacing:2px;
  padding:12px 18px;transition:color .3s,border-color .3s;
}
.inq-back:hover,.inq-copy:hover{color:var(--gold);border-color:var(--gold)}
.inq-continue{
  background:linear-gradient(115deg,var(--gold-shadow),var(--gold-deep) 30%,var(--gold) 62%,var(--gold-hi));
  color:var(--ground);border:0;border-radius:3px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:2px;
  padding:14px 26px;transition:box-shadow .3s;
}
.inq-continue:hover{box-shadow:0 8px 30px -8px rgba(231,200,120,.5)}
.inq-send{padding:13px 26px;font-size:13px;letter-spacing:2px}
.inq-review{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;line-height:1.8;
  color:var(--fg);background:rgba(246,243,234,.03);
  border:1px solid rgba(246,243,234,.08);border-radius:4px;
  padding:18px 20px;white-space:pre-wrap;overflow-x:auto;margin-bottom:8px;
}
.inq-note{margin-top:22px;color:var(--dim);font-size:13px;max-width:760px}

/* ---------- Footer + vitals ---------- */
footer{
  padding:90px 24px 60px;text-align:center;border-top:1px solid var(--line);
  position:relative;
}
footer .seal-slow{height:72px;width:72px;margin-bottom:20px;animation:spin 120s linear infinite}
footer .seal-slow.pulse{animation:spin 120s linear infinite, sealpulse 1.2s ease-in-out 2}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sealpulse{50%{filter:drop-shadow(0 0 18px rgba(63,191,174,.8))}}
footer .fm{font-family:var(--serif);letter-spacing:4px;font-size:12px;color:var(--gold)}
footer .promise{
  margin-top:22px;font-family:var(--serif);font-style:italic;
  color:var(--dim);font-size:15px;
}
footer .made{
  margin:14px auto 0;max-width:640px;font-family:var(--serif);
  color:rgba(246,243,234,.58);font-size:13px;letter-spacing:.5px;
}
footer .made .whisper-em{font-style:italic;color:rgba(231,200,120,.66)}
#vitals{
  margin:34px auto 0;max-width:820px;
  display:flex;justify-content:center;gap:34px;flex-wrap:wrap;
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:1px;
  color:var(--dim);
  border-top:1px solid rgba(246,243,234,.08);border-bottom:1px solid rgba(246,243,234,.08);
  padding:14px 10px;
}
#vitals b{color:var(--gold);font-weight:600}
#vitals .live{color:var(--teal)}
footer .fine{color:var(--dim);font-size:12px;margin-top:26px}

/* ---------- Command palette: "Ask this page" ---------- */
#palette{
  position:fixed;inset:0;z-index:110;display:none;
  align-items:flex-start;justify-content:center;padding:12vh 20px 0;
  background:rgba(7,10,15,.74);backdrop-filter:blur(6px);
}
#palette.open{display:flex}
.palette-box{
  width:min(640px,100%);border-radius:12px;overflow:hidden;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,#0D1219,#090D13);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
}
.palette-box input{
  width:100%;background:none;border:0;outline:0;
  font-family:ui-monospace,Menlo,monospace;font-size:15px;color:var(--fg);
  padding:18px 20px;border-bottom:1px solid rgba(246,243,234,.08);
}
.palette-box input::placeholder{color:rgba(246,243,234,.35)}
#palette-results{max-height:44vh;overflow-y:auto}
#palette-results .hit{
  padding:13px 20px;cursor:pointer;font-size:13.5px;
  display:flex;gap:12px;align-items:baseline;
}
#palette-results .hit .sec-tag{
  color:var(--teal);font-family:ui-monospace,Menlo,monospace;font-size:11px;flex:none;min-width:92px;
}
#palette-results .hit .txt{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#palette-results .hit.sel,#palette-results .hit:hover{background:rgba(231,200,120,.07)}
#palette-results .hit.sel .txt{color:var(--fg)}
.palette-hint{
  padding:10px 20px;font-size:10.5px;letter-spacing:1px;color:rgba(246,243,234,.35);
  border-top:1px solid rgba(246,243,234,.06);
  font-family:ui-monospace,Menlo,monospace;
}
.flash-target{animation:targetflash 1.6s ease-out 1}
@keyframes targetflash{0%{color:var(--gold)}100%{color:inherit}}

/* ---------- Reveal defaults (JS-gated: no-JS users see everything) ---------- */
.js .fade-up{opacity:0;transform:translateY(46px)}

/* ---------- Reduced motion: the Still Edition ----------
   Motion is replaced with composition, not amputated. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .manifesto-text .w{opacity:1!important}
  .js .manifesto-sig{opacity:1!important;transform:none!important}
  .js .fade-up{opacity:1!important;transform:none!important}
  .js nav{transform:none}
  .scroll-hint,.grain{display:none}
  #loader,.js #loader{display:none}
  /* the seal still presides — drawn, not animated */
  .hero-seal-static{
    display:block;position:absolute;left:50%;top:44%;z-index:0;
    width:min(58vmin,560px);height:min(58vmin,560px);
    transform:translate(-50%,-50%);opacity:.45;
  }
  .hero-seal-static path,.hero-seal-static circle,.hero-seal-static line{
    fill:none;stroke:var(--gold);stroke-linecap:round;
  }
}

/* ============================================================
   DAYLIGHT — the illuminated-manuscript edition
   Navy ink and gold leaf on warm vellum. The consoles (terminal,
   palette, inquiry) remain dark: ink instruments on paper.
   Never pure white — paper, not glare.
   ============================================================ */
:root{
  --ground:#F7F3EA;                    /* vellum */
  --paper-deep:#EFE9DC;
  --fg:var(--aletheia-midnight);       /* azure as the written word */
  --dim:rgba(11,31,51,.72);
  --card:#FCFAF4;                      /* near-white leaf; the law holds — never pure white */
  --navy-2:#E9E2D2;
  --line:rgba(122,94,42,.28);          /* bronze hairlines on paper */
  --hairline:rgba(122,94,42,.45);
  --accent:#7A5E2A;                    /* bronze carries gold's voice on light */
  --accent-hi:#96741F;
  --teal-deep:#14655B;                 /* signal, recut for daylight */
}
::selection{background:rgba(185,149,73,.35);color:var(--fg)}
a{color:var(--accent)}
a:hover{color:var(--accent-hi)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline-color:var(--accent)}
.skip{background:var(--fg);color:var(--ground)}
.skip:focus-visible{color:var(--ground)}

/* atmosphere: daylight washes — azure + gold leaf, faint */
.atmosphere{
  background:
    radial-gradient(60vw 60vw at 18% 12%, rgba(20,101,91,.07), transparent 60%),
    radial-gradient(55vw 55vw at 85% 30%, rgba(11,31,51,.06), transparent 62%),
    radial-gradient(70vw 60vw at 50% 95%, rgba(185,149,73,.10), transparent 65%),
    linear-gradient(180deg,var(--ground) 0%,var(--paper-deep) 55%,var(--ground) 100%);
}
.aurora{opacity:.5;mix-blend-mode:multiply}
.aurora.a1{--c:#DCE9E2}
.aurora.a2{--c:#DCE3EE}
.aurora.a3{--c:#E3EDE8}
.aurora.a4{--c:#EFE3C8}
.grain{mix-blend-mode:multiply;opacity:calc(.045 + var(--scrollv) * .03)}

/* loader: the seal drawn in ink on paper */
#loader .mark path,#loader .mark circle,#loader .mark line{stroke:var(--fg)}
#loader .word{color:var(--accent)}
#progress{background:linear-gradient(90deg,var(--ledger-bronze),var(--gold-deep),#C9A34F)}
#cursor{background:radial-gradient(circle,rgba(11,31,51,.30),rgba(11,31,51,0) 70%)}

/* nav on vellum */
nav.scrolled{background:rgba(247,243,234,.82);border-color:rgba(11,31,51,.12)}
.brand span{color:var(--fg)}
.nav-links a{color:var(--dim)}
.nav-links a:hover{color:var(--accent)}
.nav-links a::after{background:var(--accent)}
.nav-cmdk{color:var(--dim);background:rgba(11,31,51,.04);border-color:rgba(11,31,51,.16)}
.nav-cmdk:hover{color:var(--accent);border-color:var(--accent)}
.nav-cmdk kbd{color:var(--accent);border-color:rgba(122,94,42,.4)}
.nav-toggle{border-color:rgba(11,31,51,.2)}
.nav-toggle span{background:var(--fg)}
#mobile-menu{background:rgba(247,243,234,.97)}
#mobile-menu a{color:var(--fg)}
#mobile-menu a:hover{color:var(--accent)}

/* hero: ink headline, deep-gold leaf */
.hero-kicker{color:var(--accent)}
.hero-kicker.flash{color:var(--teal-deep)}
.foil{background:linear-gradient(100deg,#6B5222 0%,#8A6C2C 26%,#C9A34F 50%,#8A6C2C 74%,#6B5222 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.hero-motto{color:var(--accent)}
.hero-motto em{color:var(--dim)}
.scroll-hint{color:var(--dim)}
.scroll-hint .stem::after{background:linear-gradient(180deg,transparent,var(--gold-deep))}
.hero-seal-static path,.hero-seal-static circle,.hero-seal-static line{stroke:var(--fg);opacity:.9}
.btn-gold{color:var(--fg)}
.btn-gold:hover,.btn-gold:focus-visible{color:var(--fg);box-shadow:0 8px 34px -10px rgba(122,94,42,.55)}
.btn-ghost{border-color:rgba(11,31,51,.28);color:var(--accent)}
.btn-ghost:hover{border-color:var(--accent)}

/* sections */
.kicker{color:var(--accent)}
.kicker::before{background:var(--accent)}
.kicker.replayable:hover{color:var(--accent-hi)}
.beam-spot{background:radial-gradient(closest-side,rgba(185,149,73,.14),transparent)}
.manifesto-text .em{color:var(--accent)}
.js .manifesto-text .w{opacity:.7}
.js .manifesto-text .em .w{opacity:1}
.manifesto-sig{color:var(--accent)}

/* cards become leaves of paper */
.tier{
  background:linear-gradient(160deg,#FFFEFA,#F4EFE3);
  border:1px solid rgba(11,31,51,.10);
  box-shadow:0 26px 70px -34px rgba(11,31,51,.25);
}
.tier::before{background:linear-gradient(140deg,rgba(122,94,42,.55),transparent 38%,transparent 62%,rgba(122,94,42,.3))}
.tier.t2::before{background:linear-gradient(140deg,rgba(20,101,91,.5),transparent 38%,transparent 62%,rgba(20,101,91,.25))}
.tier .tn{color:var(--accent)}
.tier.t2 .tn{color:var(--teal-deep)}
.tier.t2 .numeral.foil{background:linear-gradient(100deg,#0F5048,#14655B 45%,#2E8A7D 60%,#14655B 75%,#0F5048);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.tier li{border-top-color:rgba(11,31,51,.08)}
.tier li::before{color:var(--gold-deep)}
.tier.t2 li::before{color:var(--teal-deep)}
.tier .shine{background:radial-gradient(560px 560px at var(--mx,50%) var(--my,50%),rgba(11,31,51,.045),transparent 55%)}

.method-line{background:rgba(122,94,42,.22)}
.method-line .fill{background:linear-gradient(180deg,var(--gold-deep),var(--ledger-bronze))}
.step .dot{background:var(--ground);color:var(--accent);border-color:rgba(122,94,42,.4)}
.step.lit .dot{border-color:var(--gold-deep);box-shadow:0 0 30px -6px rgba(185,149,73,.7)}
.step .g{color:rgba(11,31,51,.06)}
#method .lead b{color:var(--teal-deep)!important}

/* principles */
.glyph{color:rgba(11,31,51,.05)}
.pr{background:rgba(255,254,250,.8);border-color:rgba(11,31,51,.10);box-shadow:0 20px 55px -30px rgba(11,31,51,.2)}
.pr h3{color:var(--accent)}
.azure-pool::before{background:radial-gradient(82% 62% at 50% 58%, rgba(11,31,51,.06), transparent 72%)}

/* ---------- The consoles stay ink: instruments on paper ---------- */
.terminal,.palette-box,.inquiry{
  --ground:#0A0E14;
  --fg:var(--institute-ivory);
  --dim:rgba(246,243,234,.70);
  --card:#141A23;
  --line:rgba(231,200,120,.16);
  --hairline:rgba(231,200,120,.28);
  --accent:var(--veritas-gold);
  --accent-hi:var(--gold-hi);
  --teal-deep:var(--verity-teal);
  color:var(--fg);
}
.terminal,.inquiry{box-shadow:0 40px 110px -40px rgba(11,31,51,.45),0 0 0 1px rgba(11,31,51,.06)}
.term-bar .badge{color:#0A0E14}
.term-body .q{color:var(--veritas-gold)}
.term-body .cite{color:var(--verity-teal)}
.inq-continue{color:#0A0E14}
.inq-send{color:#0A0E14}
#palette{background:rgba(11,31,51,.30)}
.flash-target{animation:targetflash-day 1.6s ease-out 1}
@keyframes targetflash-day{0%{color:var(--accent-hi)}100%{color:inherit}}
.inq-note{color:var(--dim)}

/* footer on vellum */
footer{border-top-color:rgba(11,31,51,.12)}
footer .fm{color:var(--accent)}
footer .made{color:rgba(11,31,51,.66)}
footer .made .whisper-em{color:var(--accent)}
#vitals{color:var(--dim);border-color:rgba(11,31,51,.10)}
#vitals b{color:var(--accent)}
#vitals .live{color:var(--teal-deep)}

/* ============================================================
   STRATA — true parallax: watermark layers set deep in the
   vellum, lagging the page as it scrolls. Different geometry
   per section; contained so the layout never widens.
   ============================================================ */
.strata{position:absolute;inset:-12% 0;overflow:hidden;z-index:-1;pointer-events:none}
.s-glyph{
  position:absolute;font-family:var(--serif);font-weight:300;line-height:1;
  color:rgba(11,31,51,.05);user-select:none;will-change:transform;
}
.s-glyph.s-teal{color:rgba(20,101,91,.055)}
.s-ring{
  position:absolute;border:1.5px solid rgba(122,94,42,.16);border-radius:50%;
  will-change:transform;
}

/* The reveal mask exists only for the entrance — once the title has risen,
   the mask releases and no box can ever clip a descender again. */
body.revealed .hero-title .line{overflow:visible}