/* ==========================================================================
   Data Center Daniel — black villain-tone record page
   Same type + grid system as the light site, dropped into deep navy
   ========================================================================== */

body.dd {
  --paper: #000000;
  --paper-2: #08080a;
  --sand: #101013;
  --sand-2: #17171c;
  --rule: #26262d;
  --rule-strong: #43434d;

  --navy: #ffffff;          /* display type reads pure white on black */
  --navy-soft: #d9d7d4;
  --navy-wash: #0d0d10;
  --dusk: #8e8e99;
  --dusk-tint: #1a1a20;

  --red: #ef2119;           /* glowing accent red */
  --red-deep: #ff4a3d;      /* brighter, for small text on black */
  --red-brand: #890706;     /* brand oxblood, used for fill bases */
  --red-tint: #23090a;
  --clay: #d98a7d;

  --ink: #eae8e5;
  --ink-muted: #9b9ba4;

  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 34px 70px -28px rgba(0, 0, 0, 1);

  color: var(--ink);
  background-color: #000;
  background-image:
    radial-gradient(1100px 620px at 86% -14%, rgba(239, 33, 25, 0.14), transparent 66%),
    radial-gradient(900px 520px at -6% 4%, rgba(137, 7, 6, 0.10), transparent 70%);
}

/* The page-wide grain is a fixed, full-viewport overlay. With a blend mode it
   forms a blending group over the whole document, and a backdrop-filter that
   has to sample through that group is exactly the construct iOS Safari paints
   unreliably behind a sticky bar. Over a near-black page, screen and normal
   resolve to the same pixels anyway, so drop the blend on this page only. */
body.dd::after { mix-blend-mode: normal; opacity: 0.3; }

/* ---------------- Masthead ----------------
   This site carries no campaign navigation, so the bar is a single centred
   wordmark. It is deliberately built from its own classes rather than the
   campaign .sitebar: the campaign bar hides its tagline and shrinks its type
   below 560px, which made the header look like a different component in phone
   portrait than it did in landscape. Nothing here is hidden or re-laid-out at
   any width — only the type size and the rule lengths flex — so portrait and
   landscape render the same translucent bar. */
.dd-bar {
  position: sticky; top: 0; z-index: 40;
  isolation: isolate;
  border-bottom: 1px solid rgba(216, 68, 58, 0.22);
  /* honour the notch if this is ever served with viewport-fit=cover;
     env() resolves to 0 everywhere else, so this costs nothing */
  padding-top: env(safe-area-inset-top, 0px);
}

/* The tint and blur live on a pseudo-element rather than on .dd-bar itself.
   iOS Safari has a long-standing bug where a backdrop-filter applied directly
   to a position:sticky element samples a stale snapshot, so the bar smears or
   freezes as the page scrolls behind it. Painting the blur into an absolutely
   positioned child inside the sticky element avoids that path entirely. */
.dd-bar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(9, 8, 8, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}

/* If the blur is unavailable, a 78% tint would let the glowing title scroll
   straight through the bar. Fall back to a near-solid panel instead. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .dd-bar::before { background: rgba(9, 8, 8, 0.97); }
}

/* The masthead is taller than the global scroll-padding allows for, so give
   this page's own anchor targets enough clearance to land below it. */
body.dd [id] { scroll-margin-top: 6rem; }

.dd-bar__inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(1.05rem, 2.9vw, 1.5rem);
}
.dd-mark {
  display: flex; align-items: center;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  width: 100%; max-width: 44rem;
  text-decoration: none;
}
.dd-mark__line {
  flex: 1 1 0; min-width: 0.75rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 233, 226, 0.3));
}
.dd-mark__line + .dd-mark__txt + .dd-mark__line {
  background: linear-gradient(270deg, transparent, rgba(240, 233, 226, 0.3));
}
.dd-mark__txt {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 3.2vw, 1.28rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  /* letter-spacing hangs off the final glyph; pull it back so the wordmark
     sits optically centred between the two rules */
  margin-right: -0.26em;
  /* All-caps ink does not fill the em box evenly: with line-height 1 the caps
     land about 0.09em above the box centre, so the wordmark reads high in the
     bar. Padding the top by twice that re-centres the box on the ink, which
     drops the caps into the middle AND brings the flanking rules onto the
     same optical line. Measured off rendered pixels, not guessed. */
  padding-top: 0.18em;
  white-space: nowrap;
  color: #f0e9e2;
  transition: color 0.25s ease;
}
.dd-mark__txt em { font-style: normal; color: #ef2119; }
.dd-mark:hover .dd-mark__txt { color: #fff; }
.dd-mark:focus-visible { outline: 2px solid #ef2119; outline-offset: 6px; border-radius: 2px; }

/* Vertical dark vignette so long scrolls feel like they deepen */
.dd-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 80% at 50% 0%, transparent 38%, rgba(0, 0, 0, 0.7) 100%);
}

/* ---------------- Hero ---------------- */
.dd-hero {
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 8rem) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}

.dd-hero__inner { position: relative; z-index: 2; }

.dd-hero .eyebrow { color: var(--red-deep); }

.dd-title { margin-top: var(--space-6); }

.dd-title svg { display: block; width: 100%; height: auto; overflow: visible; }

.dd-title svg {
  filter: drop-shadow(0 0 2px rgba(239, 33, 25, 0.9))
          drop-shadow(0 0 18px rgba(239, 33, 25, 0.55))
          drop-shadow(0 0 54px rgba(239, 33, 25, 0.3));
}
.dd-title text {
  font-family: var(--font-display);
  font-weight: 800;
  fill: #f5231a;
  letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: no-preference) {
  .dd-title svg { animation: ddPulse 5.5s ease-in-out infinite; }
}
@keyframes ddPulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(239, 33, 25, 0.9))
            drop-shadow(0 0 16px rgba(239, 33, 25, 0.5))
            drop-shadow(0 0 48px rgba(239, 33, 25, 0.26));
  }
  50% {
    filter: drop-shadow(0 0 3px rgba(255, 74, 61, 1))
            drop-shadow(0 0 26px rgba(239, 33, 25, 0.72))
            drop-shadow(0 0 74px rgba(239, 33, 25, 0.42));
  }
}

.dd-title--one { display: block; }
.dd-title--stack { display: none; }

/* Each stacked line is sized so that the widest line fills the column and the
   others scale by the same factor. Because every line keeps its own natural
   viewBox width, the glyphs are never stretched — DANIEL is simply shorter than
   DATA CENTER, the way the typeface drew it. js/daniel.js re-measures both lines
   once the display font has loaded and corrects these numbers in place. */
.dd-title--stack svg { width: 100%; }
.dd-title--stack svg + svg { margin-top: 0.06em; }

@media (max-width: 780px) {
  .dd-title--one { display: none; }
  .dd-title--stack { display: block; }
}

.dd-hero__lede {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 62ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink);
}
.dd-hero__lede strong { color: var(--navy); font-weight: 700; }

.dd-hero__sub {
  margin-top: var(--space-5);
  max-width: 60ch;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-muted);
}

/* Headline numbers under the hero */
.dd-keys {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-8);
}
.dd-key__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
}
.dd-key--red .dd-key__num { color: var(--red-deep); }
.dd-key__label {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 26ch;
}
@media (max-width: 860px) { .dd-keys { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Act shell ---------------- */
.act {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--rule);
}

.act__head { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-6); align-items: start; }
.act__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  color: var(--red-deep);
  padding-top: 0.35rem;
}
.act__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  max-width: 22ch;
}
.act__years {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.act__intro {
  margin-top: var(--space-6);
  max-width: 66ch;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--ink);
}
@media (max-width: 720px) {
  .act__head { grid-template-columns: 1fr; gap: var(--space-3); }
  .act__num { padding-top: 0; }
}

/* ---------------- Timeline ---------------- */
.tl { margin-top: clamp(2.5rem, 5vw, 3.5rem); position: relative; padding-left: 6.5rem; }

/* jagged lightning spine — geometry generated in js/daniel.js */
.tl__spine {
  position: absolute; left: 1.55rem; top: 0.5rem;
  width: 1.6rem; height: 100%;
  overflow: visible; pointer-events: none;
}
.tl__spine-bg {
  stroke: var(--rule);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}
.tl__spine-fill {
  stroke: var(--red);
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 3px rgba(239, 33, 25, 0.95))
          drop-shadow(0 0 12px rgba(239, 33, 25, 0.55));
}
@media (max-width: 720px) {
  .tl { padding-left: 2.75rem; }
  .tl__spine { left: -0.05rem; width: 1.1rem; }
}

.tl__item { position: relative; z-index: 1; padding-block: 0 clamp(2rem, 4vw, 3rem); }
/* --tl-dot-x is written by js/daniel.js: the exact x where the jagged spine
   crosses this dot's row, so the line runs through the dot instead of past it.
   The fallback keeps the dots in a sane column if the script never runs. */
.tl__item::before {
  content: ''; position: absolute; left: var(--tl-dot-x, -4.4rem); top: 0.72rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: #000; border: 1px solid var(--rule-strong);
  /* .tl__item carries .reveal, which slides the whole entry down by
     --reveal-shift until it scrolls into view. The dot is a child, so it would
     ride along and sit below the spine for the length of the animation. This
     cancels the parent shift on the same curve and duration, which keeps the
     dot welded to the line from first paint through to the settled state. */
  transform: translateY(calc(-1 * var(--reveal-shift)));
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tl__item.is-in::before {
  background: var(--red); border-color: var(--red);
  transform: rotate(45deg);
  border-radius: 0;
  box-shadow: 0 0 0 3px rgba(239, 33, 25, 0.14), 0 0 14px 2px rgba(239, 33, 25, 0.7);
}
@media (max-width: 720px) { .tl__item::before { left: var(--tl-dot-x, -2.35rem); } }

.tl__date {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.tl__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
  max-width: 34ch;
}
.tl__body { margin-top: var(--space-3); max-width: 60ch; font-size: var(--text-sm); line-height: 1.65; color: var(--ink-muted); }
.tl__body strong { color: var(--ink); font-weight: 600; }
.tl__list { margin-top: var(--space-3); max-width: 60ch; display: grid; gap: var(--space-2); }
.tl__list li { display: flex; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); }
.tl__list li::before { content: ''; flex: none; width: 6px; height: 1px; background: var(--rule-strong); margin-top: 0.75em; }
.tl__who {
  margin-top: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dusk);
}
.tl__who span { border-bottom: 1px solid var(--rule); padding-bottom: 0.15rem; }

.tl__item--hot .tl__title { color: var(--red-deep); }
.tl__item--hot { border-left: 0; }

/* Pull quote inside the timeline */
.tl__quote {
  margin-top: var(--space-5);
  max-width: 46ch;
  border-left: 2px solid var(--red);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  background: linear-gradient(90deg, rgba(216, 68, 58, 0.08), transparent 70%);
}
.tl__quote p { font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.6; color: var(--navy-soft); }
.tl__quote cite {
  display: block; margin-top: var(--space-3); font-style: normal;
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------------- Panels + charts ---------------- */
.panel {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background:
    linear-gradient(180deg, rgba(239, 33, 25, 0.05), transparent 32%),
    #060608;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-md), inset 0 0 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--red), rgba(239, 33, 25, 0.06) 70%, transparent);
}
.panel--wide { grid-column: 1 / -1; }
.panel__kicker {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red-deep);
}
.panel__title {
  margin-top: var(--space-3);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--navy); max-width: 30ch;
}
.panel__note { margin-top: var(--space-4); max-width: 62ch; font-size: var(--text-sm); line-height: 1.65; color: var(--ink-muted); }
.panel__source { margin-top: var(--space-5); font-size: var(--text-xs); line-height: 1.6; color: var(--dusk); }
.panel__source a { color: var(--dusk); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.panel__source a:hover { color: var(--red-deep); }

/* Bar chart */
.bars { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: var(--space-6); }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.bar__label { font-size: var(--text-sm); color: var(--ink); max-width: 40ch; }
.bar__val {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  color: var(--navy); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.bar__track {
  margin-top: var(--space-3); height: 14px; border-radius: 0; overflow: hidden;
  background: repeating-linear-gradient(90deg, #101013 0 5px, #0a0a0c 5px 6px);
  border: 1px solid var(--rule);
}
.bar__fill {
  height: 100%; width: 0; border-radius: 0;
  background: linear-gradient(90deg, #1e1e26, #4a4a57);
  transition: width 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bar--hot .bar__fill {
  background: linear-gradient(90deg, var(--red-brand), var(--red));
  box-shadow: 0 0 10px rgba(239, 33, 25, 0.75), 0 0 30px rgba(239, 33, 25, 0.35);
}
.bar--hot .bar__val { color: var(--red-deep); }
.bar__foot { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--dusk); }

/* Role / revolving-door gantt */
.gantt { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.gantt__scale { position: relative; height: 1.35rem; border-bottom: 1px solid var(--rule); margin-bottom: var(--space-5); }
.gantt__tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--dusk);
  font-variant-numeric: tabular-nums;
}
.gantt__row { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-5); align-items: center; padding-block: var(--space-3); }
.gantt__row + .gantt__row { border-top: 1px dashed var(--rule); }
.gantt__who { font-size: var(--text-sm); font-weight: 600; color: var(--navy); line-height: 1.3; }
.gantt__who small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--ink-muted); margin-top: 0.15rem; }
.gantt__lane {
  position: relative; height: 3.25rem;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,0.04) calc(10% - 1px) 10%);
}
.gantt__bar {
  position: absolute; top: 0.55rem; height: 2.1rem;
  border-radius: 0;
  background: var(--sand-2);
  border: 1px solid var(--rule-strong);
  display: flex; align-items: center;
  padding-inline: var(--space-3);
  font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.is-in .gantt__bar { transform: scaleX(1); }
.gantt__bar--red {
  background: linear-gradient(90deg, var(--red-brand), #c4130c);
  border-color: var(--red); color: #ffeceb;
  box-shadow: 0 0 10px rgba(239, 33, 25, 0.6), 0 0 26px rgba(239, 33, 25, 0.25);
}
.gantt__bar--navy { background: linear-gradient(90deg, #13131a, #26262f); border-color: var(--rule-strong); }
.gantt__bar--ghost { background: transparent; border-style: dashed; color: var(--dusk); }
.gantt__legend { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--text-xs); color: var(--ink-muted); }
.gantt__legend span { display: flex; align-items: center; gap: var(--space-2); }
.gantt__swatch { width: 14px; height: 10px; border-radius: 0; border: 1px solid var(--rule-strong); flex: none; }
@media (max-width: 720px) {
  .gantt__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .gantt__bar { font-size: 0; padding: 0; }
  .gantt__lane { height: 2rem; }
  .gantt__bar { top: 0.3rem; height: 1.4rem; }
}

/* Parcel grid */
.parcels { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 30rem; }
.parcels i {
  display: block; aspect-ratio: 1; border-radius: 0;
  background: #0c0c0f; border: 1px solid var(--rule);
  opacity: 0.3; transform: scale(0.82);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              background 600ms ease, box-shadow 600ms ease;
}
.is-in .parcels i {
  opacity: 1; transform: scale(1);
  background: linear-gradient(135deg, var(--red-brand), #d5150d);
  border-color: var(--red);
  box-shadow: 0 0 7px rgba(239, 33, 25, 0.5);
}
.parcels__meta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-8); }
.parcels__stat .n {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  color: var(--navy); font-variant-numeric: tabular-nums lining-nums; line-height: 1;
}
.parcels__stat .t { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* Signature meter */
.meter { margin-top: clamp(2.5rem, 4vw, 3.25rem); position: relative; }
.meter__track {
  position: relative; height: 3.25rem; border: 1px solid var(--rule); border-radius: 0; overflow: hidden;
  background: repeating-linear-gradient(90deg, #101013 0 7px, #0a0a0c 7px 8px);
}
.meter__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--red-brand), var(--red));
  box-shadow: 0 0 14px rgba(239, 33, 25, 0.6);
  transition: width 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.meter__cut {
  position: absolute; right: 0; top: -0.5rem; height: 4.25rem;
  width: 2px; background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.meter__cut::after {
  content: attr(data-label);
  position: absolute; top: -1.35rem;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap;
}
.meter__legend { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.meter__legend div .n { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--navy); font-variant-numeric: tabular-nums; }
.meter__legend div .n.red { color: var(--red-deep); }
.meter__legend div .t { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }

/* Two-up panel grid */
.duo { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
.duo > .panel { margin-top: 0; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* ---------------- Open threads ---------------- */
.threads { border-top: 1px solid var(--rule); padding-block: clamp(3.5rem, 8vw, 6rem); position: relative; z-index: 2; }
.threads__grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
.thread {
  border: 1px dashed var(--rule-strong);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: #060608;
}
.thread__tag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.thread__q { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.25; color: var(--navy); }
.thread__p { margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 900px) { .threads__grid { grid-template-columns: 1fr; } }

.notice {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 2px solid var(--clay);
  padding-left: var(--space-5);
  max-width: 70ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---------------- Close ---------------- */
.dd-close { border-top: 1px solid var(--rule); padding-block: clamp(4rem, 9vw, 7rem); position: relative; z-index: 2; }
.dd-close__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--navy); max-width: 24ch;
}
.dd-close__p { margin-top: var(--space-6); max-width: 58ch; font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.75; color: var(--ink); }
.dd-close__cta { margin-top: clamp(2rem, 4vw, 2.75rem); display: flex; flex-wrap: wrap; gap: var(--space-4); }

body.dd .btn--primary { background: var(--red); border-color: var(--red); color: #fdf6f4; }
body.dd .btn--primary:hover { background: #b8332c; border-color: #b8332c; }
body.dd .btn--ghost { border-color: var(--rule-strong); color: var(--navy); }
body.dd .btn--ghost:hover { border-color: var(--navy); }

/* ---------------- Sources ---------------- */
.sources { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 2; }
.sources__list { margin-top: var(--space-8); display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sources__list li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); font-size: var(--text-xs); line-height: 1.6; color: var(--ink-muted); }
.sources__list b { font-family: var(--font-display); color: var(--dusk); font-weight: 700; }
.sources__list a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; word-break: break-word; }
.sources__list a:hover { color: var(--red-deep); }
@media (max-width: 780px) { .sources__list { grid-template-columns: 1fr; } }

/* Reveal */
.dd .reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.dd .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dd .reveal, .dd .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .bar__fill, .meter__fill, .gantt__bar, .parcels i { transition: none; }
  .gantt__bar { transform: scaleX(1); }
  .tl__spine-fill { stroke-dashoffset: 0 !important; }
}

/* Wider editorial timeline on large screens: date sits in its own rail */
@media (min-width: 1040px) {
  .tl__item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 var(--space-8); align-items: start; }
  .tl__date { grid-row: 1 / span 8; padding-top: 0.3rem; }
  .tl__title { margin-top: 0; max-width: 40ch; }
  .tl__body, .tl__list, .tl__quote, .tl__who { max-width: 68ch; }
}


/* chart edge fixes */
.gantt__tick--first { transform: translateX(0); }
.gantt__tick--last { transform: translateX(-100%); }
.meter__cut::after { left: auto; right: 0.5rem; }
.meter__legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 780px) { .meter__legend { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 640px) { .gantt__tick--minor { display: none; } }


/* ==========================================================================
   Plain-language layer: the six-step chain, "in plain English" callouts,
   chart context boxes, and the glossary
   ========================================================================== */

/* ---------------- The short version ---------------- */
.chain {
  position: relative; z-index: 2;
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.chain__head { max-width: 62ch; }
.chain .eyebrow { color: var(--red-deep); }
.chain__title {
  margin-top: var(--space-5);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--navy);
}
.chain__lede {
  margin-top: var(--space-5); max-width: 56ch;
  font-family: var(--font-serif); font-size: var(--text-base);
  line-height: 1.7; color: var(--ink-muted);
}

.chain__list {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  list-style: none; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
}
.chain__step {
  position: relative;
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
/* connector: red rail down the number column */
.chain__step::before {
  content: ''; position: absolute; left: 1.65rem; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(239, 33, 25, 0.55), rgba(239, 33, 25, 0.12));
}
.chain__step:first-child::before { top: 2.6rem; }
.chain__step:last-child::before { bottom: auto; height: 2.6rem; }

.chain__n {
  position: relative; z-index: 1;
  width: 3.3rem; height: 3.3rem;
  display: grid; place-items: center;
  border: 1px solid var(--red);
  background: #000;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.35rem; line-height: 1;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums lining-nums;
  box-shadow: 0 0 14px rgba(239, 33, 25, 0.35);
}
.chain__body h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.015em;
  color: var(--navy); max-width: 44ch;
}
.chain__body p {
  margin-top: var(--space-4); max-width: 66ch;
  font-size: var(--text-base); line-height: 1.7; color: var(--ink);
}

.chain__result {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--red);
  border-left-width: 3px;
  background: linear-gradient(100deg, rgba(137, 7, 6, 0.22), rgba(0, 0, 0, 0) 72%), #060608;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: 0 0 40px -12px rgba(239, 33, 25, 0.4);
}
.chain__result-k {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red-deep);
}
.chain__result-p {
  margin-top: var(--space-4); max-width: 64ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-lg); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--navy);
}
.chain__result-s {
  margin-top: var(--space-5); max-width: 60ch;
  font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted);
}
@media (max-width: 640px) {
  .chain__step { grid-template-columns: 1fr; gap: var(--space-4); }
  .chain__step::before { display: none; }
  .chain__n { width: 2.8rem; height: 2.8rem; font-size: 1.15rem; }
}

/* ---------------- "In plain English" act callouts ---------------- */
.plain {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 74ch;
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(137, 7, 6, 0.16), rgba(0, 0, 0, 0) 78%);
  padding: var(--space-5) var(--space-6);
}
.plain__k {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red-deep);
}
.plain__p {
  margin-top: var(--space-3);
  font-size: var(--text-base); line-height: 1.65; color: var(--navy-soft);
}
@media (min-width: 1040px) { .plain { margin-left: 6.5rem; } }

/* ---------------- Chart context boxes ---------------- */
.sowhat {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
  max-width: 78ch;
}
.sowhat__k {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red-deep);
}
.sowhat__p {
  margin-top: var(--space-3);
  font-size: var(--text-sm); line-height: 1.75; color: var(--ink);
}
.sowhat__p em { font-style: italic; color: var(--navy); }
.sowhat__p a {
  color: var(--navy-soft); text-decoration: underline;
  text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.sowhat__p a:hover { color: var(--red-deep); }

/* ---------------- Glossary ---------------- */
.gloss {
  position: relative; z-index: 2;
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.gloss__head { max-width: 62ch; }
.gloss .eyebrow { color: var(--red-deep); }
.gloss__title {
  margin-top: var(--space-5);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--navy);
}
.gloss__lede {
  margin-top: var(--space-5); max-width: 56ch;
  font-family: var(--font-serif); font-size: var(--text-base);
  line-height: 1.7; color: var(--ink-muted);
}
.gloss__list {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.gloss__row {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.gloss__row dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-sm); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--navy);
}
.gloss__row dd {
  margin: 0;
  font-size: var(--text-sm); line-height: 1.7; color: var(--ink-muted);
}
@media (max-width: 1040px) { .gloss__list { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .gloss__row { grid-template-columns: 1fr; gap: var(--space-2); }
}