/* =========================================================================
   Six Seats — Protect the ICC's independence
   Art direction: the register of an international legal instrument under
   stress. Ink-dark ground, bone text, hairline rules like a court document,
   one alarm red reserved strictly for the points of breach, and a muted gold
   that reads as institutional seal rather than decoration. Monospace carries
   the evidentiary layer — dates, citations, contacts — so the page separates
   assertion from record typographically.
   ========================================================================= */

:root {
  --ink:        #0B0E14;   /* page ground */
  --ink-2:      #10141C;   /* raised panels */
  --ink-3:      #161B25;   /* cards */
  --paper:      #ECE7DD;   /* primary text, bone */
  --paper-dim:  #9AA2B1;   /* secondary */
  --paper-faint:#7C8494;   /* meta — lightened to clear WCAG AA (4.5:1) as body text */
  --hair:       rgba(236, 231, 221, 0.13);
  --hair-strong:rgba(236, 231, 221, 0.26);

  --alarm:      #D8232A;   /* breach points only — fills and display type */
  --alarm-text: #E35056;   /* the same red, lightened for SMALL text: #D8232A is 3.4:1
                              on this ground, which is fine for large display but fails
                              AA at label sizes. */
  --alarm-soft: rgba(216, 35, 42, 0.14);
  --gold:       #C9A227;   /* institutional accent, used sparingly */

  --maxw: 1140px;
  --narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  --ff-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ff-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.12vw, 0.86rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.36vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.15rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.3rem);
  --step-4:  clamp(2.6rem, 1.8rem + 4vw, 5.2rem);
  --step-5:  clamp(3.2rem, 1.9rem + 6.6vw, 7.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 400; line-height: 1.04; margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
a { color: inherit; }
img, svg { max-width: 100%; }
sup a { text-decoration: none; color: var(--gold); font-family: var(--ff-mono); font-size: 0.7em; padding-left: 0.15em; }
sup a:hover { text-decoration: underline; }

.mono { font-family: var(--ff-mono); font-size: 0.92em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--narrow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--alarm); color: #fff; padding: 0.8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.mark { color: var(--alarm-text); font-size: 0.6em; vertical-align: 0.25em; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 1.1rem;
}
.eyebrow--alarm { color: var(--alarm-text); }

.section-h { font-size: var(--step-3); max-width: 20ch; margin-bottom: 1.1rem; }
.section-lede { font-size: var(--step-1); color: var(--paper-dim); max-width: 58ch; margin-bottom: 3rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 1.6rem;
  font-family: var(--ff-body); font-size: var(--step-0); font-weight: 600;
  text-decoration: none; border-radius: 2px; border: 1px solid transparent;
  transition: transform 0.18s cubic-bezier(.22,1,.36,1), background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn--primary { background: var(--alarm); color: #fff; }
.btn--primary:hover { background: #ef2f37; transform: translateY(-2px); }
.btn--ghost { border-color: var(--hair-strong); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- Alert bar ---------- */
.alertbar {
  background: var(--alarm-soft);
  border-bottom: 1px solid rgba(216, 35, 42, 0.35);
  padding: 0.7rem var(--gutter);
  display: flex; align-items: center; gap: 0.7rem; justify-content: center;
  font-size: var(--step--1);
}
.alertbar p { margin: 0; }
.alertbar a { color: var(--paper); text-underline-offset: 3px; }
.alertbar__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--alarm); flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .alertbar__dot { animation: none; } }

/* ---------- Masthead ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem var(--gutter);
  border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 14, 20, 0.86);
  backdrop-filter: blur(10px);
}
.wordmark { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.masthead nav { display: flex; align-items: center; gap: 1.5rem; font-size: var(--step--1); }
.masthead nav a { color: var(--paper-dim); text-decoration: none; letter-spacing: 0.03em; }
.masthead nav a:hover { color: var(--paper); }
.nav__cta { color: var(--paper) !important; border-bottom: 1px solid var(--alarm); padding-bottom: 2px; }
@media (max-width: 720px) { .masthead nav a:not(.nav__cta) { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(3.5rem, 8vw, 7rem) var(--gutter) var(--section-y); position: relative; overflow: hidden; }
.hero::before {
  /* A faint document-grid field: institutional paper, not decoration. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px),
                    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 10%, transparent 75%);
  opacity: 0.7;
}
.hero__grid {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: var(--step-5); letter-spacing: -0.028em; margin-bottom: 1.6rem; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--alarm); display: block; }
.lede { font-size: var(--step-1); color: var(--paper-dim); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }

/* Countdown panel */
.countdown {
  background: var(--ink-2); border: 1px solid var(--hair);
  padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: 3px;
  position: relative;
}
.countdown::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--alarm);
}
.countdown__title {
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-dim); margin-bottom: 1.2rem; font-weight: 400;
}
.countdown__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.countdown__unit { text-align: left; }
.countdown__n {
  display: block; font-family: var(--ff-display); font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums;
}
.countdown__l {
  display: block; font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-faint); margin-top: 0.4rem;
}
.countdown__note {
  font-family: var(--ff-mono); font-size: 0.72rem; color: var(--paper-faint);
  margin: 1.2rem 0 0; line-height: 1.6;
}

.seatviz { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.seatviz svg { width: 100%; height: auto; display: block; }
.seatviz__cap {
  font-family: var(--ff-mono); font-size: 0.72rem; color: var(--paper-faint);
  margin: 0.8rem 0 0; letter-spacing: 0.04em;
}
.seatviz__cap strong { color: var(--alarm-text); font-weight: 500; }

/* ---------- Key facts ---------- */
.facts { padding: var(--section-y) var(--gutter); border-top: 1px solid var(--hair); background: var(--ink-2); }
.facts, .facts .facts__list { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.facts__list { margin: 0; }
.facts__row {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem); padding: 1.4rem 0; border-top: 1px solid var(--hair);
}
.facts__row:last-child { border-bottom: 1px solid var(--hair); }
@media (max-width: 760px) { .facts__row { grid-template-columns: 1fr; gap: 0.4rem; } }
.facts__row dt {
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper-faint);
}
.facts__row dd { margin: 0; color: var(--paper); max-width: 62ch; }

/* ---------- The admission ---------- */
.admission {
  position: relative;
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--hair);
  /* The photograph used to sit behind the quote under a veil. Two problems were structural
     rather than tunable: Netanyahu falls exactly where the centred quote sits, so any overlay
     dark enough to carry the type also buried him, and the picture is a wide two-shot whose
     subjects are far apart, so at full bleed it read as empty room. It now sits beside the text
     at its natural brightness, which fixes both and needs no overlay at all. */
}
.admission__inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 820px) {
  .admission__inner { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}
.admission__gloss {
  color: var(--paper-dim); max-width: 52ch; margin: 2rem 0 0;
}
.admission__figure { margin: 0; }
.admission__figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair-strong);
}
.admission__quote { margin: 0 0 2rem; }
/* One step down from the page's other display type: the quote now lives in a half-width
   column, and at --step-4 it ran to six lines and towered over the photograph beside it. */
.admission__quote p {
  font-family: var(--ff-display); font-size: var(--step-3); line-height: 1.12;
  letter-spacing: -0.02em; margin: 0 0 1.6rem; text-wrap: balance;
}
.admission__quote em { font-style: italic; color: var(--alarm); }
.admission__attr {
  font-family: var(--ff-mono); font-size: var(--step--1); color: var(--paper-dim);
  letter-spacing: 0.04em; display: block; max-width: 44ch; margin: 0;
}

/* ---------- Timeline ---------- */
.record { padding: var(--section-y) 0; border-top: 1px solid var(--hair); }
.timeline { list-style: none; margin: 0 0 4rem; padding: 0; }
.timeline__item {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 2rem 0; border-top: 1px solid var(--hair); position: relative;
}
@media (max-width: 760px) { .timeline__item { grid-template-columns: 1fr; gap: 0.6rem; } }
.timeline__date {
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: 0.06em;
  color: var(--paper-faint); margin: 0; padding-top: 0.35rem;
}
.timeline__body h3 { font-size: var(--step-2); margin-bottom: 0.7rem; }
.timeline__body p { color: var(--paper-dim); max-width: 66ch; }
.timeline__note {
  border-left: 2px solid var(--gold); padding-left: 1rem;
  color: var(--paper-dim); font-size: 0.95em;
}
.timeline__src { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--paper-faint); margin-bottom: 0; }
.timeline__src a { color: var(--paper-dim); text-underline-offset: 3px; }
.timeline__src a:hover { color: var(--paper); }
.timeline__item--live .timeline__date { color: var(--alarm-text); }
.timeline__item--live { background: linear-gradient(90deg, var(--alarm-soft), transparent 55%); }

.pressure { border: 1px solid var(--hair); background: var(--ink-2); padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 3px; }
.pressure__h { font-size: var(--step-2); margin-bottom: 0.8rem; }
.pressure__lede { color: var(--paper-faint); font-size: 0.95em; max-width: 64ch; }
.pressure__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.pressure__list li { padding-left: 1.4rem; position: relative; color: var(--paper-dim); }
.pressure__list li::before {
  content: "§"; position: absolute; left: 0; top: 0; color: var(--gold); font-family: var(--ff-display);
}
.pressure__list p { margin: 0; }

/* ---------- The vote ---------- */
.vote { padding: var(--section-y) 0; border-top: 1px solid var(--hair); background: var(--ink-2); }
.vote__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-bottom: 3.5rem;
}
.stat { background: var(--ink); padding: clamp(1.4rem, 2.5vw, 2rem); }
.stat--alarm .stat__n { color: var(--alarm); }
.stat__n {
  font-family: var(--ff-display); font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 0.9;
  margin: 0 0 0.5rem; font-variant-numeric: tabular-nums;
}
.stat__l {
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper); margin: 0 0 0.6rem;
}
.stat__d { color: var(--paper-faint); font-size: 0.92em; margin: 0; }

.vote__detail { max-width: 68ch; }
.vote__detail h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.vote__detail p { color: var(--paper-dim); }
.ticks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.75rem; }
.ticks li { padding-left: 1.6rem; position: relative; color: var(--paper-dim); }
.ticks li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }

/* ---------- Stakes ---------- */
.stakes { padding: var(--section-y) 0; border-top: 1px solid var(--hair); }
.stakes__lead { max-width: 62ch; margin-bottom: 3.5rem; }
.stakes__lead p { font-size: var(--step-1); color: var(--paper); }
.stakes__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.risk {
  border-top: 2px solid var(--hair-strong); padding-top: 1.4rem;
  transition: border-color 0.3s;
}
.risk:hover { border-top-color: var(--alarm); }
.risk__n {
  font-family: var(--ff-mono); font-size: var(--step--1); color: var(--alarm-text);
  letter-spacing: 0.1em; margin: 0 0 0.8rem;
}
.risk h3 { font-size: var(--step-2); margin-bottom: 0.8rem; }
.risk p { color: var(--paper-dim); margin: 0; }
.stakes__close {
  margin: 3.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--hair);
  font-family: var(--ff-display); font-size: var(--step-2); max-width: 34ch; color: var(--paper);
}

/* ---------- Act ---------- */
.act { padding: var(--section-y) 0; border-top: 1px solid var(--hair); background: var(--ink-2); }
.act__asks { border: 1px solid var(--hair); padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 3px; margin-bottom: 2.5rem; background: var(--ink); }
.act__asks h3 { font-size: var(--step-2); margin-bottom: 1.2rem; }
.asks { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.8rem; color: var(--paper-dim); }
.asks li::marker { color: var(--alarm-text); font-family: var(--ff-mono); font-size: 0.85em; }

.act__label {
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-dim); margin-bottom: 1rem;
}
.act__frame {
  border: 1px solid var(--hair-strong); border-radius: 3px; background: var(--ink);
  padding: clamp(0.75rem, 2vw, 1.5rem); min-height: 220px;
}
.act__note { color: var(--paper-dim); font-family: var(--ff-mono); font-size: 0.85rem; }

.act__who { margin-top: 3.5rem; }
.act__who h3 { font-size: var(--step-2); margin-bottom: 1.6rem; }
.who__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.who { background: var(--ink); padding: clamp(1.3rem, 2.5vw, 1.8rem); }
.who h4 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.who p { color: var(--paper-dim); font-size: 0.94em; }
.who__contact {
  font-family: var(--ff-mono); font-size: 0.75rem; color: var(--paper-faint);
  margin-bottom: 0; padding-top: 0.8rem; border-top: 1px solid var(--hair); word-break: break-word;
}
.who__contact a { color: var(--gold); }


/* ---------- Sources ---------- */
.sources { padding: var(--section-y) 0; border-top: 1px solid var(--hair); background: var(--ink-2); }
.sources__list { font-family: var(--ff-mono); font-size: 0.82rem; line-height: 1.85; color: var(--paper-faint); padding-left: 1.6rem; margin: 0; }
.sources__list li { padding-left: 0.4rem; }
.sources__list li::marker { color: var(--gold); }
.sources__list a { color: var(--paper-dim); text-underline-offset: 3px; }
.sources__list a:hover { color: var(--paper); }
.sources__list li:target { color: var(--paper); }

/* ---------- Built with WoJ ---------- */
.builtwoj { padding: var(--section-y) 0; border-top: 1px solid var(--hair); }
.builtwoj h2 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.builtwoj__lede { font-family: var(--ff-display); font-size: var(--step-1); color: var(--paper); margin-bottom: 1rem; }
.builtwoj p { color: var(--paper-dim); max-width: 62ch; }
.builtwoj__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0; }
.builtwoj__apps { margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--hair); }
.builtwoj__apps p { margin-bottom: 0.9rem; font-size: 0.95em; }
.builtwoj__stores { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.builtwoj__stores a {
  display: inline-flex; flex-direction: column; line-height: 1.25;
  padding: 0.65rem 1.2rem; border: 1px solid var(--hair); border-radius: 3px;
  color: var(--paper); text-decoration: none;
}
.builtwoj__stores span { font-family: var(--ff-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint); }
.builtwoj__stores strong { font-weight: 600; font-size: 1rem; }
.builtwoj__stores a:hover { border-color: var(--alarm); }

/* ---------- Footer ---------- */
.foot { padding: var(--section-y) 0 4rem; border-top: 1px solid var(--hair); background: var(--ink-2); }
.foot__mark { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; }
.foot p { color: var(--paper-faint); font-size: 0.88rem; line-height: 1.75; max-width: 72ch; }
.foot__meta { font-family: var(--ff-mono); font-size: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--hair); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .alertbar, .masthead, .act__frame, .countdown { display: none; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* =========================================================================
   v2 components — imagery, action-first layout, sharing
   ========================================================================= */

/* ---------- Hero media ---------- */
.hero { padding-top: 0; }

.lede--emph { color: var(--paper); }
.lede--emph strong { color: var(--paper); border-bottom: 2px solid var(--alarm); padding-bottom: 1px; }
.hero__meta {
  font-family: var(--ff-mono); font-size: 0.72rem; color: var(--paper-faint);
  letter-spacing: 0.04em; margin-top: 1rem;
}

/* ---------- Button sizes ---------- */
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--xl { padding: 1.15rem 2.2rem; font-size: 1.06rem; }
.btn__icon { display: inline-flex; width: 1.1em; height: 1.1em; margin-right: 0.6rem; }
.btn__icon svg { width: 100%; height: 100%; }
button.btn { font-family: var(--ff-body); cursor: pointer; }

/* ---------- Action section: the centrepiece ---------- */
.act {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong);
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(216,35,42,0.10), transparent 70%),
    var(--ink-2);
}
.act__h { font-size: var(--step-4); max-width: 16ch; margin-bottom: 1.1rem; }
.act__lede { font-size: var(--step-1); color: var(--paper-dim); max-width: 60ch; margin-bottom: 2.5rem; }
.act__frame {
  border: 1px solid var(--hair-strong); border-radius: 3px; background: var(--ink);
  padding: clamp(0.75rem, 2vw, 1.5rem); min-height: 240px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.9);
}
.act__note { color: var(--paper-dim); font-family: var(--ff-mono); font-size: 0.85rem; }
.act__tip {
  margin-top: 1.2rem; color: var(--paper-dim); font-size: 0.95rem;
  border-left: 2px solid var(--gold); padding-left: 1rem; max-width: 62ch;
}
.act__tip strong { color: var(--paper); }
.act__asks { margin-top: 3rem; border: 1px solid var(--hair); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 3px; }
.act__asks h3 { font-size: var(--step-2); margin-bottom: 1.2rem; }
.asks { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.8rem; color: var(--paper-dim); }
.asks li::marker { color: var(--alarm-text); font-family: var(--ff-mono); font-size: 0.85em; }

/* ---------- Share bar ---------- */
.sharebar {
  margin-top: 2.5rem; padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--hair-strong); border-radius: 3px; background: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.sharebar--tight { margin-top: 3.5rem; background: var(--ink-2); }
.sharebar__text { flex: 1 1 22rem; }
.sharebar__title { font-size: var(--step-2); margin-bottom: 0.4rem; }
.sharebar__note { color: var(--paper-dim); margin: 0; max-width: 46ch; font-size: 0.95rem; }
.sharebar__btn { flex: none; }
.sharebar__pair { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* ---------- Charges ---------- */
.charges {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.charge { background: var(--ink); padding: clamp(1.3rem, 2.5vw, 1.9rem); }
.charge--meta { background: var(--ink-3); }
.charge__k {
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--alarm-text); margin-bottom: 1rem;
}
.charge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.charge li { padding-left: 1.2rem; position: relative; color: var(--paper); }
.charge li::before { content: "—"; position: absolute; left: 0; color: var(--paper-faint); }
.charge__note {
  font-family: var(--ff-mono); font-size: 0.72rem; color: var(--paper-faint);
  margin: 1.2rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--hair);
}

/* ---------- Evidence images ---------- */
.evidence {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.evidence__fig { margin: 0; }
.evidence__fig img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(0.2) contrast(1.05) brightness(0.9); border-radius: 2px;
}
.evidence__fig figcaption {
  font-family: var(--ff-mono); font-size: 0.68rem; color: var(--paper-faint);
  margin-top: 0.6rem; line-height: 1.6;
}
.evidence__fig figcaption a { color: var(--paper-faint); }
.evidence__fig figcaption a:hover { color: var(--paper-dim); }

.crime { padding: var(--section-y) 0; border-top: 1px solid var(--hair); }

/* ---------- Big pull quote ---------- */
.bigquote {
  margin: 0 0 3.5rem; padding: clamp(1.6rem, 3vw, 2.4rem);
  border-left: 3px solid var(--alarm); background: var(--ink-2);
}
.bigquote p {
  font-family: var(--ff-display); font-size: var(--step-2); line-height: 1.24;
  color: var(--paper); max-width: 48ch; margin-bottom: 1rem;
}
.bigquote em { font-style: italic; color: var(--alarm-text); }
.bigquote footer {
  font-family: var(--ff-mono); font-size: 0.75rem; color: var(--paper-faint);
  letter-spacing: 0.03em; max-width: 52ch;
}

/* ---------- Timeline additions ---------- */
.timeline__item--hot { background: linear-gradient(90deg, rgba(216,35,42,0.07), transparent 60%); }

/* ---------- Words of Justice block ---------- */
.builtwoj__grid {
  display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 640px) { .builtwoj__grid { grid-template-columns: 1fr; } }
.builtwoj__logo {
  width: 100%; max-width: 8rem; height: auto; border-radius: 6px; display: block;
  border: 1px solid var(--hair);
}
.builtwoj__body h2 { font-size: var(--step-2); margin-bottom: 0.4rem; }

@media print { .sharebar,  }


/* ---------- Wordmark: tilted scales + display lockup ---------- */
/* The beam is off-level on purpose — justice under load is the whole argument. */
.wordmark__mark {
  width: 1.75rem; height: 1.5rem; flex: none; overflow: visible;
  fill: none; stroke: var(--alarm); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.wordmark__mark circle { fill: var(--ink); }
.wordmark__t {
  font-family: var(--ff-display); font-size: 1.4rem; line-height: 1;
  letter-spacing: 0.005em; color: var(--paper); white-space: nowrap;
}
.foot__mark .wordmark__mark { stroke: var(--gold); }
.foot__mark .wordmark__t { font-size: 1.3rem; }
@media (max-width: 420px) { .wordmark__t { font-size: 1.15rem; } }

/* ---------- The obligation line: the page's single loudest sentence ---------- */
.act__obligation {
  margin: 2rem 0 2.2rem;
  padding: 0 0 0 clamp(1rem, 2.5vw, 1.6rem);
  border-left: 3px solid var(--alarm);
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 26ch;
  text-wrap: balance;
}
.act__obligation strong { font-weight: 400; color: var(--alarm-text); font-style: italic; }


/* ---------- Share button ----------
   Solid bone on the dark ground: the ghost outline it used to use put a faint
   grey border around low-emphasis text and read as disabled. Bone also keeps a
   clear hierarchy against the red — red means act, bone means pass it on. */
.btn--share {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--share:hover { background: #ffffff; border-color: #ffffff; transform: translateY(-2px); }
.btn--share:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn--share:hover { transform: none; } }


.act__lede + .act__lede { margin-top: -1.4rem; }
.act__lede--meta { font-size: var(--step-0); color: var(--paper-faint); }





/* ---------- Hero media (single full-bleed photograph) ---------- */
.hero__media { position: relative; margin: 0 calc(-1 * var(--gutter)) clamp(2rem, 4vw, 3.5rem); }
.hero__media img {
  display: block; width: 100%; height: clamp(20rem, 46vh, 34rem); object-fit: cover;
  filter: grayscale(0.25) contrast(1.06) brightness(0.82);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,20,0.35) 0%, rgba(11,14,20,0.62) 55%, var(--ink) 100%);
}
.hero__media figcaption {
  position: absolute; right: var(--gutter); bottom: 0.7rem;
  font-family: var(--ff-mono); font-size: 0.68rem; color: var(--paper-faint);
  letter-spacing: 0.02em; text-align: right; max-width: 80%;
}
.hero__media figcaption a { color: var(--paper-faint); text-underline-offset: 2px; }
.hero__media figcaption a:hover { color: var(--paper-dim); }
@media print { .hero__media { display: none; } }





/* ---------- Paired hero ----------
   Two photographs, toned to one ink-to-bone ramp so they read as a single composition
   rather than two snapshots, and split by a hard red seam. Deliberately not blended into
   one frame: that would depict a scene that never existed, on a page arguing the record
   should be reported exactly. */
.hero__media--pair { background: var(--ink); }
.hero__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--alarm); }
.hero__pair img {
  display: block; width: 100%; height: clamp(18rem, 44vh, 31rem); object-fit: cover; filter: none;
}
.hero__media--pair .hero__scrim {
  background: linear-gradient(180deg, rgba(11,14,20,0.10) 0%, rgba(11,14,20,0.55) 60%, var(--ink) 100%);
}
@media (max-width: 640px) {
  .hero__pair { grid-template-columns: 1fr; }
  .hero__pair img { height: clamp(11rem, 26vh, 16rem); }
  .hero__media--pair figcaption { position: static; text-align: left; max-width: none; padding: 0.7rem var(--gutter) 0; }
}












/* The credit is now the figure's caption, sitting under the picture in the right-hand column.
   It no longer has to survive being read over the photograph, so it goes back to the page's
   ordinary meta colour and aligns with the image rather than with the centre of the section. */
.admission__credit {
  font-family: var(--ff-mono); font-size: 0.66rem; color: var(--paper-faint);
  letter-spacing: 0.03em; line-height: 1.5; margin: 0.9rem 0 0; text-align: left;
}