/* ============================================================
   Stark Meridian Croft - Homepage
   Pass 1: tokens, nav, sections 1 to 3
   SPEC.md Part 1 is binding. Every value here traces to it.
   ============================================================ */

/* ---------- 1.1 Colour tokens ---------- */
:root{
  --ink:        #0A0A0A;
  --navy:       #111B2E;
  --bone:       #F5F3EF;
  --brass:      #8A6D3B;
  --oxblood:    #6B1F2A;
  --slate:      #A8A49C;
  --warm-grey:  #6E6A63;

  --hairline-on-dark:  rgba(168,164,156,0.20);
  --hairline-on-light: rgba(110,106,99,0.28);
  --rule-brass:        rgba(138,109,59,0.45);

  /* ---------- 1.4 Typography ---------- */
  --display: 'Cinzel','Times New Roman',serif;   /* h1, h2 only */
  --body:    'Montserrat',-apple-system,'Helvetica Neue',sans-serif;

  --t-display:   clamp(34px, 5.0vw, 60px);
  --t-h2:        clamp(22px, 2.6vw, 30px);
  --t-figure-xl: clamp(56px, 9.6vw, 118px);
  --t-figure-lg: clamp(44px, 7.0vw, 84px);
  --t-figure-md: clamp(26px, 3.0vw, 36px);
  --t-figure-sm: clamp(18px, 2.0vw, 24px);
  --t-lede:      clamp(17px, 1.5vw, 20px);
  --t-body:      clamp(16px, 1.2vw, 17px);
  --t-small:     13px;
  --t-label:     11px;
  --t-button:    12px;

  /* ---------- 1.5 Spacing ---------- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:176px;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section-y: clamp(72px, 10vw, 160px);
  --measure: 64ch;
}

/* ---------- Reset and 1.6 Geometry ---------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.60;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
h1,h2,p,figure,table{margin:0}
a{color:inherit}

/* Focus indicator: 1px brass at 4px offset. Never suppressed. 2.4 */
:focus{outline:none}
:focus-visible{outline:1px solid var(--brass);outline-offset:4px}

/* Every figure is Montserrat with tabular, lining figures. 1.4 */
.num{
  font-family:var(--body);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* Visually hidden: chart data tables, skip link parking. 2.4 */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Fields (2.2) ---------- */
.f-ink{background:var(--ink);color:var(--bone)}
.f-navy{background:var(--navy);color:var(--bone)}

.wrap{max-width:1120px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}

/* ---------- Type primitives ---------- */
.display{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-display);letter-spacing:.06em;line-height:1.14;
  text-transform:uppercase;max-width:100%;
}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2);letter-spacing:.08em;line-height:1.20;
  text-transform:uppercase;max-width:26ch;
}
.lede{font-size:var(--t-lede);font-weight:300;line-height:1.55;max-width:52ch}
.body{font-size:var(--t-body);font-weight:400;line-height:1.60;max-width:var(--measure)}
.small{font-size:var(--t-small);font-weight:400;letter-spacing:.01em;line-height:1.60}
.label{
  font-size:var(--t-label);font-weight:500;letter-spacing:.18em;
  line-height:1.40;text-transform:uppercase;color:var(--slate);
}
.slate{color:var(--slate)}
.rule{height:1px;background:var(--hairline-on-dark);border:0;width:100%}

.figure-xl{font-size:var(--t-figure-xl);font-weight:300;letter-spacing:-.025em;line-height:1.00}
.figure-lg{font-size:var(--t-figure-lg);font-weight:300;letter-spacing:-.020em;line-height:1.00}
.figure-md{font-size:var(--t-figure-md);font-weight:400;letter-spacing:-.015em;line-height:1.05}
.figure-sm{font-size:var(--t-figure-sm);font-weight:400;letter-spacing:-.010em;line-height:1.10}

/* Spacing relationships, 1.5 */
.mt-s2{margin-top:var(--s2)} .mt-s3{margin-top:var(--s3)}
.mt-s4{margin-top:var(--s4)} .mt-s5{margin-top:var(--s5)}
.mt-s6{margin-top:var(--s6)} .mt-s7{margin-top:var(--s7)}

/* ---------- Skip link (2.4) ---------- */
.skip{
  position:absolute;left:var(--gutter);top:0;transform:translateY(-140%);
  z-index:400;background:var(--brass);color:var(--ink);
  font-size:var(--t-button);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 22px;min-height:48px;text-decoration:none;transition:transform 180ms ease;
}
.skip:focus-visible{transform:translateY(0)}

/* ============================================================
   NAV  (SPEC Part 3, NAV). Ink. Not sticky.
   ============================================================ */
.nav{border-bottom:1px solid var(--hairline-on-dark)}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-top:var(--s3);padding-bottom:var(--s3);
}
.nav-mark{display:inline-flex;align-items:center;min-height:48px;line-height:0}
.wordmark{height:22px;width:auto;aspect-ratio:1093/207.5}
.nav-links{display:flex;align-items:center;gap:var(--s5)}
.nav-links a{
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;
  display:inline-flex;align-items:center;min-height:48px;
  transition:color 180ms ease;
}
.nav-links a:hover{color:var(--brass)}
@media (max-width:639px){
  .wordmark{height:18px}
  .nav-links .nav-index{display:none}
}

/* ============================================================
   SECTION 1: THE DECLARATION. Ink.
   ============================================================ */
.state-picker{max-width:420px}
.state-picker label{display:block;margin-bottom:var(--s2)}

/* Field: underline only. No boxes, no fills. 1.7 */
.field{
  width:100%;background:transparent;color:var(--bone);
  font-family:var(--body);font-size:19px;line-height:1.3;
  border:0;border-bottom:1px solid var(--hairline-on-dark);
  padding:10px 28px 12px 0;min-height:48px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color 180ms ease;
}
.field:focus{border-bottom-color:var(--brass)}
.field option{background:var(--ink);color:var(--bone)}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
  border-right:1px solid var(--slate);border-bottom:1px solid var(--slate);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}

/* ---------- Hero comparison. One shared right aligned value column. ---------- */
.compare-rows{
  display:grid;grid-template-columns:1fr auto;
  column-gap:0;align-items:baseline;margin:0;
}
.compare-rows dt{
  font-size:var(--t-body);line-height:1.6;color:var(--slate);
  padding:var(--s3) clamp(24px,4vw,64px) var(--s3) 0;
  border-bottom:1px solid var(--hairline-on-dark);
}
.compare-rows dd{
  margin:0;text-align:right;white-space:nowrap;
  padding:var(--s3) 0;border-bottom:1px solid var(--hairline-on-dark);
}
@media (max-width:639px){
  .compare-rows{grid-template-columns:1fr}
  .compare-rows dt{padding:0 0 var(--s1);border-bottom:0}
  .compare-rows dd{text-align:left;padding-top:0;white-space:normal}
}

/* ---------- Cartogram (SPEC 4.4). Lifted from calculator.html. ---------- */
.map{max-width:580px}
.map.map-lg{max-width:940px}
.map svg{width:100%;height:auto;display:block}
.tile{cursor:pointer}
.tile rect{
  fill:transparent;stroke:rgba(168,164,156,.30);stroke-width:2;
  transition:fill .3s ease,stroke .3s ease;
}
.tile text{
  fill:var(--slate);font-family:var(--body);font-size:36px;font-weight:500;
  letter-spacing:.05em;text-anchor:middle;dominant-baseline:central;
  pointer-events:none;transition:fill .3s ease;
}
.tile:hover rect{stroke:var(--brass)}
.tile:hover text{fill:var(--bone)}
.tile:focus{outline:none}
.tile:focus-visible rect{stroke:var(--brass);stroke-width:4}
.tile.on rect{fill:var(--bone);stroke:var(--bone)}
.tile.on text{fill:var(--ink)}
.tile.taken{cursor:not-allowed}
.tile.taken rect{stroke:rgba(168,164,156,.10)}
.tile.taken text{fill:rgba(168,164,156,.20)}

/* ---------- State response, beneath the map ---------- */
/* h3 is Montserrat per BRAND 4, never Cinzel. */
.h3{
  font-size:clamp(20px,1.8vw,22px);font-weight:600;
  letter-spacing:.02em;line-height:1.30;color:var(--bone);
}
.rule-brass{height:1px;background:var(--rule-brass);border:0;width:100%}
.state-response{max-width:var(--measure)}
.state-response .h3{color:var(--bone)}
.state-response.held .h3{color:var(--slate)}
.state-response.held #sr-cta-row{display:none}

/* ---------- Revealed figure block (M7) ---------- */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity 450ms ease,transform 450ms ease;
}
.reveal.on{opacity:1;transform:none}
.reveal[hidden]{display:none}

/* ============================================================
   SECTION 3: THE INDICTMENT. Ink. Decomposition bar, SPEC 4.1.
   ============================================================ */
.chart figcaption{margin-top:var(--s3);font-size:var(--t-small);color:var(--slate)}

.decomp{position:relative}
.decomp-svg{
  width:100%;height:auto;display:block;
  aspect-ratio:1120/56;      /* reserved height, no CLS */
}
.seg{transition:width 0ms linear}
.seg-media{width:0}
.seg-fulfil{width:0}
.seg-margin{width:0}
.decomp.drawn .seg-media {width:454px;transition:width 360ms ease-out 0ms}
.decomp.drawn .seg-fulfil{width:38px; transition:width 40ms  ease-out 360ms}
.decomp.drawn .seg-margin{width:628px;transition:width 500ms ease-out 400ms}
.decomp-divider{opacity:0;transition:opacity 200ms ease 900ms}
.decomp.drawn .decomp-divider{opacity:1}

/* Annotation key. One even row beneath the bar. The fulfilment
   segment is only 38px wide, so keys are laid out on a regular
   grid rather than pinned to segment starts; the swatches carry
   the association. */
.keys{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s4);margin-top:var(--s4);
  opacity:0;transition:opacity 300ms ease 600ms;
}
.decomp.drawn .keys{opacity:1}
.key{display:flex;align-items:flex-start;gap:var(--s2);text-align:left}
.key .label{display:block}
.key .val{
  display:block;margin-top:6px;font-size:14px;font-weight:600;
  letter-spacing:0;line-height:1;color:var(--slate);
}
.key .val.brass{color:var(--brass)}
.key-swatch{width:12px;height:12px;flex:0 0 auto;margin-top:2px;border:0}
.sw-media {background:rgba(168,164,156,.45)}
.sw-fulfil{background:rgba(168,164,156,.25)}
.sw-margin{background:var(--brass)}

/* Below 640px the keys stack as a three row list. */
@media (max-width:639px){
  .keys{grid-template-columns:1fr;gap:var(--s3)}
}

/* ============================================================
   SECTION 4: THE THESIS. Navy. Appreciation curve, SPEC 4.2.
   Chart text is HTML overlaid on the SVG so the type tokens hold
   their real pixel sizes at every width. See the handoff note.
   ============================================================ */
.curve{position:relative}
.curve-svg{width:100%;height:auto;display:block;aspect-ratio:1120/420}
.curve .axis line{stroke:var(--hairline-on-dark);stroke-width:1}
.curve .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.curve .ln-rented{stroke:rgba(168,164,156,0.60)}
.curve .ln-owned{stroke:var(--brass)}

/* M4: both paths draw simultaneously. The divergence is the payload. */
.curve .ln.armed{stroke-dashoffset:var(--len)}
.curve.drawn .ln.armed{stroke-dashoffset:0;transition:stroke-dashoffset 1200ms ease-out}

.ax{position:absolute;color:var(--slate);white-space:nowrap}
.ax-y{transform:translateY(-50%);text-align:right}
.ax-x{transform:translateX(-50%)}

.series{
  position:absolute;transform:translateY(-100%);white-space:nowrap;
  font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  opacity:0;transition:opacity 300ms ease 1000ms;
}
.curve.drawn .series{opacity:1}
.series-rented{color:var(--slate)}
.series-owned{color:var(--brass)}

/* ============================================================
   SECTION 5: THE RESULT. Ink. Case count marks, SPEC 4.3.
   ============================================================ */
.marks{position:relative}
.marks-svg{width:100%;height:auto;display:block;aspect-ratio:1120/200}
.marks rect{
  opacity:0;transform:scale(.8);transform-box:fill-box;transform-origin:center;
}
.mark-row-agg rect{fill:rgba(168,164,156,0.50)}
.mark-row-own rect{fill:var(--brass)}
/* M5: 30ms stagger. The aggregator row completes before the owned row begins. */
.marks.drawn rect{
  opacity:1;transform:none;
  transition:opacity 120ms linear var(--d),transform 120ms linear var(--d);
}

.mark-lbl{position:absolute;left:0;transform:translateY(-100%);white-space:nowrap}
.mark-count{
  position:absolute;transform:translateY(-50%);
  white-space:nowrap;opacity:0;transition:opacity 300ms ease var(--d);
}
.marks.drawn .mark-count{opacity:1}
.brass{color:var(--brass)}

@media (max-width:639px){
  /* Axis labels reduce to M1, M12 and M24. */
  .ax-x.ax-wide{display:none}
}

/* ============================================================
   SECTION 6: THE INSTRUMENT (SPEC Part 5).

   Three stacked fields inside one <section>, so the section
   padding lives on each field rather than the section itself.
   ============================================================ */
.section-open{display:block}

/* Progressive disclosure, SPEC 5.2. Stages 1 and 2 reveal at
   opacity 0 to 1 and translateY 14px to 0 over 450ms. */
.stage{opacity:0;transform:translateY(14px);transition:opacity 450ms ease,transform 450ms ease}
.stage.on{opacity:1;transform:none}
.stage[hidden]{display:none}

.field-block{max-width:420px}
.quiet-link{
  display:inline-flex;align-items:center;min-height:48px;background:none;border:0;padding:8px 0;
  font-family:var(--body);font-size:var(--t-small);color:var(--slate);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  transition:color 180ms ease;
}
.quiet-link:hover{color:var(--bone)}

/* Brass type is large only (SPEC 1.2): 18px/400 or 14px/600.
   Every brass label in this section is set at the 14px/600 floor. */
.tier,.own-label{
  font-size:14px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);line-height:1.45;
}
.tier{margin-top:var(--s3);min-height:20px}
.own-label{margin-bottom:var(--s3)}
.err{
  font-size:14px;font-weight:600;color:var(--brass);
  margin-top:var(--s1);min-height:20px;line-height:1.45;
}
.err:empty{min-height:0;margin-top:0}
.hint{margin-top:var(--s1)}

/* ---------- Budget slider. No numeric input, ever (SPEC 5.10). ---------- */
.slider{max-width:520px}
.slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;
  background:transparent;height:44px;cursor:pointer;display:block;
}
.slider input[type=range]:focus{outline:none}
.slider input[type=range]:focus-visible{outline:1px solid var(--brass);outline-offset:6px}
.slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(168,164,156,.34)}
.slider input[type=range]::-moz-range-track{height:2px;background:rgba(168,164,156,.34)}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:24px;background:var(--brass);
  margin-top:-11px;cursor:grab;border:0;
}
.slider input[type=range]::-moz-range-thumb{width:16px;height:24px;background:var(--brass);border:0;cursor:grab}
.slider-ends{
  display:flex;justify-content:space-between;margin-top:-4px;
  font-size:var(--t-label);font-weight:500;letter-spacing:.13em;color:var(--slate);
}
#budget-help{margin-top:var(--s3)}

/* Idle: no state chosen. The controls stay visible, the slider is
   inert and the figures read a dash. */
.stage.idle .figure-lg,
.stage.idle .figure-md{color:var(--slate);opacity:.55}
.slider input[type=range]:disabled{cursor:not-allowed;opacity:.4}
.stage.idle .slider-ends{opacity:.4}

/* ---------- The result ---------- */
.result-fig{min-height:1em}          /* reserved height, no CLS */
.result-cap{max-width:32ch}
.compare{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap}
.was{
  font-size:var(--t-figure-md);font-weight:400;letter-spacing:-.015em;line-height:1.1;
  color:var(--slate);text-decoration:line-through;text-decoration-thickness:1px;opacity:.75;
}
#was-cap{max-width:32ch}
.badge{
  border:1px solid var(--brass);color:var(--brass);padding:13px 22px;
  font-size:clamp(15px,3vw,19px);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
}
.badge.warn{
  border-color:var(--hairline-on-dark);color:var(--slate);
  white-space:normal;font-size:14px;font-weight:400;letter-spacing:.01em;
  text-transform:none;max-width:46ch;line-height:1.6;
}

/* ---------- Refine panel ---------- */
.refine{border-top:1px solid var(--hairline-on-dark);padding-top:var(--s3)}
.refine-hd{
  background:none;border:0;padding:8px 0;cursor:pointer;
  display:flex;align-items:center;gap:10px;min-height:48px;
  font-family:var(--body);font-size:var(--t-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
  transition:color 180ms ease;
}
.refine-hd:hover{color:var(--bone)}
.refine-hd .car{color:var(--brass);font-size:18px;font-weight:600;transition:transform 250ms ease}
.refine.open .refine-hd .car{transform:rotate(90deg)}
.refine-bd{
  display:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(24px,4vw,44px);margin-top:var(--s4);
}
.refine.open .refine-bd{display:grid}

/* ---------- Methodology disclosure (foot of section 6) ---------- */
.method{border-top:1px solid var(--hairline-on-dark);padding-top:var(--s3)}
.method-hd{
  display:flex;align-items:center;gap:10px;min-height:48px;
  list-style:none;cursor:pointer;
  font-family:var(--body);font-size:var(--t-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
  transition:color 180ms ease;
}
.method-hd::-webkit-details-marker{display:none}
.method-hd::marker{content:""}
.method-hd:hover{color:var(--bone)}
.method-hd:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.method-hd .car{color:var(--brass);font-size:18px;font-weight:600;transition:transform 250ms ease}
.method[open] .method-hd .car{transform:rotate(90deg)}

.method-bd{
  margin-top:var(--s4);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:clamp(24px,4vw,44px);
}
.method-bd p{font-size:13px;line-height:1.62;color:var(--slate);max-width:46ch}
/* Structural lead-ins stay slate so the single bone lift keeps its force. */
.m-k{font-weight:600;color:var(--slate)}
.m-em{font-weight:600;color:var(--bone)}

/* ---------- The locked six months ---------- */
.lock-rows .r{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  padding:15px 0;border-bottom:1px solid rgba(168,164,156,.14);
}
.lock-rows .k{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.lock-rows .v{color:var(--bone)}
.lock-rows .r.hi .v{color:var(--brass)}    /* figure-sm, 18px min, legal brass */

.save{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule-brass)}
.save .v{color:var(--bone)}
.save .k{max-width:36ch}

.avail{
  margin-top:var(--s6);border:1px solid var(--rule-brass);padding:22px 24px;
  display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline;flex-wrap:wrap;
}
.avail .v{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--brass)}

/* Redaction: values blur, labels stay legible (SPEC 5.8). The one
   sanctioned filter on the page. */
.veil .v{filter:blur(9px);opacity:.45;user-select:none;transition:filter 700ms ease,opacity 700ms ease}
.veil .avail .v{filter:blur(7px);opacity:.5}

.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.cta-row[hidden]{display:none}

/* ---------- Buttons (SPEC 1.7) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:var(--t-button);font-weight:600;
  letter-spacing:.16em;line-height:1.45;text-transform:uppercase;
  min-height:56px;padding:19px 36px;cursor:pointer;text-decoration:none;
  text-align:center;border:1px solid var(--brass);
  transition:background 180ms ease,color 180ms ease;
}
.btn-primary{background:var(--brass);color:var(--ink)}
.btn-primary:hover{background:transparent;color:var(--bone)}
.btn:active{opacity:.9}
.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

@media (max-width:639px){
  .btn{width:100%}
  .compare{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .lock-rows .r{flex-direction:column;align-items:flex-start;gap:5px}
  .cta-row{flex-direction:column;align-items:stretch}
  body.has-bar{padding-bottom:72px}
}

/* ============================================================
   SECTION 7: THE FIFTY. Ink. Cartogram at lg scale.
   ============================================================ */
.map.map-lg{max-width:840px}

/* M8: the carried-over selection pulses once on scroll into view. */
@keyframes tile-pulse{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}
.map-lg.pulse .tile.on{animation:tile-pulse 600ms ease-in-out 1}

/* Held tiles are focusable and announce "held", but cannot be picked. */
.tile[aria-disabled="true"]{pointer-events:none}

.roster{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap}
.lg-item{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);
}
.sw{width:12px;height:12px;flex:0 0 auto;background:transparent}
.sw-open{border:2px solid rgba(168,164,156,.30)}
.sw-held{border:2px solid rgba(168,164,156,.10)}
.counter{color:var(--brass)}      /* figure-sm, 18px min, legal brass */

@media (max-width:639px){
  .roster{flex-direction:column;align-items:flex-start;gap:var(--s3)}
}

/* ============================================================
   SECTION 8: THE TERMS. The page's only bone field.
   Type ink, emphasis oxblood, secondary warm grey. No brass.
   ============================================================ */
.f-bone{background:var(--bone);color:var(--ink)}
.f-bone .label{color:var(--warm-grey)}
.f-bone .h2{color:var(--ink)}
.f-bone .body,.f-bone .lede{color:var(--ink)}
.rule-light{height:1px;background:var(--hairline-on-light);border:0;width:100%}

.ob-label{
  font-size:var(--t-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oxblood);line-height:1.40;
}

.criteria{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.criteria li{display:grid;grid-template-columns:32px 1fr;align-items:baseline;padding:9px 0}
.crit-n{font-size:13px;font-weight:600;color:var(--oxblood);line-height:1.6}
.crit-t{font-size:var(--t-body);line-height:1.60;color:var(--ink)}
@media (max-width:639px){.criteria li{grid-template-columns:28px 1fr}}

.decline{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.decline li{font-size:var(--t-body);line-height:1.60;color:var(--ink);padding:5px 0}

/* ============================================================
   SECTIONS 9 AND 10. The largest vertical padding on the page.
   ============================================================ */
.section-tall{padding-top:clamp(96px,13vw,176px);padding-bottom:clamp(96px,13vw,176px)}

.btn-secondary{background:transparent;color:var(--bone);border:1px solid var(--brass)}
.btn-secondary:hover{background:var(--brass);color:var(--ink)}

.notify{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.notify-field{flex:1 1 260px;max-width:420px}
@media (max-width:639px){
  .notify{flex-direction:column;align-items:stretch}
  .notify-field{max-width:none}
}

/* ============================================================
   FOOTER. Ink, 1px top hairline.
   ============================================================ */
.site-footer{
  border-top:1px solid var(--hairline-on-dark);
  padding-top:var(--s6);padding-bottom:var(--s6);
}
.foot-top{display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.wordmark-foot{height:20px}
.tagline{
  margin-top:var(--s2);font-size:var(--t-label);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
}
.foot-cols{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.foot-links{display:flex;gap:var(--s4);flex-wrap:wrap}
.foot-links a{
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;
  display:inline-flex;align-items:center;min-height:48px;
  transition:color 180ms ease;
}
.foot-links a:hover{color:var(--brass)}
/* SPEC prints warm grey here, but warm grey on ink is 3.06:1 and
   fails AA. Slate is the sanctioned secondary on dark (BRAND 3). */
.foot-contact a{color:var(--slate);text-decoration:underline;text-underline-offset:3px;transition:color 180ms ease}
.foot-contact a:hover{color:var(--brass)}
.legal{color:var(--slate);max-width:var(--measure)}

@media (min-width:640px){
  .foot-cols{align-items:flex-end}
  .foot-links{justify-content:flex-end}
}

/* ============================================================
   STICKY BAR, LOADING OVERLAY, GATE.

   These three sit outside the page wrapper, so nothing here may
   inherit a custom property. Every colour, face and size below is
   a literal value. Do not refactor these into tokens.
   Z-index follows SPEC 1.8: bar 100, loading 200, gate 300.
   ============================================================ */

/* ---------- Mobile sticky bar (SPEC 5.10) ---------- */
#sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:#111B2E;border-top:1px solid rgba(138,109,59,.5);
  padding:13px clamp(16px,5vw,24px);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
}
#sticky-bar[hidden]{display:none}
#sticky-bar .sb-k{
  display:block;font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#A8A49C;line-height:1.4;
}
#sticky-bar .sb-v{
  display:block;font-weight:500;font-size:21px;color:#8A6D3B;line-height:1.1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
#sticky-bar .sb-r{
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#A8A49C;text-align:right;line-height:1.4;
}
#sticky-bar .sb-cta{
  flex:0 0 auto;background:#8A6D3B;border:1px solid #8A6D3B;color:#0A0A0A;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:14px 18px;min-height:48px;
  display:inline-flex;align-items:center;
}
#sticky-bar .sb-cta[hidden]{display:none}
#sticky-bar .sb-cta:focus-visible{outline:1px solid #8A6D3B;outline-offset:4px}
@media (min-width:640px){#sticky-bar{display:none !important}}

/* ---------- Loading sequence (SPEC 5.7) ---------- */
#load-overlay{
  position:fixed;inset:0;z-index:200;background:#0A0A0A;
  padding:clamp(20px,5.5vw,80px);
  display:flex;flex-direction:column;justify-content:center;
}
#load-overlay[hidden]{display:none}
#load-overlay .lo-in{
  max-width:520px;width:100%;margin:0 auto;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
}
#load-overlay .lo-eb{
  margin:0;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#A8A49C;
}
#load-overlay .lo-rule{
  height:1px;background:rgba(168,164,156,.22);margin:28px 0;position:relative;overflow:hidden;
}
#load-overlay .lo-rule span{position:absolute;left:0;top:0;height:1px;width:0;background:#8A6D3B}
#load-overlay .lo-ln{
  margin:0;padding:5px 0;font-size:14px;letter-spacing:.05em;
  color:#A8A49C;opacity:0;transition:opacity 350ms ease;
}
#load-overlay .lo-ln.on{opacity:1}
/* Brass is large only: 14px at weight 600 is the floor (SPEC 1.2). */
#load-overlay .lo-ln b{color:#8A6D3B;font-weight:600}

/* ---------- Gate (SPEC 5.6) ---------- */
#gate{
  position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.95);
  overflow-y:auto;padding:clamp(16px,5vw,50px) clamp(16px,5vw,50px) 50px;
}
#gate[hidden]{display:none}
#gate .gate-sheet{
  background:#111B2E;border:1px solid rgba(138,109,59,.4);
  max-width:500px;margin:4vh auto 0;padding:clamp(26px,5vw,50px);
}
#gate .gate-eb{
  margin:0;font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#A8A49C;
}
#gate h2{
  margin:18px 0 0;font-family:'Cinzel','Times New Roman',serif;font-weight:400;
  font-size:clamp(22px,3.8vw,30px);letter-spacing:.08em;line-height:1.20;
  text-transform:uppercase;color:#F5F3EF;
}
#gate .gate-p{
  margin:16px 0 0;font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:16px;font-weight:300;line-height:1.6;color:#F5F3EF;
}
#gate .gate-fields{margin-top:26px;display:grid;gap:20px}
#gate label{
  display:block;margin-bottom:10px;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#A8A49C;
}
#gate input{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(168,164,156,.4);
  border-radius:0;color:#F5F3EF;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:19px;line-height:1.3;padding:8px 0 12px;min-height:48px;
}
#gate input:focus{outline:0;border-bottom-color:#8A6D3B}
#gate input:focus-visible{outline:1px solid #8A6D3B;outline-offset:4px}
#gate .gate-btn{
  display:block;width:100%;margin-top:28px;min-height:56px;padding:19px 24px;
  background:#8A6D3B;border:1px solid #8A6D3B;border-radius:0;color:#0A0A0A;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1.45;
  text-transform:uppercase;cursor:pointer;transition:background 180ms ease,color 180ms ease;
}
#gate .gate-btn:hover{background:transparent;color:#F5F3EF}
#gate .gate-btn:focus-visible{outline:1px solid #8A6D3B;outline-offset:4px}
#gate .gate-err{
  margin:12px 0 0;min-height:20px;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:14px;font-weight:600;line-height:1.45;color:#8A6D3B;
}
#gate .gate-note{
  margin:26px 0 0;font-family:'Montserrat',-apple-system,'Helvetica Neue',sans-serif;
  font-size:13px;font-weight:400;line-height:1.6;color:#A8A49C;
}
/* Full screen below 640px, not a centred card (SPEC 5.10). */
@media (max-width:639px){
  #gate{padding:0}
  #gate .gate-sheet{max-width:none;margin:0;min-height:100%;border:0;padding:32px 20px 40px}
}

/* ---------- 2.3 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
    /* SPEC 2.3 prints the two lines above. Without zeroing the delays
       too, the staggered charts still wait out their full timeline
       before appearing, which is the thing the query exists to stop. */
    animation-delay:0ms !important;
    transition-delay:0ms !important;
  }
}