/* ============================================================
   Ax0s — site core v2 · "Molten Ledger"
   Group-10 moodboard, full commitment: amber #FEAB30 and yellow
   #FDE771 as drenched surfaces, coal black ink, forge brown
   #8D5D46, olive #554E35, hot metal #FF6B2F.
   Hard work · Forge · Proof · Chaos to order · Declared state.
   Type: Archivo (variable wdth/wght, display at 66% compressed
   800 uppercase) · Instrument Serif (em drops) · Spline Sans
   Mono (ledger voice).
   ============================================================ */

:root{
  --ink: #0D0904;            /* coal — body + dark sections */
  --ink-2: #1A1208;          /* coal-2 — raised dark panels */
  --ink-3: #140D06;          /* recessed panel ink (between --ink and --ink-2) */
  --cream: #FFF4DC;          /* warm white — text on coal */
  --cream-bright: #FDE771;   /* moodboard yellow — bright accents + drenched surfaces */
  --cream-dim: rgba(255,244,220,0.70);
  --cream-faint: rgba(255,244,220,0.52);
  --ghost: rgba(255,244,220,0.14);
  --rule-dark: rgba(254,171,48,0.10);
  --hair-dark: rgba(254,171,48,0.22);

  --paper: #FEAB30;          /* drenched amber surface — the moodboard IS the page */
  --paper-card: #FDE771;     /* yellow plates on amber */
  --paper-ink: #1A0E00;      /* amber-ink — text on amber/yellow (9.9:1 on amber) */
  --paper-dim: rgba(26,14,0,0.72);
  --paper-faint: rgba(26,14,0,0.66);
  --rule-paper: rgba(26,14,0,0.14);
  --hair-paper: rgba(26,14,0,0.28);

  --verm: #FEAB30;           /* forge amber — proof / validated, on dark */
  --verm-paper: #6F3700;     /* forge umber — links/accents on amber, 4.97:1 */
  --hot: #FF6B2F;            /* forge hot — live / energy only (7.0:1 on coal) */
  --brown: #8D5D46;          /* forge brown — boundary/limitation surfaces */
  --olive: #554E35;          /* olive — spine / claim-trail surfaces */
  --bronze-muted: #BC8F55;   /* golden bronze — SVG fills / secondary accents */
  --ember-soft: #E3A24B;     /* soft amber — mid-emphasis text on ink (7.7:1) */

  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
  --sans: "Archivo", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --pad-x: clamp(28px, 11vw, 180px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  background-color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 47px, var(--rule-dark) 47px, var(--rule-dark) 48px);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

::selection{ background: var(--cream-bright); color: var(--paper-ink); }

/* bare-anchor floor — any link a route forgets to style inherits its surface's
   ink (always AA) instead of user-agent blue; underline stays as affordance. */
a{ color: inherit; }

/* the ledger margin-rule — one amber line down the whole page */
.margin-rule{
  position: fixed; top:0; bottom:0;
  left: clamp(16px, 5vw, 84px);
  width: 2px;
  background: var(--verm);
  opacity: 0.38;
  z-index: 40;
  pointer-events: none;
}

/* ---------------- nav ---------------- */
/* .nav-cta visual treatment is owned by site-shell.css (filled amber chip);
   this base only pins the ledger voice. */
.nav-cta{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

/* ---------------- shared section bones ---------------- */
.band{ position: relative; padding: clamp(96px, 14vh, 170px) var(--pad-x); }
.band.band-flush{ padding-top: 0; }
.eyebrow{
  display:flex; align-items:center; gap:18px;
  font-family: var(--mono); font-size: 12px; font-weight: 640; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--verm);
  margin-bottom: clamp(28px, 4vh, 44px);
}
.eyebrow::after{ content:""; flex:1; height:2px; background: var(--hair-dark); }
.eyebrow .idx{ color: var(--cream-faint); }
.h2{
  font-size: clamp(38px, 5.6vw, 80px);
  font-weight: 800; font-stretch: 66%;
  line-height: 0.95; letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance; max-width: 15em;
}
.h2 em{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none; font-stretch: 100%;
}
.lede{
  max-width: 56ch; margin-top: 26px;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--cream-dim); text-wrap: pretty;
}
.lede strong, .foot-line strong{ color: var(--cream); font-weight: 600; }
.lede em{ font-family: var(--serif); font-style: italic; color: var(--cream); }
.lede .lede-lead{ color: var(--cream); }

/* scroll-reveal primitive · hidden states are scoped under html.fx-armed,
   which only reveal.js sets: no script, no hidden content. */
@media (prefers-reduced-motion: no-preference){
  .fx-armed .fx{ opacity:0; transform: translateY(22px); transition: opacity .8s ease var(--d,0ms), transform .9s var(--ease) var(--d,0ms); }
  .fx-armed .fx.seen{ opacity:1; transform:none; }
}

.btn{
  font-family: var(--mono); font-size: 13.5px; font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  padding: 17px 28px; border-radius: 0;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s var(--ease);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--verm); color: var(--paper-ink);
  border: 2px solid var(--verm); font-weight: 700;
}
.btn-primary:hover{ background: var(--cream-bright); border-color: var(--cream-bright); }
.btn-quiet{
  background: transparent; color: var(--cream);
  border: 2px solid var(--hair-dark);
}
.btn-quiet:hover{ border-color: var(--cream); }
@media (max-width: 480px){ .btn{ white-space: normal; text-align: center; } }

/* ============================================================
   drenched surfaces — the moodboard colors ARE the sections.
   .paper = amber (legacy hook, all existing paper sections drench
   amber); .band-yellow / .band-brown / .band-olive are the other
   three worlds. Route CSS assigns worlds; it never invents colors.
   ============================================================ */
.paper{
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 47px, var(--rule-paper) 47px, var(--rule-paper) 48px);
  color: var(--paper-ink);
}
.paper .eyebrow{ color: var(--verm-paper); }
.paper .eyebrow::after{ background: var(--hair-paper); }
.paper .eyebrow .idx{ color: var(--paper-faint); }
.paper .lede, .paper .foot-line{ color: var(--paper-dim); }
.paper .lede strong, .paper .foot-line strong, .paper .lede em, .paper .lede .lede-lead{ color: var(--paper-ink); }
.paper ::selection{ background: var(--paper-ink); color: var(--paper); }

.band-yellow{
  background-color: var(--cream-bright);
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 47px, var(--rule-paper) 47px, var(--rule-paper) 48px);
  color: var(--paper-ink);
}
.band-yellow .eyebrow{ color: var(--paper-ink); }
.band-yellow .eyebrow::after{ background: var(--hair-paper); }
.band-yellow .eyebrow .idx{ color: var(--paper-faint); }
.band-yellow .lede{ color: var(--paper-dim); }
.band-yellow .lede strong, .band-yellow .lede em, .band-yellow .lede .lede-lead{ color: var(--paper-ink); }
.band-yellow ::selection{ background: var(--paper-ink); color: var(--cream-bright); }

.band-brown{
  background-color: var(--brown);
  color: var(--cream);
}
.band-brown .eyebrow{ color: var(--cream-bright); }
.band-brown .eyebrow::after{ background: rgba(255,244,220,0.25); }
.band-brown .lede{ color: var(--cream); }

.band-olive{
  background-color: var(--olive);
  color: var(--cream);
}
.band-olive .eyebrow{ color: var(--cream-bright); }
.band-olive .eyebrow::after{ background: rgba(255,244,220,0.25); }
.band-olive .lede{ color: var(--cream); }

.stamp{
  display:inline-block;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 650; white-space: nowrap;
  color: var(--verm-paper); border: 2px solid var(--verm-paper);
  border-radius: 0; padding: 6px 12px;
  transform: rotate(-4deg);
}
@media (max-width: 480px){ .stamp{ white-space: normal; } }
@media (prefers-reduced-motion: no-preference){
  .fx-armed .stamp{ opacity: 0; transform: rotate(-14deg) scale(1.9); }
  .fx-armed .stamp.on{ opacity: 1; transform: rotate(-4deg) scale(1); animation: stampin .45s cubic-bezier(.18,1.1,.3,1); }
  @keyframes stampin{
    0%{ opacity:0; transform: rotate(-14deg) scale(1.9); }
    55%{ opacity:1; transform: rotate(-4deg) scale(0.95); }
    100%{ opacity:1; transform: rotate(-4deg) scale(1); }
  }
}
.method{ margin-top: 18px; font-size: 13.5px; color: var(--paper-dim); text-wrap: pretty; }

/* ============================================================
   contrast law (audited 2026-07-18, WCAG AA):
   on --ink/coal: --cream 18:1 · --cream-dim 9.0 · --cream-faint 5.3 (≥12px)
                  --verm 10.5 · --hot 7.0 · --ember-soft 7.7
   on --paper/amber: --paper-ink 9.9 · --paper-dim 5.4 · --paper-faint 4.6 (≥13px)
                  --verm-paper 4.97 · never --hot, never white
   on --cream-bright/yellow: same ink family, all ratios higher than amber
   on --brown: --cream 5.05 (any size) · --cream-bright 4.4 (≥19px bold or decorative)
   on --olive: --cream 7.6 · --cream-bright 6.7 (any size) · --hot decorative only
   ============================================================ */