/* ==========================================================================
   TOKENS — single source of truth for both themes.
   Light is default; dark applies via prefers-color-scheme unless the user
   explicitly chose light; data-theme="dark" forces dark regardless of OS.
   ========================================================================== */

:root {
  --paper: #f7f2e7;
  --surface: #fbf7ee;
  --ink: #221e17;
  --ink-soft: #443e30;
  --muted: #6d6555;
  --brass: #7d6247;
  --hairline: #d9d2bf;
  --hairline-soft: #e7e0cf;
  --cat-arts: #8f5a5a;
  --cat-culture: #7a5a92;
  --cat-stem: #47725a;
  --cat-sports: #8a5c33;
  --cat-industry: #7d6440;
  --cat-opinion: #635e55;
  --cat-local: #4f6156;
  --cat-nations: #54688a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --img-filter: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #181510;
    --surface: #1f1b14;
    --ink: #e8e2d3;
    --ink-soft: #c4bca9;
    --muted: #a89e8a;
    --brass: #c9a878;
    --hairline: #383226;
    --hairline-soft: #2c2719;
    --cat-arts: #c99a9a;
    --cat-culture: #b49ac9;
    --cat-stem: #93bda6;
    --cat-sports: #c99e73;
    --cat-industry: #bfa677;
    --cat-opinion: #aaa398;
    --cat-local: #9cab9f;
    --cat-nations: #9db0cf;
    --img-filter: brightness(0.85) saturate(0.9);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #181510;
  --surface: #1f1b14;
  --ink: #e8e2d3;
  --ink-soft: #c4bca9;
  --muted: #a89e8a;
  --brass: #c9a878;
  --hairline: #383226;
  --hairline-soft: #2c2719;
  --cat-arts: #c99a9a;
  --cat-culture: #b49ac9;
  --cat-stem: #93bda6;
  --cat-sports: #c99e73;
  --cat-industry: #bfa677;
  --cat-opinion: #aaa398;
  --cat-local: #9cab9f;
  --cat-nations: #9db0cf;
  --img-filter: brightness(0.85) saturate(0.9);
  color-scheme: dark;
}

/* Map category slugs to the active --cat. Covers the slug class wherever it
   appears (pills, category headers) and the card that contains a slugged pill. */
.arts, article:has(.category-pill.arts) { --cat: var(--cat-arts); }
.culture, article:has(.category-pill.culture) { --cat: var(--cat-culture); }
.stem, article:has(.category-pill.stem) { --cat: var(--cat-stem); }
.sports, article:has(.category-pill.sports) { --cat: var(--cat-sports); }
.industry, article:has(.category-pill.industry) { --cat: var(--cat-industry); }
.opinion, article:has(.category-pill.opinion) { --cat: var(--cat-opinion); }
.local, article:has(.category-pill.local) { --cat: var(--cat-local); }
.nations, article:has(.category-pill.nations) { --cat: var(--cat-nations); }

/* ==========================================================================
   FONT — the only webfont on the site (masthead). Self-hosted (Task 3).
   Metric-tuned local fallback keeps the masthead's layout box stable
   before the woff2 arrives, so the swap causes no CLS.
   ========================================================================== */

@font-face {
  font-family: "Permanent Marker";
  src: url("/assets/permanent-marker-latin-243826b7.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Masthead Fallback";
  src: local("Arial Black"), local("Arial Bold"), local("Arial");
  size-adjust: 106%;
  ascent-override: 95%;
  descent-override: 25%;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17–18px */
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
}

::-webkit-scrollbar { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--hairline); }

p { margin-top: 0; margin-bottom: 1.1em; }

h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }

img { max-width: 100%; }

/* Photographic content dims slightly at night so photos don't glare. */
.img-dim, .article-hero-img, .hero-figure img, .sidebar-art-img {
  filter: var(--img-filter);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   SHARED PRIMITIVES (used on every page type)
   ========================================================================== */

a { color: var(--brass); }

h2 a, .card-link {
  color: inherit;
  text-decoration: none;
}

h2 a:hover, .card-link:hover { text-decoration: underline; }

.section-label {
  font-family: var(--sans);
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin: 0 0 16px;
}

/* Category kicker — small caps colored label (was a pill). */
.category-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat, var(--brass));
  text-decoration: none;
  margin-bottom: 4px;
}

.source-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.read-more-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 10px 18px;
  min-height: 44px;
  box-sizing: border-box;
  text-decoration: none;
}

.read-more-btn:hover { background: var(--ink); color: var(--paper); }

.text-link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brass);
  text-decoration: none;
}

.text-link:hover { text-decoration: underline; }

.breadcrumbs {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 10px 0 18px;
}

.breadcrumb-link { color: var(--muted); text-decoration: none; }
.breadcrumb-link:hover { color: var(--brass); text-decoration: underline; }
.breadcrumb-sep { margin: 0 6px; color: var(--muted); }
.breadcrumb-current { color: var(--ink-soft); }

.no-articles-message {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin: 40px 0;
}

/* Sitemap links inherit ink (replaces the old !important block). */
.sitemap-link, .sitemap-col ul li a {
  color: var(--ink);
  text-decoration: none;
}