/* ───────────────────────────────────────────────────────────
   "Night" theme for media.html and press-kit.html.
   Loaded after base.css and media.css; brings these pages in line
   with the homepage: Domine + DM Sans, ink/white grounds, rust accent,
   light and dark themes, no cream.
   ─────────────────────────────────────────────────────────── */

:root {
  --bg: #ffffff;
  --surface: #f4f6f5;
  --surface2: #e6eae8;
  --line: #d5dbd8;
  --node: #1c1e1d;
  --text: #1c1e1d;
  --strong: #1c1e1d;
  --muted: #4f5654;
  --soft: #3a403d;
  --meta: #5f6664;
  --wire: #a64e2a;
  --fill: #a64e2a; /* filled controls with white text: 5.6:1 */
  --field: var(--node); /* form-control borders */
  --quote: #a64e2a;
  --btnline: #1c1e1d;
  color-scheme: light;

  /* old tokens, remapped */
  --paper: var(--bg);
  --paper-warm: var(--surface);
  --paper-deep: var(--surface2);
  --sage: var(--node);
  --sage-deep: var(--meta);
  --sage-soft: var(--node);
  --sage-mist: var(--surface2);
  --forest: var(--strong);
  --ink: var(--text);
  --ink-soft: var(--soft);
  --ink-mute: var(--meta);
  --clay: var(--wire);
  --clay-deep: var(--quote);
  --hairline: #c3cac7;
  --hairline-soft: var(--line);
  --slab-bg: var(--bg);
  --slab-fg: var(--text);
  --slab-fg-mute: var(--meta);
  --slab-hairline: var(--line);
  --noise-opacity: 0;
}

[data-theme="dark"] {
  --bg: #1c1e1d;
  --surface: #222624;
  --surface2: #2a2f2c;
  --line: #3a403d;
  --node: #4a524e;
  --text: #eef1ef;
  --strong: #ffffff;
  --muted: #b9c1bd;
  --soft: #c7cecb;
  --meta: #9aa39f;
  --wire: #c0623a;
  --fill: #b25633; /* white text 4.92:1; 3.41:1 on --bg, 3.12:1 on --surface */
  --field: #747c78; /* 3.6:1 on --surface; --node was 1.9:1 */
  --quote: #e4b39b;
  --btnline: #eef1ef;
  --hairline: #4a524e;
  color-scheme: dark;
}

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

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-image: none;
  background-color: var(--bg);
  color: var(--text);
}
body::before { display: none; }

h1, h2, h3, h4, h5,
.site-nav-brand, .section-heading, .card-title, .empty strong,
.detail-title, .detail-quote, .kit-block h3 {
  font-family: 'Domine', Georgia, serif;
  font-style: normal;
}

.card, button, .btn, .section-label, .site-nav-links a, input[type='search'], select,
.facet-label, .chip, .facet-actions button, .facet-actions a, .result-count,
.badge, .card-date, .card-outlet, .tag, .card-foot, .detail-meta,
.detail-section h4, .bio-tab, .shot-meta, .row-year, .rail h4, .fact dt,
.toast, .page-lede, .section-subhead, .theme-toggle {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
  color: var(--text);
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: var(--wire);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
a:hover { color: var(--strong); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

::selection { background-color: var(--fill); color: #ffffff; }

.container, .container-narrow {
  max-width: 1280px;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ─── Nav (matches the homepage) ──────────────────── */

.site-nav {
  position: static;
  background-color: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.site-nav-inner {
  max-width: 1280px;
  padding: 14px clamp(16px, 4vw, 48px);
  height: auto;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-nav-brand {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--strong);
  text-decoration: none;
  padding: 6px 0;
}
.site-nav-brand:hover { color: var(--strong); }
.site-nav-right { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.site-nav-links { gap: 4px 24px; flex-wrap: wrap; }
.site-nav-links a {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  background: none;
  text-decoration: none;
}
.site-nav-links a:hover { background: none; color: var(--strong); text-decoration: underline; text-decoration-color: var(--wire); }
.site-nav-links a[aria-current="page"] {
  background: none;
  color: var(--strong);
  text-decoration: underline;
  text-decoration-color: var(--wire);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-nav .theme-toggle {
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--node);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.site-nav .theme-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--node); transform: none; }
.theme-toggle .when-dark, .theme-toggle .when-light { display: inline-flex; align-items: center; gap: 8px; }
.theme-toggle .when-dark { display: none; }
[data-theme="dark"] .theme-toggle .when-dark { display: inline-flex; }
[data-theme="dark"] .theme-toggle .when-light { display: none; }
.theme-toggle svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  /* Phones: switch sits beside the name, links get their own row */
  .site-nav-inner { padding: 12px clamp(16px, 4vw, 48px); gap: 8px 16px; }
  .site-nav-right { display: contents; }
  .site-nav .theme-toggle { order: 1; margin-left: auto; }
  .site-nav-links { order: 2; flex: 1 1 100%; width: 100%; padding-bottom: 0; gap: 4px 16px; }
  .site-nav-links a { padding: 8px 0; font-size: 15px; }
}

/* ─── Page head ───────────────────────────────────── */

section { padding: 0; }
.page-head { padding: clamp(56px, 8vw, 112px) 0 clamp(32px, 4vw, 48px); }

.section-label {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--meta);
  margin-bottom: 14px;
}
.section-label::before { display: none; }

.section-heading,
.page-head .section-heading {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--strong);
  max-width: 18em;
  margin-bottom: 20px;
}

.page-lede, .section-subhead {
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  color: var(--muted);
  max-width: 40em;
}
.page-lede a { font-style: normal; }

/* ─── Toolbar ─────────────────────────────────────── */

.toolbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

input[type='search'], select {
  font-size: 15px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--field);
  border-radius: 0;
  min-height: 44px;
}
input[type='search']::placeholder { color: var(--meta); }
input[type='search']:focus, select:focus { border-color: var(--wire); background-color: var(--surface); }
.search-wrap svg { color: var(--meta); }

/* ─── Facets ──────────────────────────────────────── */

.facet-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--strong);
}
.chip {
  font-size: 13px;
  letter-spacing: 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background-color: transparent;
  color: var(--soft);
  min-height: 36px;
}
.chip:hover { border-color: var(--node); background-color: var(--surface); color: var(--strong); }
.chip[aria-pressed='true'] { background-color: var(--fill); border-color: var(--fill); color: #ffffff; }
/* Counts: solid colour instead of base opacity 0.55, which fell below 4.5:1 */
.chip .n { opacity: 1; color: var(--meta); }
.chip[aria-pressed='true'] .n { color: #ffffff; }

.facet-actions { border-top: 1px solid var(--line); }
.facet-actions button, .facet-actions a {
  font-size: 14px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--wire);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  padding: 6px 0;
}
.facet-actions button:hover, .facet-actions a:hover { color: var(--strong); }

.result-count {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--meta);
}

/* ─── Cards ───────────────────────────────────────── */

.card {
  background-color: var(--surface);
  border: 1px solid var(--node);
  border-radius: 0;
  padding: 22px;
  color: var(--text);
}
.card:hover { background-color: var(--surface); border-color: var(--wire); transform: none; }
.card:focus-visible { outline: 2px solid var(--text); }

.badge {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--meta);
  background: none;
  padding: 0;
}
.star { color: var(--wire); }
.card-date { font-size: 13px; color: var(--meta); }
.card-title { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--strong); }
.card-outlet { font-size: 14px; color: var(--meta); }
.card-summary { font-size: 15px; color: var(--soft); }
.tag {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--meta);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.card-foot { border-top: 1px solid var(--line); font-size: 13px; color: var(--meta); }

.empty { border: 1px dashed var(--node); border-radius: 0; color: var(--meta); }
.empty strong { font-weight: 600; color: var(--strong); }

.skeleton { border-radius: 0; background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 300% 100%; }

/* ─── Detail dialog ──────────────────────────────── */

dialog.detail { background-color: var(--bg); color: var(--text); border: 1px solid var(--node); border-radius: 0; }
dialog.detail::backdrop { background-color: rgba(10, 12, 11, 0.6); }
.detail-close { border: 1px solid var(--node); color: var(--text); width: 44px; height: 44px; }
.detail-close:hover { background-color: var(--surface); color: var(--strong); }
.detail-title { font-weight: 600; letter-spacing: -0.02em; color: var(--strong); }
.detail-meta { font-size: 14px; color: var(--meta); }
.detail-quote {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--quote);
  border-left: 2px solid var(--wire);
}
.detail-section h4 {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--strong);
}
.detail-section p { font-size: 15.5px; color: var(--soft); }
.embed-frame { background-color: var(--surface2); border: 1px solid var(--line); border-radius: 0; }
.detail-actions { border-top: 1px solid var(--line); }

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

.btn {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 0;
  min-height: 48px;
  padding: 0 24px;
  text-decoration: none;
}
.btn-small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-primary, .btn-primary:hover { background-color: #a64e2a; color: #ffffff; border: none; }
.btn-primary:hover { background-color: #8c4022; }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--btnline); }
.btn-ghost:hover { background: var(--surface); color: var(--strong); border: 1.5px solid var(--btnline); }

/* ─── Press kit ──────────────────────────────────── */

.kit-block h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; color: var(--strong); }
.bio-tab {
  font-size: 14px;
  border: 1px solid var(--node);
  border-radius: 0;
  color: var(--text);
  min-height: 44px;
}
.bio-tab:hover { border-color: var(--node); background: var(--surface); color: var(--strong); }
.bio-tab[aria-selected='true'] { background-color: var(--fill); border-color: var(--fill); color: #ffffff; }
.bio-body { background-color: var(--surface); border: 1px solid var(--node); border-radius: 0; color: var(--soft); }
.shot { background-color: var(--surface); border: 1px solid var(--node); border-radius: 0; }
.shot img { background-color: var(--surface2); }
.shot-meta { font-size: 13px; color: var(--meta); }
.shot-meta .cap { color: var(--soft); }
.shot-meta a { color: var(--text); font-size: 13px; }
.rows, .row { border-color: var(--line); }
.row-year { font-size: 13px; color: var(--meta); }
.row-title { color: var(--strong); }
.row-note { color: var(--soft); }
.rail { background-color: var(--surface); border: 1px solid var(--node); border-radius: 0; }
.rail h4 {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--strong);
}
.rail-section + .rail-section { border-top: 1px solid var(--line); }
.fact dt { font-size: 13px; color: var(--meta); }
.fact dd { color: var(--strong); }
.rail ul li { color: var(--soft); }
.rail ul li::before { background-color: var(--wire); }

.toast { background-color: var(--strong); color: var(--bg); border-radius: 0; box-shadow: none; }

/* ─── Footer (matches the homepage) ───────────────── */

footer {
  background-color: var(--bg);
  color: var(--meta);
  border-top: 1px solid var(--line);
  padding: 20px 0 28px;
  font-size: 14px;
  letter-spacing: 0;
}