/* ============================================================
   THE AMBLER ROAD - More Than Just Parks
   Palette: arctic dusk. Expedition GOLD is the accent (Alaska,
   adventure, us). Copper-orange now lives ONLY on the road
   itself in the maps: the extraction color belongs to the
   extraction story, never to our UI.
   ============================================================ */

:root {
  --night: #0c1512;
  --night-2: #111c18;
  --night-3: #16241f;
  --ice: #e9f1ec;
  --ice-dim: #9fb3a9;
  --copper: #d9a636;
  --copper-bright: #f2c14e;
  --tundra: #c9a35c;
  --river: #7fb5ad;
  --line: rgba(233, 241, 236, 0.14);
  --serif: "Source Serif 4", Georgia, serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Headings that exist for the document outline and screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body {
  background: var(--night);
  color: var(--ice);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ice); text-decoration-color: var(--river); text-underline-offset: 3px; }
a:hover { color: var(--river); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 3px;
}

::selection { background: var(--copper); color: var(--night); }

/* ============ MILELINE (signature: progress = road miles) ============ */
.mileline {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 56px;
  z-index: 60;
  pointer-events: none;
}
.mileline::before {
  content: "";
  position: absolute;
  left: 27px; top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
}
.mileline-fill {
  position: absolute;
  left: 27px; top: 0;
  width: 2px; height: 0;
  background: var(--copper);
  box-shadow: 0 0 12px rgba(208, 102, 47, 0.55);
}
.mileline-label {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ice-dim);
  white-space: nowrap;
}
.mileline-count { color: var(--copper-bright); }

/* ============ MASTHEAD + NAV ============ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 2rem 0.9rem 4.5rem;
  background: linear-gradient(to bottom, rgba(12, 21, 18, 0.96) 72%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}
/* The fade is right at the top of a hero photo and wrong the moment body copy
   scrolls under it: 0.96 over a hero image is invisible, but 0.96 over serif
   body text leaves a legible ghost. Solid once the page moves. Applied by
   site-footer.js, which loads everywhere. */
.masthead.is-scrolled {
  background: var(--night);
  border-bottom-color: var(--line);
}
.masthead-left { display: flex; flex-direction: column; gap: 0.1rem; }
/* Mono, not the condensed display face. Set in Barlow directly under the
   Barlow wordmark it read as a second logo competing with the first (Jim,
   7/29). Mono lines it up with the nav and the eyebrows, so it reads as a
   section label, and it pairs cleanly with the DM Sans credit beside it. */
.site-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--copper-bright);
  text-decoration: none;
  white-space: nowrap;
}
.mast-nav { display: flex; align-items: center; gap: 1.15rem; flex-wrap: nowrap; justify-content: flex-end; }
/* Between the desktop nav and the mobile one, nine items plus the Take Action
   button are a hair too wide and the button was getting clipped mid-word, which
   reads as broken rather than scrollable. Tighten instead. */
@media (max-width: 1080px) {
  .mast-nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-end; gap: 0.8rem; }
  .mast-nav::-webkit-scrollbar { display: none; }
  .mast-nav a { white-space: nowrap; flex: none; font-size: 0.64rem; }
  .mast-nav .nav-act { padding-left: 0.7rem; padding-right: 0.7rem; }
}
.mast-nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--ice-dim);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.mast-nav a:hover { color: var(--ice); }
.mast-nav a.active { color: var(--ice); border-bottom-color: var(--copper); }
.mast-nav a.nav-act {
  color: var(--night);
  background: var(--copper-bright);
  padding: 0.45rem 1rem;
  font-weight: 500;
  border-bottom: none;
}
.mast-nav a.nav-act:hover { background: var(--copper); color: var(--night); }
.masthead-brand {
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: var(--ice);
}
.masthead-kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ice-dim);
}

/* Public Lands Intelligence credit. CANONICAL SPEC (Will, 2026-07-02): "POWERED
   BY" 9px gray caps + the wordmark lockup, "Public Lands" near-white semibold
   and "Intelligence" gold semibold, DM Sans everywhere, links to /access. Keep
   in sync with powered-by-intelligence.tsx and the standalone builds. */
.pbi-credit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1;
}
.pbi-credit:hover { color: inherit; }
.pbi-pre {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #6b7280;
}
.pbi-name { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.pbi-name .pbi-a { color: rgba(233, 241, 236, 0.78); transition: color 0.15s ease; }
.pbi-name .pbi-b { color: rgba(201, 163, 92, 0.9); transition: color 0.15s ease; }
.pbi-credit:hover .pbi-a { color: rgba(233, 241, 236, 1); }
.pbi-credit:hover .pbi-b { color: rgba(242, 193, 78, 1); }
.mast-sep {
  width: 1px;
  height: 14px;
  background: var(--line);
  align-self: center;
}
/* The credit sits on the same line as the site name, under the wordmark. It
   used to live in the nav, where eight items squeezed it out entirely on every
   internal page: it was scoped to appear only above 1420px and almost nobody
   saw it. Attached to the brand it always shows, and it reads in the right
   order: More Than Just Parks, The Ambler Road, powered by Public Lands
   Intelligence. */
/* Inline again as of 7/29, and this time it fits: the nav came down from nine
   items to six, so there is room on the line. Stacked, the credit read as a
   third line of the title rather than a credit, and it pushed the masthead to
   80px. Beside the site name behind a hairline rule it reads as what it is.
   Rule and credit drop together below 900px. */
.masthead-line2 { display: flex; flex-direction: row; align-items: center; gap: 0.7rem; }
.pbi-dot { display: none; }
/* Below 1000px the brand lockup and the nav fight over one row: the site name
   got crushed to three broken lines and the credit had nowhere to go. Give
   each its own row instead. The nav already scrolls rather than wrapping. */
@media (max-width: 1000px) {
  .masthead {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .masthead-left { flex: 1 1 100%; }
  .mast-nav { flex: 1 1 100%; justify-content: flex-start; }
}
/* Narrower than this the brand row itself cannot hold the credit. */
@media (max-width: 560px) {
  .masthead-line2 .mast-sep, .masthead .pbi-credit { display: none; }
}

/* ============ PLACEHOLDER FRAMES (double as shot list) ============ */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(115deg,
      rgba(127, 181, 173, 0.05) 0px, rgba(127, 181, 173, 0.05) 1px,
      transparent 1px, transparent 26px),
    repeating-linear-gradient(115deg,
      rgba(127, 181, 173, 0.03) 0px, rgba(127, 181, 173, 0.03) 1px,
      transparent 1px, transparent 9px),
    linear-gradient(160deg, var(--night-3), var(--night-2) 70%);
  overflow: hidden;
}
.ph::before, .ph::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid rgba(233, 241, 236, 0.35);
  z-index: 2;
}
.ph::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.ph::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.ph-note {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 46ch;
  padding: 0 1.5rem;
}
.ph-id {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--copper-bright);
  margin-bottom: 0.6rem;
}
.ph-desc {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ice-dim);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}
.ph-hero { position: absolute; inset: 0; }
.ph-hero .ph-note { top: 26%; left: 74%; max-width: 30ch; }
@media (max-width: 900px) { .ph-hero .ph-note { display: none; } }
.hero-inner {
  position: relative;
  z-index: 3;
  padding: 12vh 2rem 9vh 4.5rem;
  max-width: 62rem;
  background: linear-gradient(to top, rgba(12, 21, 18, 0.92) 30%, transparent);
  width: 100%;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--river);
  margin-bottom: 1.2rem;
}
.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 10vw, 7.6rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.hero-dek {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  max-width: 62ch;
  color: var(--ice);
  margin-bottom: 1.6rem;
}
.hero-byline {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ice-dim);
}
.hero-scrollcue {
  margin-top: 3rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--ice-dim);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.hero-scrollcue span {
  display: block;
  width: 2px; height: 34px;
  background: var(--copper);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ============ PROSE ============ */
.prose-block {
  max-width: 44rem;
  margin: 0 auto;
  padding: 7rem 2rem 5rem 2rem;
}
.prose-block p + p { margin-top: 1.5rem; }
.drop::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 4.6em;
  float: left;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--river);
}

.section-eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--river);
  margin-bottom: 1.1rem;
}
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin-bottom: 1.8rem;
}

/* ============ SCROLLY ============ */
.scrolly { position: relative; }
.map-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
}
#map { position: absolute; inset: 0; background: #0a100e; }
#map .maplibregl-ctrl-attrib {
  background: rgba(12, 21, 18, 0.7);
  color: var(--ice-dim);
  font-family: var(--mono);
  font-size: 0.6rem;
}
#map .maplibregl-ctrl-attrib a { color: var(--ice-dim); }
.map-legend {
  position: absolute;
  right: 1.2rem; bottom: 2.2rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--ice-dim);
  background: rgba(12, 21, 18, 0.72);
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
}
.lg { display: flex; align-items: center; gap: 0.55rem; }
.lg::before { content: ""; width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; }
.lg-route::before { border-color: var(--copper); }
.lg-park::before { border-color: var(--river); border-top-style: dashed; }
.lg-caribou::before { border-color: var(--tundra); border-top-style: dotted; }
/* Build-out swatches are blocks, not rules: these are areas of ground, and a
   hairline would read as one more route. */
.lg-build[hidden] { display: none; }
.lg-clear::before { border: none; height: 8px; background: rgba(232, 129, 63, 0.35); }
.lg-fac::before { border: none; width: 9px; height: 9px; border-radius: 50%; background: #f2c14e; }
.lg-mat::before { border: none; height: 9px; background: rgba(208, 67, 47, 0.75); }

.steps {
  position: relative;
  z-index: 10;
  margin-top: -100vh;
  padding-bottom: 30vh;
}
.step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-left: clamp(4.5rem, 8vw, 9rem);
  pointer-events: none;
}
.step > * { pointer-events: auto; }
.step h2, .step p { max-width: 100%; }
.step {
  --card-w: 25rem;
}
.step > .step-eyebrow,
.step > h2,
.step > p { width: var(--card-w); }
.step > .step-eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--copper-bright);
}
.step-card, .step > * { }
.step {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.step > .step-eyebrow,
.step > h2,
.step > p {
  background: rgba(12, 21, 18, 0.88);
  backdrop-filter: blur(6px);
  padding: 0 1.4rem;
}
.step > .step-eyebrow { padding-top: 1.4rem; padding-bottom: 0.7rem; }
.step > h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.05;
  text-transform: uppercase;
  padding-bottom: 0.8rem;
}
.step > p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ice);
  padding-bottom: 1.5rem;
}
.step > .field-note {
  width: var(--card-w);
  background: rgba(12, 21, 18, 0.88);
  backdrop-filter: blur(6px);
  margin-top: 0;
  padding: 0 1.4rem 1.5rem 1.4rem;
  box-sizing: border-box;
}
.step > .field-note { border-left: none; }
.step .field-note .fn-label { margin-top: -0.4rem; }
.step > *:last-child { border-bottom: 2px solid var(--copper); }

/* ============ NUMBERS ============ */
.numbers {
  padding: 7rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.num {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.2rem 1.8rem 2rem 1.8rem;
}
.num-val {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  margin-bottom: 0.7rem;
}
.num:nth-child(5) .num-val, .num:nth-child(6) .num-val { color: var(--copper-bright); }
.num-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--ice-dim);
}
.numbers-note {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ice-dim);
  letter-spacing: 0.06em;
}

/* ============ TIMELINE ============ */
.timeline {
  padding: 7rem 2rem;
  max-width: 52rem;
  margin: 0 auto;
}
.tl { border-left: 1px solid var(--line); margin-top: 3rem; }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.6rem;
  padding: 0 0 3rem 2rem;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.5em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--night);
  border: 2px solid var(--ice-dim);
}
.tl-hot::before { border-color: var(--copper); background: var(--copper); }
.tl-date {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--tundra);
  padding-top: 0.25em;
}
.tl-hot .tl-date { color: var(--copper-bright); }
.tl-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.tl-body p { font-size: 1.02rem; color: var(--ice); }

/* ============ MONEY ============ */
.money {
  padding: 7rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
}
.money-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}
.money-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--copper);
  padding: 1.8rem 1.6rem;
  background: var(--night-2);
}
.money-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.money-role {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--copper-bright);
  margin: 0.4rem 0 1rem 0;
}
.money-card p:last-child { font-size: 0.98rem; color: var(--ice); }
.money-more {
  margin-top: 2.2rem;
  font-size: 1.05rem;
  color: var(--ice-dim);
  max-width: 60ch;
}

/* ============ WIDE PLACEHOLDER ============ */
.ph-wide {
  aspect-ratio: 16 / 8;
  margin-top: 3rem;
}

/* ============ DISPATCH ============ */
.dispatch {
  background: var(--night-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 7rem 2rem;
}
.dispatch-inner { max-width: 72rem; margin: 0 auto; }
.dispatch-inner > p { max-width: 62ch; }
.ph-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 3rem 0;
}
.ph-slot { aspect-ratio: 4 / 5; }
.ph-slot .ph-desc { font-size: 0.7rem; }
.dispatch-cta { text-align: center; padding-top: 1.5rem; }
.cta-lede {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 1.4rem;
}
.btn-copper {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--night);
  background: var(--copper-bright);
  padding: 0.9rem 2.4rem;
  transition: background 0.15s ease;
}
.btn-copper:hover { background: var(--copper); color: var(--night); }
.cta-sub {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ice-dim);
  letter-spacing: 0.05em;
}

/* ============ MEDIA ROOM / ACT ============ */
.media-room, .act {
  padding: 6rem 2rem;
  max-width: 44rem;
  margin: 0 auto;
}
.media-room p, .act p { color: var(--ice); }
.act { text-align: left; padding-bottom: 8rem; }
.act .btn-copper { margin-top: 2rem; }

/* ============ FOOTER ============ */
.footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 2rem 3rem 4.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--ice-dim);
  letter-spacing: 0.04em;
}
.footer p + p { margin-top: 0.8rem; }
.footer a { color: var(--ice-dim); }

/* ============ MAP LABELS ============ */
.map-lbl {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.lbl-dim { color: rgba(233, 241, 236, 0.75); }
.lbl-key { color: #e9f1ec; font-size: 0.72rem; font-weight: 500; }
.lbl-copper { color: var(--copper-bright); }
.lbl-park { color: var(--river); letter-spacing: 0.3em; opacity: 0.9; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .money-grid, .ph-strip { grid-template-columns: 1fr; }
  .ph-slot { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .mileline { display: none; }
  .masthead { padding-left: 2rem; }
  .hero-inner { padding-left: 2rem; padding-right: 1.5rem; }
  .step { padding-left: 1.2rem; padding-right: 1.2rem; }
  .step { --card-w: 100%; }
  .tl-item { grid-template-columns: 1fr; gap: 0.3rem; padding-left: 1.4rem; }
  .footer { padding-left: 2rem; }
  .prose-block { padding-top: 5rem; }
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scrollcue span { animation: none; }
  * { transition: none !important; }
}


/* ============ PHOTOS ============ */
.photo { position: relative; overflow: hidden; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-credit {
  position: absolute;
  right: 0.7rem; bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: rgba(233, 241, 236, 0.75);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  z-index: 3;
}
.hero .photo { position: absolute; inset: 0; }
.hero .photo img { filter: brightness(0.88); }
.break {
  position: relative;
  height: 72vh;
  min-height: 380px;
}
.break .photo { position: absolute; inset: 0; }
.break-caption {
  position: absolute;
  left: 4.5rem; bottom: 1.6rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ice);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  max-width: 46ch;
  line-height: 1.6;
}
.inline-photo { margin: 2.4rem 0 0.4rem 0; }
.inline-photo .photo { aspect-ratio: 16/10; }
.inline-photo figcaption, .figcap {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ice-dim);
  letter-spacing: 0.06em;
  padding-top: 0.6rem;
  line-height: 1.6;
}

/* ============ FIELD NOTES (trip woven in) ============ */
.field-note {
  border-left: 2px solid var(--tundra);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin-top: 1.5rem;
  font-style: italic;
  color: var(--ice-dim);
  font-size: 1.02rem;
}
.field-note .fn-label {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--tundra);
  margin-bottom: 0.3rem;
}

/* ============ MAP MILE LABELS ============ */
.lbl-mile {
  color: var(--copper-bright);
  font-size: 0.5625rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  margin-top: 6px;
}

/* ============ SUBPAGES ============ */
.page-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
}
.page-hero .photo { position: absolute; inset: 0; }
.page-hero .photo img { filter: brightness(0.7); }
.page-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 9rem 2rem 3rem 4.5rem;
  background: linear-gradient(to top, rgba(12, 21, 18, 0.95) 25%, transparent);
}
.page-hero-inner .hero-eyebrow { margin-bottom: 0.8rem; }
.page-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.page-dek { font-size: 1.15rem; max-width: 62ch; color: var(--ice); }
.page-body {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem 2rem;
}
.page-body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2.6rem 0 0.9rem 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--copper);
}
.page-body p + p { margin-top: 1.1rem; }
.page-body ul { margin: 1rem 0 1rem 1.2rem; }
.page-body li { margin-bottom: 0.5rem; }
.page-body table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.95rem; }
.page-body th {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-align: left; color: var(--ice-dim);
  border-bottom: 1px solid var(--ice-dim); padding: 0.5rem 1rem 0.5rem 0;
}
.page-body td { border-bottom: 1px solid var(--line); padding: 0.6rem 1rem 0.6rem 0; vertical-align: top; }
.page-body td:first-child { font-family: var(--mono); font-size: 0.78rem; color: var(--tundra); white-space: nowrap; }
.doc-list li { margin-bottom: 0.8rem; }
.doc-list .src { font-family: var(--mono); font-size: 0.72rem; color: var(--ice-dim); display: block; }

/* ============ ACT PAGE ============ */
.act-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 2.2rem 0;
}
.act-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--copper);
  background: var(--night-2);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.act-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.act-step {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--copper-bright);
  margin-bottom: 0.5rem;
}
.act-card p { font-size: 0.98rem; margin: 0.7rem 0 1rem 0; flex: 1; }
.act-card .btn-copper { align-self: flex-start; font-size: 0.95rem; padding: 0.7rem 1.5rem; }
.act-card a.plain {
  font-family: var(--mono); font-size: 0.8rem; color: var(--ice);
}
.call-script {
  background: var(--night-3);
  border-left: 3px solid var(--tundra);
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--ice);
}
.tool-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.4rem; }
.tool-link {
  display: block;
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  text-decoration: none;
  background: var(--night-2);
}
.tool-link:hover { border-color: var(--river); }
.tool-link .tl-name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--ice);
}
.tool-link .tl-desc {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ice-dim);
  margin-top: 0.3rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .masthead { flex-wrap: wrap; padding-left: 1.4rem; padding-right: 1.4rem; background: rgba(12, 21, 18, 0.96); }
  .mast-nav { gap: 0.9rem; overflow-x: auto; flex-wrap: nowrap; width: 100%; justify-content: flex-start; padding-bottom: 0.2rem; scrollbar-width: none; }
  .mast-nav::-webkit-scrollbar { display: none; }
  .mast-nav a { white-space: nowrap; flex: none; }
  .masthead .site-name { font-size: 0.75rem; }
  .act-grid, .tool-links { grid-template-columns: 1fr; }
  .break-caption { left: 1.4rem; right: 1.4rem; }
  .page-hero-inner { padding-left: 2rem; }
}

/* ============ INTERACTIVE EXPLORER ============ */
.explore { padding: 6rem 2rem 5rem 4.5rem; max-width: 96rem; margin: 0 auto; }
.explore-head { max-width: 52rem; margin-bottom: 2rem; }
.explore-dek { font-size: 1.1rem; line-height: 1.6; color: var(--ice); max-width: 60ch; }
.explore-wrap {
  position: relative;
  height: 82vh; min-height: 520px;
  border: 1px solid var(--line);
  overflow: hidden;
}
#explore-map { position: absolute; inset: 0; background: #0a100e; }
.explore-note {
  margin-top: 1rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em;
  color: var(--ice-dim); line-height: 1.6; max-width: 70ch;
}

/* layer panel */
.x-panel {
  position: absolute; top: 1rem; left: 1rem; z-index: 5;
  background: rgba(12, 21, 18, 0.9);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.1rem 1.1rem;
  backdrop-filter: blur(6px);
  max-width: 15rem;
  /* The build-out group pushed this past the map height on laptop screens.
     Scroll inside the panel rather than letting it run off the map. */
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.x-panel::-webkit-scrollbar { width: 6px; }
.x-panel::-webkit-scrollbar-thumb { background: rgba(233, 241, 236, 0.2); border-radius: 3px; }
.x-panel-title {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em;
  color: var(--tundra); margin-bottom: 0.7rem;
}
.x-lyr {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em;
  color: var(--ice); padding: 0.28rem 0; cursor: pointer; user-select: none;
}
.x-lyr input { position: absolute; opacity: 0; width: 0; height: 0; }
.x-sw { width: 22px; height: 3px; flex: none; opacity: 0.35; transition: opacity 0.15s; }
.x-lyr input:checked ~ .x-sw { opacity: 1; }
.x-lyr input:focus-visible ~ .x-sw { outline: 2px solid var(--river); outline-offset: 2px; }
.x-lyr input:disabled ~ .x-sw { opacity: 1; }
.x-lyr:has(input:disabled) { color: var(--ice-dim); cursor: default; }
.x-sw-route { background: var(--copper-bright); }
.x-sw-culvert { background: #7fb5ad; }
.x-sw-river { background: var(--river); }
.x-sw-town { background: var(--ice); border-radius: 50%; width: 10px; height: 10px; }
.x-sw-mine { background: var(--copper-bright); border-radius: 50%; width: 10px; height: 10px; }
.x-sw-field { background: #f2c14e; border-radius: 50%; width: 11px; height: 11px; }
.x-sw-park { border-top: 2px dashed var(--river); background: none; height: 0; }
.x-sw-foot { background: var(--tundra); border-radius: 50%; width: 8px; height: 8px; opacity: 0.6; }
.x-sw-row { background: var(--copper-bright); opacity: 0.5; height: 8px; }
.x-sw-fish { background: #4fa3d1; }
.x-sw-caribou { background: #c9a35c; opacity: 0.5; height: 8px; }
.x-sw-wsr { background: #4fbf87; height: 3px; }
.x-sw-ancsa { background: #b57bd4; border-radius: 2px; width: 12px; height: 10px; opacity: 0.7; }
.x-sw-statel { background: #6b8cae; border-radius: 2px; width: 12px; height: 10px; opacity: 0.7; }
.x-sw-claims { background: #d0432f; border-radius: 2px; width: 12px; height: 10px; opacity: 0.8; }
.x-sw-pf { background: #9ec6dd; border-radius: 2px; width: 12px; height: 10px; opacity: 0.6; }


.x-reset {
  margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-dim); background: none; border: 1px solid var(--line);
  padding: 0.45rem 0.8rem; cursor: pointer; width: 100%;
}
.x-reset:hover { color: var(--ice); border-color: var(--river); }

/* popup theming */
.maplibregl-popup-content {
  background: var(--night-2); border: 1px solid var(--line);
  border-top: 3px solid var(--copper);
  padding: 0.9rem 1rem 1rem 1rem; border-radius: 0;
}
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { color: var(--ice-dim); font-size: 1.2rem; padding: 0 0.4rem; }
.maplibregl-popup-close-button:hover { color: var(--ice); background: none; }
.xp-tag { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.16em; color: var(--copper-bright); }
.xp h4 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ice); margin: 0.3rem 0 0.4rem 0; }
.xp p { font-family: var(--serif); font-size: 0.86rem; line-height: 1.5; color: var(--ice); margin: 0; }
.xp-link { display: inline-block; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--river); text-decoration: none; }
.xp-link:hover { color: var(--copper-bright); }
.maplibregl-ctrl-group { background: rgba(12,21,18,0.9); border: 1px solid var(--line); }
.maplibregl-ctrl-group button { background: none; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl-icon { filter: invert(0.85); }

/* ============ CROSSING FILTER ============
   Sits opposite the layer panel. The layer panel answers "what is here"; this
   answers "how much of it, and where". The count is the hero: it is the one
   number that moves as you work, so it is set in the display face at a size
   nothing else on the map competes with. */
.x-filter {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  width: 16.5rem;
  background: rgba(12, 21, 18, 0.9);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.1rem 1.1rem;
  backdrop-filter: blur(6px);
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.xf-readout { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.85rem; }
.xf-count {
  font-family: var(--display); font-size: 2.6rem; line-height: 0.95;
  font-weight: 700; color: var(--copper-bright); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.xf-sub {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em;
  color: var(--ice-dim); line-height: 1.45;
}
.xf-legend {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.18em;
  color: var(--tundra); margin: 0 0 0.45rem 0;
  padding-top: 0.65rem; border-top: 1px solid var(--line);
}

/* Two range inputs stacked on one track. Not a true dual-thumb control, which
   would need a custom widget; two natives keep it keyboard and screen-reader
   operable and the script stops the handles crossing. */
.xf-miles { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.3rem; }
.xf-miles input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: rgba(233, 241, 236, 0.18);
  border-radius: 2px; outline: none; margin: 0.35rem 0;
}
.xf-miles input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--copper-bright); border: 2px solid var(--night); cursor: grab;
}
.xf-miles input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--copper-bright); border: 2px solid var(--night); cursor: grab;
}
.xf-miles input[type="range"]:focus-visible { outline: 2px solid var(--river); outline-offset: 4px; }
.xf-mile-read {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--ice);
}

.xf-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.xf-chip {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.04em;
  color: var(--ice-dim); background: none;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.28rem 0.45rem; cursor: pointer;
  display: inline-flex; gap: 0.3rem; align-items: baseline;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.xf-chip b { font-weight: 500; color: var(--ice-dim); font-variant-numeric: tabular-nums; }
.xf-chip:hover { color: var(--ice); border-color: var(--ice-dim); }
.xf-chip[aria-pressed="true"] {
  color: var(--night); background: var(--copper); border-color: var(--copper);
}
.xf-chip[aria-pressed="true"] b { color: var(--night); opacity: 0.75; }
.xf-chip:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }

.xf-foot { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.xf-jump { display: flex; flex-direction: column; gap: 0.3rem; }
.xf-jump span {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.18em;
  color: var(--tundra); text-transform: uppercase;
}
.xf-jump select {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--ice); background: rgba(10, 16, 14, 0.9);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.35rem 0.4rem; width: 100%; cursor: pointer;
}
.xf-jump select:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }
.xf-clear {
  margin-top: 0.6rem; width: 100%;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em;
  color: var(--ice-dim); background: none;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.4rem; cursor: pointer; transition: color 0.12s, border-color 0.12s;
}
.xf-clear:hover { color: var(--ice); border-color: var(--river); }

/* popup detail lines */
.xp-meta {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.05em;
  color: var(--tundra); margin: 0.2rem 0 0.5rem 0;
}
.xp-fish {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.03em;
  color: #8ad6f5; line-height: 1.5; margin-top: 0.5rem;
}
.xp-src {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.03em;
  color: var(--ice-dim); line-height: 1.5; margin-top: 0.5rem;
}

/* build-out swatches */
.x-sw-clear { background: var(--copper-bright); opacity: 0.35; height: 9px; }
.x-sw-mat { background: #d0432f; border-radius: 2px; width: 12px; height: 10px; opacity: 0.85; }
.x-sw-aroad { background: var(--copper-bright); opacity: 0.6; height: 6px; }
.x-sw-brg { background: #f2c14e; opacity: 0.8; height: 7px; }
.x-sw-strip { background: #cfd8d2; opacity: 0.7; height: 6px; }
.x-sw-fac { background: #f2c14e; border-radius: 50%; width: 9px; height: 9px; }
.x-sw-nhd { background: #5cc3f2; opacity: 0.55; height: 2px; }

@media (max-width: 980px) {
  /* Below this the two panels would collide over the map, so the filter drops
     beneath it and runs full width. It is the more important control, so it
     keeps its size rather than being squeezed into a corner. */
  .explore-wrap { height: auto; }
  #explore-map { position: relative; inset: auto; height: 70vh; min-height: 420px; }
  .x-filter {
    position: relative; top: auto; right: auto; width: auto;
    border: none; border-top: 1px solid var(--line); backdrop-filter: none;
  }
  .xf-chips { gap: 0.35rem; }
}

@media (max-width: 720px) {
  .explore { padding: 4rem 1rem 4rem 1rem; }
  .x-panel { max-width: 11.5rem; padding: 0.8rem; top: 0.7rem; left: 0.7rem; }
  .x-lyr { font-size: 0.66rem; }
  .xf-count { font-size: 2.2rem; }
}

/* ============ EXPLORER PANEL AFFORDANCE + HOVER + CTA ============ */
.x-panel-hint { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--ice-dim); text-transform: none; float: right; margin-top: 2px; }
.x-panel-sub { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.18em; color: var(--tundra); margin: 0.7rem 0 0.3rem 0; padding-top: 0.6rem; border-top: 1px solid var(--line); }
/* visible checkbox box */
.x-box {
  width: 13px; height: 13px; flex: none;
  border: 1.5px solid var(--ice-dim);
  border-radius: 2px;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.x-lyr input:checked ~ .x-box { background: var(--copper); border-color: var(--copper); }
.x-lyr input:checked ~ .x-box::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px;
  width: 4px; height: 8px; border: solid var(--night); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.x-lyr input:disabled ~ .x-box { background: var(--ice-dim); border-color: var(--ice-dim); opacity: 0.6; }
.x-lyr input:focus-visible ~ .x-box { outline: 2px solid var(--river); outline-offset: 2px; }
.x-lyr:hover .x-box { border-color: var(--ice); }

/* hover tooltip */
.xp-hover-pop .maplibregl-popup-content { background: rgba(12,21,18,0.94); border: 1px solid var(--copper); border-top: 1px solid var(--copper); padding: 0.4rem 0.65rem; }
.xp-hover-pop .maplibregl-popup-tip { display: none; }
.xp-hovtxt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--ice); white-space: nowrap; }

/* CTA buttons under the map */
.explore-cta { margin-top: 2rem; }
.explore-cta-lead { font-family: var(--display); font-weight: 600; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 1rem; }
.explore-cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ice); text-decoration: none;
  background: var(--night-2); border: 1px solid var(--line); border-left: 3px solid var(--river);
  padding: 0.75rem 1.2rem; transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.cta-btn:hover { background: var(--night-3); border-left-color: var(--ice); transform: translateY(-1px); color: var(--ice); }
.cta-btn-k { font-family: var(--mono); font-size: 0.7rem; color: var(--river); font-weight: 400; }
.cta-btn-hot { border-left-color: var(--copper); }
.cta-btn-hot .cta-btn-k { color: var(--copper-bright); }
.cta-btn-hot:hover { border-left-color: var(--copper-bright); }
.cta-btn-act { background: var(--copper-bright); color: var(--night); border-color: var(--copper-bright); border-left: 1px solid var(--copper-bright); }
.cta-btn-act:hover { background: var(--copper); color: var(--night); border-color: var(--copper); }
@media (max-width: 720px) {
  .explore-cta-row { flex-direction: column; }
  .cta-btn { width: 100%; }
}

/* ============ EXPEDITION FOLLOW-ALONG ============ */
.exp-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; }
.exp-hero-photo { position: absolute; inset: 0; overflow: hidden; }
.exp-hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62); }
.exp-hero-inner { position: relative; z-index: 3; width: 100%; padding: 9rem 2rem 3rem 4.5rem; background: linear-gradient(to top, rgba(12,21,18,0.95) 22%, transparent); }
.exp-status-kicker { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--copper-bright); margin-bottom: 1rem; }
.exp-status-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 0.98; text-transform: uppercase; margin-bottom: 1.1rem; }
.exp-status-dispatch { font-size: 1.2rem; line-height: 1.6; max-width: 60ch; color: var(--ice); }
.exp-hero-sub { margin-top: 1.2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ice-dim); }
body.exp-mode-active .exp-status-kicker { color: #ff5a4d; }
body.exp-mode-active .exp-status-kicker::before { content: "● "; animation: exppulse 1.6s ease-in-out infinite; }
@keyframes exppulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.exp-mapwrap { position: relative; height: 70vh; min-height: 460px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#exp-map { position: absolute; inset: 0; background: #0a100e; }
.exp-map-legend { position: absolute; left: 1rem; bottom: 1.6rem; z-index: 5; display: flex; flex-direction: column; gap: 0.4rem; background: rgba(12,21,18,0.82); border: 1px solid var(--line); padding: 0.8rem 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ice-dim); }
.exp-lg { display: flex; align-items: center; gap: 0.5rem; }
.exp-lg::before { content: ""; width: 20px; border-top-width: 3px; border-top-style: solid; }
.exp-lg-done::before { border-color: #f2c14e; }
.exp-lg-ahead::before { border-color: #9fb3a9; border-top-style: dotted; }
.exp-lg-here::before { border: none; width: 11px; height: 11px; border-radius: 50%; background: #ff5a4d; }
.exp-lg-road::before { border-color: #e8813f; border-top-style: dashed; }

/* pulsing beacon marker */
.exp-beacon { position: relative; width: 16px; height: 16px; }
.exp-beacon-core { position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4d; border: 2px solid #fff; box-shadow: 0 0 8px rgba(255,90,77,0.9); z-index: 2; }
.exp-beacon-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,90,77,0.5); animation: expbeacon 2s ease-out infinite; }
.exp-beacon-done .exp-beacon-core { background: #f2c14e; box-shadow: 0 0 8px rgba(242,193,78,0.8); }
.exp-beacon-done .exp-beacon-ring { display: none; }
@keyframes expbeacon { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
.exp-wp-lbl { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: #e9f1ec; text-shadow: 0 1px 4px #000; margin-left: 8px; white-space: nowrap; pointer-events: none; }

.exp-timeline { max-width: 46rem; margin: 0 auto; padding: 5rem 2rem; }
#exp-days { margin-top: 2rem; }
.exp-day { display: grid; grid-template-columns: 24px 1fr; gap: 1.2rem; }
.exp-day-rail { position: relative; display: flex; justify-content: center; }
.exp-day-rail::before { content: ""; position: absolute; top: 0; bottom: -1px; width: 2px; background: var(--line); }
.exp-day:last-child .exp-day-rail::before { bottom: auto; height: 22px; }
.exp-dot { position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--night); border: 2px solid var(--ice-dim); }
.exp-now .exp-dot { background: #ff5a4d; border-color: #ff5a4d; box-shadow: 0 0 0 4px rgba(255,90,77,0.2); }
.exp-done .exp-dot { background: var(--tundra); border-color: var(--tundra); }
.exp-day-body { padding-bottom: 2.6rem; }
.exp-day-date { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--tundra); margin-bottom: 0.4rem; }
.exp-nowtag { color: var(--night); background: #ff5a4d; padding: 0.1rem 0.4rem; letter-spacing: 0.1em; margin-left: 0.4rem; }
.exp-donetag { color: var(--tundra); margin-left: 0.3rem; }
.exp-day-body h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.08; margin-bottom: 0.6rem; }
.exp-up .exp-day-body { opacity: 0.62; }
.exp-photo { margin: 0.6rem 0 0.8rem 0; border: 1px solid var(--line); }
.exp-photo img { display: block; width: 100%; }
.exp-dispatch { font-size: 1.02rem; line-height: 1.6; color: var(--ice); }
.exp-nugget { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.55; color: var(--ice-dim); border-left: 2px solid var(--river); padding-left: 0.9rem; }
.exp-nugget-k { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--river); margin-bottom: 0.3rem; }
.exp-stat { margin-top: 0.7rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--copper-bright); }

.exp-cta { background: var(--night-2); border-top: 1px solid var(--line); padding: 5rem 2rem; }
.exp-cta-inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.exp-cta-inner p:not(.section-eyebrow):not(.exp-cta-sub) { color: var(--ice); font-size: 1.1rem; line-height: 1.65; max-width: 60ch; margin: 0 auto 1.6rem auto; }
.exp-cta-inner .section-title { max-width: 100%; }
.exp-cta-sub { margin-top: 1rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ice-dim); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .exp-hero-inner { padding-left: 2rem; }
  .exp-map-legend { font-size: 0.55rem; }
}

/* ============ EXPEDITION v2: hero, why, moving beacon, preview, stakes ============ */
.exp-eyebrow { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--river); margin-bottom: 1.4rem; }
.exp-hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding-top: 5.5rem; }
.exp-hero-photo { position: absolute; inset: 0; overflow: hidden; }
.exp-hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.exp-hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 60%, rgba(12,21,18,0.85) 0%, rgba(12,21,18,0.35) 55%, rgba(12,21,18,0.75) 100%); }
.exp-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 74rem; padding: 2rem 2rem 2rem 4.5rem; background: none; }
.exp-status-kicker { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.16em; color: var(--copper-bright); margin-bottom: 1rem; }
body.exp-mode-active .exp-status-kicker, body.exp-moving .exp-status-kicker { color: #ff5a4d; }
body.exp-mode-active .exp-status-kicker::before, body.exp-moving .exp-status-kicker::before { content: "● "; animation: exppulse 1.4s ease-in-out infinite; }
body.exp-moving .exp-status-kicker::before { animation-duration: 0.7s; }
@keyframes exppulse { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
/* Three lines at every desktop width since 10/6 08:34 PT (was 8vw to 6.2rem on four): the headline, the alerts
   sign-up and the dek sit in a laptop's first screen above the comment ribbon; 5rem after the critic's walk. */
.exp-status-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.9rem, 5.6vw, 5rem); line-height: 0.94; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 1.6rem; max-width: 12em; text-wrap: balance; }
.exp-status-dispatch { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 70ch; color: var(--ice); }
.exp-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.8rem; }
.exp-hero-btn { display: inline-block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--night); background: var(--copper-bright); padding: 0.9rem 2rem; border-radius: 2px; transition: background 0.15s ease; }
.exp-hero-btn:hover { background: var(--copper); color: var(--night); }
.exp-hero-btn-ghost { display: inline-block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ice); padding: 0.9rem 1.4rem; border: 1px solid rgba(233,241,236,0.35); border-radius: 2px; transition: border-color 0.15s ease, color 0.15s ease; }
.exp-hero-btn-ghost:hover { border-color: var(--river); color: var(--river); }
/* In the hero the one solid button is the alerts sign-up (critic 10/6: four filled coppers on one screen); the story
   door keeps its copper as an outline, first among the three doors. */
.exp-hero-cta .exp-hero-btn { background: transparent; color: var(--copper-bright); border: 1px solid var(--copper-bright); padding: calc(0.9rem - 1px) calc(2rem - 1px); }
.exp-hero-cta .exp-hero-btn:hover { background: var(--copper-bright); color: var(--night); }
.exp-hero-sub { margin-top: 1.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ice-dim); }
.exp-hero-cue { position: absolute; right: 2rem; bottom: 2rem; z-index: 3; display: flex; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--ice-dim); text-decoration: none; }
.exp-hero-cue span { width: 2px; height: 30px; background: var(--copper); animation: cue 2.2s ease-in-out infinite; }
.exp-hero-cue:hover { color: var(--ice); }

/* WHY */
.exp-why { background: var(--night); padding: 6rem 2rem; border-bottom: 1px solid var(--line); }
.exp-why-inner { max-width: 44rem; margin: 0 auto; }
.exp-why-lead { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.4; color: var(--ice); margin-bottom: 1.6rem; }
.exp-why-inner p { font-size: 1.12rem; line-height: 1.68; color: var(--ice); }
.exp-why-inner p + p { margin-top: 1.2rem; }
.exp-why-close { font-style: italic; color: var(--ice-dim); border-left: 2px solid var(--copper); padding-left: 1.1rem; margin-top: 1.6rem; }

/* COME WITH US */
.exp-follow { background: var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5.5rem 2rem; }
.exp-follow-inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.exp-follow-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: 0.01em; margin: 0.7rem 0 1.4rem; }
.exp-follow-lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.42rem); line-height: 1.55; color: var(--ice); margin-bottom: 2rem; }
.exp-follow-btn { display: inline-block; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--night); background: var(--copper-bright); padding: 0.95rem 2.3rem; border-radius: 2px; transition: background 0.15s ease; }
.exp-follow-btn:hover { background: var(--copper); color: var(--night); }
.exp-follow-fine { margin-top: 1.2rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ice-dim); }

/* moving beacon */
.exp-beacon { position: relative; width: 16px; height: 16px; }
.exp-beacon-core { position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4d; border: 2px solid #fff; box-shadow: 0 0 8px rgba(255,90,77,0.9); z-index: 2; }
.exp-beacon-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,90,77,0.5); animation: expbeacon 2s ease-out infinite; }
.exp-beacon-moving .exp-beacon-ring { animation-duration: 0.9s; background: rgba(255,90,77,0.65); }
.exp-beacon-moving .exp-beacon-core { animation: expcore 0.9s ease-in-out infinite; }
@keyframes expcore { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.exp-beacon-done .exp-beacon-core { background: #f2c14e; box-shadow: 0 0 8px rgba(242,193,78,0.8); }
.exp-beacon-done .exp-beacon-ring { display: none; }
@keyframes expbeacon { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }

/* preview bar */
.exp-preview-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; background: #1a1206; border-bottom: 1px solid var(--copper); padding: 0.5rem 1rem; }
.exp-preview-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--copper-bright); margin-right: 0.6rem; }
.exp-preview-bar a { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ice-dim); text-decoration: none; padding: 0.3rem 0.6rem; border: 1px solid transparent; }
.exp-preview-bar a:hover { color: var(--ice); }
.exp-preview-bar a.on { color: var(--night); background: var(--copper-bright); }
.exp-preview-live { margin-left: auto; color: var(--river) !important; }

/* stakes grid */
.exp-stakes { max-width: 72rem; margin: 0 auto; padding: 5rem 2rem; }
.exp-stakes-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 2rem; }
.exp-stk { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.8rem 1.6rem; }
.exp-stk-n { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--copper-bright); margin-bottom: 0.6rem; }
.exp-stk-l { font-family: var(--mono); font-size: 0.72rem; line-height: 1.55; letter-spacing: 0.03em; color: var(--ice-dim); }
.exp-stakes-note { margin-top: 1.6rem; font-size: 1.05rem; color: var(--ice-dim); }

@media (max-width: 900px) { .exp-stakes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .exp-stakes-grid { grid-template-columns: 1fr 1fr; } .exp-stk { padding: 1.1rem .9rem; } .exp-stk-n { font-size: 1.9rem; } .exp-stk-l { font-size: .6rem; } }

/* going-dark note under the hero byline */
.exp-hero-note { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--copper-bright); }
body.exp-mode-complete .exp-hero-note { display: none; }

/* GETTING THERE ladder */
.exp-getting { background: var(--night-2); border-bottom: 1px solid var(--line); padding: 5rem 2rem; }
.exp-getting-inner { max-width: 72rem; margin: 0 auto; }
.exp-ladder { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 2rem; padding: 0; }
.exp-ladder li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 1.5rem 1.8rem 1.5rem; }
.exp-ladder-k { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--copper-bright); margin-bottom: 0.7rem; }
.exp-ladder p { font-size: 1rem; line-height: 1.6; color: var(--ice); }
.exp-getting-close { margin-top: 1.8rem; font-family: var(--serif); font-size: 1.12rem; line-height: 1.6; color: var(--ice-dim); max-width: 62ch; }
@media (max-width: 900px) { .exp-ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .exp-ladder { grid-template-columns: 1fr; } }

/* ---- expedition motion & mission polish ---- */
/* hero entrance: staggered rise on load */
@keyframes exprise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.exp-hero-inner > * { opacity: 0; animation: exprise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.exp-hero-inner > *:nth-child(1) { animation-delay: 0.1s; }
.exp-hero-inner > *:nth-child(2) { animation-delay: 0.22s; }
.exp-hero-inner > *:nth-child(3) { animation-delay: 0.38s; }
.exp-hero-inner > *:nth-child(4) { animation-delay: 0.52s; }
.exp-hero-inner > *:nth-child(5) { animation-delay: 0.66s; }
.exp-hero-inner > *:nth-child(6) { animation-delay: 0.78s; }
/* slow settle on the aerial */
@keyframes expken { from { transform: scale(1.07); } to { transform: scale(1); } }
.exp-hero-photo img { animation: expken 16s ease-out forwards; }

/* scroll reveals (scoped to html.js so nothing hides without JS) */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .rv.rv-in { opacity: 1; transform: none; }
html.js .rv-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .rv-stagger.rv-in > * { opacity: 1; transform: none; }
.rv-stagger.rv-in > *:nth-child(1) { transition-delay: 0.05s; }
.rv-stagger.rv-in > *:nth-child(2) { transition-delay: 0.16s; }
.rv-stagger.rv-in > *:nth-child(3) { transition-delay: 0.27s; }
.rv-stagger.rv-in > *:nth-child(4) { transition-delay: 0.38s; }
.rv-stagger.rv-in > *:nth-child(5) { transition-delay: 0.49s; }
.rv-stagger.rv-in > *:nth-child(6) { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .exp-hero-inner > *, .rv, .rv-stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .exp-hero-photo img { animation: none; }
}

/* AND THEN WE GO DARK statement band */
.exp-dark { background: var(--night); border-bottom: 1px solid var(--line); padding: 5.5rem 2rem; text-align: center; }
.exp-dark .section-eyebrow { text-align: center; }
.exp-dark-line { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.5; color: var(--ice); max-width: 44ch; margin: 0 auto; }
.exp-dark-line strong { color: var(--copper-bright); font-weight: 600; }

/* beacon lifecycle */
.exp-beacon-hidden { display: none; }
.exp-beacon-tag { position: absolute; left: 22px; top: -4px; white-space: nowrap; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--night); background: #ff5a4d; padding: 0.18rem 0.45rem; border-radius: 2px; box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.exp-beacon-done .exp-beacon-tag { background: var(--copper-bright); }
@keyframes exparrive { 0% { transform: scale(0.2); opacity: 0; } 55% { transform: scale(1.7); opacity: 1; } 100% { transform: scale(1); } }
.exp-beacon-arrive .exp-beacon-core { animation: exparrive 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
body.exp-mode-pre .exp-lg-here { display: none; }

/* current day card glow */
.exp-now .exp-day-body { border-left: 2px solid var(--copper-bright); padding-left: 1.1rem; margin-left: -1.1rem; }

/* FOR NEWSROOMS band */
.exp-press { background: var(--night); border-top: 1px solid var(--line); padding: 5rem 2rem; }
.exp-press-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.exp-press-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: 0.01em; margin: 0.7rem 0 1.1rem; }
.exp-press-lead { font-size: 1.08rem; line-height: 1.65; color: var(--ice); margin-bottom: 1.9rem; }
.exp-press-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
.exp-press-btn { display: inline-block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--night); background: var(--copper-bright); padding: 0.9rem 1.8rem; border-radius: 2px; transition: background 0.15s ease; }
.exp-press-btn:hover { background: var(--copper); color: var(--night); }
.exp-press-ghost { display: inline-block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ice); padding: 0.9rem 1.5rem; border: 1px solid rgba(233,241,236,0.35); border-radius: 2px; transition: border-color 0.15s ease, color 0.15s ease; }
.exp-press-ghost:hover { border-color: var(--copper-bright); color: var(--copper-bright); }
.exp-press-fine { margin-top: 1.2rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ice-dim); }

/* crew figure in WHY */
.exp-crew { margin: 1.8rem 0 2rem 0; border: 1px solid var(--line); }
.exp-crew img { display: block; width: 100%; height: auto; }
.exp-crew figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; line-height: 1.6; color: var(--ice-dim); padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); }
.exp-crew-credit { letter-spacing: 0.14em; opacity: 0.65; margin-left: 0.5rem; }

/* the record, quietly (trust line) */
.exp-cred { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; line-height: 1.75; letter-spacing: 0.03em; color: var(--ice-dim); }

/* day cards: ghost numerals + photo credits */
.exp-day-body { position: relative; }
.exp-day-num { position: absolute; top: -0.6rem; right: 0; z-index: 0; font-family: var(--display); font-weight: 700; font-size: 4.6rem; line-height: 1; color: var(--ice); opacity: 0.055; pointer-events: none; }
.exp-photo { position: relative; }
.exp-photo .photo-credit { font-size: 0.5rem; }

/* band capture form */
.exp-band-form { margin-top: 0.4rem; }
.exp-follow-alt { margin-top: 1.1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--ice-dim); }
.exp-follow-alt a { color: var(--ice-dim); text-decoration-color: var(--river); }
.exp-follow-alt a:hover { color: var(--river); }

/* pivot: places-at-stake legend swatches */
.exp-lg-park::before { border-color: rgba(233,241,236,0.6); border-top-style: dashed; }
.exp-lg-place::before { border: none; width: 10px; height: 10px; border-radius: 50%; background: #e9f1ec; }
.exp-lg-mine::before { border: none; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4d; }

/* FROM THE FIELD strip */
.exp-field { margin: 0 2rem 1.4rem 4.5rem; border: 1px solid var(--copper-bright); background: rgba(242,193,78,0.05); padding: 1.1rem 1.4rem; }
.exp-field-k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--copper-bright); margin-bottom: 0.7rem; }
.exp-field-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.exp-field-item:first-of-type { border-top: none; }
.exp-field-date { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--copper-bright); flex: none; }
.exp-field-item p { font-family: var(--serif); font-size: 1.05rem; color: var(--ice); flex: 1 1 24rem; }
.exp-field-item img { display: block; width: 100%; max-width: 26rem; border: 1px solid var(--line); order: 3; }
.exp-field-credit { display: block; width: 100%; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; color: var(--ice-dim); order: 4; }

/* WHAT WE'RE BRINGING BACK manifest */
.exp-manifest { background: var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5rem 2rem; }
.exp-manifest-inner { max-width: 56rem; margin: 0 auto; }
.exp-manifest .section-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--copper-bright); margin-right: 0.7rem; vertical-align: middle; }
.exp-manifest-status { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--copper-bright); margin: 0.4rem 0 1.8rem; }
.exp-manifest-lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.42rem); line-height: 1.6; color: var(--ice); max-width: 62ch; margin-top: 0.4rem; }
.exp-manifest-next { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.12rem; color: var(--copper-bright); max-width: 62ch; }
.exp-manifest-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.exp-manifest-list li { padding: 1.3rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.exp-mi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.exp-mi-name { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; }
.exp-mi-chip { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--copper-bright); border: 1px solid rgba(242,193,78,0.45); border-radius: 2px; padding: 0.25rem 0.6rem; white-space: nowrap; }
.exp-manifest-list li p { font-size: 1.02rem; line-height: 1.6; color: var(--ice-dim); max-width: 62ch; }
.exp-mi-next .exp-mi-name { color: var(--copper-bright); }
.exp-mi-chip-soon { background: var(--copper-bright); color: var(--night); border-color: var(--copper-bright); }

/* SEND US OUT WITH A QUESTION */
.exp-ask { background: var(--night); border-bottom: 1px solid var(--line); padding: 5rem 2rem; }
.exp-ask-inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.exp-ask .section-eyebrow::before, .exp-ask .section-eyebrow::after { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--copper-bright); vertical-align: middle; }
.exp-ask .section-eyebrow::before { margin-right: 0.7rem; }
.exp-ask .section-eyebrow::after { margin-left: 0.7rem; }
.exp-ask-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; margin: 0.7rem 0 1.2rem; }
.exp-ask-lead { font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.6; color: var(--ice); margin-bottom: 1.8rem; }
.exp-ask-btn { display: inline-block; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--night); background: var(--copper-bright); padding: 0.95rem 2.3rem; border-radius: 2px; transition: background 0.15s ease; }
.exp-ask-btn:hover { background: var(--copper); color: var(--night); }
.exp-ask-btn::after { content: "\2192"; display: inline-block; margin-left: 0.6rem; transition: transform 0.18s ease; }
.exp-ask-btn:hover::after { transform: translateX(4px); }
.exp-ask-fine { margin-top: 1.1rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ice-dim); }

/* organizations door in the press band */
.exp-press-org { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.7; color: var(--ice); }

@media (max-width: 720px) {
  .exp-field { margin: 0 1.4rem 1rem 1.4rem; }
  .exp-manifest, .exp-ask { padding: 3.6rem 1.4rem; }
  .exp-mi-name { font-size: 1.2rem; }
}

/* slim share row */
.exp-sharerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 1.6rem; padding: 2rem 1.4rem; background: var(--night-2); border-top: 1px solid var(--line); text-align: center; }
.exp-sharerow p { font-family: var(--serif); font-size: 1.05rem; color: var(--ice); }
.exp-sharerow-btn { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); background: none; border: 1px solid rgba(233,241,236,0.35); border-radius: 2px; padding: 0.7rem 1.5rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.exp-sharerow-btn:hover { border-color: var(--copper-bright); color: var(--copper-bright); }

/* PASS IT ON share band */
.exp-shareband { background: var(--night-2); border-top: 1px solid var(--line); padding: 5rem 2rem; }
.exp-shareband-inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.exp-shareband-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: 0.01em; margin: 0.7rem 0 1.1rem; }
.exp-shareband-lead { font-size: 1.08rem; line-height: 1.6; color: var(--ice); margin-bottom: 1.8rem; }
.exp-shareband-btn { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); background: none; border: 1px solid rgba(233,241,236,0.35); border-radius: 2px; padding: 0.95rem 2.3rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.exp-shareband-btn:hover { border-color: var(--copper-bright); color: var(--copper-bright); }

@media (max-width: 720px) {
  .exp-hero-inner { padding-left: 2rem; } .exp-hero-cue { right: 1.4rem; }
  .exp-why { padding-left: 1.4rem; padding-right: 1.4rem; }
  /* give phones the landscape: a real photo band up top, text on solid ground below */
  .exp-hero { display: block; min-height: 0; padding-top: 0; }
  .exp-hero-photo { position: relative; inset: auto; height: 46svh; min-height: 300px; }
  .exp-hero-photo img { filter: brightness(0.78); }
  .exp-hero-photo::after { background: linear-gradient(to top, rgba(12,21,18,1) 0%, rgba(12,21,18,0.2) 26%, rgba(12,21,18,0.1) 70%, rgba(12,21,18,0.5) 100%); }
  .exp-hero-inner { padding: 0.4rem 1.4rem 2.8rem 1.4rem; }
  .exp-hero-cue { display: none; }
  .exp-map-legend { left: 0.7rem; bottom: 2.4rem; }

  /* ---- mobile sweep: rhythm, type, tap targets ---- */
  .exp-status-kicker { font-size: 0.72rem; letter-spacing: 0.12em; }
  .exp-status-title { font-size: clamp(2.7rem, 12.5vw, 3.4rem); }
  .exp-status-dispatch { font-size: 1.12rem; }
  .exp-why, .exp-getting, .exp-dark, .exp-follow, .exp-stakes, .exp-shareband, .exp-press, .exp-cta { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .exp-getting, .exp-stakes, .exp-shareband, .exp-press, .exp-dark, .exp-follow { padding-left: 1.4rem; padding-right: 1.4rem; }
  .exp-timeline { padding: 3.6rem 1.4rem; }
  .exp-ladder li { padding: 1.25rem 1.2rem 1.4rem 1.2rem; }
  .exp-mapwrap { height: 64svh; min-height: 420px; }
  .mast-nav a { padding: 0.35rem 0; }
}
@media (max-width: 480px) {
  /* one clean column: full-width, centered CTAs */
  .exp-hero-cta { flex-direction: column; align-items: stretch; }
  .exp-hero-btn, .exp-hero-btn-ghost { text-align: center; }
  .exp-follow-btn, .exp-shareband-btn, .exp-press-btn, .exp-press-ghost { display: block; width: 100%; text-align: center; }
  .exp-press-cta { flex-direction: column; }
  .exp-day { grid-template-columns: 18px 1fr; gap: 0.9rem; }
  .exp-day-body { padding-bottom: 2.1rem; }
  .exp-nugget { font-size: 0.92rem; }
}

/* map attribution: dark, quiet, ours */
.exp-mapwrap .maplibregl-ctrl-attrib { background: rgba(12,21,18,0.85); border: 1px solid var(--line); border-radius: 2px; }
.exp-mapwrap .maplibregl-ctrl-attrib, .exp-mapwrap .maplibregl-ctrl-attrib a { color: var(--ice-dim); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em; text-decoration: none; }
.exp-mapwrap .maplibregl-ctrl-attrib-button { filter: invert(0.85); }

/* ============ UNIVERSAL MTJP FOOTER ============ */
.uf { border-top: 1px solid var(--line); background: var(--night); }
.uf-sub { border-bottom: 1px solid var(--line); padding: 4.5rem 2rem; background: var(--night-2); }
.uf-sub-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.uf-kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--copper-bright); margin-bottom: 1rem; }
.uf-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.9rem); text-transform: uppercase; line-height: 1.02; letter-spacing: 0.01em; margin-bottom: 1.1rem; }
.uf-lead { font-size: 1.08rem; line-height: 1.6; color: var(--ice); max-width: 54ch; margin: 0 auto 1.8rem auto; }
.uf-form { display: flex; gap: 0.6rem; max-width: 30rem; margin: 0 auto; }
.uf-form input { flex: 1; background: var(--night); border: 1px solid var(--line); border-bottom: 2px solid var(--copper); color: var(--ice); font-family: var(--serif); font-size: 1rem; padding: 0.85rem 1rem; }
.uf-form input:focus { outline: 2px solid var(--river); outline-offset: 2px; }
.uf-form button { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night); background: var(--copper-bright); border: none; padding: 0 1.6rem; cursor: pointer; }
.uf-form button:hover { background: var(--copper); } .uf-form button:disabled { opacity: 0.6; cursor: default; }
.uf-msg { margin-top: 1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--ice-dim); min-height: 1rem; }
.uf-msg.uf-ok { color: var(--river); font-size: 1rem; }
.uf-fine { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.05em; color: var(--ice-dim); }
.uf-main { max-width: 72rem; margin: 0 auto; padding: 3rem 2rem 2rem 2rem; display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: flex-start; justify-content: space-between; }
.uf-brand { max-width: 34rem; }
.uf-mark { width: 54px; height: auto; display: block; margin-bottom: 1rem; opacity: 0.95; }
.uf-tag { font-size: 0.95rem; line-height: 1.6; color: var(--ice-dim); }
.uf-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-content: flex-start; }
.uf-nav a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-dim); text-decoration: none; }
.uf-nav a:hover { color: var(--ice); }
.uf-legal { border-top: 1px solid var(--line); max-width: 72rem; margin: 0 auto; padding: 1.4rem 2rem 2.4rem 2rem; }
.uf-legal p { font-family: var(--mono); font-size: 0.66rem; line-height: 1.7; letter-spacing: 0.03em; color: var(--ice-dim); }
@media (max-width: 720px) { .uf-form { flex-direction: column; } .uf-form button { padding: 0.8rem; } }

/* ============ MASTHEAD LOGO ============ */
.masthead-left { flex-direction: row !important; align-items: center; gap: 0.75rem; }
.masthead-logo { display: flex; flex: none; }
.masthead-logo img { height: 30px; width: auto; display: block; opacity: 0.95; }
.masthead-logo:hover img { opacity: 1; }
.masthead-titles { display: flex; flex-direction: column; gap: 0.1rem; }
@media (max-width: 720px) { .masthead-logo img { height: 26px; } }

/* ============ MILLION-DOLLAR PASS: fused route scrolly, atmosphere ============ */

/* film grain over everything, barely there */
body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 2000; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }

/* gold progress thread */
.exp-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--copper-bright); z-index: 2001; }

/* route section frame */
.exp-route { border-bottom: 1px solid var(--line); }
.exp-maphead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding: 4rem 2rem 1.6rem 4.5rem; }
.exp-maphead .section-title { margin-bottom: 0; }
.exp-maphead-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; padding-bottom: 0.3rem; }
.exp-maphead-co, .exp-maphead-sun { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ice-dim); }
.exp-maphead-sun { color: var(--copper-bright); }
.exp-tour-btn { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night); background: var(--copper-bright); border: none; border-radius: 2px; padding: 0.65rem 1.3rem; cursor: pointer; transition: background 0.15s ease; }
.exp-tour-btn:hover { background: var(--copper); }
.exp-tour-btn.on { background: none; color: var(--copper-bright); border: 1px solid var(--copper-bright); }

/* the grid: cards left, sticky map right (desktop) */
.exp-route-grid { display: grid; grid-template-columns: minmax(0, 34rem) 1fr; gap: 0 2.5rem; align-items: start; padding: 0 2rem 0 4.5rem; }
.exp-route-mapcol { grid-column: 2; grid-row: 1; position: sticky; top: 1.2rem; height: calc(100vh - 2.4rem); z-index: 5; }
.exp-route-cards { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding: 1rem 0 4rem 0; }
.exp-route .exp-mapwrap { position: relative; height: 100%; min-height: 460px; border: 1px solid var(--line); }
.exp-mapwrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 0 0 110px rgba(4, 9, 7, 0.6); }

/* tour chip */
.exp-tour-chip { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 6; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ice); background: rgba(12,21,18,0.88); border: 1px solid var(--copper-bright); border-radius: 2px; padding: 0.5rem 1rem; white-space: nowrap; }

/* expedition dashes on section eyebrows */
.exp-maphead .section-eyebrow::before, .exp-getting .section-eyebrow::before, .exp-stakes .section-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; background: var(--copper-bright); margin-right: 0.7rem; vertical-align: middle; }
.exp-dark .section-eyebrow::before, .exp-dark .section-eyebrow::after,
.exp-follow .section-eyebrow::before, .exp-follow .section-eyebrow::after,
.exp-press .section-eyebrow::before, .exp-press .section-eyebrow::after {
  content: ""; display: inline-block; width: 22px; height: 2px; background: var(--copper-bright); vertical-align: middle; }
.exp-dark .section-eyebrow::before, .exp-follow .section-eyebrow::before, .exp-press .section-eyebrow::before { margin-right: 0.7rem; }
.exp-dark .section-eyebrow::after, .exp-follow .section-eyebrow::after, .exp-press .section-eyebrow::after { margin-left: 0.7rem; }

/* manifest lines on the ladder */
.exp-ladder-route { display: block; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--copper-bright); }

/* hero coordinates stamp */
.exp-hero-coords { position: absolute; left: 4.5rem; bottom: 0.6rem; z-index: 3; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.12em; color: rgba(233,241,236,0.75); text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

/* button hover arrows */
.exp-hero-btn::after, .exp-press-btn::after { content: "\2192"; display: inline-block; margin-left: 0.6rem; transition: transform 0.18s ease; }
.exp-hero-btn:hover::after, .exp-press-btn:hover::after { transform: translateX(4px); }

/* radar sweep while in transit */
.exp-beacon-moving::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255,90,77,0.5) 0deg, rgba(255,90,77,0) 70deg, rgba(255,90,77,0) 360deg); animation: expsweep 2.2s linear infinite; }
@keyframes expsweep { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .exp-maphead { padding: 2.6rem 1.4rem 1.2rem 1.4rem; }
  /* phone: map pinned as a band up top, cards slide under it */
  .exp-route-grid { display: block; padding: 0; }
  .exp-route-mapcol { position: sticky; top: 7.2rem; height: 40svh; min-height: 300px; }
  .exp-route .exp-mapwrap { box-shadow: 0 14px 30px rgba(4, 9, 7, 0.55); }
  .exp-route .exp-mapwrap { min-height: 330px; border-left: none; border-right: none; }
  .exp-route-cards { padding: 1.6rem 1.4rem 3rem 1.4rem; background: var(--night); }
  .exp-map-legend { display: none; }
  .exp-tour-chip { font-size: 0.6rem; padding: 0.4rem 0.7rem; }
  .exp-hero-coords { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .exp-beacon-moving::before { animation: none; display: none; }
}

/* ============ INLINE EXPLAINER ============
   Will, 7/29: claim the strong phrasing ("publicly funded") and put the full,
   honest picture one hover away rather than softening the claim itself. Hover
   on pointer devices, click/Enter everywhere, so it works on touch. */
.ex {
  position: relative;
  display: inline;
  font: inherit;
  color: var(--copper-bright);
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  border-bottom: 1px dotted var(--copper-bright);
}
.ex::after {
  content: "*";
  font-family: var(--mono);
  font-size: 0.72em;
  vertical-align: super;
  margin-left: 0.05em;
}
.ex-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 0.6rem);
  z-index: 60;
  width: min(30rem, calc(100vw - 3rem));
  background: var(--night-2);
  border: 1px solid var(--copper);
  border-left-width: 3px;
  padding: 1rem 1.15rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ice);
  text-align: left;
  text-transform: none;
  cursor: auto;
  display: none;
}
.ex-pop strong { color: var(--copper-bright); font-weight: 500; }
.ex[aria-expanded="true"] + .ex-pop { display: block; }
@media (hover: hover) {
  .ex:hover + .ex-pop, .ex:focus-visible + .ex-pop { display: block; }
}
.ex-wrap { position: relative; display: inline; }

/* A revealed .rv element keeps an identity transform forever, and a transform
   creates a stacking context: it trapped the explainer popup underneath the
   hero buttons no matter how high its z-index went. Lift any block that holds
   an explainer above its later siblings. */
.exp-status-dispatch { position: relative; z-index: 12; }
:where(p, li, h2, h3, div):has(.ex-wrap) { position: relative; z-index: 12; }
.ex-pop.ex-pop-up { top: auto; bottom: calc(100% + 0.6rem); }

/* ---------------------------------------------------------------------------
   LAUNCH CONFORM (2026-07-29): the mantra line, the WHY NOW timeline, the
   hedge block. Copy conform to Will's Substack announcement.
   --------------------------------------------------------------------------- */

/* The mantra sits under the WHO PAYS headline, above the stat grid. */
.exp-stakes-lead {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-bright);
}

/* WHY NOW: dated beats on a rail. The page had no timeline anywhere. */
.exp-whynow {
  background: var(--night-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 5rem 2rem;
}
.exp-whynow-inner { max-width: 52rem; margin: 0 auto; }
.exp-tl { margin-top: 2.4rem; list-style: none; }
.exp-tl-item {
  position: relative;
  padding: 0 0 1.9rem 1.9rem;
  border-left: 1px solid var(--line);
}
.exp-tl-item:last-child { padding-bottom: 0.4rem; border-left-color: transparent; }
.exp-tl-item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.42rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper-bright);
}
.exp-tl-when {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 0.45rem;
}
.exp-tl-what { font-size: 1.08rem; line-height: 1.68; color: var(--ice); }
.exp-whynow-close {
  margin-top: 1.9rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--ice);
  border-left: 2px solid var(--copper);
  padding-left: 1.1rem;
}


/* THE INVESTIGATION (2026-09-15): the chapter index on the public page.
   Same rail vocabulary as WHY NOW, one entry per chapter, no cards. */
.exp-inv {
  background: var(--night);
  border-top: 1px solid var(--line);
  padding: 5rem 2rem;
}
.exp-inv-inner { max-width: 52rem; margin: 0 auto; }
.exp-inv-lead { margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.68; color: var(--ice-dim); max-width: 44rem; }
.exp-inv-list { list-style: none; margin-top: 2.4rem; border-top: 1px solid var(--line); }
.exp-inv-item { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.exp-inv-part {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper-bright); margin-bottom: 0.45rem;
}
.exp-inv-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05; color: var(--ice); text-decoration: none;
  display: inline-block;
}
.exp-inv-title::after { content: " \2192"; color: var(--copper); font-weight: 400; }
.exp-inv-title:hover { color: var(--river); }
.exp-inv-dek { margin-top: 0.55rem; font-size: 1.05rem; line-height: 1.62; color: var(--ice-dim); max-width: 44rem; }
.exp-inv-next { margin-top: 1.6rem; font-size: 1rem; line-height: 1.65; color: var(--ice-dim); max-width: 44rem; }
.exp-inv-next-k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--copper-bright); margin-right: 0.6rem; }
@media (max-width: 720px) {
  .exp-inv { padding: 3.6rem 1.4rem; }
  .exp-inv-lead, .exp-inv-dek { font-size: 1rem; }
}

/* Chapter photographs (2026-09-15): a pair or a single wide frame, both
   allowed to break the reading measure above 1100px like the exhibits. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.4rem 0; }
@media (min-width: 1100px) { .pair { width: 56rem; margin-left: -5rem; } }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }
.pair figure { margin: 0; }
.pair img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.pair figcaption, .photo-wide figcaption {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  line-height: 1.7; color: var(--ice-dim); margin-top: 0.6rem;
}
.pair figcaption b, .photo-wide figcaption b { color: var(--tundra); font-weight: 500; display: block; }
.photo-wide { margin: 2.4rem 0; }
@media (min-width: 1100px) { .photo-wide { width: 56rem; margin-left: -5rem; } }
.photo-wide img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }

/* Investigation index thumbnails (2026-09-15) */
.exp-inv-item { display: grid; grid-template-columns: 1fr 12rem; gap: 1.6rem; align-items: start; }
.exp-inv-item > div { min-width: 0; }
.exp-inv-thumb { margin: 0.35rem 0 0; }
.exp-inv-thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: 1px solid var(--line); }
@media (max-width: 720px) {
  .exp-inv-item { grid-template-columns: 1fr; gap: 0.9rem; }
  .exp-inv-thumb { order: -1; }
}

/* THE ODDS: the honest counterweight to asking people to follow along. */
.exp-hedge {
  background: var(--night);
  border-top: 1px solid var(--line);
  padding: 5rem 2rem;
}
.exp-hedge-inner { max-width: 44rem; margin: 0 auto; }
.exp-hedge-title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0.7rem 0 1.3rem;
}
.exp-hedge-inner p { font-size: 1.12rem; line-height: 1.68; color: var(--ice); }
.exp-hedge-close { margin-top: 1.2rem; color: var(--ice-dim); }

@media (max-width: 720px) {
  .exp-whynow, .exp-hedge { padding: 3.6rem 1.4rem; }
  .exp-tl-item { padding-left: 1.4rem; padding-bottom: 1.6rem; }
  .exp-tl-what, .exp-hedge-inner p { font-size: 1.05rem; }
}

/* ============ FAQ (added 2026-08-17) ============
   Every answer carries its source. The citation line is the point of the
   section, not decoration: it is what separates this from every other
   "what is the Ambler Road" page on the internet. Built on <details> so it
   works with no JS, is keyboard-operable, and is findable by in-page search
   when open. */
.exp-faq {
  padding: clamp(4rem, 9vw, 7rem) 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--night-2);
}
.exp-faq-inner { max-width: 46rem; margin: 0 auto; }
.exp-faq-lead {
  color: var(--ice-dim);
  margin-bottom: 2.6rem;
  max-width: 38rem;
}
.exp-faq-list { margin-top: 2rem; }

.faq-q {
  border-top: 1px solid var(--line);
}
.faq-q:last-of-type { border-bottom: 1px solid var(--line); }

.faq-q > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ice);
  transition: color 0.18s ease;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary:hover { color: var(--copper-bright); }
.faq-q > summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.85rem;
  width: 0.72rem;
  height: 0.72rem;
  border-right: 2px solid var(--river);
  border-bottom: 2px solid var(--river);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.faq-q[open] > summary::after { transform: rotate(-135deg); top: 2.15rem; }

.faq-a { padding: 0 0 1.6rem; }
.faq-a > p { margin-bottom: 0.95rem; }
.faq-a > p:last-child { margin-bottom: 0; }

/* The source line. Mono, quiet, always present. */
.faq-src {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--ice-dim);
  border-left: 2px solid var(--copper);
  padding: 0.45rem 0 0.45rem 0.85rem;
  margin-top: 1.15rem;
}
.faq-src b { color: var(--tundra); font-weight: 600; }

/* A pulled figure inside an answer, for the ones that turn on a number. */
.faq-fig {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--copper-bright);
  display: block;
  margin: 0.4rem 0 0.5rem;
}
.faq-fig-l {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ice-dim);
  margin-bottom: 1.1rem;
}

/* The "we asked it because it is hard" tag on steelman questions. */
.faq-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--night);
  background: var(--tundra);
  padding: 0.16rem 0.5rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 0.6rem;
  position: relative;
  top: -0.15rem;
}

@media (max-width: 640px) {
  .faq-q > summary { padding-right: 2rem; }
  .faq-q > summary::after { top: 1.6rem; }
  .faq-q[open] > summary::after { top: 1.85rem; }
}

/* ============ DOWNLOADS (added 2026-08-17) ============
   A citable artifact, not a lead magnet dressed as one. Ungated on purpose:
   the moat is the reporting and the engine, and a journalist who cites the
   briefing cites us. */
.exp-dl {
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
  border-top: 1px solid var(--line);
}
.exp-dl-inner { max-width: 46rem; margin: 0 auto; }
.dl-card {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  background: var(--night-2);
  padding: 1.5rem 1.6rem;
  margin-top: 1.6rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dl-card:hover { background: var(--night-3); border-left-color: var(--copper-bright); }
.dl-ico {
  flex: 0 0 auto;
  width: 2.6rem; height: 3.2rem;
  border: 1px solid var(--copper);
  border-radius: 2px;
  position: relative;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--copper);
}
.dl-body { flex: 1 1 auto; min-width: 0; }
.dl-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.dl-title a { text-decoration: none; color: var(--ice); }
.dl-title a:hover { color: var(--copper-bright); }
.dl-desc { font-size: 0.96rem; color: var(--ice-dim); margin-bottom: 0.7rem; }
.dl-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  color: var(--ice-dim);
  text-transform: uppercase;
}
.dl-meta span + span::before { content: " · "; color: var(--copper); }
@media (max-width: 560px) {
  .dl-card { flex-direction: column; gap: 1rem; }
}

/* ============ ATLAS DOORWAY (added 2026-08-20) ============
   The full interrogable map has been live and unlinked since the 7/29
   pre-launch ruling. This is the way in. */
.exp-atlas-cta {
  margin: 2.2rem auto 0;
  max-width: 46rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  background: var(--night-2);
  display: flex;
  gap: 1.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.exp-atlas-cta-body { flex: 1 1 22rem; min-width: 0; }
.exp-atlas-cta h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}
.exp-atlas-cta p { font-size: 0.98rem; color: var(--ice-dim); }
.exp-atlas-btn {
  flex: 0 0 auto;
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--night);
  background: var(--copper-bright);
  padding: 0.85rem 1.5rem;
  border-radius: 2px;
  transition: background 0.18s ease;
}
.exp-atlas-btn:hover { background: var(--copper); color: var(--night); }
@media (max-width: 560px) { .exp-atlas-btn { width: 100%; text-align: center; } }

/* ============ RUNNING TALLY (added 2026-08-20) ============
   The counter never resets. A reader watching it climb is the argument:
   any single element is arguable, the accumulation is not. */
#tally {
  position: fixed;
  right: 1.1rem;
  /* Sits below the masthead rather than at the foot, because the map legend
     owns the bottom edge and the two were colliding. */
  top: 6.2rem;
  z-index: 40;
  max-width: 15.5rem;
  background: rgba(12, 21, 18, 0.92);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  padding: 0.85rem 0.95rem;
  backdrop-filter: blur(6px);
}
.tally-h {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.17em;
  color: var(--copper);
  margin-bottom: 0.55rem;
}
#tally-list { list-style: none; margin: 0; padding: 0; }
#tally-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.16rem 0;
  border-top: 1px solid rgba(233, 241, 236, 0.07);
}
#tally-list li:first-child { border-top: none; }
#tally-list b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1;
  color: var(--copper-bright);
  min-width: 3.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#tally-list span {
  font-family: var(--mono);
  font-size: 0.53rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--ice-dim);
  text-transform: uppercase;
}
.tally-note {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  color: var(--ice-dim);
  opacity: 0.72;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(233, 241, 236, 0.07);
}
@media (max-width: 820px) {
  #tally { right: 0.6rem; top: 5rem; max-width: 10.5rem; padding: 0.55rem 0.65rem; }
  #tally-list b { font-size: 0.95rem; min-width: 2.8rem; }
  #tally-list span { font-size: 0.48rem; }
  .tally-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { #tally { backdrop-filter: none; } }

/* Legend swatches for the layers added 2026-08-20. Colours match main.js
   exactly; copper stays reserved for the road itself. */
.lg-asb::before    { background: #d64535; }
.lg-pf::before     { background: #6f8fa6; }
.lg-claims::before { background: #c07be0; }

/* Door out of a scroll chapter into its depth page (added 2026-09-11). The door
   rule: mono, small, subordinate, never a button. Leaving must never compete
   with continuing, because the scroll's whole argument is accumulation. It
   inherits the step card's backdrop so it reads as part of the card. */
.step > .step-door {
  width: var(--card-w);
  background: rgba(12, 21, 18, 0.88);
  backdrop-filter: blur(6px);
  padding: 0.15rem 1.4rem 0.9rem;
  margin-top: -0.2rem;
}
.step > .step-door a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 166, 54, 0.45);
  padding-bottom: 0.15rem;
  line-height: 1.7;
}
.step > .step-door a:hover { color: var(--river); border-bottom-color: var(--river); }
.page-body .ledger-list { font-family: var(--mono); font-size: 0.78rem; line-height: 1.9; letter-spacing: 0.02em; color: var(--ice); margin: 0 0 1.4rem; }
.prose-block > .people-door {
  width: var(--card-w);
  background: rgba(12, 21, 18, 0.88);
  backdrop-filter: blur(6px);
  padding: 0.15rem 1.4rem 0.9rem;
  margin-top: -0.2rem;
}
.prose-block > .people-door a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 166, 54, 0.45);
  padding-bottom: 0.15rem;
  line-height: 1.7;
}
.prose-block > .people-door a:hover { color: var(--river); border-bottom-color: var(--river); }

/* ============================================================================
   INVESTIGATION CHAPTER PAGES (added 2026-09-11)

   The depth layer of the investigation: one subject per page, exhaustive,
   every figure checkable. No second design system. This reuses the arctic
   dusk palette, keeps copper for the road and the road alone, and holds to
   the rule that MONO TYPE MEANS THIS IS CHECKABLE. If it is in IBM Plex Mono
   on these pages, the reader can go look it up.
   ========================================================================= */

/* --- Hero. Some chapters are paper, not places, and a stock landscape over
   a securities filing would be a lie about what the reader is getting. The
   no-photo hero is deliberate. --- */
.ch-hero {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(217, 166, 54, 0.09), transparent 62%),
    var(--night);
}
.ch-hero-inner { max-width: 46rem; margin: 0 auto; padding: 5.5rem 2rem 3.2rem; }
.ch-part {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tundra);
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: baseline;
  margin-bottom: 1.4rem;
}
.ch-part b { color: var(--ice-dim); font-weight: 400; }
.ch-part i {
  font-style: normal; color: var(--copper-bright);
  border: 1px solid rgba(217, 166, 54, 0.4); padding: 0.18rem 0.5rem;
  font-size: 0.625rem;
}
.ch-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.92;
  text-transform: uppercase; letter-spacing: 0.005em; margin-bottom: 1rem;
}
.ch-standfirst { font-size: 1.22rem; line-height: 1.55; max-width: 40ch; color: var(--ice); }
.ch-byline {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ice-dim);
  margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
  line-height: 1.9;
}
.ch-byline b { color: var(--tundra); font-weight: 500; }

/* --- The findings box. NYT form: the reader learns the finding before they
   invest the scroll. --- */
.finding {
  border: 1px solid rgba(217, 166, 54, 0.38);
  background: var(--night-2);
  padding: 1.6rem 1.7rem 1.5rem;
  margin: 0 0 2.6rem;
}
.finding-h {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--copper-bright); margin-bottom: 1rem;
}
.finding ol { margin: 0; padding: 0; list-style: none; counter-reset: fnd; }
.finding li {
  counter-increment: fnd; position: relative;
  padding-left: 2.3rem; margin-bottom: 0.95rem; font-size: 1.02rem; line-height: 1.55;
}
.finding li:last-child { margin-bottom: 0; }
.finding li::before {
  content: counter(fnd, decimal-leading-zero);
  position: absolute; left: 0; top: 0.12rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--tundra);
}

/* --- The figure. One number, stated once, at the size it deserves. --- */
.figure {
  margin: 2.4rem 0;
  border-left: 3px solid var(--copper);
  padding: 0.2rem 0 0.2rem 1.4rem;
}
.figure-n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 4.6rem); line-height: 0.95;
  color: var(--copper-bright); display: block;
}
.figure-l {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  line-height: 1.75; color: var(--ice-dim); text-transform: uppercase;
  display: block; margin-top: 0.6rem; max-width: 46ch;
}

/* --- Citations. The visual promise. --- */
.cite {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.7;
  color: var(--ice-dim); border-left: 2px solid var(--line);
  padding-left: 0.9rem; margin: 0.9rem 0 1.6rem;
}
.cite b { color: var(--tundra); font-weight: 500; }
.cite a { color: var(--ice-dim); text-decoration-color: var(--line); }
/* Source links (2026-09-15): every document named in a citation links to
   the source, at the page where a PDF allows it. */
a.srcl { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(233,241,236,0.28); }
a.srcl:hover { color: var(--river); border-bottom-color: var(--river); }
.doc-list a.srcl { color: var(--ice); }
.cite a:hover { color: var(--river); }

/* --- The plain ledger table. Its power is that it looks like a document. --- */
.ledger { font-size: 0.95rem; }
.ledger th { white-space: nowrap; }
.ledger td:first-child {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ice-dim);
  white-space: normal; letter-spacing: 0.04em; text-transform: uppercase;
  width: 34%; padding-right: 1.4rem;
}
.ledger td:first-child.n { color: var(--tundra); white-space: nowrap; width: 22%; }
.ledger tr.mark td { background: rgba(217, 166, 54, 0.07); }
.ledger tr.mark td:first-child { color: var(--copper-bright); }

/* --- The instrument diagram. Money moves, not places, so this is the one
   place on the site where a diagram replaces a map. --- */
/* The diagram is the one element allowed out of the reading measure: at
   46rem the mono labels land near 9px and stop being readable. */
.flow { margin: 2.4rem 0; }
@media (min-width: 1100px) {
  .flow { width: 56rem; margin-left: -5rem; }
}
.flow svg { width: 100%; height: auto; display: block; }
.flow-cap {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--ice-dim); line-height: 1.7; margin-top: 0.9rem;
}

/* --- Two triggers, side by side, because the point is that there are two. --- */
.triggers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0; }
.triggers-3 { grid-template-columns: repeat(3, 1fr); }
.trigger {
  border: 1px solid var(--line); border-top: 3px solid var(--copper);
  background: var(--night-2); padding: 1.3rem 1.3rem 1.4rem;
}
.trigger-k {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em;
  color: var(--tundra); text-transform: uppercase; display: block; margin-bottom: 0.6rem;
}
.trigger h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 0.5rem;
}
.trigger p { font-size: 0.98rem; line-height: 1.55; color: var(--ice); }

/* --- A quotation that is doing work, not decoration. --- */
.pull {
  border-left: 3px solid var(--river);
  padding: 0.3rem 0 0.3rem 1.3rem; margin: 2rem 0;
  font-size: 1.28rem; line-height: 1.5; color: var(--ice);
}
.pull cite {
  display: block; margin-top: 0.9rem; font-style: normal;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--ice-dim); text-transform: uppercase; line-height: 1.7;
}

/* --- What this chapter does not say. Required by the form. --- */
.fair {
  border: 1px solid var(--line); background: var(--night-2);
  padding: 1.5rem 1.6rem; margin: 2.4rem 0;
}
.fair-h {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ice-dim); margin-bottom: 0.9rem;
}
.fair p { font-size: 1rem; line-height: 1.6; }
.fair p + p { margin-top: 0.9rem; }
.fair b { color: var(--copper-bright); font-weight: 600; }

/* --- Doors. Subordinate by design: leaving must never compete with
   continuing, so a door is mono, small, and never a button. --- */
.doors {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin: 2.6rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.door {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ice-dim); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
}
.door:hover { color: var(--river); }
.door span { color: var(--tundra); }

/* --- The action that belongs to THIS subject. Never a generic donate box. --- */
.chapter-act {
  margin-top: 3.4rem; border-top: 2px solid var(--copper); padding-top: 1.8rem;
}
.chapter-act h2 { border: 0; padding-top: 0; margin-top: 0; }
.chapter-act .ask { font-size: 1.05rem; }
.chapter-act .ask + .ask { margin-top: 1rem; }
.act-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; align-items: center; }

@media (max-width: 640px) {
  .ch-hero-inner { padding: 4rem 1.4rem 2.4rem; }
  .ch-standfirst { font-size: 1.08rem; max-width: none; }
  .triggers { grid-template-columns: 1fr; }
  .finding { padding: 1.2rem 1.2rem 1.1rem; }
  .ledger td:first-child { width: 38%; }
  /* nowrap on the label column forces the whole document wider than a phone
     viewport, which scrolls every other element sideways with it. Let it wrap. */
  .ledger td:first-child, .ledger td:first-child.n { white-space: normal; }
  /* Three-column ledgers overflow a phone if the header row refuses to wrap.
     Measured 2026-09-11: scrollWidth 480 against a 390 viewport. */
  .ledger th { white-space: normal; }
  .page-body table { font-size: 0.86rem; }
  .page-body th, .page-body td { padding-right: 0.6rem; }
  /* Same trap in the body tables: case.html's cost table ran 417px on a 390
     phone (2026-09-28) because its first column would not wrap. */
  .page-body td:first-child { white-space: normal; }
  .figure-l { max-width: none; }
}

/* The instrument diagram does not survive being scaled to a phone: 10px mono
   at 44% is unreadable. Under 640px the same transaction is stated as a plain
   list instead of shrunk into illegibility. */
.flow-alt { display: none; }
@media (max-width: 640px) {
  .flow svg { display: none; }
  .flow-alt { display: block; border: 1px solid var(--line); background: var(--night-2); padding: 1.1rem 1.2rem; }
  .flow-alt li { list-style: none; margin: 0 0 0.9rem; padding-left: 0; font-size: 0.95rem; line-height: 1.5; }
  .flow-alt li:last-child { margin-bottom: 0; }
  .flow-alt b {
    display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--tundra); font-weight: 500; margin-bottom: 0.25rem;
  }
  .flow-alt ul { margin: 0; }
}

/* --- EXHIBIT: a federal document's own figure, reproduced (added 2026-09-11).
   Not our graphic and it must never be mistaken for one, so it sits in a frame
   with a mono label that names the document it came out of. We do not recolour
   an agency's exhibit to fit our palette; that would be editing evidence. --- */
.exhibit { margin: 2.4rem 0; }
@media (min-width: 1100px) {
  .exhibit { width: 56rem; margin-left: -5rem; }
}
.exhibit-frame {
  border: 1px solid var(--line);
  background: var(--night-2);
  padding: 0.7rem;
}
.exhibit-frame img { display: block; width: 100%; height: auto; }
.exhibit-label {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tundra);
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between;
  margin-bottom: 0.7rem;
}
.exhibit-label b { color: var(--ice-dim); font-weight: 400; }
.exhibit-cap {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--ice-dim); line-height: 1.7; margin-top: 0.9rem;
}

/* 2026-09-15: wide ledgers (3+ columns) stack on phones. Each row becomes a
   block; the header row is dropped; the first cell reads as the row's label. */
@media (max-width: 640px) {
  .ledger.stack, .ledger.stack tbody { display: block; }
  .ledger.stack tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .ledger.stack tr:first-child { display: none; }
  .ledger.stack td { display: block; border: 0; padding: .15rem 0; }
  .ledger.stack td:first-child { padding-bottom: .35rem; }
  .ledger.stack td.n { text-align: left; }
}
.exp-inv-flag { margin: 0 0 1.8rem; }
.exp-inv-flag a { color: var(--copper-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ===== QUESTIONS READERS ASK (2026-09-28 SEO pass, DECISIONS 9/28) =====
   Long-tail question block on every chapter, the index FAQ component reused. */
.ch-faq { margin: 3.2rem 0 1rem; }
.ch-faq > h2 { margin-bottom: 0.6rem; }
.ch-faq .faq-q > summary { font-size: 1.05rem; }
.case-faq { max-width: 720px; margin: 0 auto; padding: 0 1.25rem 2rem; }
/* ===== THE INVESTIGATION RAIL in the shared footer (js/site-footer.js) =====
   Every chapter linked from every page with a descriptive anchor. */
.uf-rail { border-top: 1px solid var(--line); max-width: 72rem; margin: 0 auto; padding: 1.6rem 2rem 0.4rem 2rem; }
.uf-rail-h { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tundra); margin: 0 0 0.9rem; }
.uf-rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.35rem 1.4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.uf-rail-grid li { font-family: var(--serif); font-size: 0.92rem; line-height: 1.45; }
.uf-rail-grid a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.uf-rail-grid a:hover { color: var(--copper-bright); border-bottom-color: var(--copper-bright); }
.uf-rail-grid a b, .uf-rail-grid span b { font-family: var(--mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--tundra); margin-right: 0.45rem; }
.uf-rail-grid span[aria-current] { color: var(--copper-bright); }
/* H1 tail (2026-09-28): the chapter name stays the big word, the keyword line sits under it in the H1. */
.page-title-tail, .ch-title .page-title-tail { display: block; font-family: var(--display); font-weight: 600; font-size: 0.34em; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ice-dim); margin-top: 0.55em; }

/* THREE WAYS IN (2026-09-28): the front door to the story, the road visualization and the atlas. */
.exp-ways { background: var(--night); border-top: 1px solid var(--line); padding: 5rem 2rem 5.5rem; scroll-margin-top: 120px; }
.exp-ways-inner { max-width: 76rem; margin: 0 auto; }
.exp-ways-lead { margin-top: -0.6rem; font-size: 1.12rem; line-height: 1.68; color: var(--ice-dim); max-width: 44rem; }
.exp-ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2.6rem; border-top: 1px solid var(--line); }
.way { display: flex; flex-direction: column; text-decoration: none; color: var(--ice); padding: 1.6rem 1.6rem 1.8rem; border-bottom: 1px solid var(--line); }
.way + .way { border-left: 1px solid var(--line); }
/* Four pieces sit two by two, so no card is left alone on a row. */
@media (min-width: 901px) {
  .exp-ways-grid:has(> .way:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-ways-grid:has(> .way:nth-child(4):last-child) > .way:nth-child(odd) { border-left: 0; }
}
.way-still { display: block; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); background: var(--night-3); }
.way-still img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s; }
.way:hover .way-still img { transform: scale(1.03); filter: saturate(1); }
.way-k { margin-top: 1.2rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-bright); }
.way-t { margin-top: 0.4rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.02; }
.way:hover .way-t { color: var(--river); }
.way-d { margin-top: 0.6rem; font-size: 1rem; line-height: 1.6; color: var(--ice-dim); flex: 1; }
.way-go { margin-top: 1.2rem; align-self: flex-start; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); border-bottom: 1px solid var(--copper); padding-bottom: 0.2rem; }
.way-go::after { content: " \2192"; color: var(--copper); }
@media (max-width: 900px) {
  .exp-ways { padding: 3.6rem 1.4rem 4rem; }
  .exp-ways-grid { grid-template-columns: 1fr; }
  .way { padding: 1.4rem 0 1.6rem; }
  .way + .way { border-left: 0; padding-left: 0; }
}

/* FRONT PAGE, TIGHTENED 2026-09-28 (Will: "wildly long scroll"): chapter grid, short timeline, press band with the download */
.inv-grid { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.inv-grid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inv-grid a { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1.1rem 1.2rem 1.2rem; text-decoration: none; color: var(--ice); transition: background .15s; }
.inv-grid a:hover { background: rgba(233,241,236,.04); }
.inv-grid .inv-k { font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--copper-bright); }
.inv-grid b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: 1.35rem; line-height: 1.05; }
.inv-grid b::after { content: " \2192"; color: var(--copper); font-weight: 400; }
.inv-grid a:hover b { color: var(--river); }
.inv-grid em { font-style: normal; font-size: .92rem; line-height: 1.45; color: var(--ice-dim); }
.exp-inv-inner { max-width: 68rem; }
.exp-inv-flag-a { color: var(--copper-bright); text-decoration: underline; text-underline-offset: 3px; font-size: .95em; }
.exp-why { padding-top: 4rem; padding-bottom: 4rem; }
.exp-press-dl { max-width: 40rem; margin: 2.4rem auto 0; text-align: left; }
@media (max-width: 900px) { .inv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .inv-grid { grid-template-columns: 1fr; } .inv-grid a { padding: .9rem 1rem 1rem; } }

.exp-ways-more { margin-top: 1.6rem; font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--ice-dim); }
.exp-ways-more a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--copper); }
.exp-ways-more a:hover { color: var(--copper-bright); }
/* the shared subscribe band never hides under the fixed masthead when its field takes focus (phone) */
.uf-sub { scroll-margin-top: 110px; }
.uf-sub-inner { padding-top: .5rem; }


/* ============ THE ARCTIC MINE SCOPING CALL (2026-09-29) ============
   Front-page band (the hero's boxed alert was retired 10/6 08:34 PT; the
   ribbon and this band carry the ask). The band sits on a slightly lifted
   night with a copper rule, the one place on the page that asks for an action. */
.mast-nav a.nav-comment { color: var(--copper-bright); }
.exp-comment { background: var(--night-2); border-top: 2px solid var(--copper); border-bottom: 1px solid var(--line); padding: 4.6rem 2rem 4.4rem; scroll-margin-top: 120px; }
.exp-comment-inner { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.4rem 4rem; align-items: start; }
.exp-comment .section-eyebrow { color: var(--copper-bright); }
.exp-comment .section-title { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 1.2rem; }
.exp-comment-dek { font-family: var(--serif); font-size: 1.14rem; line-height: 1.66; color: var(--ice); max-width: 38rem; margin: 0 0 1.7rem; }
.exp-comment-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.exp-comment-ghost { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--copper); }
.exp-comment-ghost:hover { color: var(--copper-bright); }
.exp-comment-how { font-family: var(--serif); font-size: 0.98rem; line-height: 1.6; color: var(--ice-dim); max-width: 36rem; margin: 1.3rem 0 0; }
.exp-comment-asks { list-style: none; margin: 0.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.exp-comment-asks li { padding: 1.25rem 0 1.3rem; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--ice-dim); }
.exp-comment-asks .eca-k { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--river); margin-bottom: 0.45rem; }
.exp-comment-asks b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.12; letter-spacing: 0.01em; color: var(--ice); margin-bottom: 0.35rem; }
.exp-comment-foot { grid-column: 1 / -1; margin: 1.2rem 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.05em; line-height: 1.8; color: var(--ice-dim); }
.exp-comment-foot a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--copper); }
@media (max-width: 900px) {
  .exp-comment { padding: 3.4rem 1.4rem 3.4rem; }
  .exp-comment-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* Act page: the Arctic mine scoping module (2026-09-29). */
.act-comment { border: 1px solid var(--line); border-top: 2px solid var(--copper); background: var(--night-2); padding: 2rem 2.2rem 1.8rem; margin: 0 0 3.2rem; scroll-margin-top: 110px; }
.act-comment-k { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-bright); margin: 0 0 0.8rem; }
.page-body .act-comment h2 { margin-top: 0; }
.act-comment h3[id] { scroll-margin-top: 120px; }
.act-comment h3 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.01em; color: var(--ice); margin: 2rem 0 0.6rem; }
.act-comment-steps { margin: 1.2rem 0 1.4rem; padding-left: 1.3rem; }
.act-comment-steps li { margin: 0 0 0.7rem; line-height: 1.6; }
.act-comment-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin: 0.4rem 0 0.4rem; }
.act-comment-cta .btn-copper { font-size: 1rem; padding: 0.8rem 1.7rem; }
.act-comment-asks, .act-comment-other { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.act-comment-asks li, .act-comment-other li { padding: 0.85rem 0; border-bottom: 1px solid var(--line); line-height: 1.6; }
.act-comment-src { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ice-dim); margin: 1.2rem 0 0; }
@media (max-width: 720px) { .act-comment { padding: 1.5rem 1.1rem 1.4rem; } }

/* REPORTING FROM THE TRIP (2026-10-02). Cards are the existing .way / .pk-block; this is only the
   YouTube click-to-play facade (no request to YouTube until pressed) and the credit line. */
.yt-facade { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 1px solid var(--line); background: var(--night-3); cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.yt-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(10,16,14,.72); border: 1px solid var(--copper); transition: background .2s; }
.yt-play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--ice); }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { background: var(--copper); }
.yt-len { position: absolute; right: .5rem; bottom: .5rem; padding: .15rem .4rem; background: rgba(10,16,14,.8); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--ice); }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: #000; }
.way .yt-facade, .way .yt-frame { aspect-ratio: 16 / 9; }
.pk-block .yt-facade, .pk-block .yt-frame { margin-bottom: 1rem; }
.way-d.trip-credit { flex: 0 0 auto; margin-top: .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--copper-bright); }
#from-the-trip .way-d { flex: 0 0 auto; }
#from-the-trip .way-go { margin-top: auto; padding-top: 1.2rem; border-bottom: 0; }
#from-the-trip .way-go { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }

/* ============================================================
   THE WIRE (2026-10-05, live at /ambler-road/wire/). Design round a3
   (site/design-rounds/wire-2026-10-03/a3/wire.css) moved in here with the
   round-2 critic's faults 4 to 10 folded in: tighter rows (fault 5), one-line
   counts on a phone (4), 44px tap targets on a phone (9), the view line on a
   single-kind timeline (10), the pinned entry first (4). Also the front
   page's "Latest from the wire" strip (.fw-*). Uses the site's tokens and
   faces only. Scoped by its own class names; body.wire for the page itself.
   ============================================================ */

:root {
  /* One mark per kind, checked with the dataviz validator against --night
     (worst adjacent pair: normal-vision dE 20.8, deutan 12.1). The label
     always rides beside the mark, so the hue is never the only signal.
     News is the neutral ice; the trip wears the house gold because gold is us. */
  --k-news: #e9f1ec;
  --k-filing: #dc7434;
  --k-agency: #3dab95;
  --k-court: #9f86e8;
  --k-trip: #d9a636;
  --w-warn: #f2c14e;
  --w-down: #ff8a75;
  --w-bar-h: 50px;
  --w-faint: rgba(233, 241, 236, 0.07);
  --w-gold-line: rgba(217, 166, 54, 0.45);
  /* --w-mast0 is the masthead's full height, measured once: the page's top
     padding. --w-top is its height right now: where the filter bar sticks. */
  --w-mast0: var(--mast-h, 58px);
  --w-top: var(--mast-h, 58px);
}

body.wire { overflow-x: hidden; }
.wire-main { padding-top: calc(var(--w-mast0) + 2.6rem); min-height: 80vh; }
.w-wrap { max-width: 84rem; margin: 0 auto; padding: 0 2rem; }
.w-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* ---------- Head: title, one sentence, the freshness line ---------- */
.wt-head .w-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 0.4rem 3rem; align-items: end; }
.wt-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.015em; line-height: 0.96; font-size: clamp(2.3rem, 5vw, 3.3rem); }
.wt-lead { color: var(--ice-dim); font-size: 1.08rem; line-height: 1.55; max-width: 46rem; margin-top: 0.5rem; }
.wt-status { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.7; color: var(--ice-dim); display: flex; gap: 0.65rem; align-items: baseline; justify-content: flex-end; text-align: right; }
.wt-status a { color: var(--ice); text-decoration-color: var(--copper); }
.wt-status b { font-weight: 500; color: var(--ice); }
.wt-dot { flex: none; order: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--copper-bright); position: relative; top: -1px; }
.wt-status[data-state="fresh"] .wt-dot { animation: w-pulse 2.4s ease-in-out infinite; }
.wt-status[data-state="stale"], .wt-status[data-state="recordstale"] { color: var(--w-warn); }
.wt-status[data-state="stale"] .wt-dot, .wt-status[data-state="recordstale"] .wt-dot { background: none; box-shadow: inset 0 0 0 2px var(--w-warn); }
.wt-status[data-state="offline"] { color: var(--w-down); }
.wt-status[data-state="offline"] .wt-dot { background: none; box-shadow: inset 0 0 0 2px var(--w-down); border-radius: 0; }
.wt-status[data-state="loading"] .wt-dot { background: var(--ice-dim); }
@keyframes w-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(242, 193, 78, 0); } }
.w-review[hidden] { display: none; }
.w-review { grid-column: 1 / -1; justify-self: start; display: inline-block; margin-top: 0.8rem; padding: 0.3rem 0.6rem; border: 1px dashed var(--ice-dim); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice-dim); }

/* ---------- The clock row: quiet text, not a second button ---------- */
.w-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 1rem 0 0; padding: 0.45rem 0 0.45rem 0.9rem; border-left: 2px solid var(--copper); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ice-dim); }
.w-clock b { font-weight: 500; color: var(--copper-bright); }
.w-clock .w-clock-t { color: var(--ice); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
.w-clock:hover .w-clock-t { color: var(--copper-bright); }

/* ---------- Filters: the nav's own underline, not pills ---------- */
.wf { position: sticky; top: var(--w-top); z-index: 40; background: var(--night); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: top 0.18s ease; }
.wf-in { max-width: 84rem; margin: 0 auto; padding: 0 2rem; display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem; min-height: var(--w-bar-h); position: relative; }
.wf-chips { display: flex; align-items: stretch; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.wf-chips::-webkit-scrollbar { display: none; }
.wf-chip { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice-dim); background: none; border: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent; padding: 0 0.1rem; cursor: pointer; white-space: nowrap; }
.wf-chip:hover { color: var(--ice); }
.wf-chip[aria-pressed="true"] { color: var(--ice); border-bottom-color: var(--copper); }
.wf-chip b { font-weight: 400; color: var(--ice-dim); letter-spacing: 0.04em; }
.wf-chip[aria-pressed="true"] b { color: var(--copper-bright); }
.wf-chip i, .w-kind i { flex: none; width: 7px; height: 7px; background: var(--kc, var(--ice-dim)); display: inline-block; }
.wf-chip .wf-err { width: 7px; height: 7px; border-radius: 50%; background: var(--w-warn); }
.wf-since { flex: none; display: flex; align-items: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ice-dim); white-space: nowrap; }
.wf-since button { font: inherit; letter-spacing: inherit; background: none; border: 0; border-left: 2px solid var(--copper); padding: 0.35rem 0 0.35rem 0.6rem; min-height: 44px; color: var(--ice); cursor: pointer; }
.wf-since button:hover, .wf-since button[aria-pressed="true"] { color: var(--copper-bright); }
.k-news { --kc: var(--k-news); } .k-filing { --kc: var(--k-filing); } .k-agency { --kc: var(--k-agency); } .k-court { --kc: var(--k-court); } .k-trip { --kc: var(--k-trip); }
/* "3 new": under the bar, never at the bottom (the ribbon owns the bottom). */
.w-pill { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night); background: var(--copper-bright); border: 0; padding: 0 1rem; min-height: 44px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.w-pill[hidden] { display: none; }

/* ---------- Row parts ---------- */
.w-kind { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice-dim); white-space: nowrap; }
.w-link { color: var(--ice); text-decoration: none; }
.w-link::after { content: ""; position: absolute; inset: 0; }
.w-link:focus-visible { outline: none; }
.w-link:focus-visible::after { outline: 2px solid var(--river); outline-offset: -2px; }
.w-cut { margin-left: 0.5rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ice-dim); white-space: nowrap; }
.w-door, .w-rel, .w-out, .w-more { position: relative; z-index: 1; }
.w-door { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-dim); text-decoration: none; white-space: nowrap; }
.w-door:hover, .w-rel:hover, .w-out:hover { color: var(--river); }
.w-door::before { content: "\2192\00a0"; color: var(--tundra); }
.w-door.is-act { color: var(--copper-bright); }
/* Under the line: the receipt, the counts, the other carriers. Mono, small, quiet. */
.w-under { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.2rem; margin-top: 0.1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; line-height: 1.6; color: var(--ice-dim); }
.w-rcpt { opacity: 0.9; }
/* Each count has a sentence form and a short form; the phone block below swaps them (wire-r2 fault 4). */
.w-s { display: none; }
/* The entry whose count was pressed leads the pinned view. */
.w-pinned { border-bottom: 1px solid var(--copper); margin-bottom: 0.4rem; }
.w-pinned .w-row { background: rgba(217, 166, 54, 0.07); }
.w-ba { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; }
.w-ba-l { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.62rem; }
.w-rel { font: inherit; letter-spacing: inherit; color: var(--ice); background: none; border: 0; border-bottom: 1px solid var(--copper); padding: 0; cursor: pointer; }
.w-out { color: var(--ice); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.w-more { display: inline; }
.w-more summary { display: inline; cursor: pointer; color: var(--ice); border-bottom: 1px solid var(--line); list-style: none; }
.w-more summary::-webkit-details-marker { display: none; }
.w-sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tundra); white-space: nowrap; }
/* The second clock prints only for a real catch; it is a fact, not a badge. */
.w-lag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--ice-dim); white-space: nowrap; }
.w-sum { display: block; color: var(--ice-dim); font-size: 0.95rem; line-height: 1.5; margin-top: 0.2rem; }
.w-credit { display: block; margin-top: 0.3rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; color: var(--copper-bright); }
/* Rows newer than the reader's last visit, and rows that landed while the page was open. */
.is-new { box-shadow: inset 2px 0 0 var(--copper); }
.is-fresh { animation: w-fresh 10s ease-out 1; }
@keyframes w-fresh { 0% { box-shadow: inset 3px 0 0 var(--copper-bright); background: rgba(217, 166, 54, 0.14); } 100% { box-shadow: inset 3px 0 0 rgba(242, 193, 78, 0); background: transparent; } }
.w-row.is-src, .t-row.is-src .t-body { background: rgba(217, 166, 54, 0.07); }

/* The day in B's gutter wording: OCT 2, then YESTERDAY. */
.w-div, .t-month { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.7rem 0 0.55rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice-dim); scroll-margin-top: calc(var(--w-top) + var(--w-bar-h) + 12px); }
.w-div h3, .t-month h3 { font: inherit; display: flex; align-items: baseline; gap: 0.9rem; }
.w-div h3 b, .t-month h3 { color: var(--ice); font-weight: 500; }
.w-div:first-child, .t-month:first-child { padding-top: 1.1rem; }

.w-empty { padding: 3.2rem 0 4rem; max-width: 38rem; }
.w-empty h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.7rem; line-height: 1.1; }
.w-empty p { margin-top: 0.7rem; color: var(--ice-dim); font-size: 1.05rem; line-height: 1.6; }
.w-empty .w-btn { margin-top: 1.1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); border-bottom: 1px solid var(--copper); min-height: 44px; }
.w-note { padding: 0.9rem 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; line-height: 1.7; color: var(--ice-dim); border-bottom: 1px solid var(--line); }
.w-note b { font-weight: 500; color: var(--ice); }
.w-note .w-btn, .w-linkline .w-btn { color: var(--ice); border-bottom: 1px solid var(--copper); margin-left: 0.6rem; }
.w-linkline { position: sticky; top: calc(var(--w-top) + var(--w-bar-h)); z-index: 30; background: var(--night); border-bottom: 1px solid var(--copper); padding: 0.75rem 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; line-height: 1.6; color: var(--ice-dim); }
.w-linkline b { font-weight: 500; color: var(--copper-bright); }
/* ---- The best reporting on the fight (10/6): other newsrooms' work, under the tape. Sans and mono only. ---- */
.wt-jump { margin: 1.1rem 0 0; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.wt-jump a { color: var(--copper-bright); text-decoration: none; border-bottom: 1px solid var(--copper); padding-bottom: 2px; }
.wt-jump a:hover { color: var(--ice); }
.wt-jump a::after { content: " \2193"; }
.wbr { margin: 4rem 0 0; padding: 3rem 0 0; border-top: 2px solid var(--copper); scroll-margin-top: 96px; }
.wbr .section-eyebrow { margin-bottom: 0.8rem; }
.wbr-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--ice); margin: 0 0 1rem; }
.wbr-lead { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 1.02rem; line-height: 1.6; color: var(--ice-dim); max-width: 46rem; margin: 0 0 2.2rem; }
.wbr-group { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 2rem; border-top: 1px solid var(--line); padding: 1.1rem 0 0.9rem; }
.wbr-k { font-family: var(--mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--river); margin: 0.5rem 0 0; }
.wbr-list { list-style: none; margin: 0; padding: 0; }
.wbr-list a { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0.2rem 1.6rem; align-items: baseline; padding: 0.55rem 0; text-decoration: none; color: var(--ice); }
.wbr-list li + li a { border-top: 1px solid rgba(233, 241, 236, 0.07); }
.wbr-meta { display: flex; flex-direction: column; gap: 0.1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.07em; line-height: 1.5; text-transform: uppercase; color: var(--ice-dim); }
.wbr-out { color: var(--ice); }
.wbr-line { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 1.08rem; line-height: 1.38; max-width: 44rem; }
.wbr-list a:hover .wbr-line { color: var(--copper-bright); }
@media (max-width: 900px) {
  .wbr-group { grid-template-columns: minmax(0, 1fr); }
  .wbr-k { margin: 0 0 0.3rem; }
  .wbr-list a { grid-template-columns: minmax(0, 1fr); padding: 0.75rem 0; }
  .wbr-meta { flex-direction: row; flex-wrap: wrap; gap: 0 0.7rem; }
}

.w-foot { margin: 3rem 0 0; padding: 1.4rem 0 4rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; line-height: 1.8; color: var(--ice-dim); max-width: 56rem; }
.w-foot a { color: var(--ice); text-decoration-color: var(--copper); }

/* The rows the build step wrote into the page: what a reader sees with no
   JavaScript, and what stays up if the route stops answering. */
.w-static { list-style: none; }
.w-static li { padding: 0.6rem 0; border-bottom: 1px solid var(--w-faint); font-size: 1.02rem; line-height: 1.4; }
.w-static li span { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice-dim); margin-bottom: 0.15rem; }
.w-static a { text-decoration: none; }

/* ---------- The pinned band: one compact strip ---------- */
.wb { scroll-margin-top: calc(var(--w-top) + 12px); margin-top: 1.5rem; padding: 0.9rem 0 1.3rem; border-top: 1px solid var(--line); }
.wb.is-collapsed { padding: 0.5rem 0 0.6rem; }
.wb-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--river); }
.wb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.1rem; }
.wb-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.02; font-size: 1.45rem; }
.wb-lead { color: var(--ice-dim); line-height: 1.55; font-size: 0.98rem; flex: 1; min-width: 14rem; }
.wb-toggle { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice-dim); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; padding: 0.3rem 0; }
.wb-toggle:hover { color: var(--ice); }
.wb-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ice-dim); padding: 0.3rem 0; }
.wb-line b { font-weight: 500; letter-spacing: 0.16em; color: var(--river); }
.wb-line .wb-toggle { color: var(--ice); border-bottom-color: var(--copper); }
.wb-cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 0; margin-top: 0.7rem; border-top: 1px solid var(--line); }
/* Four pieces sit four across, so none is left alone on a second row and the tape starts higher. */
.wb-cards:has(> .wb-card:nth-child(4)) { grid-template-columns: 1.35fr 1fr 1fr 1fr; }
.wb-cards:has(> .wb-card:nth-child(4)) .wb-card .yt-facade { width: 136px; height: 77px; }
.wb-cards:has(> .wb-card:nth-child(4)) .wb-ct { font-size: 1.15rem; }
.wb-cards:has(> .wb-card:nth-child(4)) .wb-card + .wb-card { padding-left: 1rem; }
.wb-cards:has(> .wb-card:nth-child(4)) .wb-card { padding-right: 1rem; }
.wb-card { position: relative; display: flex; gap: 1rem; min-width: 0; padding: 0.9rem 1.3rem 0.4rem 0; min-height: 120px; }
.wb-card + .wb-card { padding-left: 1.3rem; border-left: 1px solid var(--line); }
.wb-card:hover .wb-ct { color: var(--river); }
.wb-card .yt-facade { flex: none; position: relative; z-index: 1; width: 176px; height: 99px; aspect-ratio: auto; }
.wb-card .yt-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.wb-card .yt-play::after { left: 16px; top: 12px; border-width: 8px 0 8px 12px; }
.wb-body { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.wb-ck { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-bright); line-height: 1.5; }
.wb-ct { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.04; font-size: 1.3rem; }
.wb-cq { font-style: italic; color: var(--ice-dim); line-height: 1.45; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wb-cc { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; color: var(--copper-bright); }
.wb-go { position: relative; z-index: 1; align-self: flex-start; margin-top: 0.3rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
.wb-go:hover { color: var(--copper-bright); }
.wb-go::after { content: " \2192"; color: var(--copper); }
/* The whole card opens the piece; the play button and the link sit above the stretch. */
.wb-go::before { content: ""; position: absolute; inset: 0; }
.wb-player { margin-top: 1.2rem; max-width: 60rem; }
.wb-player .w-btn { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice-dim); border-bottom: 1px solid var(--line); min-height: 44px; }

/* ---------- The tape ---------- */
.w-body { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; gap: 2.2rem; align-items: start; }
.w-tape, .t-list { list-style: none; }
.w-meta { display: contents; }
/* Five fixed tracks. The doors column never changes width, so a row with two
   doors gives the headline exactly the room a row with one does. */
/* Five fixed tracks, the headline gets the width (wire-r2 fault 5): time 72, kind 96, outlet 170, the line, doors. */
.w-row { position: relative; display: grid; grid-template-columns: 4.5rem 6rem 9.5rem minmax(0, 1fr) 7.6rem; column-gap: 0.9rem; align-items: baseline; padding: 0.36rem 0.5rem 0.38rem 0.6rem; margin: 0 -0.5rem 0 -0.6rem; border-bottom: 1px solid var(--w-faint); }
.w-row:hover { background: var(--night-2); }
.w-time { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ice-dim); text-align: right; white-space: nowrap; }
.w-time > span { display: block; }
.w-time .w-lag { margin-top: 0.15rem; }
.w-whoc { min-width: 0; }
.w-who { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: var(--ice); display: block; }
.w-who .w-sub { margin-left: 0.5rem; }
/* The line is printed whole. Only a clerk's docket text, which can run to a
   page, ran under a four-line clamp until 10/6 (Will: "wire titles shouldnt cut off"); the clamp is gone and the
   route sends a court line that is whole. */
.w-line { font-size: 0.98rem; line-height: 1.3; min-width: 0; }
.w-cut { display: block; margin: 0.15rem 0 0 !important; }
.w-row:hover .w-link, .t-row:hover .w-link { color: var(--copper-bright); }
.w-doors { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.w-row .w-door { opacity: 0.75; }
.w-row:hover .w-door, .w-row .w-door:focus-visible { opacity: 1; }

/* ---------- One kind of record: the timeline (from B) ---------- */
.is-timeline .t-list { max-width: 60rem; }
.t-row { position: relative; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); }
.t-date { padding: 1rem 1.1rem 0 0; text-align: right; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: var(--ice-dim); }
.t-date b { display: block; font-weight: 500; color: var(--ice); }
.t-body { position: relative; border-left: 1px solid var(--w-gold-line); padding: 0.95rem 0.6rem 1.05rem 1.5rem; min-width: 0; }
.t-body::before { content: ""; position: absolute; left: -5px; top: 1.3rem; width: 9px; height: 9px; background: var(--kc); box-shadow: 0 0 0 3px var(--night); }
.t-row:hover .t-body { background: var(--night-2); }
.t-row.is-same .t-body { padding-top: 0.55rem; }
.t-row.is-same .t-body::before { top: 0.9rem; }
.t-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice-dim); }
.t-meta .w-who { color: var(--ice-dim); }
.t-md { display: none; color: var(--ice); }
.t-line { font-size: 1.0625rem; line-height: 1.4; margin-top: 0.2rem; }
.t-doors { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin-top: 0.4rem; }
.t-month { padding-left: 0; }
/* A single-kind view says its source and its door once (wire-r2 fault 10). */
.t-view { padding: 0.9rem 0 0.7rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; line-height: 1.7; color: var(--ice-dim); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.2rem; }
.t-view .w-door { color: var(--ice); }

/* The month index: a way back in time, and the shape of the year at a glance. */
.w-months { position: sticky; top: calc(var(--w-top) + var(--w-bar-h) + 0.4rem); padding: 1.1rem 0 2rem; }
.w-months-h { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice-dim); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 0.3rem; }
.w-months ol { list-style: none; }
.w-months button { width: 100%; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 1.6rem; align-items: center; gap: 0.5rem; background: none; border: 0; padding: 0.34rem 0; cursor: pointer; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ice-dim); text-align: left; }
.w-months button:hover, .w-months button.is-here { color: var(--ice); }
.wm-bar { height: 4px; }
.wm-bar i { display: block; height: 4px; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--ice-dim); opacity: 0.55; }
.w-months button:hover .wm-bar i { opacity: 0.9; }
.w-months button.is-here .wm-bar i { background: var(--copper-bright); opacity: 1; }
.wm-n { text-align: right; }
.w-months button[disabled] { opacity: 0.35; cursor: default; }

/* ============================================================
   Narrower screens
   ============================================================ */
@media (max-width: 1100px) {
  .w-body { grid-template-columns: minmax(0, 1fr); }
  .w-months { display: none; }
  .w-row { grid-template-columns: 4.5rem 6rem 9rem minmax(0, 1fr) 8.6rem; }
}
@media (max-width: 999px) {
  .wt-head .w-wrap { grid-template-columns: minmax(0, 1fr); }
  .wt-status { justify-content: flex-start; text-align: left; margin-top: 0.9rem; }
  .wt-status .wt-dot { order: 0; }
  .wb-cards { grid-template-columns: 1fr; }
  .wb-card + .wb-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .wb-card { min-height: 0; }
}
@media (max-width: 760px) {
  .wire-main { padding-top: calc(var(--w-mast0) + 1.2rem); }
  .w-wrap, .wf-in { padding: 0 1.1rem; }
  /* On the way down the masthead keeps its wordmark row and lets the nav go;
     it comes back on the way up. wire.js moves --w-top with it. */
  body.wire-tight .masthead .mast-nav { display: none; }
  .wt-lead { display: none; }
  .wt-status { font-size: 0.6875rem; margin-top: 0.6rem; }
  .wf-in { gap: 0; flex-direction: column; align-items: stretch; }
  .wf-chips { gap: 1.25rem; margin: 0 -1.1rem; padding: 0 1.1rem; }
  .wf-since { border-top: 1px solid var(--w-faint); white-space: normal; font-size: 0.6875rem; }
  .wf-since:empty { display: none; }
  .w-clock { font-size: 0.6875rem; }
  /* wire-r2 fault 3. While the comment ribbon is showing (comment-cta.js sets
     body.cc-pad and takes it off when the ribbon is dismissed), the "Open now"
     row is the same link and the same deadline 90px above it. On a phone it
     steps aside so a first visit shows a headline; dismiss the ribbon and it
     comes back. */
  body.cc-pad #wire-clock { display: none; }
  /* Nothing on a phone is set under 11px. */
  .w-kind, .w-sub, .w-lag, .w-credit, .w-door, .w-under, .w-ba-l, .w-cut, .wb-ck, .wb-cc, .wb-toggle, .w-div, .t-month, .w-note, .w-linkline, .w-review, .t-meta, .w-foot { font-size: 0.6875rem; }
  .w-kind, .wb-ck { letter-spacing: 0.1em; }

  /* The time moves from the gutter to a mono line above the headline. */
  .w-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "line" "doors"; row-gap: 0.2rem; padding: 0.7rem 0 0.7rem 0.7rem; margin: 0 0 0 -0.7rem; }
  /* Time, kind, who on one mono line; a long outlet name drops to its own line whole. */
  .w-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.75rem; }
  .w-time, .w-whoc { display: contents; }
  .w-time > span { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; font-family: var(--mono); color: var(--ice-dim); }
  .w-time .w-lag { order: 5; margin: 0; text-transform: none; }
  .w-who { font-size: 0.6875rem; }
  .w-line { grid-area: line; }
  /* A narrow column needs more lines to hold the same sentence. */
  .w-doors { grid-area: doors; flex-direction: row; justify-content: flex-start; }
  .w-doors .w-door:nth-child(n+2) { display: none; }
  /* Tap targets inside a row that is itself a link: 44px tall, or a miss opens the article (wire-r2 fault 9). */
  .w-row .w-door, .t-doors .w-door, .t-view .w-door, .w-rel { opacity: 1; display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: -0.55rem 0; }
  .w-doors, .t-doors { margin-top: 0.45rem; }
  .w-out, .w-more summary { display: inline-block; padding: 1rem 0; margin: -0.8rem 0; line-height: 1.2; }
  .w-under { gap: 0 1rem; margin-top: 0.1rem; }
  /* The counts on one line: "4 before · 1 same day and after" under one label. */
  .w-l { display: none; }
  .w-s { display: inline; }
  .w-ba { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.7rem; }
  .w-ba-l { flex-basis: 100%; }
  .w-ba .w-rel + .w-rel::before, .w-ba span + .w-rel::before, .w-ba .w-rel + span::before { content: "\00b7\00a0"; color: var(--tundra); }
  /* Nothing on a phone under 11px: the film length and the card link too. */
  .wb-card .yt-len, .wb-go, .t-view { font-size: 0.6875rem; }

  /* The timeline on a phone: the line down the left, the date on the entry's first line. */
  .t-row { grid-template-columns: minmax(0, 1fr); margin-left: 4px; }
  .t-date { display: none; }
  .t-md { display: inline; }
  .t-body { padding: 0.85rem 0 0.9rem 1.15rem; }
  .t-doors .w-door:nth-child(n+2) { display: none; }

  .wb { margin-top: 1.1rem; padding: 1.1rem 0 0.9rem; }
  .wb-head { justify-content: space-between; }
  .wb-lead { display: none; }
  /* The three pieces ride one strip sideways, so the tape starts on the first screen. */
  .wb-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1.1rem; scrollbar-width: none; margin: 0.6rem -1.1rem 0; padding: 0 1.1rem; gap: 0; }
  .wb-cards::-webkit-scrollbar { display: none; }
  .wb-card, .wb-card + .wb-card { flex: 0 0 84%; scroll-snap-align: start; padding: 0.9rem 1rem 0.5rem 0; border-top: 0; border-left: 0; }
  .wb-card + .wb-card { padding-left: 1rem; border-left: 1px solid var(--line); }
  .wb-card .yt-facade { width: 112px; height: 63px; }
  .wb-go { letter-spacing: 0.08em; white-space: nowrap; }
  /* The credit holds to two lines on the strip; the tape row below prints it whole. */
  .wb-cc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .w-foot { padding-bottom: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-status[data-state="fresh"] .wt-dot, .is-fresh { animation: none; }
  .wf { transition: none; }
}

/* ---------- The front page: Latest from the wire (2026-10-05) ----------
   The newest four rows by the tape's own rules (js/wire.js in strip mode),
   over the rows the build step wrote in. Never an empty box: with no rows
   and no route the section hides itself. */
.fw-list { list-style: none; margin: 2.2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.fw-row a { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 0.2rem 1.6rem; align-items: baseline; padding: 0.95rem 0.6rem 1rem; margin: 0 -0.6rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ice); }
.fw-row a:hover { background: var(--night-2); }
.fw-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-dim); line-height: 1.5; }
.fw-meta > span:first-child { color: var(--ice); }
.fw-who { color: var(--ice); }
.fw-line { font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; }
.fw-row a:hover .fw-line { color: var(--copper-bright); }
.fw-note { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ice-dim); min-height: 1em; }
@media (max-width: 900px) {
  .fw-row a { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0.9rem 0 0.95rem; margin: 0; }
  .fw-meta { font-size: 0.6875rem; }
  .fw-line { font-size: 1.02rem; }
}

/* ============ HEADER 2026-10-06: ACCOUNT CONTROL, MORE MENU, ALERTS ============
   Will, launch morning: a clear place to sign up for alerts ("big time"), a login
   area in every header, and a less cluttered nav. One nav on every page (written
   by scripts/apply-masthead.py), five links, the rest under More, then Take
   Action, Get alerts, Log in and Sign up. Behavior is js/account.js. New
   elements are sans and mono only (the 10/05 type ruling). */
.masthead .mast-nav { margin-left: auto; }
.mast-nav a.nav-take { color: var(--copper-bright); }
.mast-nav a.nav-alerts {
  color: var(--night); background: var(--copper-bright);
  padding: 0.45rem 0.9rem; font-weight: 500; border-bottom: none; border-radius: 2px;
}
.mast-nav a.nav-alerts:hover { background: var(--copper); color: var(--night); }
.mast-more { position: relative; display: inline-flex; align-items: center; }
.mast-more-btn {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--ice-dim);
  background: none; border: none; padding: 0.2rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.mast-more-btn::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.mast-more-btn:hover, .mast-more.is-open .mast-more-btn { color: var(--ice); }
.mast-more-list {
  display: none; position: absolute; top: calc(100% + 0.9rem); right: -1rem; z-index: 60;
  min-width: 11.5rem; padding: 0.5rem 0; background: var(--night-2); border: 1px solid var(--line); border-top: 2px solid var(--copper);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.mast-more.is-open .mast-more-list { display: block; }
.mast-more-list a { display: block; padding: 0.6rem 1.1rem; border-bottom: none; white-space: nowrap; }
.mast-more-list a:hover { background: rgba(233, 241, 236, 0.06); }
.mast-more-list a.active { color: var(--ice); border-bottom: none; box-shadow: inset 2px 0 0 var(--copper); }

.acct { display: inline-flex; align-items: center; gap: 0.9rem; flex: none; padding-left: 1.15rem; border-left: 1px solid var(--line); }
.acct a { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-decoration: none; white-space: nowrap; color: var(--ice-dim); }
.acct a:hover { color: var(--ice); }
.acct a.acct-up, .acct a.acct-rec { color: var(--ice); border: 1px solid rgba(233, 241, 236, 0.4); padding: 0.4rem 0.8rem; border-radius: 2px; }
.acct a.acct-up:hover, .acct a.acct-rec:hover { border-color: var(--copper-bright); color: var(--copper-bright); }
.acct a.acct-rec { display: none; align-items: center; gap: 0.45rem; }
.acct a.acct-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--river); display: inline-block; }
.acct[data-acct="in"] a.acct-in, .acct[data-acct="in"] a.acct-up { display: none; }
.acct[data-acct="in"] a.acct-rec { display: inline-flex; }

/* The credit gives way before the nav does. */
@media (max-width: 1320px) {
  .masthead .masthead-line2 .mast-sep, .masthead .pbi-credit { display: none; }
}
/* Two rows from here down: brand and account on the first, the scrolling strip
   on the second, Get alerts first in it. More's links sit inline in the strip
   (a panel inside an overflow strip is clipped). */
.mast-nav a, .mast-more-btn { white-space: nowrap; flex: none; }
.mast-more-list a.more-sm-only { display: none; }
.acct a.acct-up, .acct a.acct-rec { border-color: rgba(233, 241, 236, 0.6); }
/* Two rows from here down: brand and account on the first, the links on the
   second with Get alerts first. More stays a menu at every width (critic
   10/6: spilled flat it was ten links, worse than the row it replaced). Its
   panel hangs from the masthead, not the strip, so the strip's overflow
   never clips it; js/account.js lines it up under the button. */
@media (max-width: 1180px) {
  .masthead { flex-wrap: wrap; row-gap: 0.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .masthead .masthead-left { flex: 1 1 0; min-width: 0; order: 1; }
  .masthead .acct { order: 2; border-left: none; padding-left: 0; }
  .masthead .mast-nav { order: 3; flex: 1 1 100%; width: 100%; margin-left: 0; justify-content: flex-start; overflow-x: auto; gap: 1.1rem; scrollbar-width: none; }
  .masthead .mast-nav::-webkit-scrollbar { display: none; }
  .mast-nav a.nav-alerts { order: -1; }
  .mast-more { position: static; }
  .mast-more-list { top: 100%; left: 4.5rem; right: auto; }
}
/* Phones: four links and More in the strip, every control 44px to the thumb. */
@media (max-width: 720px) {
  .masthead { row-gap: 0.1rem; padding-top: 0.45rem; padding-bottom: 0.3rem; }
  .masthead .mast-nav { gap: 1.05rem; padding-bottom: 0; }
  .mast-more-list { left: 1.4rem; right: 1.4rem; }
  .mast-more-list a.more-sm-only { display: flex; }
  .masthead .mast-nav > a, .mast-more-btn, .acct a { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  .masthead .mast-nav > a.nav-sm-hide { display: none; }
  .masthead .mast-nav > a.active { border-bottom-color: transparent; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .mast-more-list a { min-height: 44px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  .acct a.acct-in { padding-left: 0.35rem; padding-right: 0.35rem; }
  /* The pills keep their size; the hit area grows to 44px around them. */
  .masthead .mast-nav > a.nav-alerts, .acct a.acct-up, .acct a.acct-rec { min-height: 34px; position: relative; align-self: center; }
  .masthead .mast-nav > a.nav-alerts::after, .acct a.acct-up::after, .acct a.acct-rec::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  .acct[data-acct="in"] a.acct-in, .acct[data-acct="in"] a.acct-up, .acct[data-acct="out"] a.acct-rec, .acct:not([data-acct="in"]) a.acct-rec { display: none; }
  /* The comment ribbon steps aside while the alerts form is on screen (it sat over the form's small print). */
  body.alerts-in-view .cc-rib { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
}
@media (max-width: 480px) {
  .masthead .masthead-brand { letter-spacing: 0.14em; font-size: 0.92rem; }
  .masthead .acct { gap: 0.45rem; }
  .acct a { font-size: 0.66rem; letter-spacing: 0.08em; }
  .acct a.acct-up, .acct a.acct-rec { padding: 0 0.6rem; }
  /* Get alerts, three links and More fit a 360px phone without scrolling the strip. */
  .masthead .mast-nav { gap: 0.7rem; }
  .masthead .mast-nav > a, .mast-more-btn { font-size: 0.64rem; letter-spacing: 0.06em; }
  .masthead .mast-nav > a.nav-alerts { padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* The front page lists the chapters itself, so its footer drops the rail (10/6, front page length). The footer is
   built by js/site-footer.js as the close band's next sibling. */
.exp-close ~ .uf .uf-rail { display: none; }

/* ---- The front page's close (10/6): the newsletter and the newsroom ask side by side, no panels ---- */
.exp-close { background: var(--night-2); border-top: 1px solid var(--line); padding: 4.6rem 2rem 4.8rem; scroll-margin-top: 110px; }
.exp-close-inner { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4.5rem; }
.exp-close-col + .exp-close-col { border-left: 1px solid var(--line); padding-left: 4.5rem; }
.exp-close .section-eyebrow { margin-bottom: 0.9rem; }
.exp-close-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.04; letter-spacing: 0.01em; color: var(--ice); margin: 0 0 1rem; }
.exp-close-lead { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 1.05rem; line-height: 1.6; color: var(--ice); max-width: 34rem; margin: 0 0 1.5rem; }
.exp-close .uf-form { margin: 0; max-width: 30rem; }
.exp-close .uf-msg { text-align: left; }
.exp-close .exp-follow-fine { margin-top: 1rem; line-height: 1.7; }
.exp-close .exp-follow-fine a { color: var(--ice-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--river); }
.exp-close .exp-follow-fine a:hover { color: var(--river); }
.exp-close-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.exp-close-links li { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0.2rem 1.2rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.exp-close-links a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-bright); text-decoration: none; white-space: nowrap; }
.exp-close-links a::after { content: " \2192"; }
.exp-close-links a:hover { color: var(--ice); }
.exp-close-links span { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 0.92rem; line-height: 1.45; color: var(--ice-dim); }
@media (max-width: 1120px) {
  .exp-close { padding: 3.4rem 1.4rem 3.6rem; }
  .exp-close-inner { grid-template-columns: minmax(0, 1fr); gap: 3rem 0; }
  .exp-close-col + .exp-close-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 3rem; }
}
@media (max-width: 560px) {
  .exp-close-links li { grid-template-columns: minmax(0, 1fr); }
  .exp-close-links a { min-height: 32px; display: inline-flex; align-items: center; }
}

/* ---- Ambler Road alerts in the hero: the sign-up in the first screen (critic 10/6) ----
   One unboxed row under the headline since 10/6 08:34 PT (Will: "too cluttered at the top"): one caption, then the
   field and the button, 52px like the doors below. No panel, no rule; the headline is the first thing in the hero
   again. It sits above the dek so it clears the comment ribbon on a short laptop screen and stays in a phone's
   first screen under the photo (the photo band gives up height on a short phone for the same reason). */
.hero-alerts { max-width: 34rem; margin: 0 0 1.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.hero-alerts-k { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.35; color: var(--ice); margin: 0; }
.hero-alerts .alerts-form .alerts-email { padding: 0.88rem 0.9rem; font-size: 1rem; line-height: 1.3; background: rgba(12, 21, 18, 0.78); }
.hero-alerts .alerts-form .alerts-btn { font-size: 1.02rem; padding: 0 1.3rem; }
.hero-alerts .alerts-msg { margin: 0; min-height: 0; }
.hero-alerts .alerts-msg:empty { display: none; }
.hero-alerts .alerts-msg.is-ok { font-size: 1rem; }
@media (max-width: 720px) {
  /* The photo band gives up height on a short phone so the field stays above the comment ribbon: the kicker, the
     headline and the sign-up take about 445px under it. A tall phone keeps the 46svh band. */
  .exp-hero .exp-hero-photo { height: min(46svh, calc(100svh - 445px)); min-height: 190px; }
  .hero-alerts { margin: 0.1rem 0 1.5rem; max-width: none; }
  .hero-alerts .alerts-form { flex-direction: row; }
  .hero-alerts .alerts-form .alerts-btn { padding: 0 0.9rem; }
}

/* ---- Ambler Road alerts: the band on the front page ---- */
.alerts-band {
  background: var(--night-3); border-top: 2px solid var(--river); border-bottom: 1px solid var(--line);
  padding: 4.4rem 2rem 4.2rem; scroll-margin-top: 120px;
}
.alerts-band-inner { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.alerts-k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--river); margin: 0 0 0.9rem; }
.alerts-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: 0.01em; color: var(--ice); margin: 0 0 1.1rem; }
.alerts-dek { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--ice); max-width: 34rem; margin: 0; }
.alerts-when { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.4rem; }
.alerts-when li { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ice-dim); padding-left: 1rem; position: relative; line-height: 1.45; }
.alerts-when li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--river); }
.alerts-form { display: flex; gap: 0.6rem; }
.alerts-form .alerts-email {
  flex: 1; min-width: 0; background: var(--night); border: 1px solid rgba(233, 241, 236, 0.28); border-bottom: 2px solid var(--river);
  color: var(--ice); font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 1.05rem; padding: 1rem 1.1rem; border-radius: 0;
}
.alerts-form .alerts-email::placeholder { color: var(--ice-dim); }
.alerts-form .alerts-email:focus { outline: 2px solid var(--river); outline-offset: 2px; }
.alerts-form .alerts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.alerts-form .alerts-btn {
  flex: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--night); background: var(--copper-bright); border: none; padding: 0 1.7rem; cursor: pointer; border-radius: 0;
}
.alerts-form .alerts-btn:hover { background: var(--copper); }
.alerts-form .alerts-btn:disabled { opacity: 0.6; cursor: default; }
.alerts-form.is-done { display: none; }
.alerts-msg { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 0.95rem; line-height: 1.45; color: var(--ice-dim); margin: 0.8rem 0 0; min-height: 1.2rem; }
.alerts-msg.is-ok { color: var(--river); font-size: 1.15rem; }
.alerts-msg.is-error { color: #ff8a75; }
.alerts-fine { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; line-height: 1.6; color: var(--ice-dim); margin: 0.3rem 0 0; }
.alerts-fine a { color: var(--ice-dim); text-decoration-color: var(--river); text-underline-offset: 3px; }
.alerts-fine a:hover { color: var(--river); }

/* ---- the strip above the footer on every other page (js/account.js) ---- */
.alerts-strip { background: var(--night-3); border-top: 2px solid var(--river); padding: 3rem 2rem; scroll-margin-top: 120px; position: relative; z-index: 2; }
.alerts-strip-inner { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 3.5rem; align-items: center; }
.alerts-strip-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.02; color: var(--ice); margin: 0 0 0.6rem; }
.alerts-strip-dek { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--ice-dim); margin: 0; }
.alerts-strip .alerts-k { margin-bottom: 0.6rem; }

@media (max-width: 900px) {
  .alerts-band-inner, .alerts-strip-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .alerts-band { padding: 3.4rem 1.4rem 3.2rem; }
  .alerts-strip { padding: 2.6rem 1.4rem; }
}
@media (max-width: 480px) {
  .alerts-form { flex-direction: column; }
  .alerts-form .alerts-btn { padding: 0.9rem 1rem; }
  .alerts-when { grid-template-columns: 1fr; }
}