/* ============================================================
   Archive Trust for Research in Mathematical Sciences & Philosophy
   Design System — archmathsci.org
   Aesthetic: editorial academic — ink, paper, precision
   ============================================================ */

/* ── Variables ─────────────────────────────────────── */
:root {
  --ink:       #1a1a1a;
  --ink-soft:  #3c3c3c;
  --ink-muted: #595959;
  --paper:     #f9f7f2;
  --paper-warm:#f2efe8;
  --paper-mid: #ece9e0;
  --rule:      #d4cfc4;
  --rule-dark: #b0a898;
  --gold:      #8b6914;
  --gold-light:#b8943a;
  --crimson:   #7d1f2e;
  --blue-deep: #1c2e4a;

  --ff-serif:  'EB Garamond', 'Garamond', Georgia, serif;
  --ff-body:   'Libre Baskerville', Georgia, serif;
  --ff-mono:   'DM Mono', 'Courier New', monospace;

  --nav-h: 64px;
  --max-w: 1400px;
  --col-gap: 40px;
}

/* ── Skip to main content ─────────────────────────── */
.at-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: top 0.2s;
}

.at-skip-link:focus {
  top: 16px;
}

/* ── Dark Mode ────────────────────────────────────── */
/*
  Surface scale (warm brown-tinted, not pure grey):
    base:       #201c18  — body/page background
    paper-warm: #272219  — section-alt, sidebar tints
    paper-mid:  #302a23  — cards, recording/speaker/trustee cells
    elevated:   #3a332b  — dropdowns, active states, rule colour
    border:     #48413a  — rule-dark, card borders

  Text scale (off-white, never pure #fff):
    ink:        #edeae2  — headings, primary body
    ink-soft:   #d1cabf  — secondary body, card descriptions
    ink-muted:  #a89f94  — labels, meta, mono caps (WCAG AA on base)

  Accent:
    gold:       #c9a84c  — ~20 pts lower saturation than light-mode gold
    gold-light: #d9bb72  — hover / highlight variant

  Footer/ticker — distinct elevated surface so they don't
  fight the body or look identical to light-mode’s dark footer.
  Using #2d2720 (slightly warmer, lighter than base).
*/
[data-theme="dark"] {
  --ink:        #edeae2;
  --ink-soft:   #d1cabf;
  --ink-muted:  #a89f94;
  --paper:      #201c18;
  --paper-warm: #272219;
  --paper-mid:  #302a23;
  --rule:       #3a332b;
  --rule-dark:  #48413a;
  --gold:       #c9a84c;
  --gold-light: #d9bb72;
  --crimson:    #c04060;
  --blue-deep:  #1c2e4a;
}

[data-theme="dark"] body {
  color: var(--ink);
  background: var(--paper);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
  color: var(--ink);
}

[data-theme="dark"] .nav {
  background: rgba(20, 18, 16, 0.96);
  border-bottom-color: var(--rule);
}

[data-theme="dark"] .nav__links.open {
  background: var(--paper);
  border-bottom-color: var(--rule);
}

[data-theme="dark"] .recording-card,
[data-theme="dark"] .speaker-card,
[data-theme="dark"] .pillar,
[data-theme="dark"] .cstat,
[data-theme="dark"] .subject-row,
[data-theme="dark"] .trustee-item,
[data-theme="dark"] .amount-btn,
[data-theme="dark"] .funding-stage {
  background: var(--paper-warm);
}

[data-theme="dark"] .speaker-card:hover,
[data-theme="dark"] .trustee-item:hover,
[data-theme="dark"] .subject-row:hover {
  background: var(--paper-mid);
}

[data-theme="dark"] .section--alt {
  background: var(--paper-warm);
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}

[data-theme="dark"] .pull-quote__text { color: var(--ink); }

[data-theme="dark"] .timeline__dot { background: var(--paper); }

/* Footer and ticker use hardcoded dark colours — override for dark mode */
[data-theme="dark"] .footer {
  background: #2d2720;
  color: rgba(237, 234, 226, 0.55);
}

[data-theme="dark"] .footer__brand-name { color: #edeae2; }
[data-theme="dark"] .footer__brand-desc  { color: rgba(237, 234, 226, 0.55); }
[data-theme="dark"] .footer__col-links a { color: rgba(237, 234, 226, 0.6); }
[data-theme="dark"] .footer__col-links a:hover { color: #edeae2; }
[data-theme="dark"] .footer__bottom { border-top-color: rgba(255,255,255,0.07); }

[data-theme="dark"] .num-tape {
  background: #2d2720;
  color: rgba(237, 234, 226, 0.4);
}

[data-theme="dark"] .num-tape__track span.highlight {
  color: var(--gold-light);
}

[data-theme="dark"] #at-transcript-panel {
  background: var(--paper-warm);
}

[data-theme="dark"] .at-vtt-cue:hover {
  background: var(--paper-mid);
}

[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field textarea,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .donate-form input[type="text"] {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--rule-dark);
}

[data-theme="dark"] .access-banner {
  background: var(--paper-mid);
  border-color: var(--rule);
}

[data-theme="dark"] .hero__bg {
  background:
    radial-gradient(ellipse 70% 60% at 75% 40%, rgba(200, 168, 74, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 20% 80%, rgba(28, 46, 74, 0.08) 0%, transparent 60%);
}

/* Dark mode toggle button */
.footer__theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(249, 247, 242, 0.5);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.footer__theme-toggle:hover {
  color: var(--paper-warm);
  border-color: rgba(255,255,255,0.3);
}

.footer__theme-toggle svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography ────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.2rem; font-weight: 500; }

p { max-width: 68ch; }

.label {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.overline {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}

/* ── Layout Helpers ────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: 90px 0;
}

.section--alt {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 45px 0;
}

.section--dark {
  background: var(--blue-deep);
  color: #e8e4d8;
}

.section--dark h2,
.section--dark h3,
.section--dark .overline { color: #e8e4d8; }
.section--dark .overline { color: var(--gold-light); }
.section--dark p { color: #c8c2b0; }
.section--dark .rule-h { border-color: #3a4f6b; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px var(--col-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.grid-4--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 48px 24px; }

.rule-h {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

.rule-h--heavy {
  border-top: 1px solid var(--rule);
  margin: 20px 0 32px;
}

/* Extra breathing room for grid-3 items that start with a rule */
.grid-3 > div { padding-top: 0; padding-bottom: 16px; }

/* ── Navigation ────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(249, 247, 242, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  z-index: 100;
  display: flex;
  align-items: center;
}

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav__logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.nav__logo-main {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.nav__logo-sub {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__link {
  font-family: var(--ff-mono);
  font-size: 0.67rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.2s;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.25s;
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.active { color: var(--gold); }
.nav__link.active::after { transform: scaleX(1); }

.nav__link--search {
  display: flex;
  align-items: center;
  padding: 2px;
  border-bottom: none;
}
.nav__link--search::after { display: none; }
.nav__link--search svg { width: 16px; height: 16px; display: block; }

.nav__link--collection {
  display: flex;
  align-items: center;
  padding: 2px;
  border-bottom: none;
}
.nav__link--collection::after { display: none; }
.nav__link--collection svg { width: 16px; height: 16px; display: block; }

.nav__ctas {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Hamburger hidden on desktop */
.nav__hamburger { display: none; }

.nav__cta {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ── Hero ──────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 75% 40%, rgba(139, 105, 20, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 20% 80%, rgba(28, 46, 74, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* Fine grid overlay — hero and page headers */
.hero__grid,
.page-header__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.35;
  pointer-events: none;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 40px 100px;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s ease forwards;
}

.hero__eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.hero__title {
  max-width: 14ch;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.8s 0.35s ease forwards;
}

.hero__title em {
  font-style: italic;
  color: var(--gold);
}

.hero__body {
  max-width: 52ch;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 52px;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s ease forwards;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 0.65s ease forwards;
}

.hero__stat-row {
  display: flex;
  gap: 56px;
  margin-top: 80px;
  opacity: 0;
  animation: fadeUp 0.8s 0.8s ease forwards;
}

.hero__stat-num {
  font-family: var(--ff-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
}

.hero__stat-label {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--blue-deep);
}

.btn--outline {
  border: 1px solid var(--rule-dark);
  color: var(--ink-soft);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--gold {
  background: var(--gold);
  color: var(--paper);
}

.btn--gold:hover {
  background: var(--gold-light);
}

.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.btn:hover svg { transform: translateX(3px); }

/* ── Section: Mission ──────────────────────────────── */
.mission__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.mission__aside {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.mission__aside-num {
  font-family: var(--ff-serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--rule);
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.mission__body p + p { margin-top: 1.4rem; }

.mission__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  margin-top: 48px;
  border: 1px solid var(--rule);
}

.pillar {
  background: var(--paper);
  padding: 28px 24px;
}

.pillar__icon {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.pillar__title {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.pillar__text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 100%;
}

/* ── Section: Collection ───────────────────────────── */
.collection__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.collection__intro { max-width: 50ch; }

.recording-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 24px 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.recording-card:hover {
  border-color: var(--rule-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

.recording-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.recording-card__year {
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.recording-card__title {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--gold);
  margin-bottom: 10px;
}

.recording-card__speaker {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
  flex: 1;
}

.recording-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.recording-card__tag {
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.recording-card__tag + .recording-card__tag::before {
  content: '·';
  margin-right: 10px;
  color: var(--rule-dark);
}

.recording-card__play {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: all 0.2s;
}

.recording-card:hover .recording-card__play {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Active card state */
.recording-card--playing {
  border-color: var(--gold) !important;
}

.recording-card--playing .recording-card__play {
  background: var(--gold);
  color: var(--paper);
  border-color: var(--gold);
}

/* ── Section: Speakers ─────────────────────────────── */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.speaker-card {
  background: var(--paper);
  padding: 28px 24px;
  transition: background 0.2s;
}

.speaker-card:hover { background: var(--paper-warm); }

.speaker-card__name {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.speaker-card__title {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.speaker-card__recordings {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 12px;
}

/* ── Section: Timeline ─────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 80px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
}

.timeline__item {
  position: relative;
  margin-bottom: 48px;
}

.timeline__year {
  position: absolute;
  left: -80px;
  top: 4px;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-align: right;
  width: 48px;
}

.timeline__dot {
  position: absolute;
  left: -68px;
  top: 7px;
  width: 9px; height: 9px;
  border: 2px solid var(--rule-dark);
  background: var(--paper);
  border-radius: 50%;
  margin-left: 16px;
}

.timeline__content h4 {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.timeline__content p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ── Trustees ──────────────────────────────────────── */
.trustee-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
}

.trustee-item {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s;
}

.trustee-item:last-child { border-bottom: none; }
.trustee-item:hover { background: var(--paper-warm); }

.trustee-item__name {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
}

.trustee-item__role {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.trustee-item__badge {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--rule-dark);
  color: var(--ink-muted);
  justify-self: end;
  white-space: nowrap;
}

.trustee-item__badge--chair {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Support ───────────────────────────────────────── */
.support__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.support__block {
  padding: 56px 48px;
}

.support__block h3 {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  color: #e8e4d8;
  margin-bottom: 16px;
}

.support__block p {
  font-size: 0.95rem;
  color: #a8a090;
  line-height: 1.75;
  margin-bottom: 32px;
}

/* ── Quote / Pull ──────────────────────────────────── */
.pull-quote {
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.pull-quote__text {
  font-family: var(--ff-serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: 24px;
}

.pull-quote__attr {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Archive number tape ───────────────────────────── */
.num-tape {
  background: var(--ink);
  color: var(--paper-warm);
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
}

.num-tape__track {
  display: flex;
  gap: 48px;
  animation: scroll-tape 40s linear infinite;
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(249, 247, 242, 0.5);
}

.num-tape__track span.highlight {
  color: var(--gold-light);
}

/* ── Footer ────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: rgba(249, 247, 242, 0.6);
  padding: 64px 0 40px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer__brand-name {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: var(--paper-warm);
  margin-bottom: 8px;
}

.footer__brand-charity {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(249, 247, 242, 0.35);
  margin-bottom: 20px;
}

.footer__brand-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 36ch;
}

.footer__col-title {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(249, 247, 242, 0.4);
  margin-bottom: 16px;
}

.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col-links a {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  color: rgba(249, 247, 242, 0.6);
  transition: color 0.2s;
}

.footer__col-links a:hover { color: var(--paper-warm); }

.footer__bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__bottom-text {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Page-specific header ──────────────────────────── */
.page-header {
  padding: calc(var(--nav-h) + 80px) 0 64px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header__breadcrumb {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
}

.page-header__breadcrumb a { color: var(--gold); }

/* ── Animations ────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-tape {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Audio Player Bar ─────────────────────────────── */
:root {
  --player-bar-h:    0px;
  --player-bg:       #13110e;
  --player-gold:     #b8943a;
  --player-rule:     rgba(255,255,255,0.08);
  --player-text:     #e8e4d8;
  --player-muted:    rgba(232,228,216,0.55);
  --player-text-dim: rgba(232,228,216,0.75);
  --thumb-pos:       0%;
}

.at-player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--player-bg);
  border-top: 1px solid var(--player-rule);
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--ff-body);
  /* Safe-area inset for iPhone home indicator. Resolves to 0 on devices
     with no inset (desktop, Android, older iPhones), so this is a no-op
     except where it's actually needed. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.at-player-bar--visible {
  transform: translateY(0);
}

/* Push page footer up when bar is visible */
body { padding-bottom: var(--player-bar-h, 0px); }

/* ── Top-edge progress bar ────────────────────────── */
/* Sits across the full width at the very top of the player.
   2px tall normally, expands to 4px on hover. Click anywhere to seek.
   The element is 14px tall but the visible track is centred inside,
   giving a comfortable hit area without making the bar visually thick. */
.at-player__progress {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  margin-top: -7px;     /* overlap the border-top so the visible track sits at the edge */
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.at-player__progress:focus-visible {
  outline: 2px solid var(--player-gold);
  outline-offset: -2px;
}

.at-player__progress-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(255,255,255,0.12);
  transform: translateY(-50%);
  pointer-events: none;
  transition: height 0.15s;
}

.at-player__progress-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  background: var(--player-gold);
  transform: translateY(-50%);
  width: 0%;
  pointer-events: none;
  transition: height 0.15s;
}

.at-player__progress-thumb {
  position: absolute;
  top: 50%;
  left: var(--thumb-pos, 0%);
  width: 11px; height: 11px;
  background: var(--player-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.at-player__progress:hover .at-player__progress-track,
.at-player__progress:hover .at-player__progress-fill,
.at-player__progress:focus-visible .at-player__progress-track,
.at-player__progress:focus-visible .at-player__progress-fill {
  height: 4px;
}

.at-player__progress:hover .at-player__progress-thumb,
.at-player__progress:focus-visible .at-player__progress-thumb {
  opacity: 1;
}

/* ── Main controls row ────────────────────────────── */
/* Three-zone flex layout: info (left, flex), centre (auto, fixed),
   right (flex, justified end). The two flex zones balance each other so
   the playback controls stay visually centred regardless of title length. */
.at-player__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 9px 16px 11px;
  min-height: 60px;
}

.at-player__info {
  flex: 1 1 0;
  min-width: 0;     /* allow text-overflow ellipsis to actually clip */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.at-player__playlist-label {
  font-family: var(--ff-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--player-gold);
  margin-bottom: 2px;
}

.at-player__title {
  font-family: var(--ff-serif);
  font-size: 0.95rem;
  color: var(--player-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.at-player__speaker {
  font-size: 0.78rem;
  color: var(--player-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.at-player__center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.at-player__times {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--player-muted);
  margin-left: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.at-player__times-sep { color: rgba(255,255,255,0.2); }
.at-player__time      { color: var(--player-text-dim); }

.at-player__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Buttons ──────────────────────────────────────── */
.at-player__btn {
  background: none;
  border: none;
  color: var(--player-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.at-player__btn:hover { color: var(--player-text); background: rgba(255,255,255,0.06); }
.at-player__btn:disabled { opacity: 0.25; cursor: default; }
.at-player__btn:disabled:hover { background: none; color: var(--player-muted); }

.at-player__btn svg { width: 18px; height: 18px; display: block; }

.at-player__btn--play {
  width: 42px; height: 42px;
  background: var(--player-gold);
  color: var(--player-bg);
  border-radius: 50%;
}

.at-player__btn--play:hover {
  background: #d4a84a;
  color: var(--player-bg);
}

.at-player__btn--sm svg { width: 17px; height: 17px; }

.at-player__btn--skip { padding: 2px; }
.at-player__btn--skip svg { width: 30px; height: 30px; }

.at-player__btn--close {
  width: 28px; height: 28px;
  padding: 0;
}
.at-player__btn--close svg { width: 14px; height: 14px; }

/* ── Volume ───────────────────────────────────────── */
.at-player__volume {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.at-player__btn--vol svg { width: 17px; height: 17px; }

.at-player__vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  accent-color: var(--player-gold);
}

.at-player__vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--player-text);
  cursor: pointer;
  transition: background 0.15s;
}

.at-player__vol-slider::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--player-text);
  border: none;
  cursor: pointer;
}

.at-player__vol-slider::-webkit-slider-thumb:hover { background: var(--player-gold); }
.at-player__vol-slider::-moz-range-thumb:hover { background: var(--player-gold); }

/* ── Speed dropdown ───────────────────────────────── */
/* Click "1x \u25BE" to open a popup menu with all speeds.
   Replaces the previous five-button row, which ate too much
   horizontal space and didn't scale to more options. */
.at-player__speed-dropdown {
  position: relative;
  flex-shrink: 0;
}

.at-player__speed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--player-muted);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0 8px 0 11px;
  height: 30px;
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  min-width: 56px;
  justify-content: center;
  line-height: 1;
}

.at-player__speed-toggle:hover {
  color: var(--player-text);
  border-color: rgba(255,255,255,0.3);
}

.at-player__speed-toggle[aria-expanded="true"] {
  color: var(--player-gold);
  border-color: var(--player-gold);
  background: rgba(184,148,58,0.12);
}

.at-player__speed-toggle svg {
  width: 9px;
  height: 9px;
  margin-top: 1px;
  transition: transform 0.15s;
}

.at-player__speed-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.at-player__speed-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #1d1a16;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 84px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 1;
}

.at-player__speed-menu[hidden] { display: none; }

.at-player__speed-menu-btn {
  background: transparent;
  border: none;
  color: var(--player-muted);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  text-align: left;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}

.at-player__speed-menu-btn:hover {
  color: var(--player-text);
  background: rgba(255,255,255,0.06);
}

.at-player__speed-menu-btn.active {
  color: var(--player-gold);
  background: rgba(184,148,58,0.1);
  font-weight: 500;
}

/* ── Pill-style toggles (Transcript, Cite) ─────────── */
/* Shared visual treatment for the secondary actions on the right
   of the bar. They were previously styled inconsistently (CITE was
   a thin text link; TRANSCRIPT had a border-on-active state). They
   are sister features so they should look identical. */
.at-transcript-toggle,
.at-cite-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--player-muted);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 11px;
  height: 30px;
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}

.at-transcript-toggle svg,
.at-cite-bar-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.at-transcript-toggle:hover,
.at-cite-bar-btn:hover {
  color: var(--player-text);
  border-color: rgba(255,255,255,0.3);
}

.at-transcript-toggle.active {
  color: var(--player-gold);
  border-color: var(--player-gold);
  background: rgba(184,148,58,0.12);
}

.at-transcript-toggle:disabled,
.at-cite-bar-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Transcript panel ─────────────────────────────── */
#at-transcript-panel {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--paper-warm);
  border-top: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  z-index: 190;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  min-height: 80px;
  height: 300px;
}

/* ── Drag handle ──────────────────────────────────── */
#at-transcript-resize-handle {
  flex-shrink: 0;
  height: 20px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
}

#at-transcript-resize-handle::before {
  display: none;
}

#at-transcript-resize-handle::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule-dark);
  transition: background 0.15s;
}

#at-transcript-resize-handle:hover::after {
  background: var(--gold);
}

#at-transcript-panel[hidden] {
  display: none;
}

/* The container wrapper must also be flex and fill height */
.at-transcript-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

/* Mobile: tighten side padding so transcript text doesn't lose 80px to gutters
   on a 375px screen. Desktop is untouched. */
@media (max-width: 640px) {
  .at-transcript-panel__inner {
    padding: 0 16px;
  }
}

.at-transcript-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

.at-transcript-panel__title,
.at-transcript-panel__label {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
  order: 1;
}

.at-transcript-panel__sub {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  order: 2;
}

/* ── Find-in-transcript search ─────────────────────── */
/* Sits in the right of the panel head. Filters the visible cues
   live as the user types and highlights matches with <mark>. */
.at-transcript-search {
  position: relative;
  flex-shrink: 0;
  width: 220px;
  margin-left: auto;
  order: 10;  /* sits between labels and close button */
}

.at-transcript-search__input {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-dark);
  padding: 5px 60px 5px 26px;
  outline: none;
  border-radius: 3px;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.at-transcript-search__input:focus { border-color: var(--gold); }
.at-transcript-search__input::placeholder { color: var(--ink-muted); font-style: italic; }

.at-transcript-search__icon {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  display: flex;
  pointer-events: none;
}

.at-transcript-search__icon svg { width: 12px; height: 12px; }

.at-transcript-search__count {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  color: var(--ink-muted);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.at-transcript-search__count[hidden] { display: none; }

/* Suppress browser-native clear button on search inputs — we handle clearing via Esc */
.at-transcript-search__input::-webkit-search-cancel-button,
.at-transcript-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.at-transcript-search__input::-ms-clear { display: none; }

/* Close button inside transcript panel header */
.at-transcript-panel__close {
  background: none;
  border: 1px solid transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  order: 99;  /* always last in the flex row */
}
.at-transcript-panel__close:hover { color: var(--ink); border-color: var(--rule-dark); }
.at-transcript-panel__close svg { width: 12px; height: 12px; display: block; }

[data-theme="dark"] .at-transcript-search__input {
  background: var(--paper-mid);
  color: var(--ink);
  border-color: var(--rule-dark);
}

/* ── Jump-to-now-playing pill ──────────────────────── */
/* Floats over the transcript when the user has scrolled away from
   the active cue. Click to scroll the active cue back into view. */
.at-transcript-jump {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%) translateY(-8px);
  background: var(--gold);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.at-transcript-jump.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.at-transcript-jump:hover {
  background: var(--gold-light);
}

.at-transcript-jump svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* ── THE KEY FIX: scrollable body ─────────────────── */
#at-transcript-body {
  overflow-y: scroll;
  flex: 1;
  min-height: 0;   /* critical in a flex column: allows child to shrink below content size */
  padding: 8px 0;
  position: relative;
}

.at-transcript-panel__placeholder {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 24px 20px;
  text-align: center;
}

.at-transcript-panel__no-results {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 24px 20px;
  text-align: center;
  font-style: italic;
}

/* ── VTT cue rows ─────────────────────────────────── */
.at-vtt-cue {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
  cursor: pointer;
  transition: background 0.1s, opacity 0.15s;
  border-radius: 2px;
}

.at-vtt-cue:hover {
  background: var(--paper-warm);
}

.at-vtt-cue.active {
  background: rgba(139,105,20,0.08);
}

/* Hidden by find-in-transcript filter */
.at-vtt-cue.search-hidden {
  display: none;
}

/* Highlight for in-transcript search matches */
.at-vtt-text mark {
  background: rgba(184,148,58,0.35);
  color: var(--ink);
  padding: 0 1px;
  border-radius: 1px;
}

.at-vtt-time {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
}

.at-vtt-cue.active .at-vtt-time {
  color: var(--gold);
  font-weight: 500;
}

.at-vtt-text {
  font-family: var(--ff-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.at-vtt-cue.active .at-vtt-text {
  color: var(--ink);
  font-weight: 700;
}

/* ── Keyboard shortcuts overlay ────────────────────── */
.at-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(2px);
}

[data-theme="dark"] .at-shortcuts-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.at-shortcuts-overlay[hidden] { display: none; }

.at-shortcuts-panel {
  background: var(--paper);
  border: 1px solid var(--rule-dark);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 28px 32px 24px;
  max-width: 460px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-family: var(--ff-body);
  color: var(--ink);
  border-radius: 4px;
  position: relative;
}

.at-shortcuts-panel h2 {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 18px;
  color: var(--ink);
}

.at-shortcuts-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  align-items: baseline;
  margin: 0;
  padding: 0;
}

.at-shortcuts-list dt {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper-warm);
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
}

.at-shortcuts-list dd {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

.at-shortcuts-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-align: center;
}

/* ── Unavailable toast ─────────────────────────────── */
.pt-unavail-toast {
  position: fixed;
  bottom: calc(var(--player-bar-h, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  white-space: nowrap;
}

.pt-unavail-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Active card state */
.recording-card--playing {
  border-color: var(--gold) !important;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 960px) {
  .container { padding: 0 24px; }
  .mission__layout { grid-template-columns: 1fr; gap: 40px; }
  .mission__aside { position: static; }
  .mission__pillars { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero__stat-row { gap: 32px; flex-wrap: wrap; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .support__inner { grid-template-columns: 1fr; }
  .trustee-item { grid-template-columns: 1fr; gap: 4px; }
  .trustee-item__badge { justify-self: start; }
  .collection__header { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

@media (max-width: 1100px) {
  .at-player__info { max-width: 280px; flex: 0 1 auto; }
  .at-player__right { flex: 0 1 auto; }
}

@media (max-width: 900px) {
  .at-player__times { display: none; }
  .at-player__inner { gap: 16px; }
}

@media (max-width: 760px) {
  .at-player__inner { padding: 8px 12px 10px; gap: 12px; }
  .at-player__title { max-width: 200px; font-size: 0.88rem; }
  .at-player__speaker { max-width: 200px; font-size: 0.72rem; }
  .at-player__btn--skip svg { width: 26px; height: 26px; }
  .at-player__volume { display: none; }
  .at-player__speed-dropdown { display: none; }
  /* Collapse pill buttons to icon-only on narrow viewports */
  .at-transcript-toggle span,
  .at-cite-bar-btn span { display: none; }
  .at-transcript-toggle,
  .at-cite-bar-btn { padding: 6px 8px; }
  /* In-transcript search shrinks but stays visible */
  .at-transcript-search { width: 140px; }
}

@media (max-width: 480px) {
  .at-transcript-search { display: none; }
  .at-player__info { max-width: 160px; }
  .at-player__title { font-size: 0.85rem; }
  .at-player__speaker { font-size: 0.7rem; }
}

@media (max-width: 640px) {
  :root { --nav-h: 56px; }

  /* Nav — hamburger */
  .nav__links { display: none; }
  .nav__links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 16px 24px 24px;
    z-index: 99;
  }
  .nav__links.open .nav__link {
    padding: 12px 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--rule);
    width: 100%;
  }
  .nav__links.open .nav__link:last-child { border-bottom: none; }
  .nav__links.open .nav__link::after { display: none; }
  .nav__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    margin-right: 12px;
    background: none;
    border: none;
  }
  .nav__hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__hamburger.open span:nth-child(2) { opacity: 0; }
  .nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav__cta { display: none; }

  /* Hero */
  .hero__inner { padding: 48px 24px 64px; }
  .hero__eyebrow { margin-bottom: 24px; }
  .hero__body { font-size: 1rem; margin-bottom: 36px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    margin-top: 48px;
  }
  .hero__stat-num { font-size: 2rem; }

  /* Page headers */
  .page-header { padding: calc(var(--nav-h) + 40px) 0 40px; }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Typography */
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }

  /* Sections */
  .section { padding: 56px 0; }
  .support__block { padding: 36px 24px; }
  .pull-quote__text { font-size: 1.4rem; }
  .mission__aside-num { font-size: 5rem; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Timeline */
  .timeline { padding-left: 48px; }
  .timeline__year { left: -48px; width: 32px; font-size: 0.6rem; }
  .timeline__dot { left: -38px; }

  /* Trustee */
  .trustee-item { grid-template-columns: 1fr; gap: 4px; padding: 20px 16px; }
  .trustee-item__badge { justify-self: start; }

  /* Collection */
  .collection__header { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ── Ticker tape: accessibility ────────────────────── */
.num-tape { overflow: hidden; }
.num-tape[aria-hidden="true"] { user-select: none; }

/* Very narrow phones (≤ 400px): hide the 4th hero stat tile
   ("Earliest recording: 1973") so the remaining 3 stats can breathe.
   Two short numbers + two long labels in a 2×2 grid wrap awkwardly
   below ~380px. Dropping the least informative tile fixes it.
   Pure progressive enhancement — desktop and most mobile widths untouched. */
@media (max-width: 400px) {
  .hero__stat-row > div:nth-child(4) { display: none; }
  .hero__stat-num { font-size: 1.75rem; }
  .hero__stat-label { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .num-tape__track { animation: none !important; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Page: Collection (from inline <style>) ────────── */
.collection-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 64px;
}
.cstat { background: var(--paper); padding: 28px 24px; }
.cstat__n { font-family: var(--ff-serif); font-size: 2.2rem; line-height: 1; color: var(--ink); margin-bottom: 6px; }
.cstat__l { font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.subject-block { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.subject-row { display: grid; grid-template-columns: 2fr 1fr 80px; align-items: center; gap: 24px; background: var(--paper); padding: 18px 24px; transition: background 0.15s; }
.subject-row:hover { background: var(--paper-warm); }
.subject-row__name { font-family: var(--ff-serif); font-size: 1rem; }
.subject-row__bar { height: 3px; background: var(--rule); position: relative; }
.subject-row__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.subject-row__count { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-muted); text-align: right; }
.access-banner { background: var(--paper-mid); border: 1px solid var(--rule); padding: 32px 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.access-banner h3 { font-size: 1.2rem; margin-bottom: 6px; }
.access-banner p { font-size: 0.9rem; color: var(--ink-soft); max-width: 54ch; }

@media (max-width: 760px) {
  .collection-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Page: Conferences (from inline <style>) ──────── */
.conf-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.conf-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.conf-item:first-child { border-top: 1px solid var(--rule); }
.conf-item__year {
  font-family: var(--ff-serif);
  font-size: 2rem;
  color: var(--rule-dark);
  line-height: 1.1;
  padding-top: 4px;
}
.conf-item__location {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.conf-item__title {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  margin-bottom: 12px;
  line-height: 1.3;
}
.conf-item__desc {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 62ch;
}
.conf-item__photo {
  margin: 24px 0 0;
  max-width: 62ch;
}
.conf-item__photo img {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  filter: sepia(0.15) contrast(1.02);
}
.conf-item__photo figcaption {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.conf-item__speakers {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.conf-item__speaker-tag {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--paper-mid);
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .conf-item { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Page: Contact (from inline <style>) ──────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-block__label {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.contact-block__value {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
}
.contact-block__value a {
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s;
}
.contact-block__value a:hover { border-color: var(--gold); color: var(--gold); }
.contact-form-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.form-field input,
.form-field textarea,
.form-field select {
  padding: 12px 16px;
  border: 1px solid var(--rule-dark);
  background: var(--paper);
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.map-embed {
  margin-top: 32px;
}
.map-embed iframe {
  width: 100%;
  height: 240px;
  border: 1px solid var(--rule);
  display: block;
  filter: sepia(0.12) contrast(0.96);
  transition: filter 0.3s;
}
.map-embed iframe:hover {
  filter: sepia(0) contrast(1);
}
.map-embed__link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.map-embed__link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Page: Support (from inline <style>) ──────────── */
.funding-stage {
  border: 1px solid var(--rule);
  padding: 32px 36px;
  background: var(--paper);
  position: relative;
}
.funding-stage__num {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.funding-stage__amount {
  font-family: var(--ff-serif);
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.funding-stage__title {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.funding-stage__desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 100%;
}
.funding-total {
  background: var(--ink);
  color: var(--paper-warm);
  padding: 32px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 1px;
}
.funding-total__label {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(249,247,242,0.5);
  margin-bottom: 6px;
}
.funding-total__amount {
  font-family: var(--ff-serif);
  font-size: 2.4rem;
  color: var(--gold-light);
}
.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}
.amount-btn {
  background: var(--paper);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  color: var(--ink);
}
.amount-btn:hover, .amount-btn.selected {
  background: var(--ink);
  color: var(--paper-warm);
}
.donate-form input[type="text"] {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--rule-dark);
  background: var(--paper);
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 16px;
}
.donate-form input[type="text"]:focus {
  outline: none;
  border-color: var(--ink);
}

@media (max-width: 640px) {
  .amount-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Page: Privacy (from inline <style>) ──────────── */
.prose h2 {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ink);
  margin: 48px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 680px;
}
.prose ul {
  padding-left: 1.4em;
  margin: 12px 0 20px;
}
.prose li { margin-bottom: 6px; }
.prose a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.prose a:hover { border-color: var(--gold); }
.prose hr { margin: 40px 0; border: none; border-top: 1px solid var(--rule); }
.privacy-meta {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 40px;
}

/* ── Pagefind UI — shared palette overrides ───────────────── */
#at-search,
#at-collection-search {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--gold);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--rule-dark);
  --pagefind-ui-tag: var(--paper-mid);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 2px;
  --pagefind-ui-font: 'Libre Baskerville', Georgia, serif;
}

#at-search .pagefind-ui__search-input,
#at-collection-search .pagefind-ui__search-input {
  font-size: 1rem;
  padding: 11px 16px;
}

#at-search .pagefind-ui__search-input:focus,
#at-collection-search .pagefind-ui__search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(139,105,20,0.12);
}

#at-search .pagefind-ui__result,
#at-collection-search .pagefind-ui__result {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}

#at-search .pagefind-ui__result-title,
#at-collection-search .pagefind-ui__result-title {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
}

#at-search .pagefind-ui__result-link,
#at-collection-search .pagefind-ui__result-link { color: var(--gold); }

#at-search .pagefind-ui__result-link:hover,
#at-collection-search .pagefind-ui__result-link:hover { text-decoration: underline; }

#at-search .pagefind-ui__result-excerpt,
#at-collection-search .pagefind-ui__result-excerpt {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

#at-search mark,
#at-collection-search mark {
  background: rgba(139,105,20,0.15);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

#at-search .pagefind-ui__button,
#at-collection-search .pagefind-ui__button {
  background: transparent;
  border: 1px solid var(--rule-dark);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
}

#at-search .pagefind-ui__button:hover,
#at-collection-search .pagefind-ui__button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Recording page ──────────────────────────────────────── */

/* Recording titles can be very long — use a tighter scale than the hero h1 */
.recording-page__h1 {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

/* Meta row: speaker / venue / year / subject displayed as separated tokens */
.recording-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 24px;
}

/* Each metadata token separated by a mid-dot */
.recording-page__meta > span {
  font-family: var(--ff-body);
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.recording-page__meta > span + span::before {
  content: ' · ';
  color: var(--rule-dark);
  margin: 0 4px;
}

/* Speaker — gold italic, matching recording card title style */
.recording-page__speaker {
  font-style: italic;
  color: var(--gold) !important;
}

/* Year is monospaced and muted */
.recording-page__year {
  font-family: var(--ff-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
  color: var(--gold) !important;
}

/* Venue */
.recording-page__venue {
  color: var(--ink-soft);
}

/* Subject tag — displayed as a small badge */
.recording-page__subject {
  font-family: var(--ff-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
  padding: 3px 9px;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  margin-left: 6px;
  /* Override the mid-dot separator — subject uses a different visual treatment */
}

.recording-page__subject::before {
  display: none !important;
}

/* Action buttons in the meta row */
.recording-page__actions {
  margin-left: auto;
  padding-left: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Play button — inherits btn--primary, just tightens size to fit the meta row */
.recording-page__play-btn {
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  padding: 10px 20px !important;
  gap: 8px;
  white-space: nowrap;
}

.recording-page__play-btn svg {
  flex-shrink: 0;
}

/* Back link — smaller, secondary, no fill */
.recording-page__back-btn {
  font-size: 0.62rem !important;
  letter-spacing: 0.1em !important;
  padding: 8px 16px !important;
  white-space: nowrap;
}

/* Description paragraph below the meta row */
.recording-page__description {
  max-width: 64ch;
  margin-bottom: 32px;
}

.recording-page__description p {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* Archival record block — identifier, format, collection, rights */
.recording-page__record {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  max-width: 680px;
}

.recording-page__record-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  min-height: 40px;
}

.recording-page__record-row:last-child {
  border-bottom: none;
}

.recording-page__record dt {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 16px;
  border-right: 1px solid var(--rule);
  background: var(--paper-warm);
}

.recording-page__record dd {
  font-family: var(--ff-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 10px 16px;
}

.recording-page__record dd code {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.recording-page__record dd a {
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.recording-page__record dd a:hover {
  border-color: var(--gold);
}

[data-theme="dark"] .recording-page__record { border-color: var(--rule); }
[data-theme="dark"] .recording-page__record-row { border-color: var(--rule); }
[data-theme="dark"] .recording-page__record dt { background: var(--paper-warm); border-color: var(--rule); }

/* Dark mode */
[data-theme="dark"] .recording-page__speaker { color: var(--gold) !important; }
[data-theme="dark"] .recording-page__year    { color: var(--gold) !important; }
[data-theme="dark"] .recording-page__subject { border-color: var(--rule-dark); }

/* ── Resume position indicator ───────────────────────────── */
.at-resume-label {
  position: fixed;
  bottom: calc(var(--player-bar-h, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--ink);
  color: var(--paper-warm);
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 250;
  white-space: nowrap;
}

.at-resume-label.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}