/* ═══════════════════════════════════════════════════════════════
   THE MASTER'S HOUSE — site stylesheet
   Institutional / surveillance / archival
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Palette ── */
  --ink:           #0B1638;
  --ink-deep:      #050B22;
  --navy:          #142563;
  --navy-2:        #1A2D7A;
  --navy-3:        #234099;
  --line:          #3A5BB8;
  --line-bright:   #6A92E8;
  --line-faint:    rgba(106, 146, 232, 0.28);
  --line-strong:   rgba(245, 240, 224, 0.22);

  --stamp-red:     #9D2220;

  --bone:          #F5F0E0;
  --bone-dim:      #DCD5BD;
  --bone-faint:    #A8A189;
  --bone-ghost:    rgba(245, 240, 224, 0.55);

  --orange:        #F07830;
  --orange-2:      #E8651D;
  --orange-soft:   rgba(240, 120, 48, 0.18);
  --orange-faint:  rgba(240, 120, 48, 0.08);
}

/* Typed @property declarations so CSS animations interpolate the
   orange variables smoothly. Required for the body[data-tape-
   playing] pulse below — without these, custom-property animations
   snap discretely. Initial values match the :root defaults above,
   so static rendering is unchanged. */
@property --orange {
  syntax: '<color>';
  inherits: true;
  initial-value: #F07830;
}
@property --orange-soft {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(240, 120, 48, 0.18);
}
@property --orange-faint {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(240, 120, 48, 0.08);
}

:root {
  /* keep the rest of the variable block clean — tail-noop */

  --info:          #9ABAEE;

  /* ── Type ── */
  --display: 'Playfair Display', 'Times New Roman', serif; /* giant H1 only */
  --serif:   'Inter', system-ui, sans-serif; /* body — Inter for max legibility */
  --sans:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --tr-tight:    0.04em;
  --tr-wide:     0.14em;
  --tr-wider:    0.20em;
  --tr-widest:   0.32em;

  /* ── Spacing ── */
  --gap-1:  4px;
  --gap-2:  8px;
  --gap-3:  12px;
  --gap-4:  16px;
  --gap-5:  24px;
  --gap-6:  32px;
  --gap-7:  48px;
  --gap-8:  64px;
  --gap-9:  96px;
  --gap-10: 128px;

  /* ── Frame ── */
  --frame-pad: clamp(20px, 3vw, 40px);
  --content-max: 1440px;
}

/* Accessibility — visually hidden but screen-reader-readable */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background-image:
    /* hairline grid */
    linear-gradient(to right, rgba(106, 146, 232, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(106, 146, 232, 0.09) 1px, transparent 1px),
    /* coarse grid */
    linear-gradient(to right, rgba(106, 146, 232, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(106, 146, 232, 0.15) 1px, transparent 1px),
    /* base wash — larger spotlight that follows the eye down the page */
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(74, 120, 216, 0.42), rgba(35, 64, 153, 0.18) 45%, transparent 75%);
  background-size: 20px 20px, 20px 20px, 120px 120px, 120px 120px, 100% 100%;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* film grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* scanline (very subtle) */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 8999;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  opacity: 0.25;
  mix-blend-mode: multiply;
}

::selection { background: var(--orange); color: var(--ink); }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--navy-3); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ═══ FRAME ═══ */
.frame {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--frame-pad);
  position: relative;
}

/* ═══ TOP BAR (institutional console) ═══ */
.console {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 11, 34, 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.console-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "mark meta nav"
    "mark trace nav";
  align-items: center;
  /* Split the grid gap — keep horizontal spacing between mark/meta/nav,
     but collapse the vertical gap between the top row and the trace row.
     The trace row's own border-top + padding handles its breathing room. */
  column-gap: var(--gap-6);
  row-gap: 0;
  /* drop fixed height — let two-row layout breathe */
  min-height: 56px;
  padding: 0 var(--frame-pad);
}
.console-mark { grid-area: mark; }
.console-meta:not(.console-meta-trace) { grid-area: meta; }
.console-nav  { grid-area: nav; }
.console-meta-trace {
  grid-area: trace;
  border-top: 1px solid var(--line);
  padding: 6px 0 8px;
}
/* Visitor-specific cells fade in once visitor.js resolves (or fails gracefully).
   The Threat-Level cell sits beside them and is always visible — institutional, not subject-specific. */
.console-meta-trace > span:not(.threat-cell) {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body[data-visitor-resolved="1"] .console-meta-trace > span:not(.threat-cell) {
  opacity: 1;
  transform: translateY(0);
}

/* Threat-level cell — site-wide vital sign */
.threat-cell {
  position: relative;
}
.threat-cell .threat-level {
  color: var(--bone);
  font-weight: 500;
  margin-left: 6px;
}
.threat-cell .threat-level::before {
  content: '●';
  margin-right: 6px;
  color: var(--orange);
  font-size: 9px;
  vertical-align: 1px;
  animation: threat-pulse 2.4s ease-in-out infinite;
}
@keyframes threat-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
/* While a recording is playing, the House takes the page over.
   Every orange thing breathes — and not subtly. Three layers
   working together:

   1. --orange / --orange-soft / --orange-faint pulse with a wide
      amplitude (dim base → luminous peak), so all variable-driven
      orange (text, borders, backgrounds, brackets, buttons,
      registration marks) brightens and dims in unison.
   2. A fixed body::before orange wash overlays the whole viewport
      with screen-blend orange that pulses opacity — atmospheric
      "the room is on fire" haze.
   3. Body inherits a text-shadow tied to var(--orange) so every
      glyph glows; the orange ones glow brightest because the
      shadow colour matches the text. */

body[data-tape-playing="1"] {
  /* 1s duration + lub-dub keyframes match the existing live-heartbeat
     and threat-heartbeat animations exactly, so the whole-page pulse
     beats in sync with the live status dot and the nominal threat
     dot. Same rhythm: two quick beats at 10% + 30%, then rest until
     the next cycle. Alpha-based pulsing (rgba with shifting alpha)
     mirrors how the dots pulse opacity rather than hue. */
  animation: tmh-orange-breathe 1s ease-in-out infinite;
  text-shadow: 0 0 10px var(--orange-soft);
}
@keyframes tmh-orange-breathe {
  0%, 45%, 100% {
    --orange: rgba(240, 120, 48, 0.5);
    --orange-soft: rgba(240, 120, 48, 0.10);
    --orange-faint: rgba(240, 120, 48, 0.04);
  }
  10%, 30% {
    --orange: rgba(240, 120, 48, 1);
    --orange-soft: rgba(240, 120, 48, 0.55);
    --orange-faint: rgba(240, 120, 48, 0.26);
  }
  20% {
    --orange: rgba(240, 120, 48, 0.7);
    --orange-soft: rgba(240, 120, 48, 0.25);
    --orange-faint: rgba(240, 120, 48, 0.10);
  }
}

/* Atmospheric orange wash — fixed full-viewport overlay, beats in
   sync with everything else. Same lub-dub keyframes, same 1s cycle.
   Screen blend so it can only brighten, never darken. */
body[data-tape-playing="1"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(240, 120, 48, 0.18) 0%,
    rgba(240, 120, 48, 0.08) 40%,
    transparent 75%
  );
  mix-blend-mode: screen;
  animation: tmh-orange-wash 1s ease-in-out infinite;
}
@keyframes tmh-orange-wash {
  0%, 45%, 100% { opacity: 0.15; }
  10%, 30%      { opacity: 1; }
  20%           { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-tape-playing="1"],
  body[data-tape-playing="1"]::before { animation: none; }
  body[data-tape-playing="1"]::before { opacity: 0.4; }
}

/* When a recording is playing, the House's pulse quickens — human heartbeat rhythm */
body[data-tape-playing="1"] .threat-cell .threat-level::before {
  animation: threat-heartbeat 1s ease-in-out infinite;
  color: var(--orange);
  text-shadow: 0 0 8px var(--orange);
}
body[data-tape-playing="1"] .threat-cell .threat-level {
  color: var(--orange);
  transition: color 0.3s ease;
}
@keyframes threat-heartbeat {
  /* lub-dub: two quick beats, then rest */
  0%   { opacity: 0.4; transform: scale(1); }
  10%  { opacity: 1;   transform: scale(1.25); }
  20%  { opacity: 0.6; transform: scale(1); }
  30%  { opacity: 1;   transform: scale(1.2); }
  45%  { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(1); }
}
.threat-cell .threat-level::before {
  display: inline-block;
  transform-origin: center;
}

.console-mark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.console-mark-glyph {
  width: 26px; height: 26px;
  border: 1.5px solid var(--orange);
  position: relative;
  flex-shrink: 0;
}
.console-mark-glyph::before {
  content: ''; position: absolute;
  inset: 4px;
  border: 1px solid var(--bone);
}
.console-mark-glyph::after {
  content: ''; position: absolute;
  top: 50%; left: -4px; right: -4px;
  height: 1px; background: var(--orange);
}
.console-mark-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--bone);
  text-transform: uppercase;
}

.console-meta {
  display: flex;
  justify-content: center;
  gap: var(--gap-6);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--bone-faint);
}
.console-meta b {
  color: var(--bone);
  font-weight: 500;
  margin-left: 6px;
}
.console-meta .live { color: var(--orange); }
.console-meta .live::before {
  content: '●';
  margin-right: 5px;
  animation: blink 1.4s steps(2) infinite;
  display: inline-block;
  transform-origin: center;
}
@keyframes blink {
  50% { opacity: 0.25; }
}
/* When a recording is playing, the live dot also beats in heartbeat sync */
body[data-tape-playing="1"] .console-meta .live::before {
  animation: live-heartbeat 1s ease-in-out infinite;
  text-shadow: 0 0 8px var(--orange);
}
@keyframes live-heartbeat {
  0%   { transform: scale(1);    opacity: 0.5; }
  10%  { transform: scale(1.3);  opacity: 1;   }
  20%  { transform: scale(1);    opacity: 0.7; }
  30%  { transform: scale(1.25); opacity: 1;   }
  45%  { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1);    opacity: 0.5; }
}

/* visitor probe — IP & location populate on load */
.console-meta [data-visitor-ip],
.console-meta [data-visitor-loc] {
  font-feature-settings: 'tnum';
  transition: color 0.4s ease, opacity 0.4s ease;
}
body[data-visitor-resolved="1"] .console-meta [data-visitor-ip] {
  color: var(--orange);
  animation: tmh-visitor-reveal 0.6s ease both;
}
body[data-visitor-resolved="1"] .console-meta [data-visitor-loc] {
  color: var(--bone);
  animation: tmh-visitor-reveal 0.6s 0.08s ease both;
}
@keyframes tmh-visitor-reveal {
  0%   { opacity: 0; transform: translateY(-1px); letter-spacing: 0.2em; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: var(--tr-wider); }
}

.console-nav {
  display: flex;
  gap: 2px;
}

/* ── HAMBURGER TOGGLE — visible only on mobile ── */
.console-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 0;
  cursor: pointer;
  width: 36px;
  height: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.console-nav-toggle:hover { border-color: var(--orange); }
.console-nav-toggle .hamburger-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Open state: middle line fades, top + bottom rotate into an X */
.console-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.console-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.console-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
.console-nav-toggle[aria-expanded="true"] { border-color: var(--orange); }
.console-nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.console-nav a:hover { color: var(--bone); border-color: var(--line); }
.console-nav a.active { color: var(--orange); border-color: var(--orange); }

/* scroll progress hairline */
.console::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: var(--scroll, 0%);
  background: var(--orange);
  transition: width 0.05s linear;
}

/* ═══ COORDINATE STRIP (slim sub-bar with file path) ═══ */
.coords {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 26, 74, 0.5);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
}
.coords-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--frame-pad);
  gap: var(--gap-5);
  flex-wrap: wrap;
}
.coords-path { color: var(--bone-dim); }
.coords-path .sep { color: var(--bone-faint); margin: 0 8px; }
.coords-path .here { color: var(--orange); }
.coords-path .coords-link {
  color: var(--bone-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--bone-faint);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.coords-path .coords-link:hover,
.coords-path .coords-link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.coords-path .coords-link:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: 2px;
}

/* ═══ LABELS ═══ */
.label {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--bone-faint);
}
.label-bone { color: var(--bone-dim); }
.label-orange { color: var(--orange); }

/* a horizontal "rule line" with label */
.rule {
  display: flex; align-items: center; gap: 16px;
  margin: var(--gap-7) 0 var(--gap-5);
}
.rule .label {
  white-space: nowrap;
  color: var(--orange);
  font-size: 16px;
}
.rule .line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--orange) 0, var(--orange) 24px, var(--line) 24px, var(--line) 100%);
}
.rule .ix {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-wide);
  color: var(--bone-faint);
}

/* ═══ HERO ═══ */
.hero {
  position: relative;
  /* Top padding tightened so the CTA buttons sit closer to the
     fold without changing the layout structure. */
  padding: clamp(40px, 5vw, 80px) 0 clamp(50px, 6vw, 90px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(240, 120, 48, 0.10), transparent 70%),
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(15, 33, 96, 0.7), transparent 60%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap-8);
  align-items: end;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--gap-5);
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* Mobile: tighten size + letter-spacing so 'A RECORD · NOT A
     MOVEMENT' stays on one line on a typical phone width (was
     wrapping 'MOVEMENT' to a second line on iPhone). */
  .hero-eyebrow {
    font-size: 12px;
    letter-spacing: var(--tr-wide);
  }
}
/* The leading orange dash before .hero-eyebrow text was removed per
   Kane's request — the eyebrow text now stands on its own. */

.hero-title {
  font-family: var(--display);
  font-weight: 900;
  /* Cap dropped 184 → 135 — slightly smaller so the deck and CTAs
     pull up into view without restructuring the layout. */
  font-size: clamp(56px, 9vw, 135px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  color: var(--orange);
  font-weight: 400;
}
.hero-title .small {
  display: block;
  font-family: var(--sans);
  font-size: 0.28em;
  font-weight: 400;
  font-style: normal;
  color: var(--bone-dim);
  letter-spacing: 0.005em;
  margin-top: var(--gap-4);
  line-height: 1.5;
  max-width: 720px;
}

.hero-side {
  border-left: 1px solid var(--line);
  padding-left: var(--gap-5);
  font-family: var(--sans);
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.7;
  max-width: 380px;
}
.hero-side .label {
  display: block;
  margin-bottom: var(--gap-3);
}
.hero-side p { margin-bottom: var(--gap-4); }
.hero-side .hero-side-lead {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--bone);
  letter-spacing: -0.005em;
  margin-bottom: var(--gap-5);
  padding-bottom: var(--gap-4);
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.hero-side .hero-side-lead em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.hero-side p em { color: var(--bone); font-family: var(--sans); font-style: italic; font-weight: 500; }

.hero-cta {
  margin-top: var(--gap-5);
  display: flex; gap: 10px; flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bone);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  font-weight: 600;
}
.btn--primary:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ── ticker under hero ── */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex;
  animation: scroll-x 36s linear infinite;
  white-space: nowrap;
  padding: 12px 0;
  gap: 0;
}
.ticker-item {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ticker-item .dot { color: var(--orange); }
.ticker-item .num { color: var(--orange); font-weight: 600; }
@keyframes scroll-x {
  to { transform: translateX(-50%); }
}

/* ═══ SECTION SHELL ═══ */
.sec {
  padding: clamp(50px, 7vw, 110px) 0;
  border-bottom: 1px solid var(--line);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-7);
  margin-bottom: var(--gap-7);
  align-items: end;
}
.sec-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sec-head h2 em {
  font-style: normal;
  color: var(--orange);
}
.sec-head .deck {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 480px;
  justify-self: end;
}
.sec-head .deck em { color: var(--bone); font-family: var(--sans); font-style: italic; font-weight: 500; }
/* Caption between heading row and case list — names the visibility
   rule ("Case 001 + 9 most recent; older move to Archive") and links
   the Archive. Sits full-width below the heading, not in the heading
   grid. Slightly larger than the prior in-grid version. */
.case-list-caption {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
  line-height: 1.6;
  margin: 0 0 var(--gap-5);
  max-width: 720px;
}
.case-list-caption a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px dotted var(--orange);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.case-list-caption a:hover {
  color: var(--bone);
  border-bottom-color: var(--bone);
}
@media (max-width: 720px) {
  .case-list-caption { font-size: 12px; }
}

/* ═══ MANIFESTO PANEL (House voice excerpt) ═══ */
.manifesto {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(240, 120, 48, 0.08), transparent 60%),
    var(--navy);
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid var(--line);
  padding: clamp(60px, 8vw, 120px) 0;
  position: relative;
}
.manifesto::before {
  content: 'TRANSMISSION 000 / FOUNDATIONAL';
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-widest);
  color: var(--orange);
  white-space: nowrap;
}
.manifesto-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--frame-pad);
}
.manifesto-salutation {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  color: var(--bone);
  margin-bottom: var(--gap-4);
  display: block;
  letter-spacing: -0.01em;
}
.manifesto p {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bone);
  margin-bottom: var(--gap-4);
  /* default greedy wrapping — fill each line to max, then break.
     Was `text-wrap: pretty` which tried to balance lines across the
     whole paragraph and produced inconsistent first-line lengths
     (paragraphs 1 and 2 wrapped early to avoid short last lines;
     paragraph 3 wrapped fully because it happened to fit the algo). */
  letter-spacing: 0.005em;
}
.manifesto p em { color: var(--orange); font-family: var(--sans); font-style: italic; font-weight: 500; }
.manifesto-quote {
  border-top: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  padding: var(--gap-6) 0 !important;
  margin: var(--gap-6) 0 !important;
  font-style: normal !important;
  text-align: center;
  font-size: clamp(26px, 3vw, 40px) !important;
  color: var(--orange) !important;
}
.manifesto-sig {
  margin-top: var(--gap-7);
  display: flex; justify-content: space-between; align-items: end;
  border-top: 1px solid var(--line);
  padding-top: var(--gap-5);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
}
.manifesto-sig .name { color: var(--orange); }

/* ═══ FOUNDATIONAL TRANSMISSION (Option C) — feature-box treatment
   Reuses .feature-box / .feature-meta / .feature-head / .feature-body
   / .feature-stamp from the methodology page. The additions below
   are just the salutation line above the body, the bottom foot row
   that pairs the continue-link with the "— The House" stamp, and
   the orange-on-link styling for the Continue Reading hyperlink.
   The wrapper section gives the homepage version a top margin so
   it doesn't collide with the section above. ═══ */
.dispatch-feature {
  /* Generous top padding so the box doesn't sit hard up against the
     KPI strip above; trimmed bottom because the case index that
     follows should feel like the next beat, not a separate world. */
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 64px);
}

/* Architectural corner brackets (Option 1 — feature framing).
   The .dispatch-feature-mount is a positioning context centred at
   the box's max-width; brackets are absolute spans offset OUTSIDE
   the box edges so they read as registration marks framing the
   "feature plate". Echoes the tape player's corner marks and the
   blueprint vocabulary used elsewhere on the site. */
.dispatch-feature-mount {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
}
.dispatch-feature-mount .bracket {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid var(--orange);
  pointer-events: none;
  z-index: 2;
}
.dispatch-feature-mount .bracket--tl {
  top: -18px; left: -18px;
  border-right: none; border-bottom: none;
}
.dispatch-feature-mount .bracket--tr {
  top: -18px; right: -18px;
  border-left: none; border-bottom: none;
}
.dispatch-feature-mount .bracket--bl {
  bottom: -18px; left: -18px;
  border-right: none; border-top: none;
}
.dispatch-feature-mount .bracket--br {
  bottom: -18px; right: -18px;
  border-left: none; border-top: none;
}
@media (max-width: 640px) {
  .dispatch-feature-mount .bracket {
    width: 36px; height: 36px;
  }
  .dispatch-feature-mount .bracket--tl,
  .dispatch-feature-mount .bracket--tr { top: -10px; }
  .dispatch-feature-mount .bracket--bl,
  .dispatch-feature-mount .bracket--br { bottom: -10px; }
  .dispatch-feature-mount .bracket--tl,
  .dispatch-feature-mount .bracket--bl { left: -10px; }
  .dispatch-feature-mount .bracket--tr,
  .dispatch-feature-mount .bracket--br { right: -10px; }
}
/* Combined-class selector (specificity 0,2,0) beats the later
   .feature-box rule (0,1,0) — needed because .feature-box's margin
   would otherwise override the explicit zero margin set here.
   Centring/width is handled by .dispatch-feature-mount above; the
   box itself just needs to fill its parent and reset margin. */
.feature-box.dispatch-feature-box {
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 48px);
  margin: 0;
}
/* Inside the homepage box, override the global .feature-body and
   merged-element caps — let them flow to the box's inner width. */
.dispatch-feature-box .feature-body,
.dispatch-feature-box .dispatch-merged-sub,
.dispatch-feature-box .dispatch-merged-tape,
.dispatch-feature-box .dispatch-merged-rule {
  max-width: none;
}
.dispatch-feature-salutation {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--bone);
  margin: 0 0 var(--gap-5);
}
.dispatch-feature-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  margin-top: var(--gap-6);
  padding-top: var(--gap-5);
  border-top: 1px solid var(--line);
}
.dispatch-feature-foot .feature-stamp {
  margin-top: 0;  /* override default top-margin on .feature-stamp */
}
.dispatch-feature-link {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dispatch-feature-link:hover { opacity: 0.78; }

/* ─── Merged audio + transcript additions ─────────────────────
   Sub-line beneath the headline, tape spacing, and a small
   '/ Transcript' divider that visually separates the recording
   from the written text. */
.dispatch-merged-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--bone-dim);
  margin: 0 0 var(--gap-6);
  max-width: 760px;
}
.dispatch-merged-tape {
  margin: 0 0 var(--gap-7);
  max-width: 760px;     /* match .feature-body's max-width so the
                           tape, divider, and body share one column
                           — fixes the imbalance where the tape was
                           full-bleed but the body text was capped. */
}
.dispatch-merged-rule {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 var(--gap-5);
  max-width: 760px;
}
.dispatch-merged-rule-label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
.dispatch-merged-rule-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--orange) 0, var(--orange) 24px, var(--line) 24px, var(--line) 100%);
}
@media (max-width: 640px) {
  .dispatch-feature-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .dispatch-feature-link { font-size: 14px; }
}

/* ═══ FIRST FILING (Option B) — case-file twin treatment
   Treats the homepage Foundational Transmission as Entry 000, the
   foundational case file. Reuses .case-head + .prose .prose-numbered
   directly so it's visually identical to the case detail pages.
   The wrapper below adds the section background + the closing
   "continue" navigation card. ═══ */
.dispatch-case {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(240, 120, 48, 0.08), transparent 60%),
    var(--navy);
  border-top: 2px solid var(--orange);
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* "Continue" navigation card at the bottom — shaped like a case-file
   directory entry. Slash label + serif title on the left, oversized
   orange arrow on the right. Hover state mirrors the .manifesto-cont
   we replaced (slide-right padding + orange wash). */
.dispatch-case-next {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  margin: 48px 0 0;
  padding: 32px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--bone);
  transition: background 0.25s, border-color 0.25s, padding-left 0.25s;
}
.dispatch-case-next:hover,
.dispatch-case-next:focus-visible {
  background: rgba(240, 120, 48, 0.08);
  border-color: var(--orange);
  padding-left: 40px;
  outline: none;
}
.dispatch-case-next-label {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.dispatch-case-next-title {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--bone);
  line-height: 1.3;
}
.dispatch-case-next-arrow {
  font-family: var(--mono);
  font-size: 36px;
  line-height: 1;
  color: var(--orange);
  transition: transform 0.25s;
}
.dispatch-case-next:hover .dispatch-case-next-arrow {
  transform: translateX(8px);
}
@media (max-width: 640px) {
  .dispatch-case-next {
    padding: 24px;
    gap: 16px;
  }
  .dispatch-case-next-arrow { font-size: 28px; }
}

/* ═══ DISPATCH (Option A) — Foundational Transmission as a letter
   Replaces the .manifesto/.manifesto-cont centered-callout pattern.
   Layout: letterhead row at top (left-aligned slash label + filing
   date stamp on the right), narrow serif body, right-aligned italic
   sign-off, and a P.S. footnote replacing the bordered button. The
   old .manifesto-* rules above are dormant — kept for now in case
   we want to A/B/C between Options. ═══ */
.dispatch {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(240, 120, 48, 0.08), transparent 60%),
    var(--navy);
  border-top: 2px solid var(--orange);
  padding: clamp(60px, 8vw, 120px) 0;
}
.dispatch-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--frame-pad);
}

/* Letterhead: from-line + kind on the left, filing stamp on the right.
   Separated from the body by a thin orange rule beneath. */
.dispatch-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  padding-bottom: var(--gap-5);
  border-bottom: 1px solid var(--orange);
  margin-bottom: var(--gap-7);
}
.dispatch-from {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.dispatch-kind, .dispatch-stamp {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
}
.dispatch-kind { display: block; }
.dispatch-stamp { white-space: nowrap; }

/* Body of the letter — narrow serif column, left-aligned. */
.dispatch-salutation {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--bone);
  margin-bottom: var(--gap-5);
  letter-spacing: -0.005em;
}
.dispatch-body p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--bone);
  margin-bottom: var(--gap-4);
  letter-spacing: 0.005em;
}
.dispatch-body p em {
  color: var(--orange);
  font-family: var(--sans);
  font-style: italic;
  font-weight: 500;
}

/* Sign-off: italic right-aligned block at the close of the letter. */
.dispatch-signoff {
  margin-top: var(--gap-6);
  text-align: right;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--bone);
}
.dispatch-signoff > span { display: block; }
.dispatch-signoff .dispatch-name {
  margin-top: 8px;
  color: var(--orange);
  font-weight: 600;
  font-style: normal;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: var(--tr-wide);
}

/* P.S. footnote — replaces the previous bordered "continue" button.
   Quiet inline link; mono "P.S." mark in orange to anchor it visually. */
.dispatch-ps {
  margin-top: var(--gap-7);
  padding-top: var(--gap-5);
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--bone-dim);
}
.dispatch-ps-mark {
  font-family: var(--mono);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--orange);
  margin-right: 12px;
  font-size: 13px;
}
.dispatch-ps a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}
.dispatch-ps a:hover { opacity: 0.7; }

@media (max-width: 640px) {
  .dispatch-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .dispatch-salutation { font-size: 19px; }
  .dispatch-body p { font-size: 16px; }
}

/* ═══ IN VOICE — recording-as-record block ═══ */
.invoice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 32px;
}
.invoice-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--orange);
}
.invoice-h {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 900;
  line-height: 1.04;
  color: var(--bone);
  margin-top: 16px;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 18ch;
}
.invoice-h em {
  font-style: italic;
  color: var(--orange);
}
.invoice-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--bone-dim);
  margin-top: 18px;
  max-width: 38ch;
  font-style: italic;
}
.invoice-stamp {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: right;
  min-width: 260px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.invoice-stamp__lead { color: var(--bone); }
.invoice-stamp b {
  color: var(--orange);
  font-weight: 500;
}
.invoice-stamp__row2 { margin-top: 14px; }
.invoice-stamp__verdict {
  color: var(--bone);
  font-size: 13px;
}
.invoice-stamp__note {
  margin-top: 10px;
  color: var(--bone-faint);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--serif);
  max-width: 28ch;
  margin-left: auto;
}
@media (max-width: 820px) {
  .invoice-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .invoice-stamp {
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 20px;
    min-width: 0;
  }
  .invoice-stamp__note { margin-left: 0; }
}

/* manifesto continuation link → House Rules */
.manifesto-cont {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: var(--gap-6);
  padding: 22px 28px;
  border: 1px solid var(--line);
  background: rgba(74, 120, 216, 0.04);
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  transition: background 0.25s, border-color 0.25s, padding-left 0.25s;
}
.manifesto-cont:hover {
  background: rgba(240, 120, 48, 0.08);
  border-color: var(--orange);
  padding-left: 36px;
}
.manifesto-cont__label {
  color: var(--bone);
}
.manifesto-cont__rule {
  height: 1px;
  background: linear-gradient(to right, var(--bone-faint), transparent);
  opacity: 0.6;
}
.manifesto-cont__more {
  color: var(--orange);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.manifesto-cont__arrow {
  display: inline-block;
  transition: transform 0.25s;
}
.manifesto-cont:hover .manifesto-cont__arrow {
  transform: translateX(6px);
}
@media (max-width: 640px) {
  .manifesto-cont {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }
  .manifesto-cont__rule { display: none; }
}

/* ═══ CASE INDEX (the wall) ═══ */
.cases {
  padding: clamp(40px, 6vw, 90px) 0 0;
  /* Drop the .sec base border-bottom — the last .case-row's
     border-bottom already seals the section, and the two adjacent
     1px lines were rendering as a "double line" at the bottom of
     the case list. */
  border-bottom: none;
}
.case-list {
  border-top: 1px solid var(--line);
}
/* SEALED rows — case file not yet released. The House does not apologise. */
.case-row[data-sealed="1"] {
  cursor: not-allowed;
  opacity: 0.62;
  position: relative;
}
.case-row[data-sealed="1"]:hover {
  background: transparent;
  transform: none;
}
.case-row[data-sealed="1"] .num,
.case-row[data-sealed="1"] .title,
.case-row[data-sealed="1"] .author {
  color: var(--bone-faint);
}
.case-row[data-sealed="1"] .title em { color: var(--bone-faint); }
.case-row[data-sealed="1"] .verdict {
  color: var(--bone-faint);
  font-style: italic;
  letter-spacing: 0.06em;
}
.case-row[data-sealed="1"] .score b {
  color: var(--bone-faint);
}
.case-row[data-sealed="1"] .arrow {
  color: var(--bone-faint);
  font-family: var(--mono);
  font-size: 14px;
}
.case-row[data-sealed="1"]::after {
  content: '⌧ SEALED · PENDING RELEASE';
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%) rotate(-4deg);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--stamp-red);
  border: 1px solid var(--stamp-red);
  padding: 3px 8px;
  opacity: 0.55;
  pointer-events: none;
  background: rgba(157, 34, 32, 0.04);
}
@media (max-width: 720px) {
  .case-row[data-sealed="1"]::after { display: none; }
}

.case-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px 200px 110px 24px;
  gap: var(--gap-5);
  align-items: center;
  padding: var(--gap-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.2s, padding-left 0.25s, color 0.2s;
}
.case-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--orange);
  transition: width 0.25s;
}
.case-row:hover {
  background: rgba(240, 120, 48, 0.04);
  padding-left: 16px;
}
.case-row:hover::before { width: 3px; }

.case-row .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--tr-wide);
  color: var(--orange);
}
.case-row .title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.2;
  color: var(--bone);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.case-row .title em {
  display: block;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: 0.6em;
  color: var(--bone-dim);
  margin-top: 4px;
}
.case-row .author {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone);
}
.case-row .verdict {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--orange);
}
.case-row .score {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--tr-wide);
  color: var(--bone);
  text-align: right;
  white-space: nowrap;
}
.case-row .score b {
  color: var(--orange);
  font-weight: 600;
  font-size: 15px;
}
.case-row .arrow {
  font-family: var(--mono);
  color: var(--bone-faint);
  text-align: right;
  transition: color 0.2s, transform 0.2s;
}
.case-row:hover .arrow {
  color: var(--orange);
  transform: translateX(4px);
}
/* Critical-tier case row — the whole rectangle pulses a faint orange
   wash, in sync with the verdict text pulse below, so the row reads
   as the dominant filing on the wall (currently Case 001 / Lorde). */
/* Pulse scoped to the foundational row only (data-foundational="1"
   is set on the pinned Lorde case in index.njk). Other critical-tier
   cases — Combahee River Collective at 42/50, etc. — render flat. */
.case-row[data-foundational="1"] {
  animation: pulse-orange-row 2.4s ease-in-out infinite;
}
.case-row[data-foundational="1"]:hover {
  animation: none;
}
@keyframes pulse-orange-row {
  0%, 100% { background-color: rgba(240, 120, 48, 0.05); }
  50%      { background-color: rgba(240, 120, 48, 0.18); }
}

.case-row[data-foundational="1"] .verdict { animation: pulse-orange 2.4s ease-in-out infinite; }
@keyframes pulse-orange {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Mobile: drop grid entirely on .case-row, lay out children with
   block flow + an absolutely-positioned score in the top-right.
   Grid was being too clever and the author kept failing to render
   in the expected cell. Block flow is unambiguous: title flows,
   then author below it, in DOM order. */
@media (max-width: 640px) {
  .case-row {
    display: block !important;
    position: relative;
    padding: 18px 0;
    grid-template-columns: none;
  }
  .case-row > .num {
    display: inline-block;
    margin-bottom: 6px;
  }
  .case-row > .score {
    position: absolute;
    top: 18px;
    right: 0;
    text-align: right;
    margin-left: 0;
  }
  .case-row > div {
    display: block;
    margin: 0 96px 0 0;     /* leave room for score top-right */
    min-width: 0;
  }
  .case-row > .author {
    display: block !important;
    margin-top: 10px;
    color: var(--orange) !important;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    font-weight: 600;
  }
  .case-row > .author .author-subject { color: var(--orange); }
  .case-row > .author .author-date    { display: none; }
  .case-row > .verdict { display: none; }
  /* Arrow as a tappability cue on mobile. Anchored to the right gutter
     (the .case-row > div rule reserves 96px for it + the score above).
     Centred vertically so it reads as "the row's right-side handle"
     regardless of how tall the deck wraps to. Sized larger than desktop
     because it's the only hint the row is interactive on touch. */
  .case-row > .arrow {
    /* !important needed because the 1024px @media (later in source
       order, same specificity) sets display:none and would otherwise
       win on phones (both queries match). */
    display: block !important;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 32px;
    line-height: 1;
    color: var(--bone-faint);
  }
}

/* Archive link row at the bottom of the index — visually
   differentiated by being right-aligned with the left half empty,
   plus a large orange arrow signalling "this is a link out". */
.case-row--archive-link {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  grid-template-columns: none;
  padding: 28px 0;
  gap: 24px;
}
.case-row--archive-link::before { display: none; }
.case-row--archive-link:hover { padding-left: 0; padding-right: 16px; }
.case-row--archive-link .archive-link-content {
  text-align: right;
  max-width: 78%;
}
.case-row--archive-link .archive-link-content .title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.25;
  color: var(--bone);
  /* Title + em on one line — em is inline, separated by an em-dash */
}
.case-row--archive-link .archive-link-content .title em {
  display: inline;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  color: var(--bone-dim);
  margin-left: 8px;
}
.case-row--archive-link .archive-link-content .title em::before {
  content: "— ";
  color: var(--bone-faint);
}
.case-row--archive-link::after {
  content: "→";
  font-family: var(--mono);
  font-size: clamp(68px, 8vw, 104px);
  line-height: 1;
  font-weight: 400;
  color: var(--orange);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.case-row--archive-link:hover::after {
  transform: translateX(8px);
}
@media (max-width: 640px) {
  .case-row--archive-link { padding: 22px 0; gap: 16px; }
  .case-row--archive-link .archive-link-content { max-width: calc(100% - 60px); }
  .case-row--archive-link .archive-link-content .title em { display: block; margin-left: 0; margin-top: 4px; }
  .case-row--archive-link .archive-link-content .title em::before { content: ""; }
  .case-row--archive-link::after { font-size: 72px; }
}

/* ═══ FILTER ROW ═══ */
.filters {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--gap-4);
}
.filter {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bone-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.filter:hover { color: var(--bone); border-color: var(--bone-dim); }
.filter.active { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.filter .count {
  margin-left: 8px;
  color: var(--bone-faint);
}
.filter.active .count { color: var(--ink); opacity: 0.7; }

/* ═══ THREE-PANEL ROW (about/methodology/voice) ═══ */
.tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  background: var(--navy);
}
.tri > div,
.tri > .tri-room {
  padding: var(--gap-6) var(--gap-5);
  border-right: 1px solid var(--line);
  min-height: 280px;
}
.tri > div:last-child,
.tri > .tri-room:last-child { border-right: none; }

/* Three Rooms boxes are links to /about/. Anchor inherits the
   parent text colours; hover state lights an orange fill so it
   reads clearly as interactive. */
.tri > .tri-room {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.18s ease, color 0.18s ease;
  position: relative;
}
.tri > .tri-room:hover,
.tri > .tri-room:focus-visible {
  background-color: rgba(240, 120, 48, 0.10);
  outline: none;
}
.tri > .tri-room:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}
.tri > .tri-room .tri-room-tenants {
  margin-top: 18px;
  color: var(--bone-faint);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.tri h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  margin-bottom: var(--gap-4);
  color: var(--bone);
  text-wrap: balance;
}
.tri p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bone-dim);
}
.tri .num {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-widest);
  color: var(--orange);
  margin-bottom: var(--gap-4);
  display: block;
}

/* ═══ FOOTER ═══ */
.bldg-foot {
  background: var(--ink);
  padding: var(--gap-8) 0 var(--gap-5);
  border-top: 2px solid var(--orange);
}
.bldg-foot-grid {
  display: grid;
  /* Master's House column takes all remaining space on the left;
     the two link columns (Archive, Conduct+Outposts) shrink to
     content and sit on the right edge. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--gap-6) var(--gap-8);
  margin-bottom: var(--gap-7);
}
/* Inside the combined Conduct+Outposts column: space the second
   heading off the first list. */
.bldg-foot-grid ul + h4 { margin-top: var(--gap-5); }
.bldg-foot h4 {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--gap-4);
}
.bldg-foot ul { list-style: none; }
.bldg-foot li { margin-bottom: 8px; }
.bldg-foot a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.bldg-foot a:hover { color: var(--orange); }

/* Mobile-only duplicate of the orange "Read The House Rules" CTA, lives
   inside .hero-side. Hidden on desktop; the @media (max-width: 640px)
   rule reveals it (and hides the desktop one in .hero-cta). */
.hero-side-cta { display: none; }

/* Two Accessed cells render — one in the top meta row (.meta-accessed)
   and one in the trace row (.trace-accessed). On desktop the trace one
   shows; on mobile we swap so threat + accessed sit on one line. */
.meta-accessed { display: none; }

.bldg-foot-mark {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  color: var(--bone);
  margin-bottom: var(--gap-3);
}
.bldg-foot-tag {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--bone-dim);
  line-height: 1.6;
  max-width: 300px;
}

.bldg-foot-bottom {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: var(--gap-4);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
  flex-wrap: wrap;
  gap: 16px;
}
.bldg-foot-bottom .stamp {
  color: var(--orange);
}

/* ═══ FOOTER VITALS — site-wide vital signs ═══ */
.bldg-foot-vitals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto)) minmax(0, 1fr);
  gap: 32px 56px;
  padding: 28px 0 32px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vitals-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.vitals-label {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--bone-faint);
}
.vitals-value {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: var(--tr-tight);
  color: var(--bone);
  white-space: nowrap;
}
.vitals-value em {
  font-style: italic;
  color: var(--bone-faint);
  font-size: 12px;
  margin-left: 2px;
}
.vitals-value--ok::before {
  content: '●';
  margin-right: 8px;
  color: var(--orange);
  font-size: 11px;
  vertical-align: 1px;
  animation: threat-pulse 2.4s ease-in-out infinite;
}
.vitals-cell--note {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.vitals-value--note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 14px;
  letter-spacing: 0;
  white-space: normal;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .bldg-foot-vitals {
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
  }
  .vitals-cell--note {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 18px;
  }
}
@media (max-width: 480px) {
  .bldg-foot-vitals { grid-template-columns: 1fr; }
}

/* ═══ FORM (subscribe) ═══ */
.subscribe-card {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(240, 120, 48, 0.10), transparent 60%),
    var(--navy);
  border: 1px solid var(--line);
  padding: clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.subscribe-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--orange);
}
.subscribe-eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-widest);
  color: var(--orange);
  margin-bottom: var(--gap-4);
}
.subscribe-card h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--bone);
  margin-bottom: var(--gap-5);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.subscribe-card h3 em { font-family: var(--display); font-style: normal; color: var(--orange); }
.subscribe-card p.sub-deck {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 580px;
  margin-bottom: var(--gap-6);
}
.subscribe-row {
  display: flex;
  border: 1px solid var(--line-bright);
  max-width: 580px;
  background: var(--ink);
}
.subscribe-row input {
  flex: 1;
  /* Allow the input to shrink below its placeholder's intrinsic width,
     otherwise on narrow viewports the row overflows the card and the
     card's overflow:hidden clips the right edge of the border. */
  min-width: 0;
  background: transparent;
  border: none;
  padding: 18px 20px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--bone);
  outline: none;
}
.subscribe-row input::placeholder { color: var(--bone-faint); }
.subscribe-row button {
  background: var(--orange);
  color: var(--ink);
  border: none;
  padding: 0 24px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  /* Don't shrink below content width and don't let "File Me" wrap to
     two lines on narrow flex layouts. */
  flex-shrink: 0;
  white-space: nowrap;
}
.subscribe-row button:hover { background: var(--bone); }
.subscribe-fine {
  margin-top: var(--gap-4);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ═══ KPI strip ═══ */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi {
  padding: var(--gap-6) var(--gap-5);
  border-right: 1px solid var(--line);
}
.kpi:last-child { border-right: none; }
.kpi .v {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.kpi .v sup {
  font-family: var(--mono);
  font-size: 0.28em;
  color: var(--orange);
  font-weight: 400;
  vertical-align: top;
  margin-left: 6px;
  letter-spacing: var(--tr-wide);
  top: 0.4em;
  position: relative;
}
.kpi .l {
  margin-top: var(--gap-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ═══ SUB-NAV (case page) ═══ */
.case-head {
  padding: clamp(40px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* Two-column tight grid: label column auto-sized to widest label
   (so all values start at the same x position), tight row gap. */
.case-head .meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 6px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin: 0 0 var(--gap-5);
}
.case-head .meta dt {
  color: var(--bone-faint);
  font-weight: 400;
  margin: 0;
}
.case-head .meta dd {
  color: var(--orange);
  font-weight: 500;
  margin: 0;
}
@media (max-width: 640px) {
  .case-head .meta { column-gap: 16px; row-gap: 4px; font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   FEATURE BOX — lighter sibling of .termination-clause
   Used on /about/ for The Asymmetry Ledger and the Closing Note.
   Same structural pattern (mono meta row → serif headline → body
   → mono stamp) so it reads as part of a system, but lighter
   visual weight: navy-2 background, single 2px orange top
   border (no bottom). Less "trapped"; more "filed page".
   ───────────────────────────────────────────────────────────── */
.feature-box {
  margin: var(--gap-7) 0 0;
  padding: var(--gap-6) var(--gap-5);
  background: var(--navy-2);
  border-top: 2px solid var(--orange);
  position: relative;
}
.feature-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: var(--gap-5);
}
.feature-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.1;
  color: var(--bone);
  margin: 0 0 var(--gap-5);
  max-width: 900px;
}
.feature-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 760px;
  margin: 0 0 var(--gap-4);
}
.feature-body:last-of-type { margin-bottom: 0; }
.feature-body em { color: var(--orange); font-style: italic; }
.feature-stamp {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-wide);
  color: var(--bone-faint);
  text-transform: uppercase;
  text-align: right;
  margin-top: var(--gap-5);
}
@media (max-width: 640px) {
  .feature-box { padding: var(--gap-5) var(--gap-4); }
  .feature-meta { font-size: 14px; flex-wrap: wrap; gap: 8px; }
  .feature-body { font-size: 16px; }
}

/* Red 'AWAITING PUBLICATION' stamp on the Asymmetry Ledger feature
   box on /about/. Borrows the typewriter-style rotated red stamp
   from the address page. Sits absolute top-right of the feature-box
   to read as an official document overlay. */
.al-pending-stamp {
  position: absolute;
  /* Negative offsets so the stamp visibly overlaps the top-right
     corner of the .feature-box — half on, half off, like a real
     rubber stamp slammed down past the edge. */
  top: -40px;
  right: -50px;
  border: 5px solid var(--stamp-red);
  color: var(--stamp-red);
  padding: 22px 36px 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  transform: rotate(-7deg);
  opacity: 0.92;
  pointer-events: none;
  z-index: 2;
  background: rgba(157, 34, 32, 0.05);
  max-width: 460px;
  box-shadow:
    inset 1px 1px 0 rgba(150, 42, 31, 0.4),
    inset -1px -1px 0 rgba(150, 42, 31, 0.4);
}
.al-pending-stamp small {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.20em;
  margin-top: 8px;
  opacity: 0.82;
}
@media (max-width: 900px) {
  /* On narrower viewports the giant stamp would either overflow the
     viewport edge or overlap the headline — pull it inline above the
     meta row, smaller, still rotated for character. */
  .al-pending-stamp {
    position: relative;
    top: auto;
    right: auto;
    transform: rotate(-3deg);
    margin: 0 0 var(--gap-5);
    display: inline-block;
    max-width: none;
    font-size: 22px;
    padding: 14px 22px 12px;
    border-width: 4px;
  }
  .al-pending-stamp small { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────
   TERMINATION CLAUSE — feature block on /about/
   Sits between the orange Threat tile and the Tier Distribution.
   Reads as a contractual self-clause: a 50/50 score dissolves
   The House. Dark ink background + double orange borders; serif
   headline carries the gravitas; mono meta stamps top + bottom
   to feel like an article in a contract.
   ───────────────────────────────────────────────────────────── */
.termination-clause {
  margin: var(--gap-7) 0 0;
  padding: var(--gap-6) var(--gap-5);
  background: var(--ink-deep);
  border-top: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  position: relative;
}
.term-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: var(--gap-5);
}
.term-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.05;
  color: var(--bone);
  margin: 0 0 var(--gap-5);
  max-width: 900px;
}
.term-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 760px;
  margin: 0 0 var(--gap-5);
}
.term-stamp {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-wide);
  color: var(--bone-faint);
  text-transform: uppercase;
  text-align: right;
}
@media (max-width: 640px) {
  .termination-clause { padding: var(--gap-5) var(--gap-4); }
  .term-meta { font-size: 14px; flex-wrap: wrap; gap: 8px; }
  .term-body { font-size: 16px; }
}

/* Bracket list inside the orange Threat-to-Status-Quo tile on /about/.
   Two-column grid (max-content | 1fr) so the right-hand category names
   align to the same column regardless of the bracket's width. The dd
   gets a leading em-dash so the separator sits in the right column,
   not the gap — keeps the bone-line of dashes vertically aligned. */
.bracket-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0;
  color: var(--ink);
  opacity: 0.85;
}
.bracket-list dt { margin: 0; font-weight: 500; }
.bracket-list dd { margin: 0; }
.bracket-list dd::before { content: "— "; }

.case-head h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-wrap: balance;
  margin-bottom: var(--gap-5);
}
.case-head h1 em { font-style: normal; color: var(--orange); }

.case-head .sub {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  color: var(--bone-dim);
  max-width: 760px;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.case-head .stamp-block {
  position: absolute;
  top: var(--gap-7); right: var(--frame-pad);
  border: 2px solid var(--orange);
  color: var(--orange);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--tr-widest);
  transform: rotate(-6deg);
  opacity: 0.55;
}

/* ═══ ASSESSMENT TABLE (full case) ═══ */
.assess {
  margin: var(--gap-7) 0;
  border: 1px solid var(--line);
  background: var(--navy);
}
.assess-head {
  display: flex; justify-content: space-between;
  padding: var(--gap-4) var(--gap-5);
  border-bottom: 1px solid var(--line);
  background: var(--navy-2);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--orange);
}
.assess-row {
  display: grid;
  grid-template-columns: 1fr 200px 100px;
  gap: var(--gap-4);
  align-items: center;
  padding: var(--gap-4) var(--gap-5);
  border-bottom: 1px solid var(--line);
}
.assess-row:last-child { border-bottom: none; }
.assess-row .lbl {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--bone);
}
.assess-row .bar {
  height: 10px;
  background: rgba(74, 120, 216, 0.2);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.assess-row .bar-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--orange);
  width: calc(var(--score, 0) * 10%);
}
.assess-row .num {
  font-family: var(--mono);
  font-size: 19px;
  text-align: right;
  color: var(--bone-dim);
  letter-spacing: var(--tr-tight);
}
.assess-row .num b { color: var(--bone); font-weight: 600; }

.assess-total {
  background: var(--orange);
  padding: var(--gap-5);
  display: grid;
  grid-template-columns: 1fr 200px 100px;
  gap: var(--gap-4);
  align-items: center;
}
.assess-total .lbl {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.assess-total .bar {
  height: 10px; background: rgba(5, 11, 34, 0.2);
  position: relative; overflow: hidden;
}
.assess-total .bar-fill {
  position: absolute; inset: 0 0 0 0;
  background: var(--ink);
  width: calc(var(--total, 0) * 2%);
}
.assess-total .num {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

/* ═══ BODY PROSE (case + address) ═══ */
.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--gap-7) 0;
}
/* Salutation: rendered as a single line of mono uppercase orange,
   sized at heading scale. No dropcap — first letter is the same
   size as the rest. Existing .prose ::first-letter dropcap is
   suppressed by .no-cap on the <p>. */
.prose .salutation {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1.25;
  margin-bottom: var(--gap-6);
}

@media (max-width: 720px) {
  .prose .salutation { font-size: 18px; line-height: 1.3; }
}
.prose p {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: var(--gap-5);
  color: var(--bone);
  text-wrap: pretty;
  letter-spacing: 0.005em;
}
.prose p em { color: var(--orange); font-family: var(--sans); font-style: italic; font-weight: 500; }
/* dropcap only on first prose paragraph that is direct child of .prose, not in lists */
.prose > p:first-of-type:not(.no-cap)::first-letter {
  font-family: var(--display);
  font-weight: 900;
  float: left;
  font-size: 5em;
  line-height: 0.85;
  margin-right: 12px;
  margin-top: 4px;
  color: var(--orange);
}
/* Each case section is wrapped at build time in <section class=
   "case-section">. Renders as a contained navy-2 box that stands
   apart from the page bg, with the section header (01 | THE AUDIT)
   inside it and body paragraphs flowing within. Matches the v1
   design Kane referenced. */
.case-section {
  background: var(--navy-2);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px);
  margin: var(--gap-6) 0;
  position: relative;
}

/* Section header inside the box: section number + pipe + title. */
.case-section > h2 {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--gap-5);
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.case-section > h2::before {
  counter-increment: tmh-section;
  content: counter(tmh-section, decimal-leading-zero) "  | ";
  font-weight: 700;
  color: var(--orange);
  white-space: pre;
}
.case-section > h2 .ix {
  margin-left: auto;
  color: var(--bone-faint);
  font-weight: 400;
  font-size: 12px;
}

/* Inside the box, paragraphs render normally — no line numbers
   (suppress the global .prose-numbered > p::before counter), no
   indent, no border bars. */
.case-section > p {
  margin-top: 0;
}
.case-section > p::before {
  display: none;
}

.pull {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  text-align: center;
  color: var(--orange);
  margin: var(--gap-7) 0;
  padding: var(--gap-6) 0;
  border-top: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  text-wrap: balance;
  line-height: 1.35;
}

/* ═══ TAKEDOWNS · simple letter prose, bolded openers ═══ */
ul.takedowns {
  list-style: none;
  margin: var(--gap-6) 0;
  padding: 0;
}
ul.takedowns li {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bone);
  margin-bottom: var(--gap-4);
  text-wrap: pretty;
  letter-spacing: 0.005em;
}
ul.takedowns li strong {
  font-weight: 600;
  color: var(--bone);
}
ul.takedowns li em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}

/* ═══ MARGIN MARKERS (case prose has line numbers) ═══ */
.prose-numbered { counter-reset: ln tmh-section; }
.prose-numbered > p { position: relative; }
.prose-numbered > p::before {
  counter-increment: ln;
  content: counter(ln, decimal-leading-zero);
  position: absolute;
  left: -64px;
  top: 8px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--tr-wide);
  color: var(--bone-faint);
}
/* Salutation isn't a numbered body paragraph — it's a header line.
   Suppress both the counter increment AND the rendered number. */
.prose-numbered > p.salutation::before {
  counter-increment: none;
  content: none;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--gap-5); }
  .hero-side { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--gap-5); max-width: none; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .deck { justify-self: start; }
  .case-row { grid-template-columns: 60px 1fr 90px; gap: 16px; }
  .case-row .author, .case-row .verdict, .case-row .arrow { display: none; }
  /* Three Rooms on mobile: each room becomes its own boxed card with
     gap between them (was a single container with internal divider
     lines, which read as one squashed block on a phone). */
  .tri {
    grid-template-columns: 1fr;
    gap: 16px;
    border: none;
    background: transparent;
  }
  .tri > div,
  .tri > .tri-room {
    border: 1px solid var(--line);
    background: var(--navy);
  }
  /* Hide Status / Files / etc. from the top meta on mobile, but keep
     the threat-cell AND the meta-accessed cell visible — together they
     form line 1 (Threat Level Nominal · Accessed HH:MM:SS). */
  .console-meta:not(.console-meta-trace) > span:not(.threat-cell):not(.meta-accessed) { display: none; }
  .console-meta:not(.console-meta-trace) { justify-content: center; padding: 4px 0; }
  /* Show the meta-accessed cell (default-hidden on desktop) and hide
     the trace-accessed cell (default-shown on desktop) — Accessed time
     moves up to sit alongside Threat Level. Trace row left with just
     Visitor + Location, which fit on a single line. */
  .meta-accessed { display: inline-flex; }
  .trace-accessed { display: none; }
  .console-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "mark nav"
      "meta meta"
      "trace trace";
  }
  .console-meta-trace {
    font-size: 9px;
    gap: var(--gap-4, 16px);
    flex-wrap: wrap;
    padding: 5px 0 7px;
  }
  .bldg-foot-grid { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { border-bottom: 1px solid var(--line); }
  .kpi:nth-child(2) { border-right: none; }
}

@media (max-width: 640px) {
  /* Belt-and-braces against any element widening the page beyond
     viewport (the previous mark|nav row was forcing this on small
     screens because the nav column couldn't shrink below its content). */
  html, body { overflow-x: hidden; }

  /* Methodology page: the Tier Distribution block (rule + four KPI tiles
     + optional sealed-prose note) crowds small screens — readers go to
     the case index instead for distribution data. Hidden whole. */
  .tier-distribution-block { display: none; }

  /* ── Console: stack vertically ──
     Was mark | nav on one row + trace below — wordmark squeezed to
     3 lines and 5 nav items overflowed the right edge.
     Now: mark on its own row (full-width, single-line wordmark),
     nav centred on a second row (wraps if needed), trace third. */
  .console-inner {
    /* Top row: wordmark on the left, hamburger toggle on the right.
       Below that: meta row (Threat Level), trace row (Visitor / Location /
       Accessed). Nav is hidden by default; opens as an absolute-positioned
       dropdown beneath the console when the hamburger is tapped. */
    position: relative;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mark toggle"
      "meta meta"
      "trace trace";
    row-gap: 6px;
    padding: 10px var(--frame-pad);
    min-height: 0;
  }
  .console-mark { justify-content: flex-start; }
  .console-mark-name { white-space: nowrap; font-size: 13px; }
  /* Show the hamburger; place it in the toggle slot */
  .console-nav-toggle {
    display: flex;
    grid-area: toggle;
    align-self: center;
    justify-self: end;
  }
  /* Hide the horizontal nav by default — replaced by the dropdown below */
  .console-nav { display: none; }
  .console-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-deep);
    border-bottom: 2px solid var(--orange);
    padding: 4px;
    z-index: 99;
    gap: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  }
  .console-nav.is-open a {
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    text-align: left;
  }
  .console-nav.is-open a:last-child { border-bottom: none; }
  .console-nav.is-open a.active { color: var(--orange); }
  .console-meta-trace {
    justify-content: center;
    font-size: 9px;
    gap: 12px;
  }
  /* ── Coords bar: tighten and centre, drop the secondary lines ── */
  .coords-inner {
    justify-content: center;
    gap: 6px 12px;
    padding: 6px var(--frame-pad);
    font-size: 9px;
  }
  .coords-path .sep { margin: 0 4px; }
  /* Hide LAT/LON/Entry-Point line and Issue/Ongoing line on mobile —
     keep only the breadcrumb path (Archive › Surveillance Logs › …). */
  .coords-inner > span:not(.coords-path) { display: none; }

  /* Notice to Aspirants: the inline-styled grid forces the heading to
     wrap word-by-word on mobile because the "NO INTAKE / NO PORTAL /
     NO APPEAL" stamp claims its auto column. Stack on mobile so the
     heading gets full width and the stamp sits below. !important is
     used to override the inline style. */
  .aspirants-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Vital signs block (Current Threat Level / Recordings Issued / Last
     Reviewed / Status) in the footer — adds atmosphere on desktop, just
     adds vertical noise on mobile. Hidden here, kept on desktop. */
  .bldg-foot-vitals { display: none; }

  /* In Voice section: hide the right-hand invoice stamp on mobile
     (First & Only Recording / Issued / Current Threat Level / Nominal /
     status note). Same atmosphere-on-desktop reason. The tape player
     sibling rises naturally to sit directly under the section heading. */
  .invoice-stamp { display: none; }

  /* Manifesto sign-off line — "Foundational Address · Entry 000 · In Voice
     — The House". Hidden on mobile; display:none also removes its
     margin-top so the next section (In Voice) sits closer. */
  .manifesto-sig { display: none; }

  /* Tighten the manifesto-inner horizontal padding on mobile so the
     body text fills more of the screen. The default --frame-pad
     resolves to 20px on small screens, eating into already-short line
     lengths. 14px keeps a small breathing margin from the navy block
     edge while pushing average line length closer to the comfortable
     45-75 character prose zone. */
  .manifesto-inner { padding: 0 14px; }

  /* Hero CTA swap on mobile: hide the orange "Read The House Rules"
     button in the hero CTA pair (leaves just "Browse The Files" under
     the hero text) and reveal the duplicate at the bottom of the
     Notice to Visitor aside, so the orange CTA sits below the
     "You are here by my design." copy instead. */
  .hero-cta .btn--primary { display: none; }
  .hero-side-cta { display: block; margin-top: var(--gap-5); }

  /* Drop the divider under "You are here by my design." on mobile —
     it cuts across the stacked Notice block and breaks what should
     read as one continuous section. Desktop keeps the divider since
     the side column needs the visual seal. */
  .hero-side .hero-side-lead {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* On mobile, make the remaining "Browse The Files" button match the
     orange "Read The House Rules" treatment — both CTAs read as primary
     when isolated. (Desktop keeps the outline/filled pair distinction.)
     Using !important to win over any production post-processing /
     specificity surprise — the previous rule without it didn't apply
     at the visitor's browser despite winning specificity in source. */
  .hero-cta .btn {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
  }
  .hero-cta .btn:hover {
    background: var(--bone) !important;
    border-color: var(--bone) !important;
    color: var(--ink) !important;
  }

  .case-row { grid-template-columns: 50px 1fr 80px; padding: 18px 0; }
  .case-row .title { font-size: 17px; }
  .prose-numbered > p::before { display: none; }
  .case-head .stamp-block { display: none; }
  .assess-row, .assess-total { grid-template-columns: 1fr 100px 60px; }
  .assess-row .num, .assess-total .num { font-size: 12px; }
  /* Mobile reviewer flagged the right edge of "x / 50" sitting too close
     to the orange-tile edge — bump padding-right so the score has room. */
  .assess-total { padding-right: var(--gap-6); }
  .bldg-foot-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   ASYMMETRY LEDGER (E.3) — case page surface
   Per TMH_02 v2.6 §7A. Native <details> collapse, no JS, no
   animation beyond browser default expand. Sits between the
   Threat Assessment panel and the case footer.
   ───────────────────────────────────────────────────────────── */

/* Trigger sits ABOVE the Threat Assessment panel (discoverability before
   density). On click, it reveals the .asymmetry-content-wrap which lives
   BELOW the Threat Assessment, and smooth-scrolls the page to it. The
   show/hide is driven by the JS at the end of case-detail.njk. */

.asymmetry-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  /* Tightened — no rule divider above the trigger anymore; this margin
     is the only breathing room between the body's closing line and the
     trigger. Was 32px on top of a 96px rule + ~30px rule height. */
  margin: 56px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(58, 91, 184, 0.06);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone);
  text-align: left;
  user-select: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.asymmetry-trigger:hover {
  color: var(--orange);
  background: var(--orange-faint);
  border-color: var(--orange);
}
.asymmetry-trigger:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.asymmetry-trigger.is-open {
  color: var(--orange);
  border-color: var(--orange);
  background: var(--orange-faint);
}

.asymmetry-trigger .trigger-glyph {
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.asymmetry-trigger .trigger-glyph::before,
.asymmetry-trigger .trigger-glyph::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transition: transform 0.2s ease;
}
.asymmetry-trigger .trigger-glyph::before {
  width: 12px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.asymmetry-trigger .trigger-glyph::after {
  width: 1.5px; height: 12px;
  transform: translate(-50%, -50%);
}
.asymmetry-trigger.is-open .trigger-glyph::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.asymmetry-content-wrap {
  margin-top: 32px;
}
.asymmetry-content-wrap[hidden] { display: none !important; }

/* Panel column ~20% wider than the body prose column (per Kane —
   AL fills slightly more of the page than the case body so the
   four-group layout has more horizontal room). Inner text now
   ~912px; panel 1008px (912px text + 48px padding × 2), centered. */
.asymmetry-body {
  max-width: 1008px;
  margin: 0 auto;
  padding: 40px 48px 56px;
  border: 1px solid var(--line);
  background: rgba(58, 91, 184, 0.06);
}

/* Body-prose text size + rhythm so AL reads at the same density as the
   case body. Sizes match .prose p (18px / 1.7). The body wrapper already
   constrains text column to 760px, so per-element max-widths removed. */

.asymmetry-framing {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bone);
  margin: 0 0 28px;
}

.asymmetry-standing {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bone-faint);
  margin: 0 0 40px;
  font-style: italic;
}

.asymmetry-callout {
  margin: 0 0 56px;
  padding: 28px 32px;
  border-left: 3px solid var(--orange);
  background: var(--orange-faint);
}
.asymmetry-callout .callout-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.asymmetry-callout .callout-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bone);
  margin: 0;
}
/* Workcallout text is verbatim from the methodology and authored as a
   sentence-completion of the bold label above ("the work… needing to be
   done" → "dismantle structures…"). On the published surface that reads
   as an awkward lowercase opener — capitalize the first letter on render
   so the source data stays canonical. */
.asymmetry-callout .callout-body::first-letter {
  text-transform: uppercase;
}

.asymmetry-group {
  margin: 0 0 56px;
  padding-top: 40px;
  border-top: 2px solid var(--line);
}
.asymmetry-group:first-of-type {
  border-top: none;
  padding-top: 0;
}
/* Group heading is a major divisional anchor inside the Ledger.
   Sigil sits as a large orange prefix; the label runs in mono
   uppercase with strong tracking. Sigil + label on one line
   with a clear gap. */
.asymmetry-group .group-label {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 14px;
  line-height: 1.25;
}
.asymmetry-group .group-label .group-sigil {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.asymmetry-group .group-label .group-name {
  flex: 1;
}
.asymmetry-group .group-gloss {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone-faint);
  margin: 0 0 32px;
  padding-left: 0;
}

.asymmetry-group .group-entries {
  list-style: none;
  counter-reset: ag;
  margin: 0;
  padding: 0;
}
/* Each entry: number at left, bold label on its own line, reasoning
   indented further beneath. Three-step visual hierarchy
   (number → label → reasoning) per Kane. */
.asymmetry-group .group-entries li {
  counter-increment: ag;
  position: relative;
  padding: 0 0 0 44px;
  margin: 0 0 36px;
}
.asymmetry-group .group-entries li::before {
  content: counter(ag, decimal-leading-zero) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: var(--orange);
  padding-top: 8px;
}
.asymmetry-group .group-entries .entry-label {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bone);
  margin: 0 0 10px;
}
.asymmetry-group .group-entries .entry-reasoning {
  /* Indent further than the label for visual hierarchy. Slightly
     smaller + lighter so it reads as supporting prose under the
     label-as-anchor. The right padding mirrors the left indent so
     the reasoning column is bracketed inside the heading's width
     and never reads as wider than the label above it. */
  margin: 0 0 0 28px;
  padding-right: 64px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bone-dim);
  font-weight: 400;
}

.asymmetry-group .group-entries-empty {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--bone-faint);
  margin: 0;
  padding-left: 44px;
}

.asymmetry-summary {
  margin: 56px 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-faint);
}
.asymmetry-summary h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 18px;
}
.asymmetry-summary p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bone);
  margin: 0;
}

.asymmetry-closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  text-align: center;
  color: var(--bone-faint);
  letter-spacing: var(--tr-tight);
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px dashed var(--line-faint);
}

@media (max-width: 720px) {
  .asymmetry-trigger { padding: 20px 24px; font-size: 12px; margin-top: 40px; }
  .asymmetry-body { padding: 32px 24px 40px; }
  .asymmetry-framing { font-size: 16px; margin-bottom: 24px; }
  .asymmetry-standing { font-size: 16px; }
  .asymmetry-callout { padding: 22px 24px; }
  .asymmetry-callout .callout-body { font-size: 16px; }
  .asymmetry-group { margin-bottom: 44px; padding-top: 32px; }
  .asymmetry-group .group-label { font-size: 16px; gap: 14px; flex-wrap: wrap; }
  .asymmetry-group .group-label .group-sigil { font-size: 17px; }
  .asymmetry-group .group-gloss { font-size: 14px; margin-bottom: 24px; }
  .asymmetry-group .group-entries li { padding-left: 36px; margin-bottom: 28px; }
  .asymmetry-group .group-entries .entry-label { font-size: 16px; }
  .asymmetry-group .group-entries .entry-reasoning { font-size: 14px; margin-left: 16px; }
  .asymmetry-summary p { font-size: 16px; }
  .asymmetry-closing { font-size: 15px; }
}