/* ==========================================================================
   Tyranny Trump — theme.
   Ported pixel-for-pixel from design_handoff_tyranny_trump_redesign/
   "Tyranny Trump - Republican Red.dc.html". The prototype styles everything
   inline; every rule below is that markup turned into a real class.

   NAMING. Every selector is scoped to .tt-* on purpose. This install has
   carried more than one branded theme.css at a time, and a later brand reusing
   an earlier one's prefix silently overrode it (World Art Finder's Fairs title
   rendered #FAF8F3 on #FAF8F3 that way). `tt-` is unique here. The only
   unscoped rules are the :focus-visible ring and ::selection, which are
   deliberately global on our own pages.

   THE THREE DEPARTURES from the Classical system, and only these three:
     1. Filled primary buttons  2. Full-bleed red bands  3. 3px red section rules
   Everything else — cards, panels, tags, tables, plates, dividers — stays on the
   system's quiet, bordered, unfilled defaults. Do not extend the fill.
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────── */

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

body.tt-doc {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.tt-doc h1, .tt-doc h2, .tt-doc h3, .tt-doc h4, .tt-doc h5, .tt-doc h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
.tt-doc p { margin: 0 0 var(--space-3); }
.tt-doc img { display: block; max-width: 100%; }
.tt-doc a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
.tt-doc a:hover { color: var(--color-accent-600); text-decoration: underline; }

/* Never the browser default. On a red band the ring goes white so it stays
   visible against the fill. */
.tt-doc :focus { outline: none; }
.tt-doc :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tt-red-band :focus-visible, .tt-navy-band :focus-visible { outline-color: #ffffff; }
.tt-doc ::selection { background: rgba(179, 31, 36, 0.30); }

/* Every figure sets tabular: ledger numbers, dates, view counts, source and
   entry counts, reference ids. RUNNING PROSE KEEPS DEFAULT FIGURES —
   Lora's tabular feature also widens its word-spaces and punctuation, which
   loosens body copy visibly. That is why this is a utility, not a body rule. */
.tt-num { font-variant-numeric: tabular-nums; }

/* Body copy is justified at a 62–78ch measure. */
.tt-justify { text-align: justify; hyphens: auto; }

.tt-wrap { max-width: var(--tt-container); margin: 0 auto; padding-left: var(--tt-gutter); padding-right: var(--tt-gutter); }

/* Kickers / labels. The size and tracking vary per use, so the class carries
   only what they all share. */
.tt-kicker { text-transform: uppercase; font-size: 11px; letter-spacing: 0.2em; color: var(--color-neutral-600); }
.tt-kicker-sm { text-transform: uppercase; font-size: 10px; letter-spacing: 0.22em; color: var(--color-neutral-600); }

/* ── The plate ────────────────────────────────────────────────────────── */
/* Every photograph is matted. Mat thickness scales with image size: 4px on
   listing cards, 6px on news/video thumbs, 8px on hero and portrait plates. */
.tt-plate {
  box-sizing: border-box;
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  background: var(--color-neutral-300);
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tt-plate-4 { border-width: 4px; }
.tt-plate-8 { border-width: 8px; }
.tt-plate-3 { border-width: 3px; outline: 0; }
.tt-plate > img { width: 100%; height: 100%; object-fit: cover; }
/* The label a placeholder carries until real photography lands. Set in the
   heading face so an empty plate still reads as part of the design. */
.tt-plate .tt-slot-empty, .tt-plate > .tt-plate-label {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-neutral-600); text-align: center;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6px;
}
.tt-plate .tt-initials { font-family: var(--font-heading); color: var(--color-neutral-700); }

.tt-ar-43  { aspect-ratio: 4 / 3; }
.tt-ar-34  { aspect-ratio: 3 / 4; }
.tt-ar-169 { aspect-ratio: 16 / 9; }
.tt-ar-219 { aspect-ratio: 21 / 9; }

/* tt_slot() emits either an <img class="tt-slot"> or a labeled placeholder;
   both must fill the plate they sit in. */
.tt-slot { width: 100%; height: 100%; object-fit: cover; }
.tt-slot-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-neutral-600); text-align: center; padding: 6px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1;
  padding: 11px 20px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.tt-btn:hover { text-decoration: none; }
.tt-btn:disabled, .tt-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* DEPARTURE 1 of 3: the primary action is FILLED, not the system's outline. */
.tt-btn-primary { background: var(--tt-red); border-color: var(--tt-red); color: #ffffff; }
.tt-btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #ffffff; }
.tt-btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }

.tt-btn-secondary { border-color: var(--tt-navy-ink); color: var(--tt-navy-ink); }
.tt-btn-secondary:hover { background: rgba(20, 40, 79, 0.07); color: var(--tt-navy-ink); }

.tt-btn-ghost { color: var(--color-neutral-700); border-color: transparent; }
.tt-btn-ghost:hover { background: rgba(32, 31, 29, 0.05); color: var(--color-text); }

.tt-btn-block { display: flex; width: 100%; }

/* On the red hero both invert to white. */
.tt-on-red .tt-btn-primary { background: #ffffff; border-color: #ffffff; color: var(--tt-red); }
.tt-on-red .tt-btn-primary:hover { background: var(--tt-on-red-muted); border-color: var(--tt-on-red-muted); color: var(--color-accent-800); }
.tt-on-red .tt-btn-secondary { border-color: #ffffff; color: #ffffff; }
.tt-on-red .tt-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* Small uppercase button, used in the masthead, the register toolbar and the
   queue's action rail. */
.tt-btn-xs { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 15px; }

/* ── Form controls ────────────────────────────────────────────────────── */

.tt-input {
  width: 100%; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: var(--color-text); background: #ffffff;
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
  padding: 10px 12px;
}
.tt-input:focus-visible { border-color: var(--color-accent); }
textarea.tt-input { resize: vertical; font-family: var(--font-body); }
.tt-field { display: block; }
.tt-field > label, .tt-label {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 7px;
}
.tt-help { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 7px; }

/* ── Panels, cards and rules ──────────────────────────────────────────── */

.tt-panel { border: 1px solid var(--color-divider); background: var(--color-card); padding: 22px; }
.tt-panel-head {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; margin-bottom: 14px;
}
/* The tinted note panel — submit sidebar, attestation block, "every entry is
   sourced". accent-100 fill inside an accent-300 border. */
.tt-panel-tint { border: 1px solid var(--color-accent-300); background: var(--color-accent-100); padding: 22px; }

.tt-card {
  background: var(--color-card); border: 1px solid var(--color-divider);
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .14s ease;
}
/* Hover raises the border to the accent — no shadow, no transform. */
.tt-card:hover { border-color: var(--color-accent); text-decoration: none; color: inherit; }

/* DEPARTURE 3 of 3: the section rule is 3px red, not the system's 1px ink. */
.tt-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 3px solid var(--tt-red); padding-bottom: 10px; margin-bottom: 36px;
}
.tt-section-head h2 { font-weight: 400; font-size: 40px; margin: 0; }
.tt-section-head .tt-section-aside { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neutral-600); }
.tt-section-head a.tt-section-aside { color: var(--color-accent-700); }

/* Group heading with a hairline filling the row and a tabular count at the end. */
.tt-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.tt-group-head h2 { font-weight: 600; font-size: 27px; margin: 0; }
.tt-group-head .tt-rule { flex: 1; height: 1px; background: var(--color-divider); }
.tt-group-head .tt-count { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

/* Key/value rows with dotted rules — file summary, facts panel, review preview. */
.tt-kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dotted var(--color-neutral-300); font-size: 13px; }
.tt-kv:last-child { border-bottom: 0; }
.tt-kv > .tt-k { color: var(--color-neutral-700); }
.tt-kv > .tt-v { font-variant-numeric: tabular-nums; text-align: right; }

/* The tier tag. Outlined, never filled. */
.tt-tag {
  display: inline-block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); border: 1px solid var(--color-accent-300); padding: 3px 8px;
}

/* ── Bands ────────────────────────────────────────────────────────────── */

/* DEPARTURE 2 of 3: full-bleed red. The home hero and EVERY page header. */
.tt-red-band { background: var(--tt-red); color: #ffffff; }
.tt-red-band h1, .tt-red-band h2 { color: #ffffff; }
.tt-red-band .tt-kicker { color: var(--tt-on-red-muted); }

.tt-navy-band { background: var(--tt-navy); color: #f3f2f2; }
.tt-navy-band h1, .tt-navy-band h2 { color: #f3f2f2; }

.tt-tint-band { background: var(--color-tint); }

/* ── Masthead ─────────────────────────────────────────────────────────── */
/* THE TIGHTEST ROW ON THE SITE. Verify it first at every breakpoint: the logo
   is flex:none, the nav is flex:1 1 auto with min-width:0 and wraps, and every
   nav label and the submit button are nowrap. Below ~1000px the nav takes a
   second line, which is the graceful failure — nothing is hidden. */

.tt-utilbar {
  background: var(--tt-navy); color: var(--color-neutral-400);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.tt-utilbar-in {
  max-width: var(--tt-container); margin: 0 auto; padding: 7px var(--tt-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.tt-utilbar .tt-util-tagline { color: var(--color-accent-300); }
.tt-lang { display: flex; align-items: center; gap: 10px; }
.tt-lang a { color: var(--color-neutral-400); letter-spacing: 0.16em; }
.tt-lang a:hover { color: #f3f2f2; text-decoration: none; }
.tt-lang a.tt-on { color: #ffffff; border-bottom: 1px solid var(--color-accent-300); }

.tt-head { background: #ffffff; color: var(--tt-navy-ink); border-bottom: 5px solid var(--tt-red); }
.tt-head-in {
  max-width: var(--tt-container); margin: 0 auto; padding: 18px var(--tt-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.tt-brand { display: flex; align-items: center; gap: 16px; flex: none; }
.tt-brand img { height: 46px; width: auto; }
/* Fallback wordmark when no logo image is set — the site must never render
   nameless because a file id was cleared. */
.tt-brand-text { font-family: var(--font-heading); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--tt-red); line-height: 1; }
.tt-brand-text small { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-navy-ink); font-weight: 400; margin-top: 4px; }

.tt-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; flex: 1 1 auto; min-width: 0; }
.tt-nav > a:not(.tt-btn) {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--tt-navy-ink); padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.tt-nav > a:not(.tt-btn):hover { color: var(--color-accent-600); text-decoration: none; }
.tt-nav > a.tt-on:not(.tt-btn) { border-bottom-color: var(--color-accent); color: var(--color-accent-700); }

.tt-search-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--tt-navy-chip); border-radius: var(--radius-md); padding: 6px 10px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-navy-ink);
  white-space: nowrap; background: #ffffff; cursor: pointer;
}
.tt-search-chip:hover { border-color: var(--color-accent-300); color: var(--color-accent-700); }
.tt-search-chip svg { flex: none; }

/* The search panel the chip opens. Hidden until toggled. */
.tt-search-panel { display: none; border-bottom: 1px solid var(--color-divider); background: var(--color-tint); }
.tt-search-panel.tt-open { display: block; }
.tt-search-panel form { max-width: var(--tt-container); margin: 0 auto; padding: 16px var(--tt-gutter); display: flex; gap: 10px; }
.tt-search-panel input { flex: 1; }

.tt-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.tt-burger span { display: block; width: 22px; height: 2px; background: var(--tt-navy-ink); }

.tt-drawer {
  display: none; position: fixed; inset: 0; z-index: 900; background: #ffffff;
  padding: 20px var(--tt-gutter); overflow-y: auto;
}
.tt-drawer.tt-open { display: block; }
.tt-drawer-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--tt-red); padding-bottom: 14px; margin-bottom: 18px; }
.tt-drawer-close { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--tt-navy-ink); }
.tt-drawer nav { display: flex; flex-direction: column; }
.tt-drawer nav a:not(.tt-btn) {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-navy-ink);
  padding: 14px 0; border-bottom: 1px solid var(--color-divider);
}
.tt-drawer nav a.tt-on { color: var(--color-accent-700); }
.tt-drawer-actions { margin-top: 22px; display: grid; gap: 10px; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.tt-foot { background: var(--tt-navy); color: var(--color-neutral-300); border-top: 3px double var(--color-accent-700); }
.tt-foot-in {
  max-width: var(--tt-container); margin: 0 auto; padding: 52px var(--tt-gutter) 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px;
}
/* The logo goes on a LIGHT plate here so a red-on-transparent mark still reads
   against the navy ground. */
.tt-foot-logo { height: 42px; width: auto; background: var(--color-bg); padding: 5px 10px; border: 1px solid var(--tt-navy-rule); margin-bottom: 16px; }
.tt-foot-mission { font-size: 13.5px; line-height: 1.75; color: var(--color-neutral-500); max-width: 40ch; margin: 0; }
.tt-foot h3 { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-300); margin: 0 0 14px; font-weight: 400; }
.tt-foot a, .tt-foot .tt-foot-item { display: block; font-size: 13.5px; padding: 5px 0; color: var(--color-neutral-300); }
.tt-foot a:hover { color: var(--color-bg); text-decoration: none; }
.tt-foot-bottom { border-top: 1px solid var(--tt-navy-rule); }
.tt-foot-bottom-in {
  max-width: var(--tt-container); margin: 0 auto; padding: 18px var(--tt-gutter);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: 0.08em; color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}
.tt-foot-bottom-in a { color: var(--color-neutral-600); font-size: 11.5px; display: inline; padding: 0; }

/* ── Home ─────────────────────────────────────────────────────────────── */

.tt-hero-in { max-width: var(--tt-container); margin: 0 auto; padding: 76px var(--tt-gutter) 60px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.tt-hero .tt-kicker { font-size: 11px; letter-spacing: 0.28em; margin-bottom: 22px; }
.tt-hero h1 { font-weight: 400; font-size: 76px; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 28px; }
.tt-hero h1 em { font-style: italic; color: var(--tt-on-red-muted); }
.tt-hero p { font-size: 17px; line-height: 1.75; max-width: 62ch; margin: 0 0 18px; color: #ffffff; }
.tt-hero p:last-of-type { margin-bottom: 32px; }
.tt-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* The ledger. It sits INSIDE the white-on-red band, so it must reset color
   explicitly — inheriting would give it white text on white. */
.tt-ledger { border: 1px solid var(--color-divider); background: #ffffff; color: var(--color-text); padding: 28px 30px; }
.tt-ledger-head { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-neutral-600); border-bottom: 1px solid var(--color-divider); padding-bottom: 12px; margin-bottom: 20px; }
.tt-ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px dotted var(--color-neutral-300); }
.tt-ledger-row .tt-l { font-size: 13px; line-height: 1.4; max-width: 24ch; }
.tt-ledger-row .tt-n { font-family: var(--font-heading); font-size: 30px; font-variant-numeric: tabular-nums; color: var(--color-accent-700); }
.tt-ledger-note { font-size: 11px; color: var(--color-neutral-600); margin-top: 16px; line-height: 1.5; }

/* Two terms, one pattern. */
.tt-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.tt-terms > article:first-child { padding-right: 44px; border-right: 1px solid var(--color-divider); }
.tt-terms > article:last-child { padding-left: 44px; }
.tt-term-numeral { font-family: var(--font-heading); font-size: 84px; line-height: 1; }
.tt-term-45 .tt-term-numeral { color: var(--color-accent-300); }
.tt-term-47 .tt-term-numeral { color: var(--color-accent-700); }
.tt-terms h3 { font-weight: 600; font-size: 26px; margin: 6px 0 4px; }
.tt-term-dates { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.tt-term-47 .tt-term-dates { color: var(--color-accent-700); }
.tt-terms p { line-height: 1.75; margin-bottom: 18px; }
.tt-underlink { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700); border-bottom: 1px solid var(--color-accent-300); display: inline-block; padding-bottom: 3px; }
.tt-underlink:hover { text-decoration: none; border-bottom-color: var(--color-accent); }

/* The three registers. */
.tt-reg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tt-reg-card { padding: 26px 26px 22px; gap: 12px; }
.tt-reg-card .tt-reg-kicker { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-700); }
.tt-reg-card .tt-reg-title { font-family: var(--font-heading); font-size: 30px; line-height: 1.1; }
.tt-reg-card .tt-reg-body { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); }
.tt-reg-card .tt-reg-foot { margin-top: auto; padding-top: 16px; border-top: 1px dotted var(--color-neutral-300); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--color-neutral-600); }

/* Latest dispatches + sidebar. */
.tt-split { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; align-items: start; }
.tt-dispatch { display: grid; grid-template-columns: 132px 1fr; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--color-divider); align-items: start; }
.tt-dispatch .tt-meta { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.tt-dispatch h3 { font-weight: 600; font-size: 23px; line-height: 1.2; margin: 0 0 8px; }
.tt-dispatch .tt-dek { font-size: 14px; line-height: 1.65; color: var(--color-neutral-800); }

.tt-mini-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px dotted var(--color-neutral-300); color: inherit; }
.tt-mini-row:hover { text-decoration: none; color: inherit; }
.tt-mini-row:hover .tt-mini-name { color: var(--color-accent-700); }
.tt-mini-plate { width: 42px; height: 52px; flex: none; }
.tt-mini-name { font-family: var(--font-heading); font-size: 17px; line-height: 1.2; }
.tt-mini-meta { font-size: 11px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

/* On the record, on tape. */
.tt-video-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tt-tile { aspect-ratio: 16 / 9; background: var(--tt-navy-tile); border: 1px solid var(--tt-navy-rule); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tt-tile img { width: 100%; height: 100%; object-fit: cover; }
.tt-play { width: 46px; height: 46px; border: 1px solid var(--color-accent-300); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.tt-play-lg { width: 62px; height: 62px; }
.tt-play-sm { width: 44px; height: 44px; border-color: var(--color-accent-700); background: rgba(243, 242, 242, 0.75); position: absolute; }
.tt-video-strip .tt-v-title { font-family: var(--font-heading); font-size: 20px; margin: 12px 0 4px; color: #f3f2f2; }
.tt-video-strip .tt-v-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }

/* ── Subject file (Tyrant Trump) ──────────────────────────────────────── */

.tt-subject { max-width: var(--tt-container); margin: 0 auto; padding: 52px var(--tt-gutter) 72px; }
.tt-subject h1 { font-weight: 400; font-size: 62px; margin: 0 0 6px; }
.tt-subject-sub { font-size: 15px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--color-text); padding-bottom: 20px; }

/* Era tabs. The mechanism that makes room for the second term. */
.tt-tabs-boxed { display: flex; margin: 30px 0 34px; border: 1px solid var(--color-divider); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.tt-tabs-boxed a {
  padding: 11px 26px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  border-right: 1px solid var(--color-divider); color: var(--color-neutral-700); background: transparent;
}
.tt-tabs-boxed a:last-child { border-right: 0; }
.tt-tabs-boxed a:hover { text-decoration: none; color: var(--color-accent-700); }
.tt-tabs-boxed a.tt-on { background: var(--color-accent-100); color: var(--color-accent-700); }

.tt-subject-grid { display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: start; }
.tt-portrait-caption { font-size: 11px; color: var(--color-neutral-600); margin-top: 10px; line-height: 1.5; }
.tt-subject-grid h2 { font-weight: 400; font-size: 36px; margin: 0 0 20px; }
/* The two-column text block. A fixed `columns: 2` gives ~220px justified,
   hyphenated columns below ~1000px, which is unreadable; the min-width form
   collapses to one column there and still gives two at the 1240px design width. */
.tt-columns { columns: 340px 2; column-gap: 44px; column-rule: 1px solid var(--color-divider); font-size: 15px; line-height: 1.8; text-align: justify; hyphens: auto; }
.tt-columns p { margin: 0 0 16px; }
.tt-subject-grid h3 { font-weight: 600; font-size: 24px; margin: 40px 0 4px; border-top: 1px solid var(--color-text); padding-top: 20px; }
.tt-timeline { margin-top: 20px; }
.tt-timeline-row { display: grid; grid-template-columns: 132px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.tt-timeline-date { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tt-timeline-text { font-size: 15px; line-height: 1.7; }
/* Sits between an h3 and its timeline: says why these rows are a separate
   block rather than more rows in the one above. */
.tt-timeline-note { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--color-neutral-700); font-style: italic; }

/* ── Page header band (registers / news / submit) ─────────────────────── */

.tt-pagehead-in { max-width: var(--tt-container); margin: 0 auto; padding: 46px var(--tt-gutter) 0; }
.tt-pagehead h1 { font-weight: 400; font-size: 56px; margin: 0 0 14px; }
.tt-pagehead .tt-blurb { max-width: 78ch; font-size: 16px; line-height: 1.8; margin: 0 0 26px; }

/* Tabs sitting ON a red band: inactive in the on-red muted, active white with
   a 2px white bottom border. */
.tt-tabs-onred { display: flex; gap: 30px; border-top: 1px solid rgba(255, 255, 255, 0.35); flex-wrap: wrap; }
.tt-tabs-onred a {
  padding: 14px 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tt-on-red-muted); border-bottom: 2px solid transparent;
}
.tt-tabs-onred a:hover { color: #ffffff; text-decoration: none; }
.tt-tabs-onred a.tt-on { color: #ffffff; border-bottom-color: #ffffff; }

/* Tabs on the paper ground (video, queue). */
.tt-tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.tt-tabs-ink { border-bottom: 1px solid var(--color-text); margin-bottom: 30px; }
.tt-tabs-hair { border-bottom: 1px solid var(--color-divider); margin-bottom: 26px; }
.tt-tabs a {
  padding: 12px 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600); border-bottom: 2px solid transparent;
}
.tt-tabs a:hover { color: var(--color-accent-700); text-decoration: none; }
.tt-tabs a.tt-on { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

/* ── Register (Emultlist browse) ──────────────────────────────────────── */

.tt-body-grid { max-width: var(--tt-container); margin: 0 auto; padding: 40px var(--tt-gutter) 72px; display: grid; grid-template-columns: 1fr 292px; gap: 44px; align-items: start; }

.tt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 3px solid var(--tt-red); padding-bottom: 10px; margin-bottom: 24px; }
.tt-toolbar-count { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.tt-toolbar-sorts { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-toolbar-sorts .tt-btn { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 13px; }

/* 340px minimum is LOAD-BEARING — the names and role lines break badly below it. */
.tt-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.tt-entry-top { display: grid; grid-template-columns: 104px 1fr; gap: 18px; padding: 20px 20px 14px; }
.tt-entry-name { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.15; margin-bottom: 3px; }
.tt-entry-nick { font-family: var(--font-heading); font-style: italic; font-size: 15px; color: var(--color-accent-700); margin-bottom: 8px; }
.tt-entry-role { font-size: 11px; line-height: 1.5; color: var(--color-neutral-700); text-transform: uppercase; letter-spacing: 0.08em; }
.tt-entry-summary { padding: 0 18px 14px; font-size: 13.5px; line-height: 1.65; color: var(--color-neutral-800); }
.tt-entry-meta { margin-top: auto; padding: 12px 18px; border-top: 1px dotted var(--color-neutral-300); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tt-entry-sev { font-size: 11px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.tt-entry-stats { padding: 9px 18px 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

/* Sidebar list rows with a tabular count. */
.tt-list-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--color-neutral-300); font-size: 14px; color: inherit; }
.tt-list-row:last-child { border-bottom: 0; }
.tt-list-row:hover { color: var(--color-accent-700); text-decoration: none; }
.tt-list-row .tt-n { font-variant-numeric: tabular-nums; color: var(--color-neutral-600); font-size: 12px; }

/* ── Entry detail / profile ───────────────────────────────────────────── */

.tt-entry-page { max-width: var(--tt-container); margin: 0 auto; padding: 40px var(--tt-gutter) 72px; }
.tt-back { display: inline-block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 26px; }
.tt-entry-layout { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.tt-entry-layout h1 { font-weight: 400; font-size: 56px; margin: 0 0 2px; }
.tt-entry-layout .tt-nick-lg { font-family: var(--font-heading); font-style: italic; font-size: 26px; color: var(--color-accent-700); margin-bottom: 10px; }
.tt-entry-layout .tt-role-lg { font-size: 14px; color: var(--color-neutral-700); border-bottom: 1px solid var(--color-text); padding-bottom: 18px; margin-bottom: 26px; }
.tt-entry-layout .tt-summary { font-size: 17px; line-height: 1.8; max-width: 72ch; margin-bottom: 34px; }
.tt-h2-rule { font-weight: 600; font-size: 24px; border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; margin: 40px 0 4px; }
.tt-conduct { display: grid; grid-template-columns: 118px 1fr; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.tt-conduct-date { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.tt-conduct h3 { font-weight: 600; font-size: 19px; margin: 0 0 4px; }
.tt-conduct-text { font-size: 14.5px; line-height: 1.7; color: var(--color-neutral-800); margin-bottom: 6px; }
.tt-conduct-src { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.tt-receipts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Receipt labels stay in ink, not link-red — they are a numbered list of
   documents, not a run of links in prose. */
.tt-receipt { border: 1px solid var(--color-divider); background: #ffffff; padding: 13px 16px; display: flex; gap: 10px; align-items: baseline; }
.tt-receipt:hover { border-color: var(--color-accent); text-decoration: none; }
.tt-receipt .tt-n { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; flex: none; }
.tt-receipt .tt-label { font-size: 13.5px; line-height: 1.5; color: var(--color-text); }

/* ── News (Sesnews) ───────────────────────────────────────────────────── */

.tt-lead { border-bottom: 2px solid var(--color-text); padding-bottom: 30px; margin-bottom: 26px; }
.tt-lead .tt-plate { margin-bottom: 20px; }
.tt-lead .tt-meta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.tt-lead h2 { font-weight: 400; font-size: 40px; line-height: 1.1; margin: 0 0 12px; }
.tt-lead .tt-dek { font-size: 17px; line-height: 1.8; max-width: 74ch; margin: 0; }
.tt-feed-row { display: grid; grid-template-columns: 168px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--color-divider); align-items: start; }
.tt-feed-row .tt-meta { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.tt-feed-row h3 { font-weight: 600; font-size: 25px; line-height: 1.2; margin: 0 0 8px; }
.tt-feed-row .tt-dek { font-size: 15px; line-height: 1.7; color: var(--color-neutral-800); max-width: 70ch; }
.tt-more { display: flex; justify-content: center; padding-top: 32px; }
.tt-log-row { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--color-neutral-300); font-size: 13px; line-height: 1.5; }
.tt-log-row .tt-when { font-variant-numeric: tabular-nums; color: var(--color-accent-700); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }

/* ── Video (Sesvideo) ─────────────────────────────────────────────────── */

.tt-video-hero { border-bottom: 1px solid var(--color-accent-700); }
.tt-video-hero-in { max-width: var(--tt-container); margin: 0 auto; padding: 46px var(--tt-gutter) 40px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: center; }
.tt-video-hero h1 { font-weight: 400; font-size: 56px; margin: 0 0 14px; }
.tt-video-hero .tt-kicker { color: var(--color-accent-300); margin-bottom: 12px; }
.tt-video-hero p { font-size: 16px; line-height: 1.8; color: var(--color-neutral-300); margin: 0; }
.tt-video-hero .tt-v-title { font-family: var(--font-heading); font-size: 22px; margin: 12px 0 3px; color: #f3f2f2; }
.tt-video-hero .tt-v-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }

.tt-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tt-video-card .tt-plate { position: relative; }
.tt-dur { position: absolute; right: 0; bottom: 0; background: var(--tt-navy); color: #f3f2f2; font-size: 11px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.tt-video-card .tt-cat { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700); margin: 12px 0 5px; }
.tt-video-card h3 { font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.tt-video-card .tt-dek { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-800); margin-bottom: 8px; }
.tt-video-card .tt-v-meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

/* ── Submit a receipt ─────────────────────────────────────────────────── */

.tt-mode-strip { display: flex; border: 1px solid var(--color-divider); width: fit-content; max-width: 100%; background: #ffffff; flex-wrap: wrap; }
.tt-mode-strip a {
  padding: 12px 26px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  border-right: 1px solid var(--color-divider); color: var(--color-neutral-700);
}
.tt-mode-strip a:last-child { border-right: 0; }
.tt-mode-strip a:hover { text-decoration: none; color: var(--color-accent-700); }
.tt-mode-strip a.tt-on { background: var(--color-accent-100); color: var(--color-accent-700); }

.tt-steprail { display: flex; border-bottom: 1px solid var(--color-text); margin-bottom: 32px; flex-wrap: wrap; }
.tt-steprail a { padding: 0 30px 14px 0; display: flex; align-items: baseline; gap: 10px; color: var(--color-neutral-600); }
.tt-steprail a:hover { text-decoration: none; color: var(--color-accent-700); }
.tt-steprail a.tt-on { color: var(--color-accent-700); }
.tt-steprail .tt-n { font-family: var(--font-heading); font-size: 26px; font-variant-numeric: tabular-nums; }
.tt-steprail .tt-step-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

.tt-step h2 { font-weight: 600; font-size: 27px; margin: 0 0 6px; }
.tt-step-note { font-size: 14.5px; line-height: 1.7; color: var(--color-neutral-800); max-width: 70ch; margin-bottom: 28px; }
.tt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.tt-fields .tt-span2 { grid-column: span 2; }

.tt-source-row { border: 1px solid var(--color-divider); background: #ffffff; padding: 20px; margin-bottom: 16px; display: grid; grid-template-columns: 34px 1fr 200px; gap: 18px; align-items: start; }
.tt-source-row .tt-n { font-family: var(--font-heading); font-size: 24px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.tt-dropzone { border: 1px dashed var(--color-neutral-400); background: #ffffff; padding: 30px; text-align: center; margin-top: 26px; }
.tt-dropzone .tt-dz-title { font-family: var(--font-heading); font-size: 21px; margin-bottom: 6px; }
.tt-dropzone .tt-dz-note { font-size: 13.5px; color: var(--color-neutral-700); margin-bottom: 16px; }

.tt-review-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px dotted var(--color-neutral-300); font-size: 14px; line-height: 1.6; }
.tt-review-row:last-child { border-bottom: 0; }
.tt-review-row .tt-k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); padding-top: 3px; }
.tt-attest { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 14px; line-height: 1.6; cursor: pointer; }
.tt-attest input { margin-top: 4px; accent-color: var(--color-accent); }

.tt-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--color-divider); padding-top: 22px; margin-top: 34px; }
.tt-actionbar .tt-hint { font-size: 12px; color: var(--color-neutral-600); }
.tt-actionbar .tt-actions { display: flex; gap: 12px; }

.tt-confirm { border: 1px solid var(--color-accent-300); background: #ffffff; padding: 46px; text-align: center; }
.tt-confirm .tt-check { width: 54px; height: 54px; border: 1px solid var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.tt-confirm h2 { font-weight: 400; font-size: 36px; margin: 0 0 12px; }
.tt-confirm p { font-size: 15.5px; line-height: 1.8; max-width: 58ch; margin: 0 auto 8px; }
.tt-confirm .tt-ref { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; margin-bottom: 26px; }
.tt-confirm .tt-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.tt-bullet-row { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--color-neutral-300); font-size: 13.5px; line-height: 1.6; }
.tt-bullet-row:last-child { border-bottom: 0; }
.tt-bullet-row .tt-dot { color: var(--color-accent-700); }

/* ── Moderator review queue ───────────────────────────────────────────── */

.tt-queue { max-width: var(--tt-container); margin: 0 auto; padding: 44px var(--tt-gutter) 76px; }
.tt-queue-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; border-bottom: 1px solid var(--color-text); padding-bottom: 18px; margin-bottom: 28px; }
.tt-queue-head h1 { font-weight: 400; font-size: 48px; margin: 0; }
.tt-queue-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.tt-queue-stat { text-align: right; }
.tt-queue-stat .tt-v { font-family: var(--font-heading); font-size: 32px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; line-height: 1; }
.tt-queue-stat .tt-k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); margin-top: 5px; }

.tt-queue-row { border: 1px solid var(--color-divider); background: #ffffff; margin-bottom: 16px; }
.tt-queue-row-in { display: grid; grid-template-columns: 1fr 240px; gap: 30px; padding: 22px 24px; }
.tt-queue-flags { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tt-flag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
/* The flag's color IS the signal: accent when it needs attention, neutral-600
   when it is clean, neutral-500 when it was declined. */
.tt-flag-attn { color: var(--color-accent-700); }
.tt-flag-clean { color: var(--color-neutral-600); }
.tt-flag-declined { color: var(--color-neutral-500); }
.tt-queue-row h2 { font-weight: 600; font-size: 23px; margin: 0 0 7px; }
.tt-queue-claim { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); max-width: 74ch; margin-bottom: 12px; }
.tt-queue-meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.tt-queue-actions { border-left: 1px solid var(--color-divider); padding-left: 24px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.tt-queue-actions .tt-btn { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.tt-audit { border: 1px solid var(--color-divider); background: var(--color-tint); padding: 22px 24px; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.tt-audit .tt-audit-title { font-family: var(--font-heading); font-size: 20px; margin-bottom: 8px; }
.tt-audit p { font-size: 13.5px; line-height: 1.7; margin: 0; color: var(--color-neutral-800); }
.tt-audit-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 7px 0; border-bottom: 1px dotted var(--color-neutral-300); font-size: 12.5px; line-height: 1.55; }
.tt-audit-row .tt-when { font-variant-numeric: tabular-nums; color: var(--color-neutral-600); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }

/* ── Notices ──────────────────────────────────────────────────────────── */

.tt-notice { border: 1px solid var(--color-accent-300); background: var(--color-accent-100); padding: 18px 22px; font-size: 14px; line-height: 1.7; margin-bottom: 26px; }
.tt-notice-quiet { border-color: var(--color-divider); background: var(--color-tint); }
.tt-empty { border: 1px dashed var(--color-neutral-400); background: #ffffff; padding: 40px; text-align: center; color: var(--color-neutral-700); font-size: 14.5px; line-height: 1.7; }
.tt-empty .tt-empty-title { font-family: var(--font-heading); font-size: 22px; color: var(--color-text); margin-bottom: 8px; }

/* The honeypot field on every public form. Off-screen rather than
   display:none — some bots skip hidden inputs but fill positioned ones. */
.tt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Designed at 1440px. The masthead is the tightest row — it is handled first,
   and the three-column sidebars collapse to one column with the sidebar last. */

@media (max-width: 1180px) {
  .tt-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .tt-hero h1 { font-size: 60px; }
  .tt-video-hero-in { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 1000px) {
  /* Below here the nav wraps to a second line — the graceful failure. */
  .tt-body-grid, .tt-split { grid-template-columns: 1fr; gap: 40px; }
  .tt-subject-grid { grid-template-columns: 1fr; gap: 34px; }
  .tt-entry-layout { grid-template-columns: 1fr; gap: 34px; }
  .tt-reg-cards, .tt-video-strip, .tt-video-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-foot-in { grid-template-columns: 1fr 1fr; gap: 34px; }
  .tt-queue-row-in { grid-template-columns: 1fr; gap: 20px; }
  .tt-queue-actions { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: 18px; }
  .tt-audit { grid-template-columns: 1fr; }
  /* The portrait column would otherwise stretch to the full page width. */
  .tt-subject-grid > div:first-child, .tt-entry-layout > div:first-child { max-width: 340px; }
}

@media (max-width: 760px) {
  :root { --tt-gutter: 20px; }
  /* THE MASTHEAD ON A PHONE. Two mistakes were made here in turn, and the
     comments are the record of both:
       1. `.tt-nav { display: none }` also hid the burger and the Submit button,
          because the prototype puts BOTH inside the same <nav>. The drawer was
          unreachable on every phone.
       2. Keeping them on one line then overflowed 375px by ~100px — the logo
          alone is 242px wide at its designed 46px height.
     So: hide the nav's LINKS only, shrink the logo, and let the bar WRAP, which
     is the design's own stated failure mode ("below ~1000px the nav wraps to a
     second line") carried one step further. Nothing is hidden that a reader
     needs, and the site's one conversion point stays on the bar. */
  .tt-head-in { flex-wrap: wrap; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .tt-brand img { height: 38px; }
  .tt-nav { flex: 1 0 100%; justify-content: flex-end; gap: 10px; }
  .tt-nav > a:not(.tt-btn) { display: none; }
  .tt-burger { display: flex; }
  .tt-search-chip { display: none; }
  .tt-hero-in { padding-top: 48px; }
  .tt-hero h1 { font-size: 42px; line-height: 1.06; }
  .tt-hero p, .tt-pagehead .tt-blurb { text-align: left; hyphens: manual; }
  .tt-subject h1 { font-size: 40px; }
  .tt-pagehead h1, .tt-entry-layout h1, .tt-video-hero h1 { font-size: 38px; }
  .tt-section-head { flex-wrap: wrap; gap: 8px; }
  .tt-section-head h2 { font-size: 30px; }
  .tt-columns { columns: 1; column-rule: 0; }
  .tt-terms { grid-template-columns: 1fr; }
  .tt-terms > article:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--color-divider); padding-bottom: 30px; margin-bottom: 30px; }
  .tt-terms > article:last-child { padding-left: 0; }
  .tt-reg-cards, .tt-video-strip, .tt-video-grid { grid-template-columns: 1fr; }
  .tt-entry-grid { grid-template-columns: 1fr; }
  .tt-dispatch { grid-template-columns: 96px 1fr; gap: 16px; }
  .tt-feed-row { grid-template-columns: 110px 1fr; gap: 16px; }
  .tt-feed-row h3 { font-size: 21px; }
  .tt-lead h2 { font-size: 30px; }
  .tt-timeline-row, .tt-conduct { grid-template-columns: 1fr; gap: 6px; }
  .tt-receipts { grid-template-columns: 1fr; }
  .tt-fields { grid-template-columns: 1fr; }
  .tt-fields .tt-span2 { grid-column: span 1; }
  .tt-source-row { grid-template-columns: 1fr; }
  .tt-review-row { grid-template-columns: 1fr; gap: 4px; }
  .tt-foot-in { grid-template-columns: 1fr; }
  .tt-queue-head h1 { font-size: 34px; }
  .tt-confirm { padding: 30px 22px; }
  .tt-audit-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Link-colored components ─────────────────────────────────────────── */
/**
 * THE BASE LINK RULE OUTRANKS A BARE COMPONENT CLASS. `body.tt-doc a` scores
 * (0,1,2); `.tt-btn-primary` scores (0,1,0) and loses, so the filled masthead
 * button rendered with accent-700 label text on its own red fill — legible only
 * on hover. This is the same specificity trap that has bitten branded chrome on
 * this stack before, and the fix is the same: qualify the component selectors so
 * they outrank the base rule, rather than reaching for !important.
 *
 * Every selector below is `.tt-doc a.tt-…` = (0,2,1), which beats (0,1,2) on
 * class count. Anything added later that is an <a> AND carries its own color
 * belongs in this block, not above.
 */
.tt-doc a.tt-btn { text-decoration: none; }
.tt-doc a.tt-btn-primary,
.tt-doc a.tt-btn-primary:hover { color: #ffffff; }
.tt-doc .tt-on-red a.tt-btn-primary { color: var(--tt-red); }
.tt-doc .tt-on-red a.tt-btn-primary:hover { color: var(--color-accent-800); }
.tt-doc a.tt-btn-secondary { color: var(--tt-navy-ink); }
.tt-doc .tt-on-red a.tt-btn-secondary,
.tt-doc .tt-on-red a.tt-btn-secondary:hover { color: #ffffff; }
.tt-doc a.tt-btn-ghost { color: var(--color-neutral-700); }
.tt-doc a.tt-btn-ghost:hover { color: var(--color-text); }

/* :not(.tt-btn) matters. The prototype puts the Submit button INSIDE the <nav>,
   so `.tt-nav > a` (0,2,2) also matched it and repainted the filled red button's
   label navy — unreadable on its own fill. Excluding buttons here keeps the
   markup faithful to the design instead of moving the button out of the nav to
   satisfy a selector. */
.tt-doc .tt-nav > a:not(.tt-btn) { color: var(--tt-navy-ink); text-decoration: none; }
.tt-doc .tt-nav > a:not(.tt-btn):hover { color: var(--color-accent-600); }
.tt-doc .tt-nav > a.tt-on:not(.tt-btn) { color: var(--color-accent-700); }

.tt-doc .tt-lang a { color: var(--color-neutral-400); }
.tt-doc .tt-lang a:hover { color: #f3f2f2; text-decoration: none; }
.tt-doc .tt-lang a.tt-on { color: #ffffff; }

.tt-doc .tt-tabs a { color: var(--color-neutral-600); text-decoration: none; }
.tt-doc .tt-tabs a:hover, .tt-doc .tt-tabs a.tt-on { color: var(--color-accent-700); }
.tt-doc .tt-tabs-onred a { color: var(--tt-on-red-muted); text-decoration: none; }
.tt-doc .tt-tabs-onred a:hover, .tt-doc .tt-tabs-onred a.tt-on { color: #ffffff; }
.tt-doc .tt-tabs-boxed a, .tt-doc .tt-mode-strip a { color: var(--color-neutral-700); text-decoration: none; }
.tt-doc .tt-tabs-boxed a:hover, .tt-doc .tt-tabs-boxed a.tt-on,
.tt-doc .tt-mode-strip a:hover, .tt-doc .tt-mode-strip a.tt-on { color: var(--color-accent-700); }
.tt-doc .tt-steprail a { color: var(--color-neutral-600); text-decoration: none; }
.tt-doc .tt-steprail a:hover, .tt-doc .tt-steprail a.tt-on { color: var(--color-accent-700); }

.tt-doc .tt-foot a { color: var(--color-neutral-300); text-decoration: none; }
.tt-doc .tt-foot a:hover { color: var(--color-bg); }
.tt-doc .tt-foot-bottom-in a { color: var(--color-neutral-600); }
.tt-doc .tt-foot-bottom-in a:hover { color: var(--color-neutral-300); }

.tt-doc a.tt-card, .tt-doc a.tt-card:hover { color: inherit; text-decoration: none; }
.tt-doc a.tt-list-row, .tt-doc a.tt-mini-row { color: inherit; text-decoration: none; }
.tt-doc a.tt-list-row:hover { color: var(--color-accent-700); }
.tt-doc a.tt-receipt, .tt-doc a.tt-receipt:hover { color: var(--color-text); text-decoration: none; }
.tt-doc a.tt-back { color: var(--color-neutral-600); text-decoration: none; }
.tt-doc a.tt-back:hover { color: var(--color-accent-700); }
.tt-doc a.tt-section-aside { color: var(--color-accent-700); text-decoration: none; }
.tt-doc a.tt-underlink { color: var(--color-accent-700); text-decoration: none; }
.tt-doc a.tt-brand, .tt-doc a.tt-brand:hover { text-decoration: none; }
/* On the navy bands the "→" links sit on the dark ground. */
.tt-doc .tt-navy-band a.tt-section-aside { color: var(--color-accent-300); }
.tt-doc .tt-navy-band a.tt-section-aside:hover { color: #ffffff; }
.tt-doc .tt-navy-band a, .tt-doc .tt-navy-band a:hover { text-decoration: none; }

/* ── Layout modifiers ─────────────────────────────────────────────────── */
/**
 * These exist because an INLINE `style="grid-template-columns: …"` outranks
 * every media query in this file — specificity is not even consulted, inline
 * simply wins. Three pages set their sidebar grid inline and so kept two
 * columns at 375px, overflowing the viewport by up to 168px while every other
 * page collapsed correctly. Layout that has a responsive rule belongs in a
 * class; only one-off cosmetics (a padding, a color) stay inline.
 */
.tt-split-rail { grid-template-columns: 1fr 292px; }
/* A search result has no thumbnail — one column, not the feed row's 132px mat. */
.tt-dispatch-plain { grid-template-columns: 1fr; }

@media (max-width: 1000px) {
  .tt-split-rail { grid-template-columns: 1fr; }
}

/* ── Filter chips ─────────────────────────────────────────────────────── */
/**
 * A cross-cutting filter above the card grid — chamber on the Anti-Americans
 * register. Drawn in the design's own language: bordered, unfilled, square, at
 * the kicker's tracking. The ACTIVE chip is the one exception, taking the
 * accent-100 tint the era tabs and the submission mode strip already use, so
 * "on" reads the same way everywhere on the site.
 */
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.tt-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-700); background: #ffffff;
  border: 1px solid var(--color-divider); padding: 7px 13px;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.tt-chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); text-decoration: none; }
.tt-chip.tt-on { background: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-700); }
.tt-chip-n { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--color-neutral-600); }
.tt-chip.tt-on .tt-chip-n { color: var(--color-accent-700); }
.tt-doc a.tt-chip { color: var(--color-neutral-700); text-decoration: none; }
.tt-doc a.tt-chip:hover, .tt-doc a.tt-chip.tt-on { color: var(--color-accent-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTER SUB-VIEWS — Timeline and Sources.

   Ported from the prototype's inline styles. Two things that look like details
   and are not:

   - The spine's marker dot carries `border: 2px solid var(--color-bg)` so it
     punches a hole through the 2px rule it sits on. Without the border the rule
     runs visibly through the dot.
   - Layout lives in these classes, never inline on the element. An inline
     grid-template-columns beats every media query below it, which is how three
     pages stayed two-column at 375px earlier in this build.
   ═══════════════════════════════════════════════════════════════════════════ */

.tt-tl-grid,
.tt-src-grid {
  max-width: var(--tt-container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 292px; gap: 44px; align-items: start;
}
.tt-tl-grid { padding: 40px var(--tt-gutter) 72px; }
.tt-src-wrap { max-width: var(--tt-container); margin: 0 auto; padding: 40px var(--tt-gutter) 72px; }
.tt-src-grid { padding: 0; }

/* ── Intros ─────────────────────────────────────────────────────────────── */
.tt-tl-intro, .tt-src-intro { border-bottom: 3px solid var(--tt-red); padding-bottom: 14px; margin-bottom: 30px; }
.tt-src-intro { padding-bottom: 16px; margin-bottom: 26px; }
.tt-tl-intro h2, .tt-src-intro h2 {
  font-family: var(--font-heading); font-weight: 400; font-size: 38px; margin: 0 0 8px; line-height: 1.1;
}
.tt-tl-intro p, .tt-src-intro p { font-size: 15px; line-height: 1.75; margin: 0; max-width: 80ch; }
.tt-src-intro p { max-width: 88ch; }

/* ── Timeline: era heading ──────────────────────────────────────────────── */
.tt-tl-era { margin-bottom: 46px; }
.tt-tl-erahead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.tt-tl-numeral { font-family: var(--font-heading); font-size: 56px; line-height: 1; color: var(--color-accent-300); }
.tt-tl-erahead h3 { font-family: var(--font-heading); font-weight: 600; font-size: 25px; margin: 0; }
.tt-tl-erameta {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums; margin-top: 4px;
}

/* ── Timeline: the spine ────────────────────────────────────────────────── */
.tt-tl-spine { border-left: 2px solid var(--color-accent-300); margin: 22px 0 0 26px; }
.tt-tl-item { position: relative; padding: 0 0 26px 30px; }
.tt-tl-dot {
  position: absolute; left: -7px; top: 7px; width: 12px; height: 12px;
  border: 2px solid var(--color-bg); border-radius: 50%;
}
.tt-tl-date {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums; margin-bottom: 7px;
}
.tt-tl-card {
  background: var(--color-card); border: 1px solid var(--color-divider); padding: 20px 22px;
  transition: border-color .15s;
}
.tt-tl-card:hover { border-color: var(--color-accent); }
.tt-tl-card h4 { font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.tt-tl-card p { font-size: 14.5px; line-height: 1.7; color: var(--color-neutral-800); margin: 0 0 14px; max-width: 76ch; }
.tt-tl-names { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.tt-doc a.tt-tl-chip {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); border: 1px solid var(--color-accent-300);
  padding: 4px 9px; text-decoration: none; transition: background .15s;
}
.tt-doc a.tt-tl-chip:hover { background: var(--color-accent-100); }
.tt-tl-foot {
  border-top: 1px dotted var(--color-neutral-300); padding-top: 11px;
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}
.tt-tl-more { display: flex; justify-content: center; border-top: 1px solid var(--color-divider); padding-top: 30px; }

/* ── Marker key ─────────────────────────────────────────────────────────── */
.tt-key-row { display: flex; gap: 11px; align-items: center; padding: 8px 0; font-size: 13px; }
.tt-key-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; }

/* ── Sources: provenance line + stat cards ──────────────────────────────── */
.tt-src-provenance {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 14px;
}
.tt-src-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 34px; }
.tt-src-stat { border: 1px solid var(--color-divider); background: var(--color-card); padding: 20px 22px; }
.tt-src-statv {
  font-family: var(--font-heading); font-size: 38px; line-height: 1;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.tt-src-statk {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-top: 8px;
}

/* ── Sources: document rows ─────────────────────────────────────────────── */
.tt-src-row {
  border-bottom: 1px solid var(--color-divider); padding: 22px 0;
  display: grid; grid-template-columns: 46px 1fr 132px; gap: 22px; align-items: start;
}
.tt-src-n {
  font-family: var(--font-heading); font-size: 24px; color: var(--color-accent-300);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.tt-src-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 7px; }
.tt-src-type {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); border: 1px solid var(--color-accent-300); padding: 3px 8px;
}
.tt-src-date {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}
.tt-src-status { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.tt-src-row h3 { font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 1.25; margin: 0 0 5px; }
.tt-src-issuer {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 9px;
}
.tt-src-shows { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); margin: 0 0 12px; max-width: 78ch; }
.tt-src-cites { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tt-src-citedby { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); }
.tt-doc .tt-src-cites a {
  font-size: 12px; color: var(--color-accent-700);
  border-bottom: 1px solid var(--color-accent-300); text-decoration: none;
}
.tt-doc .tt-src-cites a:hover { color: var(--color-accent-600); }
.tt-src-open { display: flex; flex-direction: column; gap: 8px; }
.tt-src-file {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums; text-align: center;
}
.tt-is-disabled { opacity: .55; cursor: default; pointer-events: none; }

/* ── Preservation panel ─────────────────────────────────────────────────── */
.tt-pres-row { padding: 10px 0; border-bottom: 1px dotted var(--color-neutral-300); }
.tt-pres-row:last-child { border-bottom: 0; }
.tt-pres-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 3px; }
.tt-pres-note { font-size: 11.5px; line-height: 1.5; color: var(--color-neutral-700); }
.tt-panel-tint-title { font-family: var(--font-heading); font-size: 21px; margin-bottom: 8px; }
.tt-panel-tint p { font-size: 13px; line-height: 1.65; margin: 0; }

/* ── Responsive. Sidebar drops under the content, stat cards go 2-up then 1. ── */
@media (max-width: 1000px) {
  .tt-tl-grid, .tt-src-grid { grid-template-columns: 1fr; gap: 34px; }
  .tt-src-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .tt-tl-intro h2, .tt-src-intro h2 { font-size: 30px; }
  .tt-tl-numeral { font-size: 42px; }
  .tt-src-stats { grid-template-columns: 1fr; }
  /* The index numeral and the button column both fold away: at this width the
     row is a stack, and a 132px button column would squeeze the text to nothing. */
  .tt-src-row { grid-template-columns: 1fr; gap: 12px; }
  .tt-src-n { display: none; }
  .tt-src-open { flex-direction: row; align-items: center; gap: 12px; }
  .tt-src-file { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORPORATE DONOR ENTRY — pledge-first.

   The pledge is the only place on this site where quoted source text is set in
   display type. That is deliberate: on this layout the quotation is not
   decoration around the argument, it IS the argument, and the filings below are
   the reply to it.
   ═══════════════════════════════════════════════════════════════════════════ */

.tt-donor-wrap { max-width: var(--tt-container); margin: 0 auto; padding: 40px var(--tt-gutter) 76px; }
.tt-backlink {
  display: inline-block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 26px; text-decoration: none;
}
.tt-doc a.tt-backlink { color: var(--color-neutral-600); }
.tt-doc a.tt-backlink:hover { color: var(--color-accent-700); }

.tt-donor-kickers { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.tt-donor-pledgetype {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); border: 1px solid var(--color-accent-300); padding: 3px 9px;
}
.tt-donor-name { font-family: var(--font-heading); font-weight: 400; font-size: 56px; margin: 0 0 8px; line-height: 1.05; }
.tt-donor-sector {
  font-size: 14px; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-text); padding-bottom: 18px; margin-bottom: 34px;
}
.tt-donor-grid { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }

/* ── The pledge ─────────────────────────────────────────────────────────── */
.tt-pledge-sec { margin-bottom: 40px; }
.tt-donor-sechead {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 16px;
}
.tt-pledge {
  margin: 0; background: var(--color-card);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  padding: 30px 34px;
}
.tt-pledge > p {
  font-family: var(--font-heading); font-size: 25px; line-height: 1.45;
  margin: 0 0 20px; text-wrap: pretty;
}
.tt-pledge-foot {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  border-top: 1px dotted var(--color-neutral-300); padding-top: 16px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}
.tt-doc .tt-pledge-foot a {
  color: var(--color-accent-700); border-bottom: 1px solid var(--color-accent-300); text-decoration: none;
}
/* A missing snapshot is STATED rather than hidden — the gap is the point. */
.tt-pledge-nosnap { color: #b31f24; }

/* ── What followed ──────────────────────────────────────────────────────── */
.tt-donor-followhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  border-bottom: 3px solid var(--tt-red); padding-bottom: 10px; margin-bottom: 6px;
}
.tt-donor-followhead h2 { font-family: var(--font-heading); font-weight: 400; font-size: 34px; margin: 0; }
.tt-donor-followmeta {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums; text-align: right;
}
.tt-filing {
  display: grid; grid-template-columns: 116px 1fr 128px; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid var(--color-divider); align-items: start;
}
.tt-filing-date {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums; padding-top: 3px;
}
.tt-filing-recipient { font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
.tt-filing-route { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.tt-filing-note { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-800); }
.tt-filing-amt { text-align: right; }
.tt-filing-amtv {
  font-family: var(--font-heading); font-size: 25px; color: var(--color-accent-700);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tt-filing-amt a, .tt-filing-cite {
  display: inline-block; margin-top: 4px;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600);
}
.tt-doc .tt-filing-amt a { border-bottom: 1px solid var(--color-neutral-300); text-decoration: none; color: var(--color-neutral-600); }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.tt-donor-total { margin-bottom: 22px; padding: 24px; }
.tt-donor-totalv {
  font-family: var(--font-heading); font-size: 44px; line-height: 1;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.tt-donor-totalnote { font-size: 12.5px; line-height: 1.6; color: var(--color-neutral-800); margin-top: 10px; }
.tt-side-v { font-variant-numeric: tabular-nums; color: var(--color-neutral-700); font-size: 12.5px; }
.tt-howto { font-size: 13px; line-height: 1.7; margin: 0 0 10px; }
.tt-howto:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .tt-donor-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 760px) {
  .tt-donor-name { font-size: 38px; }
  .tt-pledge { padding: 22px 20px; }
  .tt-pledge > p { font-size: 21px; }
  .tt-donor-followhead { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tt-donor-followmeta { text-align: left; }
  /* Stacked: a 116px date column and a 128px amount column leave the middle
     column too narrow to set a recipient name at this width. */
  .tt-filing { grid-template-columns: 1fr; gap: 8px; }
  .tt-filing-amt { text-align: left; }
}

/* ==========================================================================
   Why this site · Corrections · Contact — the three credibility pages.
   Tokens only: --color-accent-*, --color-neutral-*, --tt-red, --color-divider.
   ========================================================================== */

/* Why this site ---------------------------------------------------------- */
.tt-why-h1 { max-width: 20ch; }
/* Section heads that sit under the red rule, shared by all three pages. */
.tt-rule-h2 { font-family: var(--font-heading); font-weight: 400; font-size: 34px;
  margin: 44px 0 6px; border-top: 3px solid var(--tt-red); padding-top: 22px; }
.tt-lede { font-size: 15px; line-height: 1.75; color: var(--color-neutral-800);
  max-width: 74ch; margin: 0 0 24px; }
.tt-side-p { font-size: 13.5px; line-height: 1.7; margin: 0 0 14px; color: var(--color-neutral-800); }

/* "What this archive is not" — 2x2, collapsing rather than squeezing. */
.tt-not-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tt-not-card { background: #fff; border: 1px solid var(--color-divider); padding: 22px 24px; }
.tt-not-h { font-family: var(--font-heading); font-weight: 600; font-size: 19px; margin-bottom: 7px; }
.tt-not-t { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); }

/* The five standards: ghost numeral beside the rule it names. */
.tt-std-row { display: grid; grid-template-columns: 46px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--color-divider); align-items: start; }
.tt-std-n { font-family: var(--font-heading); font-size: 30px; line-height: 1;
  color: var(--color-accent-300); font-variant-numeric: tabular-nums; }
.tt-std-h { font-family: var(--font-heading); font-weight: 600; font-size: 18px; margin-bottom: 5px; }
.tt-std-t { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); }

/* Corrections ------------------------------------------------------------ */
.tt-corr { padding: 26px 0; border-bottom: 1px solid var(--color-divider); }
.tt-corr-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.tt-corr-date { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.tt-corr-where { font-size: 13px; color: var(--color-neutral-700); }
.tt-corr-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; margin: 0 0 16px; }

/* The diff is TWO PANELS, not a strikethrough: the previous wording has to stay
   legible or the reader is taking the archive's word for what changed. Neutral
   edge on the old text, accent edge on the new. */
.tt-corr-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
.tt-corr-was, .tt-corr-now { background: #fff; padding: 16px 18px; }
.tt-corr-was { border-left: 3px solid var(--color-neutral-400); color: var(--color-neutral-700); }
.tt-corr-now { border-left: 3px solid var(--color-accent); color: var(--color-text); }
.tt-corr-was p, .tt-corr-now p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.tt-corr-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 7px; }
.tt-corr-why p { font-size: 14px; line-height: 1.75; color: var(--color-neutral-800); margin: 0 0 8px; }
.tt-corr-by { font-size: 12.5px; color: var(--color-neutral-600); font-style: italic; }
.tt-corr-pol-n { font-variant-numeric: tabular-nums; color: var(--color-accent-700);
  font-weight: 600; margin-right: 10px; }
.tt-corr-pol-t { font-size: 13px; line-height: 1.6; }

/* Contact ---------------------------------------------------------------- */
.tt-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px; }
.tt-route-card { display: block; background: #fff; border: 1px solid var(--color-divider);
  padding: 22px 24px; text-decoration: none; color: inherit; transition: border-color .15s; }
.tt-route-card:hover { border-color: var(--color-accent); }
.tt-route-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 8px; }
.tt-route-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; margin-bottom: 7px; }
.tt-route-body { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); margin-bottom: 12px; }
.tt-route-cta { font-size: 13px; font-weight: 600; color: var(--color-accent); }
.tt-opt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-neutral-600); font-weight: 400; }

/* Below ~1000px every 1fr 1fr grid on these pages would give ~220px columns of
   justified text, which is the same defect .tt-columns avoids. Collapse them. */
@media (max-width: 1000px) {
  .tt-not-grid, .tt-corr-diff, .tt-route-grid { grid-template-columns: 1fr; }
}

/* News article — a dispatch in the archive's own chrome. */
.tt-article-wrap { max-width: 760px; margin: 0 auto; padding: 40px var(--tt-gutter) 72px; }
.tt-backlink { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-600); text-decoration: none; display: inline-block; margin-bottom: 24px; }
.tt-backlink:hover { color: var(--color-accent); }
.tt-article-kicker { color: var(--color-accent-700); margin-bottom: 10px; }
.tt-article-h1 { font-family: var(--font-heading); font-weight: 400; font-size: 44px;
  line-height: 1.12; margin: 0 0 12px; }
.tt-article-meta { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-neutral-700); padding-bottom: 18px; border-bottom: 3px solid var(--tt-red); margin-bottom: 26px; }
.tt-article-plate { margin-bottom: 26px; }
.tt-article-plate img { display: block; width: 100%; height: auto; }
.tt-article-body { font-size: 17px; line-height: 1.8; color: var(--color-text); }
.tt-article-body p { margin: 0 0 18px; }
.tt-article-body h2, .tt-article-body h3 { font-family: var(--font-heading); font-weight: 600; margin: 30px 0 10px; }
.tt-article-body a { color: var(--color-accent); }
.tt-article-body img { max-width: 100%; height: auto; }
.tt-article-foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--color-divider); }
@media (max-width: 700px) { .tt-article-h1 { font-size: 32px; } }

/* Portrait attribution. Small, but present on every image that has provenance —
   CC BY-SA permits the use only with credit. */
.tt-photo-credit { font-size: 11px; line-height: 1.5; color: var(--color-neutral-600);
  margin-top: 8px; word-break: break-word; }
.tt-photo-credit a { color: var(--color-neutral-700); }
.tt-photo-credit a:hover { color: var(--color-accent); }

/* A tape with no free public source says so rather than linking nowhere. */
.tt-video-nosource { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-neutral-600); margin: 4px 0 6px; }

/* ==========================================================================
   Video lightbox. Dark ground, because the tape is the point and the page
   chrome should get out of the way.
   ========================================================================== */
.tt-lb[hidden] { display: none; }
.tt-lb { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.tt-lb-back { position: absolute; inset: 0; background: rgba(10, 20, 48, .88); }
.tt-lb-panel { position: relative; width: min(1040px, 100%); max-height: 92vh; overflow: auto;
  background: #0d1b36; border: 1px solid #2c4272; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.tt-lb-x { position: absolute; top: 6px; right: 10px; z-index: 2; background: none; border: 0;
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 6px 10px; }
.tt-lb-x:hover { color: var(--color-accent-300); }
/* 16:9 without an aspect-ratio dependency, so an old browser still gets a box. */
.tt-lb-body { position: relative; width: 100%; padding-top: 56.25%; background: #16294c; }
.tt-lb-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tt-lb-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 32px; text-align: center; color: #dfe4ef; font-size: 15px; line-height: 1.7; }
.tt-lb-foot { padding: 20px 26px 26px; }
.tt-lb-meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9fb0d0; margin-bottom: 8px; }
.tt-lb-title { font-family: var(--font-heading); font-weight: 400; font-size: 26px;
  line-height: 1.25; color: #fff; margin: 0 0 16px; }
.tt-lb-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .tt-lb { padding: 0; }
  .tt-lb-panel { max-height: 100vh; }
  .tt-lb-title { font-size: 20px; }
}

/* Executive Orders — a dense document list, not cards. The number is the
   anchor the eye needs, so it gets its own tabular column. */
.tt-eo { display: grid; grid-template-columns: 190px 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--color-divider); align-items: baseline; }
.tt-eo-num { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.tt-eo-title { font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  line-height: 1.4; margin: 0 0 4px; }
.tt-eo-title a { color: inherit; text-decoration: none; }
.tt-eo-title a:hover { color: var(--color-accent); text-decoration: underline; }
.tt-eo-meta { font-size: 12.5px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.tt-eo-search { display: flex; gap: 8px; align-items: center; }
.tt-eo-search .tt-input { min-width: 220px; }
@media (max-width: 700px) {
  .tt-eo { grid-template-columns: 1fr; gap: 4px; }
  .tt-eo-search { width: 100%; }
  .tt-eo-search .tt-input { flex: 1; min-width: 0; }
}

/* Subject-file sub-navigation. Distinct from the boxed era tabs above it: those
   switch the term, these open a section. */
.tt-subject-subnav { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 4px; }
.tt-subject-subnav a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700); text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent; }
.tt-subject-subnav a:hover { border-bottom-color: var(--color-accent); }

/* Presidency filter. Sits above the toolbar because it scopes the whole
   register, not the sort. The note is not decoration: the counts are a union. */
.tt-termbar { margin-bottom: 18px; }
.tt-termbar .tt-chips { margin-bottom: 8px; }
.tt-termbar-note { font-size: 12px; line-height: 1.6; color: var(--color-neutral-600); max-width: 78ch; }

/* Which presidency an entry belongs to, printed on the card. Quieter than the
   tier chip beside it — it is a fact about the entry, not the accusation. */
.tt-term-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--color-divider); color: var(--color-neutral-700); }
.tt-term-tag.tt-term-47 { border-color: var(--color-accent-300); color: var(--color-accent-700); }
.tt-term-tag.tt-term-both { border-color: var(--color-neutral-400); color: var(--color-neutral-800); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGER — the registers.

   Anti-Americans reached 237 cards in one document, each carrying a portrait.
   This is what split the registers into pages of 60.

   The disabled ends are rendered as <span>, not a grayed <a>: there is nothing
   to go to, and a link that does nothing is worse than no link. They keep the
   button's footprint so the strip does not shift as a reader moves through it.

   MIN 44px TOUCH TARGETS. Half the people who will read this are on a phone,
   and a 24px numeral is a target most thumbs miss.
   ═══════════════════════════════════════════════════════════════════════════ */
.tt-pager { border-top: 2px solid var(--color-divider); padding-top: 22px; margin: 8px 0 44px; }
.tt-pager-count { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.tt-pager-links { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.tt-pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--color-neutral-700); background: #ffffff;
  border: 1px solid var(--color-divider);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.tt-pager-num:hover { border-color: var(--color-accent); color: var(--color-accent-700); text-decoration: none; }
.tt-pager-num.tt-on { background: var(--color-accent-100); border-color: var(--color-accent-300);
  color: var(--color-accent-700); font-weight: 600; }
.tt-doc a.tt-pager-num { text-decoration: none; }
.tt-pager-gap { color: var(--color-neutral-500); padding: 0 2px; user-select: none; }
/* Not a link, and not pretending to be one. */
.tt-pager-off { opacity: .38; cursor: default; pointer-events: none; }
.tt-pager .tt-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* A tier split across a page boundary. Quiet — it is a note about the page, not
   part of the tier's name. */
.tt-group-cont { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-500); font-weight: 400; }

@media (max-width: 600px) {
  /* The numbers are what a thumb reaches for; the words wrap to their own row. */
  .tt-pager-links { gap: 6px; }
  .tt-pager .tt-btn { flex: 1 1 100%; justify-content: center; }
}

/* A division INSIDE a tier — the Justices, the cabinet, each chamber, the
   Governors. Deliberately lighter than .tt-group-head: the tier is the
   register's claim about responsibility, and this only says which office the
   people under it held. Same reason it is an h3 under the tier's h2. */
.tt-subhead { display: flex; align-items: baseline; gap: 12px;
  margin: 10px 0 18px; padding-bottom: 7px; border-bottom: 1px solid var(--color-divider); }
.tt-subhead h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--color-neutral-700); }
.tt-subhead-n { font-size: 11.5px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
/* The first sub-head in a tier sits right under the tier rule; later ones need
   air above them so a run reads as ending rather than as a stray label. */
.tt-entry-grid + .tt-subhead { margin-top: 34px; }

/* The held copy, beside a receipt. Quiet: the publisher's document is the
   citation, and this is the fallback for the day that link stops working. */
.tt-receipt-copy { display: inline-block; margin: -6px 0 10px 34px; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-divider); }
.tt-receipt-copy:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE OATHS. The page the registers are measured against.
   ═══════════════════════════════════════════════════════════════════════════ */
.tt-oaths { max-width: 820px; margin: 0 auto; padding: 48px 20px 72px; }
.tt-oath-lede { font-size: 17px; line-height: 1.66; color: var(--color-neutral-800);
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 2px solid var(--color-divider); }
.tt-oath { margin-bottom: 46px; }
.tt-oath-head { display: flex; gap: 16px; align-items: baseline; margin-bottom: 14px; }
.tt-oath-n { font-size: 12px; letter-spacing: .14em; color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums; padding-top: 4px; }
.tt-oath h2 { margin: 0 0 3px; font-size: 20px; line-height: 1.3; }
.tt-oath-cite { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600); }
/* The sworn words: set apart, larger, and quiet enough to be read slowly. */
.tt-oath-text { margin: 0 0 14px; padding: 20px 24px;
  border-left: 3px solid var(--color-accent-300); background: #ffffff;
  font-family: var(--font-serif, Georgia, serif); font-size: 17px; line-height: 1.72;
  color: var(--color-neutral-900); }
/* The clause the page exists for. A tint, not a highlighter: it should read as
   emphasis in a legal text, not as a marker pen on a photocopy. */
.tt-oath-mark { background: var(--color-accent-100); color: var(--color-accent-700);
  padding: 1px 3px; font-weight: 600; }
.tt-oath-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); }
/* The President's is the one without the clause, so it is framed as the
   exception rather than left for the reader to notice by absence. */
.tt-oath-exception .tt-oath-text { border-left-color: var(--color-neutral-400); }
.tt-oath-exception .tt-oath-note { border-left: 3px solid var(--color-accent);
  padding-left: 13px; color: var(--color-neutral-900); }
.tt-oath-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--color-divider);
  font-size: 13px; line-height: 1.6; color: var(--color-neutral-600); }
@media (max-width: 600px) {
  .tt-oaths { padding: 32px 16px 56px; }
  .tt-oath-text { padding: 16px 16px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE OATH CARD, in the register header band.

   The blurb's claim is that these people swore something and acted against it.
   The oath was a link in the footer; it now sits beside the sentence, because
   a reader who doubts the premise should not have to go hunting for the proof
   of it.

   ON THE RED BAND, so everything is set in the on-red palette: white rules at
   low alpha, white text, and the marked clause inverted rather than tinted —
   the register's accent tint is invisible against this background.
   ═══════════════════════════════════════════════════════════════════════════ */
.tt-pagehead-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px;
  align-items: start; }
.tt-pagehead-main { min-width: 0; }
/* The blurb no longer needs its own measure: the column sets it. */
.tt-pagehead-cols .tt-blurb { max-width: none; }

.tt-oathcard { border-left: 2px solid rgba(255,255,255,0.4); padding: 2px 0 2px 22px;
  margin-top: 6px; }
.tt-oathcard-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 12px; }
.tt-oathcard-quote { font-family: var(--font-serif, Georgia, serif); font-size: 17px;
  line-height: 1.6; color: #fff; margin-bottom: 14px; }
/* Inverted, not tinted: on red, a pale accent wash disappears. */
.tt-oathcard .tt-oath-mark { background: #fff; color: var(--color-accent-700, #9b1c1c);
  padding: 1px 4px; font-weight: 600; }
.tt-oathcard-note { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.8);
  margin-bottom: 16px; }
.tt-oathcard-link { display: inline-block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 2px; }
.tt-oathcard-link:hover { border-bottom-color: #fff; text-decoration: none; }
.tt-doc a.tt-oathcard-link { color: #fff; text-decoration: none; }

@media (max-width: 900px) {
  /* Below the blurb rather than beside it, and the rule moves to the top so it
     reads as a divider between the two rather than a stray vertical line. */
  .tt-pagehead-cols { grid-template-columns: 1fr; gap: 28px; }
  .tt-oathcard { border-left: 0; border-top: 2px solid rgba(255,255,255,0.4);
    padding: 20px 0 0; margin-top: 0; }
}