/* ============================================================
   L'ENCRE VIVE — production design system · Monet Capital
   assets/encre.css
   §1 — the approved mock2-encre-v2 system, verbatim; only the
        @font-face block is converted to self-hosted files
        (brand/fonts/, relative to this file) with display:swap.
   §2 — production extensions: subpage primitives. Additive only;
        no mockup class name or rule is altered.
   ============================================================ */
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url("../brand/fonts/cormorant-400.woff2") format('woff2')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url("../brand/fonts/cormorant-400-italic.woff2") format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url("../brand/fonts/cormorant-500.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url("../brand/fonts/inter-300.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../brand/fonts/inter-400.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("../brand/fonts/inter-500.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../brand/fonts/inter-600.woff2") format('woff2')}

html{background:#F4EFE5;scroll-behavior:smooth}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#F4EFE5; --cream-hi:#FAF7EF; --navy:#0B1220; --navy2:#111B30;
  --brass:#C9A961; --brassd:#7A5E1F; --brassh:#E9D5A0;
  --bg:var(--cream); --fg:var(--navy); --fgs:#3D4660; --fgm:#5A6478;
  --rule:rgba(11,18,32,.14); --ruleb:rgba(201,169,97,.55); --acc:var(--brassd);
  --err:#A0433F; /* muted brick — form/gate error text, tuned to the paper palette */
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --eo:cubic-bezier(.16,1,.3,1); --eio:cubic-bezier(.76,0,.24,1); --ex:cubic-bezier(.4,0,1,1);
  --dm:200ms; --du:300ms; --dw:700ms; --drv:1000ms;
  --pad:clamp(1.25rem,4.4vw,3.5rem);
}
html.lk{overflow:hidden}
body{background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh}
::selection{background:rgba(201,169,97,.38);color:var(--navy)}
:focus-visible{outline:2px solid var(--brassd);outline-offset:3px;border-radius:2px}
body.ink :focus-visible,.ink-sect :focus-visible{outline-color:var(--brass)}
/* {{TOKEN}} placeholder chip: value pending (data-fill names it); dash is decorative, chipcap carries meaning */
.stat-placeholder{color:var(--brassd)}
.stat-placeholder .dash{letter-spacing:.22em}
a{color:inherit}
em{font-style:italic;font-weight:400}
small{font-size:inherit}
.num,.mono{font-variant-numeric:tabular-nums slashed-zero}
.skip{position:fixed;left:1rem;top:-4rem;z-index:99;background:var(--navy);color:var(--cream);
  font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.9em 1.4em;
  border-radius:3px;text-decoration:none;transition:top var(--du) var(--eo)}
.skip:focus-visible{top:1rem}

/* ---------- fixed layers ---------- */
#ink{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
#paperfx,#veil{display:none}
body.t3 #ink{display:none}
body.t3 #paperfx{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52vw 40vh at 68% 30%,rgba(201,169,97,.10),rgba(201,169,97,0) 62%),
    radial-gradient(36vw 30vh at 24% 62%,rgba(11,18,32,.075),rgba(11,18,32,0) 66%),
    radial-gradient(26vw 22vh at 46% 44%,rgba(11,18,32,.05),rgba(11,18,32,0) 70%),
    repeating-linear-gradient(0deg,rgba(11,18,32,.016) 0 1px,rgba(11,18,32,0) 1px 9px),
    linear-gradient(180deg,var(--cream-hi),var(--cream) 30%)}
body.t3 #veil{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;background:#0B1220;
  transform:translate3d(0,101.5%,0)}
body.t3 #veil::before{content:"";position:absolute;bottom:100%;left:-4%;right:-4%;height:56px;
  background:
    radial-gradient(52px 44px at 12% 102%,#0B1220 69%,rgba(11,18,32,0) 71%),
    radial-gradient(78px 52px at 38% 108%,#0B1220 69%,rgba(11,18,32,0) 71%),
    radial-gradient(60px 40px at 63% 104%,#0B1220 69%,rgba(11,18,32,0) 71%),
    radial-gradient(88px 58px at 88% 109%,#0B1220 69%,rgba(11,18,32,0) 71%)}
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px}

/* ---------- reveal system ----------
   SAFETY INVARIANT: .rv / .rl .msk .l / .rule-d must DEFAULT TO VISIBLE. Only `html.armed`
   may hide them, and only until `.on` is added (on scroll) OR the engine's top-level catch
   drops `.armed` on error. Never give these classes an unconditional opacity:0 / hidden /
   off-screen-transform rule — that would let an ink-engine failure blank the page. */
.rv{opacity:1}
html.armed .rv{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .9s var(--eo),transform .9s var(--eo);
  transition-delay:calc(var(--i,0)*80ms)}
html.armed .rv.on{opacity:1;transform:translate3d(0,0,0)}
.msk{display:block;overflow:hidden;padding:.2em 0 .28em;margin:-.2em 0 -.28em}
.msk .l{display:inline-block;transform-origin:0 100%}
html.armed .rl .msk .l{transform:translate3d(0,138%,0) rotate(.35deg);
  transition:transform 1s var(--eo);transition-delay:calc(var(--i,0)*80ms)}
html.armed .rl.on .msk .l{transform:translate3d(0,0,0) rotate(0deg)}
.rule-d{height:1px;background:linear-gradient(90deg,var(--brass) 0%,rgba(201,169,97,.12) 100%);
  transform:scaleX(0);transform-origin:0 50%}
html.armed .on .rule-d,html.armed .rule-d.on{transition:transform 1.1s var(--eio) .12s;transform:scaleX(1)}
html:not(.armed) .rule-d{transform:scaleX(1)}

/* ---------- shared editorial atoms ---------- */
.wrap{width:min(1480px,100% - var(--pad)*2);margin-inline:auto}
section{position:relative;z-index:1;scroll-margin-top:6.5rem}
.sect{padding:clamp(6rem,15vh,11.5rem) 0}
.eyeb{display:flex;align-items:center;gap:.95em;font:500 11px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fgs);
  font-variant-numeric:tabular-nums slashed-zero}
.eyeb b{font-weight:500;color:var(--acc);letter-spacing:.1em}
.eyeb .ln{flex:0 1 6.5rem;height:1px;background:var(--rule)}
.stmt{font:400 clamp(2.1rem,4.7vw,4.5rem)/1.06 var(--serif);letter-spacing:.002em;max-width:22ch}
.stmt em{white-space:nowrap}
.body{font:400 15.5px/1.75 var(--sans);color:var(--fgs);max-width:58ch}
.body strong{font-weight:600;color:var(--fg)}
.lede{font:300 clamp(1.05rem,1.45vw,1.3rem)/1.7 var(--sans);color:var(--fgs);max-width:52ch}
.fnote{font:400 12px/1.7 var(--sans);color:var(--fgm);max-width:58ch}
.fnote sup,.body sup{font:500 9.5px/1 var(--sans);color:var(--brassd);vertical-align:super}
.eng{transition:text-shadow var(--dm) var(--eo),color var(--dm) var(--eo)}
.eng:hover{text-shadow:0 1px 0 rgba(255,253,246,.85),0 -1px 0 rgba(11,18,32,.35)}
.chip{display:inline-flex;align-items:center;gap:.8em;border:1px dashed rgba(201,169,97,.8);
  border-radius:3px;padding:.62em 1em;font:500 12.5px/1 var(--mono);letter-spacing:.1em;
  color:var(--brassd);font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap}
.chip .dash{letter-spacing:.22em}
.chipcap{display:block;margin-top:.55em;font:400 10.5px/1.5 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--fgm)}
.ghost{position:absolute;z-index:-1;font:500 clamp(6.5rem,15vw,12.5rem)/1 var(--serif);
  color:rgba(11,18,32,.055);user-select:none;pointer-events:none;
  font-variant-numeric:tabular-nums;will-change:transform}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;padding:1rem var(--pad);
  transition:background-color .6s var(--eio),box-shadow .6s var(--eio)}
.nav.scr{background:rgba(244,239,229,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--rule)}
body.ink .nav.scr{background:rgba(11,18,32,.82);box-shadow:0 1px 0 rgba(244,239,229,.14)}
body.ink .nav{--fg:#F4EFE5;--fgs:#C3CADB;--fgm:#8E97AC;--acc:var(--brass);
  --rule:rgba(244,239,229,.16);--bg:var(--navy)}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--fg)}
.brand svg{width:30px;height:30px;flex:none}
.brand .star{fill:none;stroke:var(--brass);stroke-width:1.1;stroke-linejoin:round}
.brand .star-core{fill:var(--brass);stroke:none}
.bw{font:500 13px/1 var(--sans);letter-spacing:.34em;color:var(--fg)}
.bw small{display:block;font:500 7.5px/1 var(--sans);letter-spacing:.58em;color:var(--acc);margin-top:.4em}
.nl{display:flex;gap:clamp(1.1rem,2.2vw,2.4rem)}
.nl a{position:relative;font:500 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--fgs);text-decoration:none;padding:.5em 0;font-variant-numeric:tabular-nums}
.nl a i{font-style:normal;color:var(--acc);margin-right:.55em}
.nl a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--eio)}
.nl a:hover::after,.nl a:focus-visible::after{transform:scaleX(1)}
.nl a:hover{color:var(--fg)}
.nr{display:flex;align-items:center;gap:1rem}
.plink{font:500 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--fgs);
  text-decoration:none;white-space:nowrap;padding:.5em 0;position:relative}
.plink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--eio)}
.plink:hover::after,.plink:focus-visible::after{transform:scaleX(1)}
.plink:hover{color:var(--fg)}
@media (max-width:560px){.nr .plink{display:none}}
.mbtn{display:none;width:42px;height:38px;background:none;border:1px solid var(--rule);border-radius:3px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.mbtn span{display:block;width:16px;height:1.5px;background:var(--fg);transition:transform var(--du) var(--eio)}
.mbtn[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.mbtn[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* mobile ink menu — the flood grammar at nav scale */
#mnu{position:fixed;inset:0;z-index:55;background:var(--navy);color:var(--cream);
  transform:translate3d(0,-102%,0);transition:transform var(--dw) var(--eio),visibility 0s linear var(--dw);
  visibility:hidden;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 3rem}
#mnu.open{transform:translate3d(0,0,0);visibility:visible;transition:transform var(--dw) var(--eio)}
#mnu a.ml{font:400 clamp(2.2rem,9vw,3.6rem)/1.28 var(--serif);color:var(--cream);text-decoration:none;
  display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid rgba(244,239,229,.12);padding:.35em 0}
#mnu a.ml i{font:500 11px/1 var(--mono);font-style:normal;color:var(--brass);letter-spacing:.1em}
#mnu a.ml:hover{color:var(--brassh)}
#mnu .mfoot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;
  font:500 10px/1.6 var(--mono);letter-spacing:.14em;color:rgba(244,239,229,.55);text-transform:uppercase}

/* ---------- CTA pill (ink flood on hover) ---------- */
.cta{position:relative;display:inline-flex;align-items:center;gap:.9em;isolation:isolate;
  font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
  border:1px solid var(--fg);border-radius:999px;padding:1.15em 2.2em;text-decoration:none;
  overflow:hidden;background:transparent;white-space:nowrap;
  transition:color var(--du) var(--eio),border-color var(--du) var(--eio)}
.cta::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--fg);border-radius:inherit;
  transform:translate3d(0,103%,0);transition:transform .5s var(--eio)}
.cta:hover,.cta:focus-visible{color:var(--bg)}
.cta:hover::before,.cta:focus-visible::before{transform:translate3d(0,0,0)}
.cta .mg{display:inline-block;will-change:transform}
.cta-s{padding:.95em 1.6em;font-size:10.5px}
#mnu .cta{color:var(--cream);border-color:var(--cream);align-self:flex-start;margin-top:2.2rem}
#mnu .cta::before{background:var(--cream)}
#mnu .cta:hover,#mnu .cta:focus-visible{color:var(--navy)}

/* ---------- overture ---------- */
#ovl{position:fixed;inset:0;z-index:80;background:var(--cream);display:flex;align-items:center;
  justify-content:center;pointer-events:none}
#ovl.gone{display:none}
#ovl .ovin{display:flex;flex-direction:column;align-items:center;gap:1.6rem;transform:translateY(-2vh)}
#ovl svg{width:min(340px,64vw);overflow:visible;display:block}
#ovl .op{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#ovl .op.gold{stroke:var(--brass);stroke-width:1.3}
#ovl .ov-rule{width:min(340px,64vw);height:1px;background:var(--brass);transform:scaleX(0)}
#ovl .ov-cap{font:500 10px/1 var(--sans);letter-spacing:.62em;padding-left:.62em;color:var(--brassd);opacity:0}
html:not(.js) #ovl{animation:ovAuto .7s var(--eio) 2.7s forwards}
html:not(.js) #ovl .op{stroke-dasharray:1;stroke-dashoffset:1;animation:ovDraw 1.3s var(--eio) .2s forwards}
html:not(.js) #ovl .ov-rule{animation:ovRule 1.1s var(--eio) .35s forwards}
html:not(.js) #ovl .ov-cap{animation:ovCap .8s var(--eo) 1s forwards}
@keyframes ovDraw{to{stroke-dashoffset:0}}
@keyframes ovRule{to{transform:scaleX(1)}}
@keyframes ovCap{to{opacity:1}}
@keyframes ovAuto{to{opacity:0;visibility:hidden}}

/* ---------- hero ---------- */
#hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:clamp(5.5rem,13vh,8.5rem) 0 1.4rem}
#hero .wrap{display:flex;flex-direction:column;flex:1}
.hl{font:400 clamp(2.55rem,10.4vw,10rem)/0.94 var(--serif);letter-spacing:0;color:var(--fg);
  max-width:100%;margin:.5rem 0 0}
.hl em{letter-spacing:.001em}
.hl.shz .l{color:transparent}
.hl .l::selection,.hl .l *::selection{background:rgba(201,169,97,.45);color:var(--navy)}
.hgrid{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2rem;margin-top:clamp(1.6rem,3.5vh,3rem)}
#hero .lede{flex:1 1 30ch}
.whisp{font:italic 400 15px/1.4 var(--serif);color:var(--brassd);flex:0 0 auto}
.whisp .coarse{display:none}
@media (pointer:coarse){.whisp .fine{display:none}.whisp .coarse{display:inline}}
html.armed #hero .lede,html.armed #hero .whisp,html.armed #hero .hfoot,html.armed .zline{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .8s var(--eo),transform .8s var(--eo)}
html.armed .zline{transform:none}
/* reveal must out-specify the armed-state hide (html.armed #hero .lede = 1,2,1); qualify with
   html.armed #hero.go (1,3,1) so it wins at the source — no per-page patch needed */
html.armed #hero.go .lede{opacity:1;transform:none;transition-delay:.30s}
html.armed #hero.go .whisp{opacity:1;transform:none;transition-delay:.85s}
html.armed #hero.go .hfoot{opacity:1;transform:none;transition-delay:.55s}
#hero.go .zline{opacity:1;transition-delay:.45s}
.zline{position:relative;display:flex;align-items:center;gap:1.1rem;margin:auto 0 0;padding:2.2rem 0 2rem}
.zl-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,169,97,0),rgba(201,169,97,.9) 8%,rgba(201,169,97,.9) 92%,rgba(201,169,97,0));
  transform:scaleX(.0001);transform-origin:50% 50%;transition:transform 1.3s var(--eio) .5s}
#hero.go .zl-rule,html:not(.armed) .zl-rule{transform:scaleX(1)}
.zl-tag{font:500 9.5px/1.5 var(--mono);letter-spacing:.13em;color:var(--brassd);text-align:right;
  text-transform:uppercase;max-width:34ch}
.hfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  border-top:1px solid var(--rule);padding-top:1.1rem}
.hmeta{display:flex;flex-wrap:wrap;gap:.6em 2.2em;font:500 10px/1.7 var(--mono);letter-spacing:.14em;
  color:var(--fgm);text-transform:uppercase;font-variant-numeric:tabular-nums slashed-zero}
.hint{display:flex;align-items:center;gap:.8em;font:500 10px/1 var(--mono);letter-spacing:.18em;
  color:var(--fgs);text-transform:uppercase;white-space:nowrap;text-decoration:none}
.hint .tick{display:block;width:1px;height:2.2em;background:var(--brass);transform-origin:50% 0}
html.armed #hero.go .hint .tick{animation:tickdrop 2.2s var(--eio) 1.4s infinite}
@keyframes tickdrop{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:50% 0}
  46%{transform-origin:50% 100%}90%,100%{transform:scaleY(0);transform-origin:50% 100%}}

/* ---------- thesis ---------- */
#thesis .cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem 5rem;margin-top:3rem}
#thesis .rule-d{margin:2.2rem 0 0;max-width:22rem}

/* ---------- sources (four ink plates) ---------- */
#sources .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem;margin-top:3.6rem}
.plate{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.7rem 0 1.4rem;
  border-top:1px solid rgba(11,18,32,.28);min-height:20rem;cursor:default}
.plate::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--eio)}
.plate:hover::before{transform:scaleX(1)}
.pnum{font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--brassd)}
.psub{font:500 10px/1.5 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--fgm)}
.plate h3{font:400 clamp(1.6rem,1.9vw,2rem)/1.04 var(--serif);color:var(--fg);
  transition:text-shadow var(--dm) var(--eo)}
.plate:hover h3{text-shadow:0 1px 0 rgba(255,253,246,.85),0 -1px 0 rgba(11,18,32,.3)}
.plate p{font:400 13.5px/1.7 var(--sans);color:var(--fgs)}
.pterm{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--rule);padding-top:.95rem;font:500 10.5px/1 var(--mono);
  letter-spacing:.14em;color:var(--brassd);text-transform:uppercase}
.pterm .sx{color:var(--fgm)}
#sources .srcnote{margin-top:2.6rem;max-width:none;display:flex;gap:1em;align-items:baseline}

/* ---------- chapter turns ---------- */
/* a deliberate breathing beat between chapters — bounded so it never becomes a
   full-screen void (was 120vh, which read as a huge empty gap on tall displays) */
.turn{position:relative;z-index:1;height:clamp(12rem,44vh,22rem);display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.turn-tag{font:500 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--brassd);display:flex;align-items:center;gap:1.2em;white-space:nowrap}
body.ink .turn-tag{color:var(--brass)}
.turn-tag::before,.turn-tag::after{content:"";display:block;width:clamp(2rem,8vw,5.5rem);height:1px;
  background:rgba(201,169,97,.55)}

/* ---------- vault (flooded chapter) — .ink-sect is the page-agnostic alias ---------- */
#vault,.ink-sect{--fg:#F4EFE5;--fgs:#C3CADB;--fgm:#8E97AC;--rule:rgba(244,239,229,.16);--acc:var(--brass);
  --bg:var(--navy);color:var(--fg);padding:clamp(6rem,16vh,12rem) 0}
html:not(.js) #vault,html:not(.js) .ink-sect{background:var(--navy)}
#vault .stmt,#vault h3,.ink-sect .stmt,.ink-sect h3{color:var(--fg)}
#vault .eng:hover,.ink-sect .eng:hover{text-shadow:0 1px 0 rgba(0,0,0,.5),0 -1px 0 rgba(244,239,229,.22)}
.mx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:3.4rem;
  border:1px solid var(--rule)}
/* the matrix floods over the live ink field — give the text a calm backing so it stays legible */
#vault .mx,.ink-sect .mx{background:rgba(8,12,22,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cell{position:relative;padding:2rem 1.9rem 2.3rem;display:flex;flex-direction:column;gap:.9rem;min-height:15.5rem}
.cell:nth-child(odd){border-right:1px solid var(--rule)}
.cell:nth-child(-n+2){border-bottom:1px solid var(--rule)}
.clab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.clab .sx{color:#AEB7C9;letter-spacing:.12em}
.cell h3{font:400 clamp(1.45rem,1.8vw,1.85rem)/1.08 var(--serif)}
.cell p{font:400 14px/1.72 var(--sans);color:#DCE2EE}
.vseal{display:flex;align-items:center;gap:1rem;margin-top:2.4rem;font:500 9.5px/1.6 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fgm)}
.vseal svg{width:30px;height:30px;flex:none}
.vseal .star{fill:none;stroke:var(--brass);stroke-width:1.1}

/* ---------- discipline ---------- */
#discipline .rows{margin-top:3.2rem;border-top:1px solid rgba(11,18,32,.28)}
.drow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:1.2rem 2.6rem;
  padding:2.1rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.drow .dl{font:500 10.5px/1.6 var(--mono);letter-spacing:.2em;color:var(--brassd);text-transform:uppercase}
.drow h3{font:400 clamp(1.55rem,2vw,2.1rem)/1.06 var(--serif);transition:text-shadow var(--dm) var(--eo)}
.drow:hover h3{text-shadow:0 1px 0 rgba(255,253,246,.85),0 -1px 0 rgba(11,18,32,.3)}
.drow p{font:400 13.5px/1.7 var(--sans);color:var(--fgs);max-width:52ch}

/* ---------- access (catalogue + NDA chips) ---------- */
#access .cat{margin-top:3.2rem;border-top:1px solid rgba(11,18,32,.28)}
.crow{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,4fr) auto;gap:1rem 2.4rem;
  padding:1.7rem 0;border-bottom:1px solid var(--rule);align-items:center}
.crow .cl{font:500 10.5px/1.6 var(--mono);letter-spacing:.18em;color:var(--fgm);text-transform:uppercase}
.crow h3{font:400 clamp(1.3rem,1.7vw,1.7rem)/1.1 var(--serif)}
.crow .cchip{text-align:right}
#access .reg{margin-top:2.4rem;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem 5rem}

/* ---------- firm ---------- */
#firm .fgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3.5rem 6rem;
  margin-top:3.2rem;align-items:start}
.facts{border-top:1px solid rgba(11,18,32,.28)}
.facts div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:2rem;padding:1.05rem 0;
  border-bottom:1px solid var(--rule);font:500 11px/1.7 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;font-variant-numeric:tabular-nums slashed-zero}
.facts dt{color:var(--fgm)}
.facts dd{color:var(--fg)}
.sealwrap{display:flex;flex-direction:column;align-items:center;gap:1.3rem;justify-self:center}
.seal{--px:.5;--py:.42;position:relative;width:clamp(150px,14vw,196px);aspect-ratio:1;border-radius:50%}
.seal svg{display:block;width:100%;height:100%}
.seal .ring{fill:none;stroke:var(--brassd);stroke-width:1;opacity:.75}
.seal .star{fill:none;stroke:var(--brassd);stroke-width:1.2;stroke-linejoin:round}
.seal .stx{font:500 10.5px var(--sans);letter-spacing:.32em;fill:var(--brassd)}
.seal .shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:color-dodge;
  filter:brightness(.82) contrast(1.5);
  background:radial-gradient(120% 120% at calc(var(--px)*100%) calc(var(--py)*100%),
    rgba(233,213,160,.85),rgba(201,169,97,.22) 36%,rgba(122,94,31,0) 62%)}
@media (hover:none){.seal .shine{animation:sheen 8s var(--eio) infinite alternate}}
@keyframes sheen{from{background-position:0 0;transform:translate3d(-6%,-4%,0)}to{transform:translate3d(6%,5%,0)}}
.sealcap{font:500 9.5px/1.6 var(--mono);letter-spacing:.26em;color:var(--fgm);text-transform:uppercase;text-align:center}

/* ---------- contact CTA ---------- */
#contact{text-align:center;padding:clamp(7rem,18vh,13rem) 0}
#contact .stmt{margin:0 auto;max-width:16ch}
#contact .body{margin:1.8rem auto 2.8rem}
#contact .small{margin-top:1.6rem;font:500 10px/1.6 var(--mono);letter-spacing:.2em;
  color:var(--fgm);text-transform:uppercase}
.cta-xl{font-size:12.5px;padding:1.5em 3.2em}

/* ---------- colophon ---------- */
#colophon{position:relative;z-index:1;background:var(--navy);color:var(--cream);overflow:hidden;
  border-top:1px solid rgba(201,169,97,.4)}
#colophon .wrap{position:relative;z-index:1;padding:4.5rem 0 2.5rem}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
.cgrid h4{font:500 9.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1.2rem}
.cgrid a,.cgrid p,.cgrid li{font:400 12px/2 var(--sans);color:rgba(244,239,229,.72);text-decoration:none;
  list-style:none}
.cgrid a:hover{color:var(--cream);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.cgrid .mono,#clock{font:500 11px/2 var(--mono);letter-spacing:.1em;color:rgba(244,239,229,.72);
  font-variant-numeric:tabular-nums slashed-zero}
#clock{color:var(--brassh)}
.colo{margin-top:3.5rem;border-top:1px solid rgba(244,239,229,.14);padding-top:1.8rem;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem 4rem}
.colo p{font:400 11px/1.8 var(--sans);color:rgba(244,239,229,.6)}
.colo p.hand{font-size:10.5px;color:rgba(244,239,229,.5)}
.legal{margin-top:2rem;border-top:1px solid rgba(244,239,229,.14);padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.legal p{font:400 10.5px/1.8 var(--sans);color:rgba(244,239,229,.62);max-width:100ch}
.stillb{display:block;margin-top:.9em;background:none;border:1px solid rgba(244,239,229,.32);
  border-radius:999px;color:rgba(244,239,229,.78);font:500 9px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;padding:.75em 1.3em;cursor:pointer;
  transition:border-color var(--dm) var(--eo),color var(--dm) var(--eo)}
.stillb:hover{border-color:var(--brass);color:var(--brassh)}
.legal .cr{font:500 10px/1.8 var(--mono);letter-spacing:.14em;color:rgba(244,239,229,.55);
  text-transform:uppercase;white-space:nowrap}
#tier{display:block;margin-top:.6em;font:500 8.5px/1.6 var(--mono);letter-spacing:.18em;
  color:rgba(244,239,229,.5);text-transform:uppercase}
.bigm{position:relative;margin-top:2rem;height:clamp(4.6rem,11vw,11.5rem);overflow:hidden;pointer-events:none}
.bigm span{position:absolute;left:50%;transform:translateX(-50%);top:0;white-space:nowrap;
  font:500 clamp(8rem,19.5vw,20rem)/0.72 var(--serif);letter-spacing:.06em;
  color:rgba(244,239,229,.055);user-select:none}

/* ---------- instrument cursor ---------- */
#cur{position:fixed;inset:0;z-index:70;pointer-events:none;display:none}
html.nib #cur{display:block}
html.nib body,html.nib body *{cursor:none}
html.still *{animation-play-state:paused !important}
/* touch pour — while a finger holds, suppress native selection/link-callout so the 450ms gold turn survives over text and links */
body.pressing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#curDot{position:absolute;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  background:var(--brass);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  opacity:0;transition:opacity .35s var(--eo)}
#curRing{position:absolute;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(11,18,32,.5);border-radius:999px;display:flex;align-items:center;
  justify-content:center;opacity:0;
  transition:opacity .35s var(--eo),width .28s var(--eo),height .28s var(--eo),
    margin .28s var(--eo),background-color .28s var(--eo),border-color .28s var(--eo)}
body.ink #curRing{border-color:rgba(244,239,229,.55)}
#cur.on #curDot,#cur.on #curRing{opacity:1}
#curRing.lb{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(11,18,32,.92);border-color:rgba(11,18,32,.92)}
#curLb{font:600 8.5px/1 var(--sans);letter-spacing:.22em;padding-left:.22em;color:var(--cream);
  opacity:0;transition:opacity .2s var(--eo)}
#curRing.lb #curLb{opacity:1}
@media (pointer:coarse){#cur{display:none !important}}

/* ---------- responsive ---------- */
@media (max-height:920px) and (min-width:900px){
  .hl{font-size:clamp(2.55rem,8.6vw,7.6rem)}
  #hero{padding-top:clamp(4.5rem,10vh,6.5rem)}
  .zline{padding:1.2rem 0 1rem}
  .hgrid{margin-top:1.4rem}
}
@media (max-width:1100px){
  #sources .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.4rem}
  .plate{min-height:0}
  #thesis .cols,#access .reg,.colo{grid-template-columns:minmax(0,1fr)}
  #firm .fgrid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .sealwrap{justify-self:start}
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .nl{display:none}
  .mbtn{display:flex}
  .cta-s{display:none}
}
@media (max-width:900px){
  .drow{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .drow p{max-width:58ch}
  .crow{grid-template-columns:minmax(0,1fr);gap:.8rem;align-items:start}
  .crow .cchip{text-align:left}
}
@media (max-width:640px){
  :root{--pad:1.15rem}
  #sources .grid{grid-template-columns:minmax(0,1fr)}
  .mx{grid-template-columns:minmax(0,1fr)}
  .cell{border-right:0 !important;border-bottom:1px solid var(--rule);min-height:0}
  .cell:nth-child(odd){border-right:0}
  .cell:last-child{border-bottom:0}
  .hfoot{flex-direction:column;align-items:flex-start}
  .zl-tag{max-width:26ch}
  .stmt{max-width:none}
  .facts div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .cgrid{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .legal{flex-direction:column}
}

/* ---------- reduced motion: the resolved poster ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #ovl{display:none}
  #vault,.ink-sect{background:var(--navy)}
  body.t3 #veil{display:none}
  html.armed .rv,html.armed .rl .msk .l,html.armed #hero .lede,html.armed #hero .whisp,
  html.armed #hero .hfoot,html.armed .zline{
    transform:none !important;transition:opacity .3s linear !important}
  .rule-d,html.armed .on .rule-d{transform:scaleX(1);transition:none}
  .zl-rule,#hero.go .zl-rule{transform:scaleX(1);transition:none}
  html.armed #hero.go .hint .tick{animation:none;transform:scaleY(1)}
  .seal .shine{animation:none !important}
  .cta,.cta::before,.nl a::after,.plate::before,.nav,.mbtn span{transition:none}
  #mnu{transition:none}
  .whisp{visibility:hidden}
  *{scroll-behavior:auto !important}
}

/* ---------- forced colors (Windows High Contrast) ---------- */
@media (forced-colors:active){
  /* the WebGL hero raster would double the DOM headline — keep the real text */
  .hl.shz .l{color:CanvasText !important}
  #ink,#paperfx,#veil,#grain{display:none !important}
  /* custom checkbox: system paints the tick, not our ::before square */
  .field-check input{appearance:auto;-webkit-appearance:auto}
  .field-check input::before{display:none}
  /* brass hairlines that rely on gradients get a solid system border */
  .rule-d,.zl-rule,.plate::before,.nl a::after{background:CanvasText}
  .cta{border:1px solid ButtonText}
}

/* ============================================================
   §2 PRODUCTION EXTENSIONS — subpage primitives
   Everything below is additive. Mockup classes are untouched.
   ============================================================ */

/* -- engine modes: ambient/calm pages get a 300ms canvas wash-in
      instead of the overture (encre.js adds .lit after 1st frame) */
body[data-encre="ambient"] #ink,body[data-encre="calm"] #ink{opacity:0;transition:opacity 300ms var(--eo)}
body[data-encre="ambient"] #ink.lit,body[data-encre="calm"] #ink.lit{opacity:1}

/* -- current-page nav state: the brass underline is persistent */
.nl a[aria-current="page"]{color:var(--fg)}
.nl a[aria-current="page"]::after{transform:scaleX(1)}
#mnu a.ml[aria-current="page"]{color:var(--brassh)}

/* -- page-hero: compact subpage header (eyebrow + stmt + lede) */
.page-hero{position:relative;z-index:1;padding:clamp(7.5rem,16vh,10.5rem) 0 clamp(2.5rem,6vh,4rem)}
.page-hero .stmt{margin-top:2.4rem}
.page-hero .lede{margin-top:1.7rem}
.page-hero .hmeta{margin-top:2.5rem}
.page-hero .rule-d{margin-top:2.6rem;max-width:22rem}

/* -- ctarow: a CTA beside a secondary link, hero-style */
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2.6rem}

/* -- prose: the reading measure (article + legal copy) */
.prose{position:relative;z-index:1;max-width:68ch;font:400 15.5px/1.8 var(--sans);color:var(--fgs)}
.prose p{margin:0 0 1.2em}
.prose strong{font-weight:600;color:var(--fg)}
.prose a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(201,169,97,.8);transition:color var(--dm) var(--eo),text-decoration-color var(--dm) var(--eo)}
.prose a:hover{color:var(--navy);text-decoration-color:var(--brassd)}
.prose h2{font:400 clamp(1.8rem,2.8vw,2.5rem)/1.12 var(--serif);color:var(--fg);letter-spacing:.002em;margin:2.6em 0 .65em}
.prose h3{font:400 clamp(1.35rem,1.9vw,1.7rem)/1.18 var(--serif);color:var(--fg);margin:2.2em 0 .6em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h2,.prose h3,.prose [id]{scroll-margin-top:6.5rem}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.4em}
.prose li{margin:.5em 0}
.prose li::marker{color:var(--brassd);font-variant-numeric:tabular-nums}
.prose blockquote{margin:1.9em 0;padding:.2em 0 .2em 1.5em;border-left:1px solid var(--brass);
  font:italic 400 clamp(1.15rem,1.5vw,1.35rem)/1.55 var(--serif);color:var(--fg)}
.prose blockquote p{margin:0 0 .6em}
.prose hr{border:0;height:1px;background:var(--rule);margin:3em 0}
.prose sup{font:500 9.5px/1 var(--sans);color:var(--brassd);vertical-align:super}
.prose.dropcap>p:first-of-type::first-letter{float:left;font:400 3.4em/.83 var(--serif);color:var(--fg);padding:.06em .12em 0 0}

/* -- tocrail: sticky mono table of contents (legal pages) */
.tocwrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);
  gap:2.5rem clamp(3rem,6vw,6rem);align-items:start}
.tocrail{position:sticky;top:6.5rem}
.tocrail .toc-title{font:500 9.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--brassd);margin-bottom:1.1rem}
.tocrail ol,.tocrail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.tocrail li{margin:0}
.tocrail a{display:block;padding:.5em 0 .5em 1.2em;margin-left:-1px;border-left:1px solid transparent;
  font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fgm);
  text-decoration:none;transition:color var(--dm) var(--eo),border-color var(--dm) var(--eo)}
.tocrail a i{font-style:normal;color:var(--brassd);margin-right:.7em;font-variant-numeric:tabular-nums}
.tocrail a:hover{color:var(--fg);border-left-color:var(--brass)}
.tocrail a[aria-current="true"]{color:var(--fg);border-left-color:var(--brass)}

/* -- form controls: cream fields, ink text, brass focus ring */
.form{position:relative;z-index:1;display:grid;gap:1.5rem;max-width:46rem}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.field{display:flex;flex-direction:column;gap:.55rem}
.field label{font:500 10px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fgs)}
.field label .req{color:var(--brassd)}
.field input,.field textarea,.field select{-webkit-appearance:none;appearance:none;width:100%;
  background:var(--cream-hi);border:1px solid rgba(11,18,32,.42);border-radius:3px;padding:.85em 1em;
  font:400 15px/1.5 var(--sans);color:var(--fg);
  transition:border-color var(--dm) var(--eo),box-shadow var(--dm) var(--eo)}
.field textarea{min-height:9.5em;resize:vertical}
.field 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 L6 6.5 L11 1.5' fill='none' stroke='%230B1220' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95em center;background-size:.72em auto;padding-right:2.7em}
.field input::placeholder,.field textarea::placeholder{color:var(--fgm);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brassd);
  box-shadow:0 0 0 3px rgba(122,94,31,.28)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--brassd);outline-offset:2px}
.field-check{display:flex;align-items:flex-start;gap:.8em;font:400 13px/1.6 var(--sans);color:var(--fgs)}
.field-check input{width:1.05em;height:1.05em;margin-top:.22em;flex:none;-webkit-appearance:none;appearance:none;
  background:var(--cream-hi);border:1px solid rgba(11,18,32,.35);border-radius:2px;
  display:inline-grid;place-content:center;cursor:pointer}
.field-check input::before{content:"";width:.55em;height:.55em;background:var(--brassd);
  transform:scale(0);transition:transform var(--dm) var(--eo)}
.field-check input:checked::before{transform:scale(1)}
.field-check input:focus-visible{outline:2px solid var(--brassd);outline-offset:2px}
.fhelp{font:400 11px/1.7 var(--sans);color:var(--fgm)}
button.cta{cursor:pointer;-webkit-appearance:none;appearance:none}
.form .cta{justify-self:start}

/* -- sr: visually hidden, machine-present (labels, honeypots) */
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* -- figure-frame: photo in a hairline frame, brass corner ticks, mono caption */
.figure-frame{position:relative;z-index:1;margin:0}
.figure-frame .fr{position:relative;border:1px solid var(--rule);background:var(--cream-hi);padding:.65rem}
.figure-frame .fr::before,.figure-frame .fr::after{content:"";position:absolute;width:1.35rem;height:1.35rem;pointer-events:none}
.figure-frame .fr::before{top:-1px;left:-1px;border-top:1px solid var(--brass);border-left:1px solid var(--brass)}
.figure-frame .fr::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--brass);border-right:1px solid var(--brass)}
.figure-frame img{display:block;width:100%;height:auto}
.figure-frame figcaption{margin-top:.85rem;font:500 10px/1.7 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fgm)}
.figure-frame figcaption b{color:var(--brassd);font-weight:500}

/* -- diagram draw-on: connector strokes trace themselves as the figure reveals.
   Each traced <path> carries pathLength="1" so one rule normalises every length.
   With no JS (html not .armed) or under reduced motion the strokes render fully
   drawn — the animation is pure enhancement, never a gate on legibility. */
.dia-draw path,path.dia-draw{stroke-dasharray:1}
html.armed .figure-frame.rv .dia-draw path,
html.armed .figure-frame.rv path.dia-draw{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--eio)}
html.armed .figure-frame.rv.on .dia-draw path,
html.armed .figure-frame.rv.on path.dia-draw{stroke-dashoffset:0}
/* top-down / funnel-in stagger for grouped connectors */
html.armed .figure-frame.rv .dia-draw path:nth-child(1){transition-delay:.10s}
html.armed .figure-frame.rv .dia-draw path:nth-child(2){transition-delay:.19s}
html.armed .figure-frame.rv .dia-draw path:nth-child(3){transition-delay:.28s}
html.armed .figure-frame.rv .dia-draw path:nth-child(4){transition-delay:.37s}
html.armed .figure-frame.rv .dia-draw path:nth-child(5){transition-delay:.45s}
html.armed .figure-frame.rv .dia-draw path:nth-child(6){transition-delay:.52s}
html.armed .figure-frame.rv .dia-draw path:nth-child(7){transition-delay:.58s}
/* accent dots at the ends of the risk arrows land once the strokes arrive */
html.armed .figure-frame.rv .dia-dot{opacity:0;transition:opacity .55s var(--eo) .55s}
html.armed .figure-frame.rv.on .dia-dot{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.armed .figure-frame.rv .dia-draw path,
  html.armed .figure-frame.rv path.dia-draw{transition:none;stroke-dashoffset:0}
  html.armed .figure-frame.rv .dia-dot{transition:none;opacity:1}
}

/* -- tbl: provider/stack matrix (wide content scrolls in its own box) */
.tblwrap{position:relative;z-index:1;margin-top:2.8rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:560px;border-collapse:collapse;border-top:1px solid rgba(11,18,32,.28)}
.tbl th,.tbl td{text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);padding:1.05rem 2.2rem 1.05rem 0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl thead th{font:500 10px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fgm);
  padding-top:1.2rem;padding-bottom:.9rem}
.tbl tbody th,.tbl .lab{font:500 10.5px/1.7 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brassd);white-space:nowrap;font-weight:500}
.tbl td{font:400 13.5px/1.7 var(--sans);color:var(--fgs)}
.tbl td strong{font-weight:600;color:var(--fg)}
.tbl .sx{color:var(--fgm)}
.tbl tbody tr{transition:background-color var(--dm) var(--eo)}
.tbl tbody tr:hover{background:rgba(201,169,97,.055)}
.tbl caption{caption-side:bottom;text-align:left;padding:1rem 0 0;font:400 11px/1.7 var(--sans);color:var(--fgm)}

/* -- generic aliases of index-scoped layouts (same metrics, any section id) */
.cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem 5rem;margin-top:3rem}
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem;margin-top:3.6rem}
.cat{margin-top:3.2rem;border-top:1px solid rgba(11,18,32,.28)}
.rows{margin-top:3.2rem;border-top:1px solid rgba(11,18,32,.28)}
.reg{margin-top:2.4rem;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem 5rem}

/* -- colophon legal-links row (production adds disclosures/privacy/terms) */
.crx{display:flex;flex-direction:column;gap:.5em;align-items:flex-start}
.lnav{display:flex;flex-wrap:wrap;gap:.35em .6em;font:500 10px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.lnav a{color:rgba(244,239,229,.62);text-decoration:none;transition:color var(--dm) var(--eo)}
.lnav a:hover{color:var(--cream)}

/* -- placeholder chips must never overflow a small screen */
.chip{max-width:100%}

/* -- shared page components (folded from per-page <style> blocks) ------------
   Reused across access / performance / transparency / infrastructure. Kept here
   so a single definition governs all of them. */

/* corner-ticked paper panel — brass L-brackets on a hairline card (form cards,
   attribution/portal plates). Same tick geometry as .figure-frame .fr. */
.tickf{position:relative;border:1px solid var(--rule);background:var(--cream-hi)}
.tickf::before,.tickf::after{content:"";position:absolute;width:1.35rem;height:1.35rem;pointer-events:none}
.tickf::before{top:-1px;left:-1px;border-top:1px solid var(--brass);border-left:1px solid var(--brass)}
.tickf::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--brass);border-right:1px solid var(--brass)}

/* centered statement section (the conversation / record / request beats) */
.statement{text-align:center}
.statement .eyeb{justify-content:center}
.statement .stmt{margin:2.6rem auto 0;max-width:20ch}
.statement .lede,.statement .body{margin:1.8rem auto 0}
.statement .ctarow{justify-content:center}

/* inline text link inside body copy — brass underline, brass on hover */
a.ilink{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(201,169,97,.8);transition:color var(--dm) var(--eo)}
a.ilink:hover,a.ilink:focus-visible{color:var(--brassd)}

/* cross-page link in a closing ledger — inherits colour, brass on hover */
a.xlink{color:inherit;text-decoration:none;transition:color var(--dm) var(--eo)}
a.xlink:hover,a.xlink:focus-visible{color:var(--brassd)}
@media (prefers-reduced-motion:reduce){a.ilink,a.xlink{transition:none}}

/* alternating two-column layout — mirrors the figure to the opposite side (e.g. team profiles) */
@media (min-width:1101px){
  .cols.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .cols.rev>*:first-child{order:2}
  .cols.rev>*:last-child{order:1}
}

/* plate-count modifiers live together with .plates. .three (article "continue
   reading" rail) stays 3 across to 820px then stacks; .two is a symmetric pair. */
a.plate{text-decoration:none;color:inherit}
.plates.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.plates.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .plates.three{grid-template-columns:minmax(0,1fr);gap:0} }
@media (max-width:640px){ .plates.two{grid-template-columns:minmax(0,1fr)} }

/* -- extension responsive */
@media (max-width:1100px){
  .cols,.reg{grid-template-columns:minmax(0,1fr)}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.4rem}
}
@media (max-width:900px){
  .tocwrap{grid-template-columns:minmax(0,1fr)}
  .tocrail{position:static}
  .tocrail ol,.tocrail ul{border-left:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    padding:.6rem 0;display:flex;flex-wrap:wrap;gap:0 1.6em}
  .tocrail a{padding:.45em 0;border-left:0;margin-left:0}
}
@media (max-width:640px){
  .plates{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .chip{white-space:normal;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
  body[data-encre="ambient"] #ink,body[data-encre="calm"] #ink{transition:none}
  .prose a,.tocrail a,.field input,.field textarea,.field select,.field-check input::before,.tbl tbody tr,.lnav a{transition:none}
}

/* ============================================================
   §3 CRAFT ELEVATION — sitewide finish (additive)
   ============================================================ */

/* balanced display type, tidy body copy — kills orphans/widows everywhere */
.stmt,.hl,.plate h3,.cell h3,.drow h3,.crow h3,.prose h2,.prose h3,.fsx h3,.pgate-title,
h1,h2,h3{text-wrap:balance}
.body,.lede,.fnote,.prose p,.prose li,.slede,.sub{text-wrap:pretty}

/* the .hint wayfinding link was inert — give it the brass underline-draw the other links use */
.hint{position:relative;transition:color var(--dm) var(--eo)}
.hint::after{content:"";position:absolute;left:0;bottom:-.45em;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--eio)}
.hint:hover,.hint:focus-visible{color:var(--fg)}
.hint:hover::after,.hint:focus-visible::after{transform:scaleX(1)}

/* styled scrollbar — the last un-art-directed chrome */
html{scrollbar-color:var(--brassd) rgba(11,18,32,.05);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(11,18,32,.05)}
::-webkit-scrollbar-thumb{background:var(--brassd);border-radius:8px;border:3px solid var(--cream)}

/* legible text selection inside the flooded ink chapters */
body.ink ::selection,.ink-sect ::selection,#vault ::selection{background:rgba(201,169,97,.5);color:var(--cream)}

/* ---------- print: a clean IC-memo printout ---------- */
@media print{
  #ink,#paperfx,#veil,#grain,#cur,#ovl,#mnu,.mbtn,.bigm,.ghost,.turn,.stillb,#tier,.hint .tick{display:none !important}
  html,body{background:#fff !important;color:#111 !important}
  body{font-size:11pt;line-height:1.5}
  .nav{position:static !important;background:none !important;box-shadow:none !important;padding:0 0 1rem}
  .nl,.nr .plink,.nr .cta{display:none !important}
  /* flatten the dark flooded chapters to black-on-white by flipping their tokens */
  #vault,.ink-sect{--fg:#111;--fgs:#333;--fgm:#555;--rule:rgba(0,0,0,.18);background:#fff !important;color:#111 !important}
  #vault .mx,.ink-sect .mx{background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  section,.sect{padding:.9rem 0 !important;break-inside:avoid}
  .page-hero{padding-top:0 !important}
  /* reveals must be visible on paper regardless of JS state */
  html.armed .rv,html.armed .rl .msk .l,html.armed #hero .lede,html.armed #hero .whisp,html.armed #hero .hfoot,
  html.armed .zline,.rv,.rl .msk .l{opacity:1 !important;transform:none !important}
  .rule-d,.zl-rule{transform:scaleX(1) !important}
  a{color:#111 !important}
  .tocrail{position:static !important;border:0 !important;margin-bottom:1rem}
  .cta,.btn-ink{border:1px solid #111 !important;color:#111 !important;background:none !important}
  #colophon{background:#fff !important;color:#333 !important;border-top:1px solid #999}
  #colophon *{color:#333 !important}
}

/* figure frame acknowledges hover — the diagrams/photos feel interactive */
.figure-frame .fr{transition:border-color var(--du) var(--eo)}
.figure-frame:hover .fr,.figure-frame:focus-within .fr{border-color:var(--brass)}

/* accessibility conformance ledger — each row confirmed with a brass check */
.a11y-ledger dd{display:flex;align-items:baseline;gap:.55em}
.a11y-ledger dd::before{content:"\2713";color:var(--brass);font-weight:600;font-family:var(--sans)}