/* FARKAT — the distant nearkat
   Layout concept: the page is a landscape. Sand sky, ink earth, a horizon between them.
   The horizon is also the measuring device: it carries the distance readout and the
   milestone waypoints, and the meerkat stands on it at the token's actual position. */

:root {
  --sand:  #FDEDD3;
  --paper: #FFF8EE;
  --ink:   #111111;
  --slate: #23282E;
  --tan:   #C8A26B;
  --dust:  #D4BEA6;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --rule: 2px solid var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  font-synthesis-weight: none;
}

h1, h2, h3 {
  font-family: "Archivo Black", Archivo, Arial, sans-serif;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--sand);
  padding: 0.75rem 1rem; z-index: 99;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ───────────────────────── bands ─────────────────────────
   Two grounds, alternating. Sky = sand, earth = ink. */

.band { padding: clamp(1.75rem, 4.5vw, 3.5rem) var(--gutter); }
/* Adjacent bands on the same ground have no edge between them, so the gap reads as a
   void. A hairline restores the section break without changing the rhythm. */
.band:not(.band--earth) + .band:not(.band--earth) { border-top: 1px solid rgba(17, 17, 17, 0.14); }
.band--earth + .band--earth { border-top: 1px solid rgba(253, 237, 211, 0.16); }
.band--earth { background: var(--ink); color: var(--sand); }
.band--earth h2 { color: var(--sand); }
.inner { max-width: 1180px; margin-inline: auto; }

/* ───────────────────────── masthead ───────────────────────── */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding: 1.25rem var(--gutter);
  max-width: 1180px; margin-inline: auto;
}
.masthead__mark {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 1.15rem; letter-spacing: 0.01em;
  text-decoration: none;
}
/* the mark is the silhouette plus the drawn wordmark, not a round badge */
.masthead__kat  { height: 32px; width: auto; display: block; }
.masthead__word { height: 21px; width: auto; display: block; }
.masthead nav { display: flex; flex-wrap: wrap; gap: 0.55rem 1.5rem; font-size: 0.95rem; }
.masthead nav a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.masthead nav a:hover { border-bottom-color: var(--ink); }

/* ───────────────────────── hero ─────────────────────────
   Sky, then the horizon, then earth. The kat stands on the horizon. */

.hero { padding: clamp(2rem, 6vw, 4rem) var(--gutter) 0; }
.hero__inner { max-width: 1180px; margin-inline: auto; }

.hero__title {
  font-size: clamp(4.5rem, 19vw, 15rem);
  letter-spacing: -0.035em;
  margin-bottom: 0.15em;
}
/* the title is the drawn wordmark; display:block kills the inline baseline gap */
.hero__title img { display: block; width: 100%; height: auto; }
.hero__sub {
  font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  max-width: none;
  margin-bottom: 0;
  /* sits centred under the drawn wordmark, which spans the full column */
  text-align: center;
}

/* the sky the kat walks under */
.sky {
  position: relative;
  overflow: hidden;                      /* the orb rises from behind the horizon */
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  /* The marker stacks upward from the horizon. With the kat at 35-66px the tallest it
     gets is ~176px at parity, so this clears it without leaving a field of empty sky. */
  height: clamp(175px, 14.5vw, 210px);
}

/* The sky is three planes deep: the orb behind, the landscape in front of it, and the
   kat in front of everything. All three sit on the same horizon — the bottom of .sky. */

.sky__body {
  position: absolute; right: 11%; bottom: 0;
  width: clamp(96px, 12vw, 152px); aspect-ratio: 1;
  z-index: 0;
}
.sky__orb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.3,.8,.3,1);
}
/* Night into day: the moon is already high when FARKAT launches and sets as the
   journey runs; the sun comes up behind it over the back half. They pass each other.
   The moon is near-white on a sand sky, so it gets a faint rim to hold its edge. */
#skyMoon {
  opacity: 1; transform: translateY(-28%);
  filter: drop-shadow(0 0 1px rgba(35, 40, 46, 0.45));
}
#skySun { opacity: 0; transform: translateY(75%); }

/* Sized by HEIGHT against the sky, not by width — at their native aspect (~4.5:1) a
   full-width ridge would stand 350px tall and swallow the whole sky. object-fit:fill
   lets each one stretch to span the horizon; soft ridges take it without complaint. */
.sky__hills {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  max-width: none; object-fit: fill;
  pointer-events: none;
}
/* Fully opaque: these have to OCCLUDE the orb behind them, not tint it. Weight is
   dialled with a filter instead, which leaves them solid. */
.sky__hills--mid  { width: 104%; height: 40%; z-index: 1; filter: brightness(1.05) saturate(0.9); }
.sky__hills--near { width: 118%; height: 26%; z-index: 2; }

/* The kat is the indicator: it rides 0-100%, the same scale as the track fill and
   the waypoints, so it passes each milestone exactly when FARKAT reaches it. The
   translate slides from 0 to -100% of its own width so it stays in frame at both
   ends rather than being clipped. */
.marker {
  position: absolute; bottom: 0; left: 0; z-index: 3;
  transition: left 900ms cubic-bezier(.3,.8,.3,1),
              transform 900ms cubic-bezier(.3,.8,.3,1);
}
/* the number does not chase the kat - it holds the centre and just counts down */
.readout {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(72px, 6.5vw, 96px); z-index: 4;
  text-align: center; width: max-content; max-width: 92%;
}
.readout__value {
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  display: block;
}
.readout__unit { font-size: 0.42em; letter-spacing: 0.02em; }
.readout__label {
  display: block; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em; margin-top: 0.5rem; color: var(--slate);
}

.kat {
  color: var(--ink);
  transition: height 900ms cubic-bezier(.3,.8,.3,1);
}
.kat svg { height: 100%; width: auto; display: block; }

/* ── the horizon: rule, scale, waypoints ── */

.horizon { background: var(--ink); padding-inline: var(--gutter); }
.horizon__inner { max-width: 1180px; margin-inline: auto; }

.horizon__track {
  position: relative; height: clamp(14px, 2vw, 20px);
  background: rgba(253, 237, 211, 0.16);
}
.horizon__fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--tan); opacity: 0.9;
  transition: width 900ms cubic-bezier(.3,.8,.3,1);
}
/* waypoint labels sit below the track, on the earth, so they always read */
.horizon__marks {
  position: relative;
  height: clamp(62px, 9vw, 78px);
  background: var(--ink);
}
.waypoint {
  position: absolute; top: 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--dust);
  color: var(--sand);
  font-size: clamp(0.66rem, 1.3vw, 0.82rem);
  font-weight: 700; line-height: 1.3;
  max-width: 9rem;
}
.waypoint span { display: block; font-weight: 400; color: var(--dust); opacity: 0.8; }
/* On a log scale Top 10 sits far right, close enough to Parity that the two
   labels overlap. When it does, the label flips to the left of its own rule. */
.waypoint--flip {
  transform: translateX(-100%);
  border-left: none; border-right: 2px solid var(--dust);
  padding-left: 0; padding-right: 0.6rem;
  text-align: right;
}
.waypoint--end {
  border-left: none; border-right: 2px solid var(--dust);
  padding-left: 0; padding-right: 0.6rem;
  text-align: right; right: 0;
}
/* the two middle waypoints get out of the way on small screens */
@media (max-width: 620px) {
  /* seven nav links need a tighter rhythm once they wrap */
  .masthead nav { gap: 0.5rem 1.05rem; font-size: 0.88rem; }

  /* The burn ladder is five columns. Trimming padding alone was not enough - its
     min-content width still pushed the page 37px wide on a 412px phone. fixed
     layout makes the table obey the container and wrap inside the cells instead,
     so it can never overflow whatever the content. */
  .ladder { table-layout: fixed; width: 100%; font-size: 0.78rem; }
  .ladder th, .ladder td { padding: 0.5rem 0.25rem; overflow-wrap: break-word; }
  .ladder thead th { font-size: 0.62rem; letter-spacing: 0.02em; }

  /* stacked, centred, equal width */
  .actions--stack { flex-direction: column; }
  .actions--stack .btn { width: 100%; max-width: 18rem; text-align: center; }
 .horizon__marks .waypoint:nth-child(3) { display: none; } }

/* ───────────────────────── hero foot (on earth) ───────────────────────── */

.herofoot {
  background: var(--ink); color: var(--sand);
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(1.25rem, 3vw, 2rem);
}
.herofoot__inner {
  max-width: 1180px; margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 800px) { .herofoot__inner { grid-template-columns: 1.3fr 1fr; } }
.herofoot p { color: var(--sand); font-size: clamp(1.05rem, 1vw + 0.85rem, 1.35rem); margin: 0; }
.herofoot strong { color: var(--tan); }
/* far and near are the two poles the whole thing turns on — set them apart in the lede */
.herofoot em { font-style: italic; font-weight: 700; color: var(--tan); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.actions--stack { align-items: center; }
/* the hero pair reads as one unit, so it stays side by side rather than wrapping */
.herofoot .actions { flex-wrap: nowrap; }
.herofoot .btn { white-space: nowrap; }

.btn {
  display: inline-block;
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 1rem; letter-spacing: 0.01em;
  padding: 0.95rem 1.6rem;
  text-decoration: none;
  border: 2px solid var(--sand);
  background: var(--sand); color: var(--ink);
}
.btn:hover { background: var(--tan); border-color: var(--tan); }
.btn--ghost { background: transparent; color: var(--sand); }
.btn--ghost:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }

/* .btn is sand-filled, which reads against the ink sections. On a light section
   that is sand on sand and the button vanishes - which is what whitepaper §8 was
   doing. .lookup already inverts for this reason; generalise it. */
.sec:not(.band--earth) .btn,
.band:not(.band--earth) .btn {
  border-color: var(--ink); background: var(--ink); color: var(--sand);
}
.sec:not(.band--earth) .btn:hover,
.band:not(.band--earth) .btn:hover {
  background: var(--tan); color: var(--ink); border-color: var(--tan);
}

/* ───────────────────────── generic type blocks ───────────────────────── */

.h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); margin-bottom: 1.25rem; }
.lede { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); }

/* Half the band's usual lead-in — the creed is the payoff of the hero above it and
   should not read as a separate, distant thought. */
#reflections {
  /* the drift pushes right; clip so it can never put the page into sideways scroll.
     clip rather than hidden, which would make this a scroll container. */
  overflow-x: clip;
}

/* The three lines drift away and back, and each one travels further than the last, so
   "Definitely far." is always the one that has gone the furthest. Slow enough to read
   as breathing rather than movement. */
.creed__line { display: block; }

@keyframes creed-drift-1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.06em); } }
@keyframes creed-drift-2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.16em); } }
@keyframes creed-drift-3 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.34em); } }

.creed__line:nth-child(1) { animation: creed-drift-1 11s ease-in-out infinite; }
.creed__line:nth-child(2) { animation: creed-drift-2 11s ease-in-out infinite -0.9s; }
.creed__line:nth-child(3) { animation: creed-drift-3 11s ease-in-out infinite -1.8s; }

@media (prefers-reduced-motion: reduce) {
  .creed__line { animation: none; }
}

.creed {
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: clamp(2.2rem, 8vw, 5.5rem);
  line-height: 0.95; letter-spacing: -0.03em;
  max-width: 18ch;
}
.creed em { font-style: normal; color: var(--tan); }

/* ───────────────────────── the exchange diagram ───────────────────────── */

.exchange {
  display: grid; gap: 1px;
  background: var(--sand);
  border: var(--rule); border-color: var(--sand);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 760px) { .exchange { grid-template-columns: 1fr 1fr 1fr; } }
.exchange__cell { background: var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }
.exchange__step {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--tan); margin-bottom: 0.75rem;
}
.exchange__cell h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin-bottom: 0.5rem; color: var(--sand); }
.exchange__cell p { color: var(--dust); font-size: 0.95rem; margin: 0; }

/* ───────────────────────── metrics ───────────────────────── */

.metrics {
  display: grid; gap: 1px; background: var(--ink);
  border: var(--rule);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 620px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--sand); padding: clamp(1.25rem, 3vw, 1.9rem); }
.metric__value {
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: block; margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}
.metric__label { font-size: 0.9rem; color: var(--slate); }

/* ───────────────────────── fine print ───────────────────────── */

.finePrint {
  list-style: none; padding: 0;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: grid; gap: 1px; background: var(--sand);
  border: 2px solid var(--sand);
}
@media (min-width: 860px) { .finePrint { grid-template-columns: repeat(3, 1fr); } }
.finePrint li {
  background: var(--ink); color: var(--dust);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  font-size: 0.92rem; line-height: 1.55;
}
.finePrint b { color: var(--sand); font-weight: 700; }

/* ───────────────────────── the most distant ───────────────────────── */

.distant { border: var(--rule); margin-top: clamp(2rem, 5vw, 3rem); }
.distant__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto auto;
  gap: 0.6rem 1rem; align-items: baseline;
  padding: 0.8rem clamp(0.9rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
  font-size: 0.95rem;
}
.distant__row:last-child { border-bottom: none; }
.distant__row:first-child { background: var(--paper); }
.distant__rank {
  font-family: "Archivo Black", Arial, sans-serif;
  font-variant-numeric: tabular-nums; font-size: 1.05rem;
}
.distant__amt, .distant__pct { font-variant-numeric: tabular-nums; }
.distant__pct { color: var(--slate); min-width: 4.5rem; text-align: right; }
.distant__empty { padding: clamp(2rem, 5vw, 3rem); color: var(--slate); }
@media (max-width: 560px) { .distant__amt { display: none; } }

/* ───────────────────────── transmissions (tx stream) ───────────────────────── */

.stream {
  border: 2px solid var(--dust);
  margin-top: clamp(2rem, 5vw, 3rem);
  max-height: 26rem; overflow-y: auto;
}
.stream__row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 0.75rem 1rem; align-items: baseline;
  padding: 0.85rem clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid rgba(212,190,166,0.28);
  font-size: 0.95rem;
}
.stream__row:last-child { border-bottom: none; }
.stream__side {
  font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-width: 6.5rem;   /* "bought" and "sold" differ in width; keep the amounts aligned */
}
/* the mark itself, inheriting the buy/sell colour */
.stream__icon { width: 0.72em; height: 1.05em; fill: currentColor; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stream__side--buy  { color: var(--tan); }
.stream__side--sell { color: #948B7C; }
.stream__amt { font-variant-numeric: tabular-nums; }
.stream__meta { color: var(--dust); opacity: 0.75; font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stream__dim { color: var(--dust); opacity: 0.7; }
.stream__empty { padding: clamp(2rem, 5vw, 3rem); color: var(--dust); }
.stream__empty p { color: var(--dust); margin: 0; }

/* ───────────────────────── lookup ───────────────────────── */

.lookup { margin-top: clamp(2rem, 5vw, 3rem); max-width: 42rem; }
.lookup__form { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lookup input {
  flex: 1 1 18rem; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: 0.9rem 1rem;
  border: var(--rule); background: var(--paper); color: var(--ink);
}
.lookup input::placeholder { color: #8a8378; }
.lookup .btn { border-color: var(--ink); background: var(--ink); color: var(--sand); }
.lookup .btn:hover { background: var(--tan); color: var(--ink); border-color: var(--tan); }
.lookup__result { margin-top: 1.25rem; font-size: 1.05rem; }
.lookup__result strong { font-family: "Archivo Black", Arial, sans-serif; }

/* ───────────────────────── film ───────────────────────── */

.film { margin-top: clamp(2rem, 5vw, 3rem); border: var(--rule); line-height: 0; }
.film video { width: 100%; height: auto; display: block; }

/* ───────────────────────── posters ───────────────────────── */

.posters {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}
.posters img { width: 100%; height: auto; display: block; border: var(--rule); }

/* ───────────────────────── facts table ───────────────────────── */

.facts { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 5vw, 3rem); text-align: left; }
.facts th, .facts td { padding: 0.95rem 0.5rem; border-bottom: 1px solid rgba(253,237,211,0.22); vertical-align: top; }
.facts th { font-weight: 700; white-space: nowrap; padding-right: 1.5rem; }
.facts td { color: var(--dust); }
.facts td b { color: var(--sand); font-weight: 700; }
.ca { overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }

/* Copy affordances. Both grounds are ink here (#facts and the footer), so one
   outlined style serves both; it inverts on hover the way .btn does. */
.copy {
  font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 0.3rem 0.7rem; border: 1px solid var(--dust); border-radius: 2px;
  background: transparent; color: var(--sand); cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.copy:hover, .copy:focus-visible { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.copy[data-done="1"] { background: var(--tan); border-color: var(--tan); color: var(--ink); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.share__label { color: var(--dust); margin-right: 0.25rem; }

/* ───────────────────────── footer ───────────────────────── */

/* top padding is tighter than bottom: #facts and the footer share the ink ground,
   so the space above was reading as a hole rather than a section break. */
.footer { background: var(--ink); color: var(--dust);
          padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.footer__inner { max-width: 1180px; margin-inline: auto; display: grid; gap: 2rem; }
/* links sit under the disclaimer, not beside it - one column at every width */
.footer a { color: var(--sand); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
/* X and Telegram read as marks, not words - they take the same sand as the text
   links beside them and warm to tan on hover, so the row stays one family. */
.footer__icon { display: inline-flex; line-height: 0; color: var(--sand); }
.footer__icon svg { width: 20px; height: 20px; fill: currentColor; }
.footer__icon:hover, .footer__icon:focus-visible { color: var(--tan); }
.footer small { display: block; max-width: var(--measure); line-height: 1.7; }

/* ───────────────────────── mirror world ───────────────────────── */

.mirror { transform: scaleX(-1); }
.mirror-note {
  background: var(--tan); color: var(--ink);
  text-align: center; padding: 0.85rem var(--gutter);
  font-weight: 700; font-size: 0.95rem;
}
.mirror-note a { color: var(--ink); }

@media (max-width: 620px) {
  .readout__value { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .readout__label { font-size: 0.74rem; max-width: 16ch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─────────── whitepaper ───────────
 * Restrained relative to the landing page: this one is meant to be read, so it
 * runs a measure-constrained prose column with numbered sections.
 */
.paper { padding: clamp(2.5rem, 7vw, 5rem) var(--gutter); }
.paper__inner { max-width: 1180px; margin-inline: auto; }

.paper__title { font-size: clamp(2.4rem, 8vw, 5rem); line-height: 0.92; margin-bottom: 0.5rem; }
.paper__standfirst {
  font-size: clamp(1.15rem, 1vw + 0.95rem, 1.5rem);
  max-width: var(--measure); color: var(--slate); margin-bottom: 2rem;
}
.paper__meta {
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate); border-top: var(--rule); padding-top: 0.9rem;
}

.sec { padding: clamp(1.75rem, 4.5vw, 3.5rem) var(--gutter); }  /* matches .band */
.sec__inner { max-width: 1180px; margin-inline: auto; }
.sec__num {
  font-family: "Archivo Black", Arial, sans-serif; color: var(--tan);
  font-size: 0.95rem; letter-spacing: 0.1em; display: block; margin-bottom: 0.6rem;
}
.band--earth .sec__num { color: var(--tan); }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; font-size: 1.05rem; line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; }
.band--earth .prose p { color: var(--dust); }
.band--earth .prose strong { color: var(--sand); }
.prose a { color: inherit; }

.pull {
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem); line-height: 1.15;
  border-left: 6px solid var(--tan); padding-left: clamp(1rem, 3vw, 2rem);
  margin: clamp(1.75rem, 4vw, 2.75rem) 0; max-width: 34ch;
}
.band--earth .pull { color: var(--sand); }

.ladder { width: 100%; border-collapse: collapse; margin-top: clamp(1.5rem, 4vw, 2.5rem); text-align: left; font-variant-numeric: tabular-nums; }
.ladder th, .ladder td { padding: 0.7rem 0.6rem; border-bottom: 1px solid rgba(17,17,17,0.15); }
.ladder thead th { font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: var(--rule); }
.ladder td b { font-family: "Archivo Black", Arial, sans-serif; font-weight: 400; }
.band--earth .ladder th, .band--earth .ladder td { border-bottom-color: rgba(253,237,211,0.22); }
.band--earth .ladder td { color: var(--dust); }
.band--earth .ladder td b, .band--earth .ladder thead th { color: var(--sand); }
.ladder tr.is-final td { background: rgba(200,162,107,0.16); }

.warn {
  border: var(--rule); padding: clamp(1.1rem, 3vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem); max-width: var(--measure);
}
.warn h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.warn p { margin: 0; font-size: 0.97rem; line-height: 1.7; }
.band--earth .warn { border-color: var(--tan); }
.band--earth .warn p { color: var(--dust); }

.toc { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.5rem; font-size: 0.95rem; }
.toc a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--dust); padding-bottom: 2px; }
.toc a:hover { border-bottom-color: var(--ink); }