/* ============================================================
   THE FIRST BRICK — Wayne Foundation Blueprint (v2)
   Shared design system. Extracted verbatim from
   "The Keel — Trustee Deck v3" (Aug 2026), with a
   destination-page section appended for the linked-out
   documents (agreement / principles / ledger).

   Committed single-theme dark. Every colour painted explicitly.
   Zero border-radius. No drop shadows. No gradients except the
   gold hairline rule. Hard style constraint — do not soften.
   ============================================================ */

:root{
  --black:      #0D0B09;
  --panel:      #17130F;
  --panel-2:    #201A15;
  --gold-hi:    #E2C99A;
  --gold:       #C8A97A;
  --gold-lo:    #9A7A50;
  --white:      #F5F0E8;
  --muted:      #B9AD9B;
  --dim:        #7C7264;
  --rule:       #3A322A;
  --neg:        #B4553F;
  --good:       #8FBF8A;

  --f-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
  --f-label:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-num:     'Outfit', system-ui, sans-serif;

  --pad-x: clamp(1.5rem, 5.5vw, 6rem);
  --rail-w: 5.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.doc{ overflow: auto; line-height: 1.6; }

/* ---------- deck shell ---------- */
#deck{
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar{ display:none; }

.plate{
  min-height: 100dvh;
  max-height: 100dvh;
  scroll-snap-align: start;
  /* scroll-snap-stop:always is intentionally NOT set — it blocks the
     rail's multi-screen programmatic jumps (e.g. Screen 1 → The Ask),
     which the brief requires to work without penalty. */
  padding: clamp(3.5rem,7vh,5.5rem) var(--pad-x) clamp(4rem,8vh,5.5rem);
  padding-right: calc(var(--pad-x) + var(--rail-w));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: var(--black);
}
/* A plate whose real content (at this viewport, this zoom, this font
   load) is taller than one screen must never silently hide its tail
   behind a hard snap-scroll boundary — a trustee navigating by rail
   or keyboard would jump straight past it and never know it was cut.
   overflow.js measures every plate after layout and marks the ones
   that don't fit; those fall back to an internal scroll, matching
   the .terms pattern already established below for narrow heights. */
.plate.js-overflow{
  justify-content: flex-start;
  overflow-y: auto;
}

/* ---------- eyebrow + folio ---------- */
.head{ margin-bottom: clamp(1.5rem,3.5vh,2.5rem); }
.eyebrow{
  display:flex; align-items:baseline; gap:1rem;
  font-family: var(--f-label);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.folio{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--gold-lo);
  line-height: 1;
}
.hair{
  height:1px; background: var(--gold-lo); opacity:.5;
  margin-top: .85rem; width:100%;
}

h1,h2{ font-family: var(--f-display); font-weight:700; text-wrap: balance; margin:0; }
h1{ font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height:1.04; letter-spacing:-.015em; }
h2{ font-size: clamp(1.9rem, 3.9vw, 3rem); line-height:1.08; letter-spacing:-.012em; color: var(--white); }

.lede{
  font-size: clamp(1.02rem,1.6vw,1.24rem);
  color: var(--muted);
  max-width: 62ch;
  margin: 1.1rem 0 0;
}
.lede em{ font-style: italic; color: var(--muted); }

/* ---------- panels ---------- */
.panel{
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem,2.1vw,1.7rem);
}
.panel.lift{ border-color: var(--gold-lo); }
.panel.quiet{ background: transparent; border-color: var(--rule); }

.plabel{
  font-family: var(--f-label); font-weight:800;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gold); margin:0 0 .9rem;
}

/* ---------- lists ---------- */
ul.marks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.72rem; }
ul.marks li{ position:relative; padding-left:1.15rem; font-size:.98rem; line-height:1.45; color:var(--white); }
ul.marks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.42rem; height:1px; background: var(--gold); opacity:.85;
}
ul.marks li b{ color: var(--gold-hi); font-weight:600; }

/* ---------- stat rows ---------- */
.stat{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:nowrap; }
.stat + .stat{ margin-top:.85rem; }
.stat .n{
  font-family: var(--f-num); font-weight:700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem,1.9vw,1.5rem);
  color: var(--gold-hi); line-height:1.1;
}
.stat .l{ font-size:.93rem; color:var(--muted); }

/* ---------- grids ---------- */
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.4vw,1.15rem); }
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,1.8vw,1.5rem); }
.quad{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(.7rem,1.3vw,1.05rem); flex:1; min-height:0; }

/* ---------- pillar card ---------- */
.pillar h3{
  font-family: var(--f-display); font-weight:700;
  font-size: clamp(1.15rem,1.9vw,1.45rem);
  color: var(--gold-hi); margin:0 0 .55rem;
}
.pillar .sub{
  font-family: var(--f-label); font-weight:800; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  padding-bottom:.8rem; margin-bottom:.95rem; border-bottom:1px solid var(--rule);
}

/* ---------- tech rows ---------- */
.tech{ display:flex; flex-direction:column; gap:.5rem; }
.tech a, .tech div.t{
  display:block; text-decoration:none; background:var(--black);
  border:1px solid var(--rule); padding:.6rem .75rem;
  transition: border-color .18s ease, background .18s ease;
}
.tech a:hover, .tech a:focus-visible{ border-color:var(--gold); background:var(--panel-2); }
.tech .nm{ font-size:.95rem; font-weight:600; color:var(--white); }
.tech .mt{ font-size:.78rem; color:var(--gold-hi); font-style:italic; margin-top:.12rem; }
.tech .mt.off{ color:var(--dim); font-style:normal; }

/* ---------- honesty badges ---------- */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05em; height:1.05em; margin-right:.5rem;
  font-size:.95em; line-height:1; flex:none;
  position:relative; top:-.02em;
}
.badge.live{ color:var(--good); }
.badge.interim{ color:var(--gold-hi); }
.badge.preview{ color:var(--muted); }
.badge.thesis{ color:var(--dim); }
.legend{ display:flex; flex-wrap:wrap; gap:1.3rem; font-size:.8rem; color:var(--muted); }
.legend span.k{ display:inline-flex; align-items:center; }

.standsrow{ display:block; text-decoration:none; background:var(--black);
  border:1px solid var(--rule); padding:.65rem .8rem;
  transition: border-color .18s ease, background .18s ease; }
.standsrow:hover, .standsrow:focus-visible{ border-color:var(--gold); background:var(--panel-2); }
.standsrow .nm{ font-size:.95rem; font-weight:600; color:var(--white); display:flex; align-items:center; }
.standsrow .mt{ font-size:.82rem; color:var(--muted); margin-top:.28rem; margin-left:1.55em; line-height:1.4; }
.stands-list{ display:flex; flex-direction:column; gap:.5rem; }
.stands-foot{
  margin:.9rem 0 0; padding-top:.85rem; border-top:1px solid var(--rule);
  font-size:.85rem; color:var(--muted); font-style:italic; line-height:1.5;
}

/* ---------- Keel Frame (Slides III–V) ---------- */
.keel{ display:flex; flex-direction:column; gap:clamp(.75rem,1.6vw,1.15rem); flex:1; min-height:0; }
.keel-body{
  display:grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(.75rem,1.6vw,1.15rem);
  align-items:stretch;
}
.keel-body .panel{ display:flex; flex-direction:column; }
.keel-body .panel.build{
  background: var(--panel-2);
}
.build-fig{ display:flex; flex-wrap:wrap; gap:clamp(1rem,2.4vw,1.8rem) clamp(1.4rem,3vw,2.2rem); margin-bottom:1rem; }
.build-fig .v{
  font-family:var(--f-num); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--gold-hi); line-height:1.15;
}
.build-fig .k{ font-family:var(--f-label); font-weight:600; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
.build-table{ width:100%; border-collapse:collapse; font-size:.9rem; margin:.2rem 0 1rem; }
.build-table td{ padding:.55rem 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.build-table td:first-child{ font-family:var(--f-num); font-weight:700; color:var(--gold-hi);
  white-space:nowrap; padding-right:1rem; font-variant-numeric:tabular-nums; }
.build-table .lbl{ color:var(--white); font-weight:600; }
.build-table .dsc{ display:block; color:var(--dim); font-size:.83rem; margin-top:.15rem; font-weight:400; }
.doctrine{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--gold-lo);
  font-size:.92rem; color:var(--gold-hi); line-height:1.55;
}
.doctrine b{ font-weight:700; }
.keel-note{
  font-size:.9rem; color:var(--muted); line-height:1.5; margin:.9rem 0 0;
  padding-top:.85rem; border-top:1px solid var(--rule);
}
.keel-note b{ color:var(--gold-hi); font-weight:600; }
.reframe{
  font-size:.93rem; color:var(--gold-hi); line-height:1.6; margin:.9rem 0 0;
  padding-top:.9rem; border-top:1px solid var(--gold-lo);
}
.reframe b{ font-weight:700; }

/* ---------- at full reach rail ---------- */
.reach{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); flex-wrap:wrap;
  padding:.75rem 1.1rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.reach .rlabel{
  font-family:var(--f-label); font-weight:800; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  flex:none; padding-right:.5rem; border-right:1px solid var(--rule);
}
.reach .stat{ margin:0; }
.reach .stat .n{ font-size:clamp(.98rem,1.5vw,1.18rem); }
.reach .stat .l{ font-size:.83rem; }

/* ---------- dense-plate compression (Community) ---------- */
.plate-dense .keel{ gap:.6rem; }
.plate-dense .keel-body{ gap:.6rem; }
.plate-dense .stands-list{ gap:.35rem; }
.plate-dense .standsrow{ padding:.42rem .65rem; }
.plate-dense .standsrow .nm{ font-size:.9rem; }
.plate-dense .standsrow .mt{ margin-top:.18rem; margin-left:1.55em; line-height:1.3; font-size:.78rem; }
.plate-dense .plabel{ margin-bottom:.55rem; }
.plate-dense .reframe{ margin-top:.55rem; padding-top:.55rem; font-size:.82rem; line-height:1.42; }
.plate-dense .keel-body .panel{ padding: clamp(.75rem,1.4vw,1.05rem); }
.plate-dense .keel-body ul.marks{ gap:.42rem; }
.plate-dense .keel-body ul.marks li{ font-size:.87rem; line-height:1.4; }
.plate-dense .doctrine{ margin-top:.6rem; padding-top:.6rem; font-size:.82rem; line-height:1.45; }
.plate-dense .reach{ padding:.55rem 1.1rem; }
.plate-dense .handoff{ margin-top:.5rem; font-size:1.05rem; line-height:1.3; }
@media (max-height: 860px){
  .plate-dense .reach{ padding:.42rem 1.1rem; }
  .plate-dense .reach .stat .l{ font-size:.78rem; }
  .plate-dense .handoff{ margin-top:.4rem; font-size:.92rem; }
  .plate-dense .keel-body .standsrow .mt{ display:none; }
}

/* ---------- handoff line ---------- */
.handoff{
  text-align:center; margin-top:clamp(.7rem,1.6vh,1.1rem);
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.35; color:var(--white);
}
.handoff b{ color:var(--gold-hi); font-weight:700; font-style:normal; }

/* ---------- Terms (quiet register) — What You Would Hold ---------- */
.terms{ display:flex; flex-direction:column; gap:clamp(.6rem,1.3vw,1rem); flex:1; min-height:0; justify-content:center; max-width:78ch; overflow-y:auto; }
.terms .panel{ background:transparent; border:0; border-top:1px solid var(--rule); padding:clamp(.65rem,1.3vw,1rem) 0 0; }
.terms .plabel{ color:var(--gold-lo); margin-bottom:.55rem; }
.terms p{ margin:0; font-size:clamp(.88rem,1.25vw,1rem); line-height:1.48; color:var(--white); }
.terms p + p{ margin-top:.6rem; }
.terms b{ color:var(--gold-hi); font-weight:600; }
.terms a{ color:var(--gold-hi); }
.terms-close{
  margin-top:.2rem; font-size:.9rem; color:var(--muted); line-height:1.5;
  padding-top:.8rem; border-top:1px solid var(--rule);
}
@media (max-height: 900px){
  .terms{ gap:.4rem; }
  .terms .panel{ padding-top:.45rem; }
  .terms p{ font-size:.82rem; line-height:1.38; }
  .terms p + p{ margin-top:.4rem; }
  .terms-close{ padding-top:.55rem; font-size:.82rem; }
}
@media (max-height: 760px){
  .terms .plabel{ margin-bottom:.35rem; font-size:.68rem; }
  .terms p{ font-size:.78rem; line-height:1.34; }
}
@media (max-height: 740px){
  /* This is the read-carefully screen, not a skim screen —
     below 740px it scrolls internally rather than clipping content. */
  .plate:has(.terms){
    max-height: 100dvh; overflow-y: auto; display:block;
    padding-top:clamp(2.2rem,5vh,3.5rem); padding-bottom:3rem;
  }
  .terms{ justify-content:flex-start; max-height:none; flex:none; }
}

/* ---------- the ask ---------- */
.ask{ text-align:center; align-items:center; }
.square-wrap{ display:flex; justify-content:center; margin:clamp(1.6rem,4vh,2.6rem) 0; }
.square{ position:relative; width:clamp(220px,32vw,340px); aspect-ratio:1; }
.sq-node{
  position:absolute; width:38%; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-label); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.3;
}
.sq-node.fixed{
  background:var(--panel-2); border:1px solid var(--gold-lo); color:var(--gold-hi);
  top:0; left:0;
}
.sq-node.open{
  border:1px dashed var(--gold-lo); color:var(--dim); background:var(--panel);
}
.sq-node.open.n1{ top:0; right:0; }
.sq-node.open.n2{ bottom:0; left:0; }
.sq-node.open.n3{ bottom:0; right:0; }
.sq-node.open span{ position:relative; z-index:2; background:var(--panel); padding:0 .4rem; }
.sq-node.open::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:1.3rem; height:1px; background:var(--gold-lo); z-index:1;
}
.figs{
  display:flex; justify-content:center; gap:clamp(1.5rem,5vw,4rem);
  flex-wrap:wrap; margin-top:.5rem;
}
.fig .v{
  font-family: var(--f-num); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem); color:var(--gold-hi);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.fig .k{
  font-family: var(--f-label); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-top:.3rem;
}

/* ---------- scenario toggle ---------- */
.toggle{ display:flex; gap:0; border:1px solid var(--rule); width:fit-content; }
.toggle button{
  font-family:var(--f-label); font-weight:800; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:transparent; color:var(--muted); border:0;
  padding:.55rem 1.15rem; cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.toggle button + button{ border-left:1px solid var(--rule); }
.toggle button[aria-pressed="true"]{ background:var(--gold); color:var(--black); }
.toggle button:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }

.bigfig{
  font-family:var(--f-num); font-weight:700;
  font-size:clamp(2.2rem,5.2vw,3.6rem);
  font-variant-numeric:tabular-nums; line-height:1;
  color:var(--gold-hi);
}
.bigfig.neg{ color:var(--neg); }

.drivers{ display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; }
.driver{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--rule); }
.driver span:first-child{ color:var(--muted); }
.driver span:last-child{ font-family:var(--f-num); font-variant-numeric:tabular-nums; color:var(--white); }

/* ---------- ledger table ---------- */
.ledger{ width:100%; border-collapse:collapse; font-size:.95rem; }
.ledger th{
  font-family:var(--f-label); font-weight:800; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  text-align:left; padding:0 0 .6rem; border-bottom:1px solid var(--gold-lo);
}
.ledger th:last-child, .ledger td:last-child{ text-align:right; }
.ledger td{ padding:.72rem 0; border-bottom:1px solid var(--rule); color:var(--white); }
.ledger td:last-child{ font-family:var(--f-num); font-variant-numeric:tabular-nums; color:var(--gold-hi); }
.ledger tr.total td{ border-bottom:0; padding-top:.95rem; font-weight:600; }
.ledger tr.total td:last-child{ font-size:1.15rem; }
.ledger .note{ display:block; font-size:.83rem; color:var(--dim); margin-top:.15rem; }

/* ---------- flywheel ---------- */
.wheel-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(1rem,3vw,2.5rem); align-items:center; flex:1; min-height:0; }
.wheel{ width:100%; max-width:min(46vh,460px); margin:0 auto; display:block; }
.node circle{ fill:var(--panel); stroke:var(--gold-lo); stroke-width:1.2; transition:fill .2s ease, stroke .2s ease; }
.node text{ font-family:var(--f-label); font-weight:800; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; fill:var(--muted); transition:fill .2s ease; }
.node{ cursor:pointer; }
.node:hover circle, .node.on circle{ fill:var(--panel-2); stroke:var(--gold-hi); stroke-width:2; }
.node:hover text, .node.on text{ fill:var(--gold-hi); }
.node:focus-visible{ outline:none; }
.node:focus-visible circle{ stroke:var(--gold-hi); stroke-width:2.4; }

.wheel-detail .k{
  font-family:var(--f-label); font-weight:800; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.wheel-detail h3{ font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.85rem); color:var(--white); margin:.5rem 0 .6rem; }
.wheel-detail p{ margin:0; color:var(--muted); font-size:1rem; max-width:44ch; }

/* ---------- closing ---------- */
.close{ text-align:center; align-items:center; justify-content:center; }
.close .verse{ font-family:var(--f-display); font-size:1rem; color:var(--dim); margin-bottom:auto; }
.close blockquote{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,3.5vw,2.55rem); line-height:1.3;
  margin:0; max-width:22ch; text-wrap:balance; color:var(--white);
}
.close blockquote b{ color:var(--gold-hi); font-weight:700; }
.close .sig{
  font-family:var(--f-label); font-weight:600; font-size:.85rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ---------- The Anchor Line (Screen 5 — new beat, text only) ---------- */
.plate-anchor{ justify-content:center; align-items:center; text-align:center; }
.anchor-inner{ max-width: 42ch; margin:0 auto; }
.anchor-line{
  font-family: var(--f-display); font-weight:400;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.42; color: var(--white); text-wrap: pretty;
}
.anchor-line b{ color: var(--gold-hi); font-weight:700; }
.anchor-coda{
  margin: clamp(1.4rem,3.5vh,2.2rem) auto 0; max-width: 52ch;
  font-size: .92rem; color: var(--muted); line-height:1.55;
}
@media (max-height: 860px){
  .anchor-line{ font-size: clamp(1.05rem,1.7vw,1.4rem); line-height:1.36; }
  .anchor-coda{ font-size:.84rem; margin-top:1.1rem; }
}
@media (max-height: 680px){
  .anchor-inner{ max-width: 58ch; }
  .anchor-line{ font-size: 1.02rem; line-height:1.32; }
  .anchor-coda{ font-size:.8rem; }
}

/* ---------- rail ---------- */
#rail{
  position:fixed; top:50%; right:clamp(1rem,2.2vw,2rem);
  transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:.55rem; align-items:flex-end;
}
#rail button{
  background:transparent; border:0; padding:.22rem 0; cursor:pointer;
  display:flex; align-items:center; gap:.6rem;
}
#rail .bar{ display:block; width:1.35rem; height:1px; background:var(--rule); transition:width .22s ease, background .22s ease; }
#rail button[aria-current="true"] .bar{ width:2.6rem; background:var(--gold-hi); }
#rail button:hover .bar{ background:var(--gold); }
#rail .tip{
  font-family:var(--f-label); font-weight:600; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  opacity:0; transition:opacity .2s ease; white-space:nowrap;
}
#rail button:hover .tip, #rail button:focus-visible .tip,
#rail button[aria-current="true"] .tip{ opacity:1; color:var(--gold-hi); }
#rail button:focus-visible{ outline:1px solid var(--gold-lo); outline-offset:4px; }

#tick{
  position:fixed; left:var(--pad-x); bottom:clamp(1rem,2.4vh,1.7rem); z-index:40;
  font-family:var(--f-label); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  pointer-events:none;
}
#tick b{ color:var(--gold-hi); font-weight:800; }

#bar{ position:fixed; top:0; left:0; height:2px; background:var(--gold-hi); z-index:50; width:0; transition:width .25s ease; }

.estimate{
  display:inline-block; font-family:var(--f-label); font-weight:800;
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lo); border:1px solid var(--gold-lo);
  padding:.1rem .4rem; vertical-align:middle; margin-left:.5rem;
}

/* ---------- skip hint (Screen 1) ---------- */
.skip-hint{
  margin-top: clamp(1.4rem,3vh,2.2rem);
  font-family: var(--f-label); font-weight:600; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.skip-hint a{ color:var(--gold-lo); text-decoration:none; border-bottom:1px solid var(--rule); }
.skip-hint a:hover, .skip-hint a:focus-visible{ color:var(--gold-hi); border-color:var(--gold-lo); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.plate.seen .rv{ opacity:1; transform:none; }
.plate.seen .rv:nth-child(2){ transition-delay:.07s; }
.plate.seen .rv:nth-child(3){ transition-delay:.14s; }
.plate.seen .rv:nth-child(4){ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}
/* What You Would Hold: quiet arrival — no motion, text simply present */
.plate-still .rv{ opacity:1; transform:none; transition:none; }

/* ---------- short viewports: tighten the frame plates ---------- */
@media (max-height: 1000px){
  .quad .panel{ padding: clamp(.8rem,1.5vw,1.15rem); }
  .quad .plabel{ font-size:.71rem; margin-bottom:.65rem; letter-spacing:.17em; }
  .quad ul.marks{ gap:.48rem; }
  .quad ul.marks li{ font-size:.885rem; line-height:1.36; padding-left:1rem; }
  .quad .stat + .stat{ margin-top:.55rem; }
  .quad .stat .n{ font-size:clamp(.98rem,1.55vw,1.24rem); }
  .quad .stat .l{ font-size:.85rem; }
  .quad .tech{ gap:.38rem; }
  .quad .tech a, .quad .tech div.t{ padding:.42rem .6rem; }
  .quad .tech .nm{ font-size:.875rem; }
  .quad .tech .mt{ font-size:.72rem; }

  .keel-body .panel{ padding: clamp(.8rem,1.5vw,1.15rem); }
  .keel-body .plabel{ font-size:.71rem; margin-bottom:.6rem; letter-spacing:.17em; }
  .stands-list{ gap:.4rem; }
  .standsrow{ padding:.5rem .65rem; }
  .standsrow .nm{ font-size:.87rem; }
  .standsrow .mt{ font-size:.76rem; }
  .build-fig .v{ font-size:clamp(1.1rem,1.9vw,1.4rem); }
  .build-table td{ padding:.42rem 0; }
  .doctrine, .reframe{ font-size:.85rem; }
  .reach{ padding:.65rem .9rem; }
}
@media (max-height: 840px){
  .quad ul.marks li{ font-size:.83rem; line-height:1.32; }
  .quad .tech .nm{ font-size:.83rem; }
  .quad .stat .l{ font-size:.8rem; }
  .keel-body{ gap:.6rem; }
  .standsrow .mt{ display:none; }

  .terms{ gap:.3rem; max-height:calc(100dvh - 11rem); }
  .terms .panel{ padding-top:.35rem; }
  .terms .plabel{ margin-bottom:.3rem; font-size:.66rem; }
  .terms p{ font-size:.76rem; line-height:1.32; }
  .terms p + p{ margin-top:.3rem; }
  .terms-close{ padding-top:.4rem; font-size:.76rem; margin-top:0; }

  .ledger td{ padding:.42rem 0; }
  .ledger tr.total td{ padding-top:.5rem; }
  .ledger .note{ font-size:.72rem; }
  .x-right .panel{ padding:.55rem .75rem !important; }
  .x-right .plabel{ font-size:.66rem !important; margin-bottom:.35rem !important; }
  .x-right ul.marks{ gap:.3rem !important; }
  .x-right ul.marks li{ font-size:.76rem !important; line-height:1.3 !important; }
  .x-right p{ font-size:.74rem !important; line-height:1.3 !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  body{ font-size:16px; }
  .plate{ padding-right: var(--pad-x); justify-content:flex-start; padding-top:4.5rem; }
  .cols-3{ grid-template-columns:1fr; }
  .cols-2{ grid-template-columns:1fr; }
  .quad{ grid-template-columns:1fr; grid-template-rows:none; }
  .keel-body{ grid-template-columns:1fr; }
  .reach{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .reach .rlabel{ border-right:0; padding-right:0; }
  .wheel-wrap{ grid-template-columns:1fr; }
  #rail{ display:none; }
  #deck{ scroll-snap-type:none; }
  .plate{ min-height:auto; }
}

/* ============================================================
   DESTINATION PAGES — agreement.html / principles.html / ledger.html
   These are documents, not deck screens: no rail, own masthead,
   an explicit back-link, the quieter register of Screen 7.
   ============================================================ */

#masthead{
  padding: clamp(1.2rem,3vh,2rem) var(--pad-x);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  border-bottom: 1px solid var(--rule);
}
#masthead .m-name{ font-family: var(--f-label); font-weight:800; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-hi); }
#masthead .m-sub{ font-family: var(--f-label); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--dim); margin-top:.2rem; }

.doc-back{
  display:inline-block; margin: clamp(1.6rem,4vh,2.6rem) 0 0 var(--pad-x);
  font-family: var(--f-label); font-weight:700; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-lo); text-decoration:none;
}
.doc-back:hover, .doc-back:focus-visible{ color: var(--gold-hi); }

.sect{
  padding: clamp(3rem,7vh,5rem) var(--pad-x);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.sect:last-of-type{ border-bottom: 0; }
.sect-inner{ max-width: 78rem; margin: 0 auto; }
.sect-narrow .sect-inner{ max-width: 62rem; }

.doc h2{ font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.doc h3{ font-family: var(--f-display); font-weight:700; font-size: clamp(1.2rem,1.9vw,1.5rem); color: var(--gold-hi); margin:0 0 .55rem; }

p.body-p{ font-size: 1rem; line-height: 1.7; color: var(--white); max-width: 72ch; margin: 0 0 1.1rem; }
p.body-p:last-child{ margin-bottom: 0; }
p.body-p b{ color: var(--gold-hi); font-weight: 600; }
.muted-p{ color: var(--muted); }

/* ---------- principle card ---------- */
.principle{ background:var(--panel); border:1px solid var(--rule); padding: clamp(1.2rem,2.2vw,1.8rem); }
.principle .pnum{ font-family:var(--f-display); font-weight:700; font-size:2.1rem; color:var(--gold-lo); line-height:1; }
.principle .ptitle{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:var(--gold-hi); margin:.4rem 0 .1rem; }
.principle .parabic{ font-size:1.05rem; color:var(--dim); margin-bottom:.7rem; }
.principle .pcite{ font-style:italic; color:var(--gold); font-size:.92rem; margin-bottom:.9rem; }
.principle p{ margin:0; font-size:.94rem; line-height:1.6; color:var(--white); }
.principle .commit{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--rule); font-style:italic; color:var(--muted); font-size:.9rem; }
.principle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.6rem; }
@media (max-width: 760px){ .principle-grid{ grid-template-columns:1fr; } }

/* ---------- agreement template ---------- */
.tmpl{ background: var(--panel-2); border: 1px solid var(--gold-lo); padding: clamp(1.4rem,2.6vw,2.2rem); max-width: 74ch; margin: 0 auto; }
.tmpl .stamp{ font-family: var(--f-label); font-weight:800; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-lo); display:inline-block; padding:.25rem .6rem; margin-bottom:1.2rem; }
.tmpl h4{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:var(--gold-hi); margin: 1.4rem 0 .5rem; }
.tmpl h4:first-of-type{ margin-top:0; }
.tmpl p{ font-size:.94rem; line-height:1.65; color:var(--white); margin:0 0 .8rem; }
.tmpl p:last-child{ margin-bottom:0; }
.tmpl .field{ color:var(--gold-hi); font-style:italic; }
.tmpl .fine{ font-size:.82rem; color:var(--dim); font-style:italic; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--rule); }

/* ---------- closing block on doc pages ---------- */
.close-sect{ text-align:center; padding: clamp(3.5rem,9vh,6rem) var(--pad-x); }
.close-sect .verse{ font-family:var(--f-display); font-size:1rem; color:var(--dim); margin-bottom: 1.4rem; }
.close-sect blockquote{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.3rem,3vw,2rem); line-height:1.35; margin: 0 auto; max-width: 40ch; text-wrap:balance; color:var(--white); }

.doc .cols-2, .doc .cols-3{ margin-top: 1.4rem; }
@media (max-width: 900px){ .doc .cols-2, .doc .cols-3{ grid-template-columns:1fr; } }