/*
Theme Name: Navigate Your State v0.3.19
Theme URI: https://navigateyourstate.com
Author: navigateyourstate
Author URI: https://navigateyourstate.com
Description: An atlas of the United States — editorial travel theme. Classic WordPress templates throughout (front-page, single, archive, page, search, 404). Auto-seeds 6 categories and 12 state tags on theme activation; posts and pages are authored in WP admin. Vanilla-JS interactive layer (bookmarks, search overlay, hero phrase cycler, mobile nav, state picker).
Version: 0.3.19
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://navigateyourstate.com
Text Domain: navigateyourstate
Tags: editorial, travel, one-page, dark-mode, custom-colors, custom-menu
*/

/* navigateyourstate — editorial travel blog */
:root {
  /* ── Palette — Poppy & Sky (locked in as the brand colour scheme) ── */
  --ink:        #1A1A2E;
  --ink-soft:   #3D4275;
  --paper:      #FFFDF6;
  --paper-2:    #FFF4E6;
  --cream:      #FFFFFF;
  --rule:       #1A1A2E22;
  --rule-soft:  #1A1A2E11;

  --terracotta: #D63427;
  --terracotta-deep: #A8170B;
  --olive:      #6E7A3F;
  --olive-deep: #3F4624;
  --ochre:      #B6873A;
  --clay:       #A65A3B;
  --moss:       #4F5E3D;
  --sand:       #FFE066;

  /* ── Fonts (loaded as a single Google Fonts payload in functions.php) ─ */
  --serif-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --serif-text:    "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans:          "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:          "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ════════════════════════════════════════════════════════════════════
     DESIGN TOKENS — Tailwind-aligned type & spacing scale
     ════════════════════════════════════════════════════════════════════ */

  /* Type scale (rem of 16px) */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.5rem;      /* 24 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 */
  --text-5xl:  3rem;        /* 48 */
  --text-6xl:  3.75rem;     /* 60 */
  --text-7xl:  4.5rem;      /* 72 */
  /* Fluid display sizes — endpoints pinned to the scale (≈ text-4xl→6xl→7xl) */
  --display-1: clamp(2.25rem, 6vw,   4.5rem);   /* 36 → 72 */
  --display-2: clamp(2.25rem, 4.6vw, 3.75rem);  /* 36 → 60 */
  --display-3: clamp(2.25rem, 4vw,   3rem);     /* 36 → 48 */

  /* Line-height */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Spacing scale (Tailwind, 0.25rem step) */
  --space-1:   0.25rem;   /* 4 */
  --space-1-5: 0.375rem;  /* 6 */
  --space-2:   0.5rem;    /* 8 */
  --space-2-5: 0.625rem;  /* 10 */
  --space-3:   0.75rem;   /* 12 */
  --space-3-5: 0.875rem;  /* 14 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   1.75rem;   /* 28 */
  --space-8:   2rem;      /* 32 */
  --space-9:   2.25rem;   /* 36 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-14:  3.5rem;    /* 56 */
  --space-16:  4rem;      /* 64 */
  --space-18:  4.5rem;    /* 72 */
  --space-20:  5rem;      /* 80 */
  --space-30:  7.5rem;    /* 120 */

  /* Layout containers + gutter (Tailwind max-w-* / px-6) */
  --container-md:   28rem;  /* 448  — drawers / floating panels */
  --container-2xl:  42rem;  /* 672  — narrow text */
  --container-3xl:  48rem;  /* 768  */
  --container-4xl:  56rem;  /* 896  — article hero / post body */
  --container-6xl:  72rem;  /* 1152 — gallery carousel */
  --container-7xl:  80rem;  /* 1280 — Tailwind max-w-7xl */
  --container-wide: 90rem;  /* 1440 — homepage + post two-column area */
  --gutter:         1.5rem; /* 24   — px-6 side padding */

  /* Radii */
  --radius-sm:   0.125rem;  /* 2  */
  --radius:      0.25rem;   /* 4  */
  --radius-xl:   0.75rem;   /* 12 */
  --radius-2xl:  1rem;      /* 16 */
  --radius-full: 9999px;

  /* Breakpoints (reference — custom properties can't be used inside @media):
     sm 640px · md 768px · lg 1024px · xl 1280px */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* Zero the UA element margins (Tailwind-preflight style). Components that
 * want spacing set it explicitly — see `.article-body` for the prose rhythm. */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }

/* `hidden` is a frequent toggle hook for the state-picker, mobile nav, and
 * scroll-to-top button. Class-level `display: flex/inline-flex` rules would
 * otherwise override the UA `[hidden] { display:none }` due to equal
 * specificity, so force it here. */
[hidden] { display: none !important; }

::selection { background: var(--terracotta); color: var(--cream); }

.app-root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
html { scroll-behavior: smooth; }

/* ─── Masthead ──────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: relative; z-index: 40;
}
.masthead__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2-5) var(--space-8);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead__top-left { display: flex; gap: var(--space-4); }
.masthead__top-right { display: flex; gap: var(--space-4); align-items: center; }
.masthead__top a:hover { color: var(--terracotta); }

.masthead__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
}
.masthead__nav {
  display: flex; gap: var(--space-7);
  justify-content: flex-end;
  font-family: var(--sans);
  font-size: var(--text-sm); letter-spacing: 0.04em;
  font-weight: 500;
}
/* Hover pattern: ink text stays put, a terracotta underline drops in 4px
 * below the baseline. Active (current archive) keeps the underline +
 * switches the text color so the user knows where they are. */
.masthead__nav a {
  color: var(--ink);
  text-decoration: none;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  padding: var(--space-1) 0;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.masthead__nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
}
.masthead__nav a[data-active="true"] {
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
}

.masthead__brand {
  font-family: var(--serif-display);
  font-size: var(--text-4xl);
  letter-spacing: -0.01em;
  text-align: left;
  line-height: var(--leading-none);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.masthead__brand-mark {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.3em;
  color: var(--terracotta); text-transform: uppercase;
}
.masthead__brand-name { display: inline-block; white-space: nowrap; }
.masthead__brand-name em { font-style: italic; color: var(--terracotta); }

.masthead__actions {
  display: flex; gap: var(--space-3-5); justify-content: flex-end; align-items: center;
  font-family: var(--sans); font-size: var(--text-sm);
}
.masthead__icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  transition: all 160ms ease;
  position: relative;
}
.masthead__icon-btn:hover { border-color: var(--ink); background: var(--cream); }
.masthead__icon-btn svg { width: 16px; height: 16px; }
.masthead__icon-btn .badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--terracotta); color: var(--cream);
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 600;
  min-width: 18px; height: 18px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-1);
}
.masthead__subscribe {
  background: var(--ink); color: var(--cream);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 160ms;
}
.masthead__subscribe:hover { background: var(--terracotta); }

/* Burger sits in .masthead__actions on the right; mobile-only display. */
.masthead__burger {
  display: none;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--rule);
  align-items: center; justify-content: center;
  color: var(--ink);
  transition: border-color 160ms, background 160ms;
}
.masthead__burger:hover { border-color: var(--ink); background: var(--cream); }
.masthead__burger svg { width: 20px; height: 20px; }

/* Mobile menu — always in DOM. Hidden by default via the `hidden` attribute
 * (nys.js toggles `menu.hidden` / `backdrop.hidden`). Desktop hides them
 * regardless via the min-width: 1024px rule at the bottom of this block. */
.masthead__mobile-backdrop {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(20, 16, 12, 0.4);
}
.masthead__mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.14);
  display: flex; flex-direction: column;
  padding: var(--space-2) 0 var(--space-4);
  animation: mmDrop 200ms ease both;
}
.masthead__mobile-backdrop { animation: fadeIn 180ms ease both; }
@keyframes mmDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.masthead__mobile-link {
  width: 100%; text-align: left;
  padding: var(--space-3) var(--gutter);
  min-height: 44px;
  font-family: var(--sans); font-size: var(--text-base); font-weight: 500;
  color: var(--ink);
  transition: background 140ms, color 140ms;
}
.masthead__mobile-link:hover, .masthead__mobile-link:active { background: var(--paper-2); color: var(--terracotta); }
.masthead__mobile-link[data-active="true"] { color: var(--terracotta); }
.masthead__mobile-sep {
  padding: var(--space-4) var(--gutter) var(--space-1-5);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 1023px) { .masthead__burger { display: inline-flex; } }
@media (min-width: 1024px) {
  .masthead__mobile-menu, .masthead__mobile-backdrop { display: none !important; }
}

/* ─── Hero (legacy split layout — superseded by .statehero) ─────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--ink);
}
.hero__media {
  position: relative;
  aspect-ratio: 4/3;
  border-right: 1px solid var(--ink);
  overflow: hidden;
}
.hero__text {
  padding: var(--space-14) var(--space-14) var(--space-12);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-5);
}
.hero__kicker {
  font-family: var(--mono);
  font-size: var(--text-xs); letter-spacing: 0.18em;
  color: var(--terracotta);
  display: flex; align-items: center; gap: var(--space-3);
}
.hero__kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.hero__title {
  font-family: var(--serif-display);
  font-size: var(--display-2);
  line-height: var(--leading-none);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.hero__title em { color: var(--terracotta-deep); font-style: italic; }
.hero__dek {
  font-family: var(--serif-text);
  font-size: var(--text-xl); line-height: var(--leading-normal);
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.hero__meta {
  display: flex; gap: var(--space-4); align-items: center;
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: var(--space-3); border-top: 1px solid var(--rule);
}
.hero__meta-dot { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--ink-soft); }
.hero__cta {
  display: inline-flex; align-items: center; gap: var(--space-2-5);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink);
  align-self: flex-start;
  padding: var(--space-3-5) var(--space-6);
  border: 1px solid var(--ink);
  border-radius: var(--radius-full);
  transition: all 200ms ease;
}
.hero__cta:hover { background: var(--ink); color: var(--cream); transform: translateY(-1px); }
.hero__cta svg { width: 14px; height: 14px; transition: transform 200ms; }
.hero__cta:hover svg { transform: translateX(3px); }

/* Striped placeholder for hero */
.placeholder-stripes {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  overflow: hidden;
}
.placeholder-stripes::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -25deg,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 24px,
    rgba(0,0,0,0.06) 24px,
    rgba(0,0,0,0.06) 48px
  );
}
.placeholder-stripes::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 70% 20%, rgba(255,255,255,0.18), transparent 60%),
              radial-gradient(80% 60% at 20% 100%, rgba(0,0,0,0.25), transparent 65%);
}
.placeholder-stripes__caption {
  position: absolute; left: var(--space-5); bottom: var(--space-4);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--cream); text-transform: uppercase;
  background: rgba(31,26,20,0.55);
  padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}
.placeholder-stripes__corner {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.2em;
  color: var(--cream); opacity: 0.7;
}

/* ─── Trending strip ────────────────────────────────────────────────────── */
.trending {
  border-bottom: 1px solid var(--ink);
  padding: var(--space-14) var(--gutter); /* 56 top/bottom — matches section rhythm */
  background: var(--cream);
  max-width: var(--container-wide);
  margin: 0 auto;
}
.trending__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.trending__title {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: var(--space-2-5);
}
.trending__title::before {
  content: ""; width: 8px; height: 8px; background: var(--terracotta); border-radius: var(--radius-full);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.trending__date { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: 0.08em; }
.trending__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.trend-card {
  padding: var(--space-5) var(--space-6);
  border-right: 1px solid var(--rule);
  cursor: pointer;
  display: flex; flex-direction: column; gap: var(--space-2-5);
  transition: background 160ms;
}
.trend-card:last-child { border-right: 0; }
.trend-card:hover { background: var(--paper-2); }
.trend-card__num {
  font-family: var(--serif-display); font-size: var(--text-4xl); line-height: var(--leading-none);
  color: var(--terracotta);
}
.trend-card__state {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--ink-soft); text-transform: uppercase;
}
.trend-card__title {
  font-family: var(--serif-display); font-size: var(--text-lg); line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  margin: 0;
}

/* ─── Section header ────────────────────────────────────────────────────── */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  padding: var(--space-14) 0 var(--space-6);
  gap: var(--space-8);
}
.section-head__title {
  font-family: var(--serif-display);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem); /* 28 → 36 */
  line-height: var(--leading-none); letter-spacing: -0.015em;
  margin: 0;
}
.section-head__sub {
  font-family: var(--serif-text); font-style: italic;
  color: var(--ink-soft); font-size: var(--text-lg);
  max-width: 42ch; text-wrap: pretty;
}
.section-head__sub--rich { font-style: normal; }
.section-head__sub--rich p { margin: 0; }
.section-head__sub--rich a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 3px;
}
.section-head--stacked {
  flex-direction: column; align-items: flex-start;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

/* Long admin-authored category/tag descriptions — full reading column below the title */
.archive-intro {
  padding: 0 var(--space-8) var(--space-8);
  max-width: 65ch;
  font-family: var(--serif-text);
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  text-wrap: pretty;
  position: relative;
}
.archive-intro > * + * { margin-top: var(--space-4); }
.archive-intro p { margin: 0; }
.archive-intro p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-size: 3.2em; line-height: 0.9;
  float: left;
  padding: 0.05em var(--space-2) 0 0;
  color: var(--ink);
}
.archive-intro a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 3px;
}
.archive-intro a:hover { text-decoration-thickness: 2px; }
.archive-intro ul, .archive-intro ol { margin: 0; padding-left: var(--space-6); }
.archive-intro li + li { margin-top: var(--space-2); }
.archive-intro blockquote {
  margin: 0; padding-left: var(--space-5);
  border-left: 2px solid var(--terracotta);
  font-family: var(--serif-display);
  font-style: italic; font-size: var(--text-xl);
  color: var(--ink);
}
.archive-intro strong { color: var(--ink); font-weight: 600; }
.archive-intro em { font-style: italic; }

/* ─── State browser (photographic carousel) ─────────────────────────────── */
.wonders {
  padding: 0 var(--gutter) var(--space-14);
  border-bottom: 1px solid var(--ink);
  position: relative;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.wonders .section-head { align-items: center; padding-bottom: var(--space-3); }
.wonders__sub {
  padding: 0 0 var(--space-6);
}
.wonders__cta {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  border: 0; border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  transition: background 180ms ease, transform 180ms ease;
}
.wonders__cta:hover { background: var(--terracotta); }
.wonders__cta:active { transform: translateY(1px); }
.wonders__cta-chev { font-size: var(--text-base); line-height: 1; margin-left: var(--space-1); }

.wonders__carousel {
  position: relative;
}
.wonders__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 256px;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
.wonders__track::-webkit-scrollbar { display: none; }

.wonders__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--ink); color: var(--cream);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: background 180ms ease, opacity 180ms ease;
}
.wonders__nav:hover { background: var(--terracotta); }
.wonders__nav:disabled { opacity: 0; pointer-events: none; }
.wonders__nav svg { width: 20px; height: 20px; }
.wonders__nav--prev { left: -22px; }
.wonders__nav--next { right: -22px; }

/* Wonder card — tall portrait with image, mid-card diamond marker, script name */
.wonder-card {
  position: relative; display: block;
  aspect-ratio: 3/4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(135deg, var(--wc-c1, #222), var(--wc-c2, #444));
  isolation: isolate;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.wonder-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.wonder-card__media { position: absolute; inset: 0; overflow: hidden; }
.wonder-card__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.wonder-card:hover .wonder-card__media img { transform: scale(1.04); }
.wonder-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--wc-c1, #222), var(--wc-c2, #444));
}
.wonder-card__placeholder-code {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--text-5xl, 3rem);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.22);
}
.wonder-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}

.wonder-card__overlay {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  text-align: center;
  pointer-events: none;
}
.wonder-card__diamond {
  display: block;
  width: 44px; height: 44px;
  background: var(--terracotta);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}
.wonder-card__name {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 0.95;
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.wonder-card__name-rule {
  display: block;
  width: 72%; max-width: 160px;
  height: 2px;
  background: var(--terracotta);
  border-radius: 1px;
}


/* ─── Filter bar ────────────────────────────────────────────────────────── */
.filterbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2-5);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: relative; z-index: 20;
}
.statebar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2-5);
  padding: 0 var(--space-8) var(--space-6);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
/* When a statebar follows the filterbar, the divider sits below both rows. */
.filterbar:has(+ .statebar) { border-bottom: 0; padding-bottom: var(--space-3); }
.filterbar__label {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-right: var(--space-2); white-space: nowrap;
}
.chip {
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-full);
  border: 1px solid var(--rule);
  white-space: nowrap;
  transition: all 160ms;
}
.chip:hover { border-color: var(--ink); }
.chip[data-active="true"] {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.chip[data-active="true"]:hover { background: var(--terracotta); border-color: var(--terracotta); }

/* ─── Article grid ──────────────────────────────────────────────────────── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--ink);
}
.article-card {
  padding: var(--space-6) var(--space-6) var(--space-7);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  display: flex; flex-direction: column; gap: var(--space-3-5);
  background: var(--paper);
  transition: background 200ms;
  position: relative;
}
.article-card:hover { background: var(--cream); }
.article-card__thumb {
  aspect-ratio: 2/1;
  position: relative;
  overflow: hidden;
}
.article-card__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.article-card:hover .article-card__thumb img { transform: scale(1.05); }
.article-card__bookmark {
  position: absolute; top: var(--space-2-5); right: var(--space-2-5);
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: rgba(251, 246, 236, 0.92);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  z-index: 2;
  transition: all 160ms;
}
.article-card__bookmark:hover { background: var(--cream); transform: scale(1.06); }
.article-card__bookmark svg { width: 14px; height: 14px; }
.article-card__bookmark[data-saved="true"] { background: var(--terracotta); }
.article-card__bookmark[data-saved="true"] svg { color: var(--cream); fill: var(--cream); }
.article-card__kicker {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--terracotta); text-transform: uppercase;
}
.article-card__title {
  font-family: var(--serif-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); /* 20 → 24 */
  line-height: var(--leading-snug); letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.article-card__title a { color: inherit; text-decoration: none; }
/* The title link covers the whole card so the card is clickable, while the
 * bookmark button (z-index 2) sits above it for its own click target. */
.article-card__link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.article-card__bookmark { z-index: 2; }
.article-card__dek {
  font-family: var(--serif-text); color: var(--ink-soft);
  font-size: var(--text-base); line-height: var(--leading-normal);
  text-wrap: pretty;
}
.article-card__meta {
  display: flex; flex-wrap: nowrap; gap: var(--space-1-5); align-items: center;
  font-family: var(--mono); font-size: var(--text-xs);
  color: var(--ink-soft); letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 0;
  margin-top: auto; padding-top: var(--space-2);
  border-top: 1px solid var(--rule-soft);
}
/* Keep the meta one line — author (first child) takes the elastic space
 * and truncates with ellipsis if needed; date / read-time / dot separators
 * never shrink so they stay visible. */
.article-card__meta > span:first-child {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.article-card__meta > span:not(:first-child) { flex: 0 0 auto; white-space: nowrap; }

.empty {
  grid-column: 1 / -1;
  padding: var(--space-20) var(--space-8);
  text-align: center;
  font-family: var(--serif-text); font-style: italic;
  color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.empty__icon { font-family: var(--mono); font-size: var(--text-xs); color: var(--terracotta); letter-spacing: 0.2em; }

/* ─── Newsletter strip ──────────────────────────────────────────────────── */
.newsletter {
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-16) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  border-bottom: 1px solid var(--ink);
}
.newsletter__title {
  font-family: var(--serif-display); font-size: var(--text-4xl); line-height: var(--leading-tight);
  letter-spacing: -0.015em; margin: 0;
}
.newsletter__title em { color: var(--terracotta); font-style: italic; }
.newsletter__sub {
  font-family: var(--serif-text); font-size: var(--text-lg);
  color: var(--sand); margin-top: var(--space-3-5);
  max-width: 50ch;
}
.newsletter__form {
  display: flex; gap: 0;
  border: 1px solid var(--sand);
  border-radius: var(--radius-full);
  padding: var(--space-1-5);
  background: rgba(255,255,255,0.04);
}
.newsletter__form input {
  flex: 1;
  background: transparent; border: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--serif-text); font-size: var(--text-base);
  color: var(--cream);
  outline: 0;
}
.newsletter__form input::placeholder { color: rgba(217, 200, 163, 0.6); }
.newsletter__form button {
  background: var(--terracotta); color: var(--cream);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em;
  transition: background 160ms;
}
.newsletter__form button:hover { background: var(--cream); color: var(--ink); }
.newsletter__success {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--sand); margin-top: var(--space-3);
  text-transform: uppercase;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.footer {
  padding: var(--space-14) var(--space-8) var(--space-8);
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-10);
  font-family: var(--sans); font-size: var(--text-sm);
}
.footer__brand-name {
  font-family: var(--serif-display); font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}
.footer__tagline {
  font-family: var(--serif-text); font-style: italic;
  color: var(--ink-soft); margin-top: var(--space-2);
  max-width: 36ch;
}
.footer__col-title {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--space-3-5);
}
.footer__col-list { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.footer__col-list a:hover { color: var(--terracotta); }
.footer__bottom {
  grid-column: 1 / -1;
  padding-top: var(--space-6); margin-top: var(--space-6);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
}

/* ─── Article view (single post) ──────────────────────────────────────── */
.article-view { background: var(--paper); }

.article-view__backbar {
  max-width: var(--container-7xl); margin: 0 auto;
  padding: var(--space-4) var(--gutter) var(--space-2);
}
.article-view__back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink-soft);
}
.article-view__back:hover { color: var(--terracotta); }
.article-view__back svg { width: 16px; height: 16px; }

.article-view__layout {
  max-width: var(--container-7xl); margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.article-view__sidebar { display: none; }
@media (min-width: 1024px) {
  .article-view__layout { grid-template-columns: 1fr 320px; }
  .article-view__sidebar { display: block; }
}

.post { min-width: 0; }

/* Meta row */
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  font-family: var(--sans); font-size: var(--text-xs);
  color: var(--ink-soft);
}
.post__cat {
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta);
  background: color-mix(in srgb, var(--terracotta) 12%, transparent);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  cursor: pointer; transition: background 160ms;
}
.post__cat:hover { background: color-mix(in srgb, var(--terracotta) 22%, transparent); }
.post__meta-dot { color: var(--rule); font-size: 8px; }
.post__meta time { white-space: nowrap; }

/* Title */
.post__title {
  font-family: var(--serif-display);
  font-size: 1.75rem;           /* 28 (was 30) */
  font-weight: 700;
  line-height: var(--leading-tight); letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--space-4) 0 0;
  text-wrap: pretty;
}
@media (min-width: 640px)  { .post__title { font-size: 2rem;     } } /* 32 (was 36) */
@media (min-width: 1024px) { .post__title { font-size: 2.625rem; } } /* 42 (was 48) */
.post__title em { font-style: italic; color: var(--terracotta-deep); }

/* Byline + share */
.post__byline {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6); padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule);
}
.post__author-mini {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit;
  transition: opacity 160ms ease;
}
.post__author-mini:hover { opacity: 0.8; }
.post__avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--terracotta) 14%, transparent);
  color: var(--terracotta-deep);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--serif-display); font-size: var(--text-base); font-weight: 700;
}
.post__avatar--photo { background: transparent; }
.post__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__author-name { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.post__author-role { font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-soft); }

/* Featured image — full width, natural height (no crop) */
.post__featured {
  position: relative;
  margin-top: var(--space-8); overflow: hidden;
  border-radius: var(--radius-xl);
}
.post__featured img {
  display: block;
  width: 100%; max-width: 100%; height: auto;
}

/* Generic post block (share / tags / gallery / related), divider-topped */
.post__block {
  margin-top: var(--space-10); padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}
.post__section-label {
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 var(--space-4);
}
.post__gallery .carousel { margin: 0; padding: 0; max-width: none; }

/* Author card */
.post__author-card {
  margin-top: var(--space-10);
  display: flex; gap: var(--space-6); align-items: flex-start;
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.post__author-card-avatar {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--cream) 14%, transparent); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif-display); font-size: var(--text-2xl); font-weight: 700;
}
.post__author-card-name { font-family: var(--serif-display); font-size: var(--text-2xl); font-weight: 700; }
.post__author-card-role { font-family: var(--sans); font-size: var(--text-sm); color: var(--sand); margin-top: var(--space-1); }
.post__author-card-bio  { font-family: var(--sans); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: color-mix(in srgb, var(--cream) 78%, transparent); margin-top: var(--space-3); }

/* More stories */
.post__related-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6);
}
.post__related-card { cursor: pointer; }
.post__related-thumb {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border-radius: var(--radius-xl);
}
.post__related-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 600ms ease;
}
.post__related-card:hover .post__related-thumb img { transform: scale(1.05); }
.post__related-date { font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-soft); margin-top: var(--space-2); }
.post__related-title {
  font-family: var(--serif-display); font-size: var(--text-base); font-weight: 700;
  line-height: var(--leading-snug); color: var(--ink);
  margin: var(--space-1) 0 0; transition: color 160ms;
}
.post__related-card:hover .post__related-title { color: var(--terracotta); }

/* Tags */
.post__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post__tag {
  font-family: var(--sans); font-size: var(--text-xs);
  color: var(--ink); border: 1px solid var(--rule);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  transition: border-color 160ms, color 160ms;
}
.post__tag:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ─── Comments ──────────────────────────────────────────────────────────── */
.post__comments-head { margin-bottom: var(--space-6); }
.post__comments-head .post__section-label { margin-bottom: var(--space-2); }
.post__comments-rule {
  display: block; width: 40px; height: 2px;
  background: var(--terracotta); border-radius: 1px;
}
.post__comments-closed {
  font-family: var(--serif-text); font-style: italic;
  color: var(--ink-soft); margin: var(--space-6) 0;
}

.comment-list { list-style: none; padding: 0; margin: 0 0 var(--space-10); }
.comment-list .children { list-style: none; padding-left: var(--space-8); margin-top: var(--space-4); }
.comment-list > li + li,
.comment-list .children > li + li { margin-top: var(--space-4); }

.comment {
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  padding: var(--space-5);
}
.comment.bypostauthor { border-color: color-mix(in srgb, var(--terracotta) 45%, var(--rule)); }
.comment__inner { display: flex; gap: var(--space-4); align-items: flex-start; }
.comment__avatar { flex: 0 0 auto; }
.comment__avatar img {
  display: block; width: 48px; height: 48px;
  border-radius: var(--radius-full);
}
.comment__body { flex: 1 1 auto; min-width: 0; }
.comment__meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.comment__author {
  font-family: var(--serif-display); font-weight: 600;
  font-size: var(--text-base); color: var(--ink);
}
.comment__author a { color: inherit; text-decoration: none; }
.comment__author a:hover { color: var(--terracotta); }
.comment__date {
  font-family: var(--sans); font-size: var(--text-xs);
  color: var(--ink-soft); letter-spacing: 0.02em;
}
.comment__pending {
  display: inline-block;
  font-family: var(--sans); font-size: var(--text-xs);
  color: var(--ochre);
  background: color-mix(in srgb, var(--ochre) 12%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin: 0 0 var(--space-2);
}
.comment__text {
  font-family: var(--serif-text); font-size: var(--text-base);
  line-height: var(--leading-relaxed); color: var(--ink);
}
.comment__text p { margin: 0; }
.comment__text > * + * { margin-top: var(--space-3); }
.comment__text a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--terracotta); text-underline-offset: 3px;
}
.comment__actions {
  display: flex; gap: var(--space-4);
  margin-top: var(--space-3);
}
.comment__reply a,
.comment__edit a {
  font-family: var(--sans); font-size: var(--text-xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--terracotta); text-decoration: none;
}
.comment__edit a { color: var(--ink-soft); }
.comment__reply a:hover { color: var(--terracotta-deep, var(--ink)); }
.comment__edit a:hover { color: var(--ink); }

.comment-pagination {
  display: flex; justify-content: space-between;
  margin: var(--space-6) 0 var(--space-10);
  font-family: var(--sans); font-size: var(--text-sm);
}
.comment-pagination a { color: var(--ink); text-decoration: none; }
.comment-pagination a:hover { color: var(--terracotta); }

/* ─── Comment form ──────────────────────────────────────────────────────── */
.comment-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}
.comment-form__title {
  grid-column: 1 / -1;
  font-family: var(--serif-display); font-size: var(--text-2xl);
  color: var(--ink); margin: 0;
}
.comment-form__rule {
  grid-column: 1 / -1;
  display: block; width: 40px; height: 2px;
  background: var(--ochre); border-radius: 1px;
  margin-bottom: var(--space-2);
}
.comment-form__notes {
  grid-column: 1 / -1;
  font-family: var(--sans); font-size: var(--text-xs);
  color: var(--ink-soft); margin: 0;
}
.comment-form .comment-form-comment,
.comment-form .comment-form-cookies-consent,
.comment-form .form-submit,
.comment-form .logged-in-as,
.comment-form .must-log-in { grid-column: 1 / -1; margin: 0; }
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url { margin: 0; }
.comment-form .comment-form-url { grid-column: 1 / -1; }
.comment-form label {
  display: block;
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--space-2);
}
.comment-form label .required { color: var(--terracotta); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--serif-text); font-size: var(--text-base);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.comment-form textarea { font-family: var(--serif-text); line-height: var(--leading-relaxed); resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 18%, transparent);
}
.comment-form__submit {
  appearance: none; border: 0; cursor: pointer;
  background: var(--ink); color: var(--cream);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-full);
  transition: background 160ms ease, transform 160ms ease;
}
.comment-form__submit:hover { background: var(--terracotta); }
.comment-form__submit:active { transform: translateY(1px); }
.comment-form .comment-form-cookies-consent {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-soft);
}
.comment-form .comment-form-cookies-consent label { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--text-xs); }

/* Share / save buttons */
.share-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.share-row--compact { gap: var(--space-2); }
.share-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  transition: border-color 160ms, color 160ms, background 160ms;
  cursor: pointer;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.share-row--compact .share-btn {
  width: 40px; height: 40px; min-height: 0; padding: 0;
  justify-content: center;
}
.share-row--compact .share-btn svg { width: 14px; height: 14px; }
.share-btn--bookmark[data-saved="true"] {
  background: var(--terracotta); border-color: var(--terracotta); color: var(--cream);
}

/* Gallery carousel */
.carousel {
  position: relative;
  margin: var(--space-8) auto var(--space-12);
  max-width: var(--container-6xl); padding: 0 var(--space-8);
}
.carousel__frame {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.carousel__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 400ms ease;
}
.carousel__slide[data-active="true"] { opacity: 1; }
.carousel__controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-3-5);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
}
.carousel__nav { display: flex; gap: var(--space-2); }
.carousel__nav button {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 160ms;
}
.carousel__nav button:hover:not(:disabled) { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.carousel__nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.carousel__dots { display: flex; gap: var(--space-2); align-items: center; }
.carousel__dots button {
  position: relative;
  width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--rule);
  transition: all 200ms;
}
.carousel__dots button::before { content: ""; position: absolute; inset: -14px; }
.carousel__dots button[data-active="true"] { background: var(--terracotta); width: 24px; border-radius: var(--radius); }

/* Article body — long-form prose: 19px paragraphs at line-height 1.8 with 28px
 * gaps, scaled headings, a gradient-tinted blockquote, and rounded images. */
.article-body {
  margin-top: var(--space-8);
  font-family: var(--serif-text);
}
.article-body p {
  font-family: var(--serif-text);
  font-size: 1.1875rem;            /* 19 */
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 var(--space-7);      /* 28 */
  text-wrap: pretty;
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-size: 3.5rem;
  float: left;
  line-height: 1;
  margin-right: var(--space-2);    /* 8 */
  margin-top: 0.1rem;
  color: var(--terracotta);
  font-weight: 700;
}
.article-body h2 {
  font-family: var(--serif-display);
  font-size: 1.5625rem;            /* 25 */
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-10) 0 var(--space-4);   /* 40 / 16 */
  letter-spacing: -0.02em;
}
.article-body h3 {
  font-family: var(--serif-display);
  font-size: 1.3125rem;            /* 21 */
  font-weight: 600;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-3);    /* 32 / 12 */
  letter-spacing: -0.01em;
}
.article-body ul,
.article-body ol {
  padding-left: var(--space-6);    /* 24 */
  margin: 0 0 var(--space-6);      /* 24 */
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li {
  font-family: var(--serif-text);
  font-size: var(--text-lg);       /* 18 */
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--space-1-5); /* 6 */
}
.article-body blockquote {
  position: relative;
  padding: var(--space-8) var(--space-8) var(--space-8) 3.5rem;
  margin: var(--space-10) calc(-1 * var(--space-2));   /* 40 vertical, slight negative inset */
  background: linear-gradient(135deg, rgba(26,26,46,0.05), rgba(214,52,39,0.04));
  border-radius: var(--radius-xl);
  font-style: italic;
  color: var(--ink);
  font-size: 1.3125rem;            /* 21 */
  line-height: 1.65;
}
.article-body blockquote::before {
  content: "\201C";
  position: absolute; top: var(--space-2); left: var(--space-4);
  font-family: var(--serif-display);
  font-size: 4rem;
  color: var(--ochre);
  line-height: 1;
  opacity: 0.45;
}
/* Article body images — handles every markup variant the editor produces:
 *   Modern Gutenberg:  <figure class="wp-block-image">
 *                        <img><figcaption class="wp-element-caption">
 *   Wrapped variant:   <div class="wp-block-image alignwide">
 *                        <figure><img><figcaption></figure>
 *                      </div>
 *   Classic shortcode: <div class="wp-caption">
 *                        <img><p class="wp-caption-text">
 *   Bare image:        <img> directly in content or inside <p>
 * All variants: image fills the column, caption hugs the bottom with 4px gap. */

/* Standalone image (not inside a figure or caption wrapper) */
.article-body > img,
.article-body > p > img {
  display: block;
  margin: var(--space-8) auto;
  width: 100%; max-width: 100%; height: auto;
  border-radius: var(--radius-xl);
}

/* Outer wrappers — get the block's vertical margin, zero everything else */
.article-body figure,
.article-body .wp-block-image,
.article-body .wp-caption,
.article-body figure.aligncenter,
.article-body figure.alignleft,
.article-body figure.alignright,
.article-body figure.alignwide,
.article-body figure.alignfull {
  display: block;
  float: none;
  margin: var(--space-8) 0;
  padding: 0;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left;
  background: transparent;
  border: 0;
}

/* When wp-block-image / wp-caption is a div wrapping an inner figure,
 * the inner figure must NOT add its own outer margin (double-spacing). */
.article-body .wp-block-image > figure,
.article-body .wp-caption > figure {
  margin: 0 !important;
  padding: 0;
}

/* All images inside any wrapper — flush, full width, no margin */
.article-body figure img,
.article-body .wp-block-image img,
.article-body .wp-caption img {
  display: block;
  margin: 0 !important;
  padding: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* wpautop tends to inject empty <p></p> between <img> and <figcaption>
 * inside figure blocks. Those phantom paragraphs inherit the body p
 * margin (28px), creating a gap. Hide them — but never the classic-editor
 * caption-as-paragraph (<p class="wp-caption-text">). */
.article-body figure > p,
.article-body .wp-block-image > p,
.article-body .wp-caption > p:not(.wp-caption-text) {
  display: none;
}

/* All caption variants — hug the image with a 4px top margin */
.article-body figcaption,
.article-body .wp-element-caption,
.article-body .wp-caption-text,
.article-body figure > figcaption,
.article-body .wp-block-image > figcaption,
.article-body .wp-caption > .wp-caption-text,
.article-body .wp-block-image figure > figcaption {
  font-family: var(--sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
  margin: 4px 0 0 !important;
  padding: 0 var(--space-3) var(--space-2);
  text-align: center;
  background: transparent;
  border: 0;
}
.article-body a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.article-body a:hover { color: var(--terracotta-deep); }
/* Caption links: functional but visually plain — inherit color, no underline. */
.article-body figcaption a {
  color: inherit;
  text-decoration: none;
}
.article-body figcaption a:hover { color: var(--ink); }

@media (max-width: 639px) {
  /* Mobile: stack the byline/share, the author card, and 2-col grids */
  .article-view__layout { padding: var(--space-5) var(--gutter) var(--space-12); }
  .post__byline { align-items: flex-start; }
  .post__byline .share-row { width: 100%; }
  .post__author-card { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
  .post__related-grid { grid-template-columns: 1fr; }
  .comment-form { grid-template-columns: 1fr; }
  .comment-list .children { padding-left: var(--space-4); }
  .article-body blockquote { margin-left: 0; margin-right: 0; padding-left: var(--space-6); }
  .article-view__back { padding: var(--space-2) 0; }
  .post__cat, .post__tag { padding: var(--space-1-5) var(--space-3); }
}

/* ─── Search overlay ────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(31, 26, 20, 0.85);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 14vh;
  animation: fadeIn 200ms ease both;
}
.search-overlay__panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.search-overlay__close {
  position: absolute; top: var(--space-6); right: var(--space-8);
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 1px solid var(--sand);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
}
.search-overlay__close:hover { background: var(--cream); color: var(--ink); }
.search-overlay__input-wrap {
  width: min(720px, 92%);
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid var(--sand);
}
.search-overlay__input-wrap svg { color: var(--sand); }
.search-overlay__input {
  flex: 1;
  background: transparent; border: 0; outline: 0;
  font-family: var(--serif-display); font-size: var(--text-4xl);
  color: var(--cream);
  letter-spacing: -0.01em;
}
.search-overlay__input::placeholder { color: rgba(217,200,163,0.5); }

.search-overlay__results {
  width: min(720px, 92%);
  margin-top: var(--space-5);
  max-height: 60vh; overflow-y: auto;
}
.search-result {
  display: block; padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid rgba(217,200,163,0.18);
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease;
}
.search-result:hover { transform: translateX(var(--space-2)); }
.search-result:hover .search-result__title { color: var(--terracotta); }
.search-result__kicker {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--terracotta); text-transform: uppercase;
  margin-bottom: var(--space-1-5);
}
.search-result__title {
  font-family: var(--serif-display); font-size: var(--text-xl); color: var(--cream);
  line-height: var(--leading-snug); letter-spacing: -0.005em;
  transition: color 160ms ease;
}
.search-overlay__hint {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.18em;
  color: rgba(217,200,163,0.5); text-transform: uppercase;
  margin-top: var(--space-6);
}

/* ─── Bookmarks drawer ─────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(31,26,20,0.5);
  animation: fadeIn 200ms ease both;
}
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 91;
  width: min(var(--container-md), 92%);
  background: var(--cream);
  border-left: 1px solid var(--ink);
  display: flex; flex-direction: column;
  animation: slideIn 280ms cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer__head {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
.drawer__title {
  font-family: var(--serif-display); font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}
.drawer__count {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.18em;
  color: var(--ink-soft); text-transform: uppercase;
}
.drawer__close {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.drawer__close:hover { color: var(--terracotta); }
.drawer__list { flex: 1; overflow-y: auto; }
.drawer-item {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  display: flex; gap: var(--space-3-5); align-items: flex-start;
  transition: background 160ms;
}
.drawer-item:hover { background: var(--paper-2); }
.drawer-item__thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
}
.drawer-item__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.drawer-item__body { flex: 1; min-width: 0; }
.drawer-item__kicker {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--terracotta); text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.drawer-item__title {
  font-family: var(--serif-display); font-size: var(--text-base); line-height: var(--leading-tight);
  letter-spacing: -0.005em;
}
.drawer-item__remove {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: center;
}
.drawer-item__remove:hover { color: var(--terracotta); }
.drawer__empty {
  padding: var(--space-16) var(--space-6); text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
  color: var(--ink-soft);
}
.drawer__empty-icon {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.2em;
  color: var(--terracotta);
}
.drawer__empty-text {
  font-family: var(--serif-text); font-style: italic; font-size: var(--text-base);
  max-width: 26ch; line-height: var(--leading-normal);
}

/* ─── Photo card (richer thumbnails for non-hero) ──────────────────────── */
.photo-card {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  overflow: hidden;
}
.photo-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,0.25), transparent 65%),
    radial-gradient(50% 80% at 80% 90%, rgba(0,0,0,0.35), transparent 60%);
}
.photo-card::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.02) 0,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 4px
  );
}
.photo-card__terrain {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(0,0,0,0.4), transparent 70%);
}
.photo-card__horizon {
  position: absolute; left: 0; right: 0; bottom: 35%;
  height: 1px; background: rgba(255,255,255,0.15);
}
.photo-card__caption {
  position: absolute; left: var(--space-3); bottom: var(--space-2-5);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  color: var(--cream); text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ─── Misc small ───────────────────────────────────────────────────────── */
.divider-rule {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-8);
  margin: 0;
}
.divider-rule__line { flex: 1; height: 1px; background: var(--rule); }
.divider-rule__mark {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.2em;
  color: var(--ink-soft); text-transform: uppercase;
}

/* ─── Hero carousel (legacy — superseded by .statehero) ────────────────── */
.herocar {
  position: relative;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
}
.herocar__stage {
  position: relative;
  min-height: clamp(560px, 76vh, 760px);
}
.herocar__slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.herocar__slide {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.herocar__slide[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}
.herocar__slide .placeholder-stripes { inset: 0; }
.herocar__slide[data-active="true"] .placeholder-stripes::before {
  animation: kenburns 18s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}
.herocar__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(31,26,20,0.85) 0%, rgba(31,26,20,0.55) 38%, rgba(31,26,20,0.05) 70%, transparent 100%),
    linear-gradient(0deg, rgba(31,26,20,0.55) 0%, transparent 50%);
}
.herocar__content {
  position: relative;
  padding: var(--space-14) var(--space-16) var(--space-30);
  max-width: 760px;
  color: var(--cream);
  display: flex; flex-direction: column; gap: var(--space-4);
  z-index: 2;
}
.herocar__slide .herocar__content > * {
  opacity: 1;
}
.herocar__slide:not([data-active="true"]) {
  pointer-events: none;
}

.herocar__kicker {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.22em;
  color: var(--terracotta);
  display: flex; align-items: center; gap: var(--space-3);
}
.herocar__kicker::before {
  content: ""; width: 36px; height: 1px; background: var(--terracotta);
}
.herocar__title {
  font-family: var(--serif-display);
  font-size: var(--display-2);
  line-height: var(--leading-none); letter-spacing: -0.018em;
  margin: 0; color: var(--cream);
  text-wrap: balance;
}
.herocar__title em { color: var(--sand); font-style: italic; }
.herocar__dek {
  font-family: var(--serif-text); font-size: var(--text-xl); line-height: var(--leading-normal);
  color: var(--sand); max-width: 56ch; margin: 0;
  text-wrap: pretty;
}
.herocar__meta {
  display: flex; gap: var(--space-3-5); align-items: center;
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  color: rgba(217, 200, 163, 0.82); text-transform: uppercase;
}
.herocar__dot { width: 4px; height: 4px; border-radius: var(--radius-full); background: rgba(217,200,163,0.5); }
.herocar__cta {
  align-self: flex-start; margin-top: var(--space-1-5);
  display: inline-flex; align-items: center; gap: var(--space-2-5);
  padding: var(--space-3-5) var(--space-6);
  border: 1px solid var(--cream);
  border-radius: var(--radius-full);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em;
  color: var(--cream);
  transition: all 200ms ease;
}
.herocar__cta:hover { background: var(--cream); color: var(--ink); }
.herocar__cta svg { width: 14px; height: 14px; transition: transform 200ms; }
.herocar__cta:hover svg { transform: translateX(3px); }

.herocar__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: rgba(31,26,20,0.4);
  border: 1px solid rgba(251,246,236,0.3);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: all 200ms;
}
.herocar__arrow:hover { background: var(--terracotta); border-color: var(--terracotta); }
.herocar__arrow svg { width: 18px; height: 18px; }
.herocar__arrow--prev { left: var(--space-6); }
.herocar__arrow--next { right: var(--space-6); }

.herocar__indicators {
  position: absolute; left: var(--space-16); right: var(--space-16); bottom: var(--space-10);
  z-index: 3;
  display: flex; align-items: center; gap: var(--space-6);
}
.herocar__counter {
  font-family: var(--serif-display); font-size: var(--text-3xl); line-height: var(--leading-none);
  color: var(--cream); letter-spacing: -0.01em;
}
.herocar__counter span {
  font-family: var(--mono); font-size: var(--text-xs); color: rgba(251,246,236,0.5);
  letter-spacing: 0.1em; margin-left: var(--space-1);
}
.herocar__bars {
  flex: 1; display: flex; gap: var(--space-2); align-items: center;
}
.herocar__bar {
  flex: 1; height: 2px; background: rgba(251,246,236,0.2);
  position: relative; overflow: hidden;
  cursor: pointer;
}
.herocar__bar:hover { background: rgba(251,246,236,0.35); }
.herocar__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--cream);
  width: 0%;
}
.herocar__bar[data-active="true"] .herocar__bar-fill {
  width: 100%;
  animation: barfill 6s linear forwards;
}
.herocar__bar[data-active="true"] .herocar__bar-fill[data-paused="true"] {
  animation-play-state: paused;
}
.herocar__bar[data-passed="true"] .herocar__bar-fill { width: 100%; background: var(--terracotta); }
@keyframes barfill { from { width: 0%; } to { width: 100%; } }

@media (max-width: 1023px) {
  .herocar__stage { min-height: clamp(560px, 90vh, 720px); }
  .herocar__title { font-size: var(--display-3); }
  .herocar__dek { font-size: var(--text-lg); }
  .herocar__content { padding: var(--space-10) var(--space-8) var(--space-30); }
  .herocar__indicators { left: var(--space-8); right: var(--space-8); bottom: var(--space-8); }
  .herocar__arrow { width: 44px; height: 44px; }
  .herocar__arrow--prev { left: var(--space-3); }
  .herocar__arrow--next { right: var(--space-3); }
}
@media (max-width: 639px) {
  .herocar__stage { min-height: 640px; }
  .herocar__title { font-size: var(--text-4xl); }
  .herocar__content { padding: var(--space-8) var(--space-5) var(--space-30); gap: var(--space-3-5); }
  .herocar__counter { font-size: var(--text-2xl); }
  .herocar__indicators { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
}

/* "See all stories" CTA at the bottom of home-page dispatches grid */
.see-all-stories {
  display: flex; justify-content: center;
  padding: var(--space-10) 0 var(--space-14); /* 40 top, 56 bottom — section-end rhythm */
}
.see-all-stories__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  padding: var(--space-3-5) var(--space-7);
  border-radius: var(--radius-full);
  text-decoration: none;
  min-height: 44px;
  transition: background 180ms ease, transform 180ms ease;
}
.see-all-stories__link:hover { background: var(--terracotta); }
.see-all-stories__link:active { transform: translateY(1px); }
.see-all-stories__link svg { width: 18px; height: 18px; }

/* ─── Layout with sidebar ───────────────────────────────────────────────── */
/* Mobile-first stack. Desktop (>=lg / 1024px): 1fr + 320px sidebar with 32px gap.
 * Outer container caps at max-w-7xl (1280px) with px-6 (24px) gutters each side. */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--ink);
}
.layout-with-sidebar__main { min-width: 0; }
.layout-with-sidebar__main .article-grid { border-bottom: 0; }

@media (min-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
  }
}

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  display: flex; flex-direction: column;
}
.sidebar > * { padding: 0 var(--space-6); }

.sidebar__masthead {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-7); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sidebar__date { white-space: nowrap; }
.sidebar__rule { flex: 1; height: 1px; background: var(--rule); }
.sidebar__edition { white-space: nowrap; }

.sidebar__block {
  padding-top: var(--space-7); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.sidebar__block-head {
  display: flex; align-items: baseline; gap: var(--space-2-5);
  margin-bottom: var(--space-3-5);
}
.sidebar__block-num {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.2em;
  color: var(--terracotta); text-transform: uppercase;
}
.sidebar__block-title {
  font-family: var(--serif-display);
  font-size: var(--text-xl); line-height: var(--leading-none); letter-spacing: -0.01em;
  color: var(--ink);
}
.sidebar__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.sidebar__link {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: var(--space-2) 0;
  text-align: left;
  border: 0; background: none;
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink);
  border-bottom: 1px dashed var(--rule-soft);
  cursor: pointer;
  transition: color 160ms, padding 160ms;
}
.sidebar__link:last-child { border-bottom: 0; }
.sidebar__link:hover {
  color: var(--terracotta);
  padding-left: var(--space-1);
}
.sidebar__link[data-active="true"] {
  color: var(--terracotta);
  font-weight: 600;
}
.sidebar__link[data-active="true"]::before {
  content: "▸";
  color: var(--terracotta);
  margin-right: var(--space-2);
  font-size: var(--text-base);
  line-height: 1;
}
.sidebar__link-label { flex: 1; }
.sidebar__link-count {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--rule-soft);
  padding: 2px var(--space-1-5); border-radius: var(--radius-full);
  min-width: 22px; text-align: center;
}
.sidebar__link[data-active="true"] .sidebar__link-count {
  background: var(--terracotta); color: var(--cream);
}

.sidebar__list--states .sidebar__state-code {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--terracotta);
  background: var(--rule-soft);
  padding: 3px var(--space-1-5); border-radius: var(--radius);
  min-width: 30px; text-align: center;
  flex-shrink: 0;
}
.sidebar__link[data-active="true"] .sidebar__state-code {
  background: var(--ink); color: var(--cream);
}

.sidebar__block--card {
  background: var(--cream);
  margin: var(--space-6) var(--space-6) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) !important;
  border: 1px solid var(--ink);
  border-radius: 0;
  position: relative;
}
.sidebar__card-mark {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.22em;
  color: var(--terracotta); text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.sidebar__card-title {
  font-family: var(--serif-display);
  font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.sidebar__card-title em { font-style: italic; color: var(--terracotta); }
.sidebar__card-sub {
  font-family: var(--serif-text); font-style: italic;
  color: var(--ink-soft); font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.sidebar__card-cta {
  display: inline-block;
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream); background: var(--ink);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  transition: background 160ms;
}
.sidebar__card-cta:hover { background: var(--terracotta); }

.sidebar__foot {
  padding-top: var(--space-7); padding-bottom: var(--space-7);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}

@media (max-width: 1023px) {
  /* Stacked layout — keep the card padded so it doesn't bleed to the gutter. */
  .sidebar__block--card { margin: var(--space-6) 0; }
}

/* ─── Featured story (editor's pick) ────────────────────────────────────── */
.featured {
  background: var(--cream);
  border-bottom: 1px solid var(--ink);
}
.featured__inner { padding: var(--space-14) var(--gutter); max-width: var(--container-wide); margin: 0 auto; } /* 56 top/bottom — matches section rhythm */
.featured__rule {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.featured__rule-line { flex: 1; height: 1px; background: var(--rule); }
.featured__rule-mark {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.28em;
  color: var(--terracotta); text-transform: uppercase;
}
.featured__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-14);
  align-items: center;
}
.featured__media {
  position: relative;
  aspect-ratio: 2/1;
  border: 1px solid var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: transform 400ms ease;
}
.featured__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.featured__media:hover { transform: translateY(-4px); }
.featured__text { display: flex; flex-direction: column; gap: var(--space-5); }
.featured__kicker {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.18em;
  color: var(--terracotta);
}
.featured__title {
  font-family: var(--serif-display);
  font-size: var(--display-3);
  line-height: var(--leading-tight); letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.featured__title em { color: var(--terracotta-deep); font-style: italic; }
.featured__dek {
  font-family: var(--serif-text);
  font-size: clamp(1rem, 1.4vw, 1.25rem); /* 16 → 20 */
  line-height: var(--leading-normal);
  color: var(--ink-soft); margin: 0; text-wrap: pretty;
}
.featured__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3-5); align-items: center;
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-top: var(--space-3-5); border-top: 1px solid var(--rule);
}
@media (max-width: 1023px) {
  .featured__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}


/* ─── Responsive (Tailwind breakpoints: xl 1280 · lg 1024 · md 768 · sm 640) ── */
@media (max-width: 1279px) {
  .masthead__main { padding: var(--space-5) var(--space-5) var(--space-4); gap: var(--space-4); }
  .masthead__brand { font-size: var(--text-3xl); }
  .masthead__nav { gap: var(--space-4); font-size: var(--text-xs); }
  .masthead__actions { gap: var(--space-2); }
  .masthead__subscribe { padding: var(--space-2) var(--space-3-5); font-size: var(--text-xs); }
  .masthead__icon-btn { width: 36px; height: 36px; }
  .masthead__top { padding: var(--space-2) var(--space-5); }
}
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16/10; border-right: 0; border-bottom: 1px solid var(--ink); }
  .hero__text { padding: var(--space-9) var(--gutter); }
  .trending__list { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
  .states__grid { grid-template-columns: repeat(3, 1fr); }
  .wonders { padding: 0 var(--gutter) var(--space-12); } /* top stays 0 — section-head supplies top spacing, matching dispatches */
  .wonders__title { font-size: var(--text-3xl); }
  .wonders__nav--prev { left: -10px; }
  .wonders__nav--next { right: -10px; }
  .newsletter { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr 1fr; }
  .masthead__nav { display: none; }
  .masthead__main { grid-template-columns: auto 1fr auto; }
  .masthead__brand { font-size: var(--text-2xl); }
}
@media (max-width: 639px) {
  /* Mobile: snap each state card to the centre of the viewport so the
   * "current" card is always fully visible. The track gets symmetric
   * padding equal to (viewport − card width) / 2 so the first and last
   * cards can still scroll all the way to centre. */
  .wonders__track {
    padding-left:  max(0px, calc((100% - 256px) / 2));
    padding-right: max(0px, calc((100% - 256px) / 2));
  }
  .wonder-card { scroll-snap-align: center; }
  /* Keep the masthead a single row: burger | brand | actions */
  .masthead__main { grid-template-columns: auto 1fr auto; gap: var(--space-2); padding: var(--space-3) var(--gutter); }
  .masthead__brand { font-size: var(--text-lg); }
  .masthead__brand-mark { display: none; }
  .masthead__actions { gap: var(--space-1-5); justify-content: flex-end; }
  .trending__list, .article-grid, .states__grid { grid-template-columns: 1fr; }
  .wonders__head { gap: var(--space-3); }
  .wonders__cta { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); min-height: 44px; }
  .footer { grid-template-columns: 1fr; }
}

/* ─── Hero (state picker entry) ─────────────────────────────────────── */
.statehero {
  position: relative;
  height: clamp(540px, 78vh, 820px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--ink);
}
.statehero__bg { position: absolute; inset: 0; z-index: 0; }
.statehero__bg-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.statehero__bg-slide[data-active="true"] { opacity: 1; }
.statehero__bg-slide .placeholder-stripes,
.statehero__bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.statehero__bg-img { object-fit: cover; display: block; }
.statehero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.18) 100%);
}
.statehero__content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: var(--space-8) var(--gutter);
  color: var(--cream);
}
.statehero__eyebrow {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.32em;
  color: var(--cream); opacity: 0.85;
  text-transform: uppercase;
  margin-bottom: var(--space-7);
}
.statehero__phrase-stack {
  display: grid;
  grid-template-areas: "stack";
  margin-bottom: var(--space-7);
  width: 100%;
  max-width: var(--container-6xl);
}
.statehero__phrase {
  grid-area: stack;
  justify-self: center;     /* centre the phrase block within the grid cell */
  margin: 0 auto;            /* fallback for non-grid contexts */
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--display-1);
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  color: var(--cream);
  max-width: 18ch;
  text-align: center;        /* multi-line phrases centre inside their max-width */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.statehero__phrase[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.statehero__pill {
  display: inline-flex; align-items: center; gap: var(--space-3-5);
  padding: var(--space-4) var(--space-7);
  background: var(--sand);
  color: var(--ink);
  font-family: var(--serif-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-none);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.statehero__pill em { font-style: italic; color: var(--terracotta-deep); }
.statehero__pill-text { white-space: nowrap; }
.statehero__pill svg { width: 22px; height: 22px; }
.statehero__pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

/* Black outline + soft black glow on the cycling hero phrase so the white
 * type stays readable on any background photo. Eyebrow and pill are left
 * unstyled — eyebrow rides on the scrim and the pill has its own solid bg. */
.statehero__phrase {
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 0 6px  rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
  paint-order: stroke fill;
}
.statehero__indicators {
  position: absolute; left: 0; right: 0; bottom: var(--space-7);
  z-index: 3;
  display: flex; gap: var(--space-2-5); justify-content: center;
}
.statehero__dot {
  position: relative;
  width: 28px; height: 3px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
  border-radius: var(--radius-sm);
}
.statehero__dot::before { content: ""; position: absolute; inset: -20px -10px; } /* expands hit area to ≥44×44 for touch */
.statehero__dot[data-active="true"] {
  background: var(--cream);
  width: 56px;
}
@media (max-width: 639px) {
  .statehero { height: clamp(480px, 70vh, 640px); }
  .statehero__eyebrow { margin-bottom: var(--space-4); letter-spacing: 0.26em; }
}

/* ─── State picker modal ─────────────────────────────────────────────── */
.state-picker-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(20, 16, 12, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  animation: nys-fade 0.22s ease;
}
@keyframes nys-fade { from { opacity: 0; } to { opacity: 1; } }
.state-picker {
  background: var(--paper);
  color: var(--ink);
  width: min(960px, 100%);
  max-height: 90vh; overflow-y: auto;
  border: 1px solid var(--ink);
  padding: var(--space-9) var(--space-8) var(--space-8);
  position: relative;
  animation: nys-rise 0.28s ease;
}
@keyframes nys-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.state-picker__head { text-align: center; margin-bottom: var(--space-6); position: relative; }
.state-picker__eyebrow {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.3em;
  color: var(--terracotta); text-transform: uppercase;
}
.state-picker__title {
  font-family: var(--serif-display);
  font-size: var(--display-3);
  margin: var(--space-1-5) 0 0;
  line-height: var(--leading-none);
  letter-spacing: -0.01em;
}
.state-picker__close {
  position: absolute; top: -8px; right: -8px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-full);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.state-picker__close:hover { background: var(--paper-2); border-color: var(--ink); }
.state-picker__close svg { width: 16px; height: 16px; }
.state-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.state-picker__item {
  background: var(--paper);
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-3-5);
  display: grid; gap: var(--space-1);
  cursor: pointer;
  position: relative;
  transition: background 0.16s ease;
}
/* Hover effects gated to pointer-capable devices so a tap on touch screens
 * doesn't leave a "stuck" hover state on the just-tapped item. */
@media (hover: hover) {
  .state-picker__item:hover { background: var(--paper-2); }
  .state-picker__item:hover .state-picker__name { color: var(--terracotta); }
}
.state-picker__code {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.18em;
  color: var(--terracotta);
}
.state-picker__name {
  font-family: var(--serif-display); font-size: var(--text-xl); line-height: var(--leading-none);
  transition: color 0.16s ease;
}
.state-picker__nick {
  font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.state-picker__count {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
  margin-top: var(--space-1);
}
@media (max-width: 639px) {
  .state-picker { padding: var(--space-7) var(--space-5) var(--space-5); }
  .state-picker__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mobile responsiveness pass (≤ sm / 640px) ─────────────────────────── */
@media (max-width: 639px) {
  /* Touch targets */
  .masthead__icon-btn { width: 44px; height: 44px; }
  .share-row--compact .share-btn { width: 44px; height: 44px; }
  .article-card__bookmark { width: 44px; height: 44px; }
  .state-picker__close { width: 44px; height: 44px; }
  .search-overlay__close { width: 44px; height: 44px; }

  /* Stack header rows that put a long tracked-out caption next to a date/sub */
  .trending__head   { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .section-head     { flex-direction: column; align-items: flex-start; gap: var(--space-3);
                      padding: var(--space-10) 0 var(--space-5); }
  .archive-intro    { padding: 0 var(--gutter) var(--space-6); font-size: var(--text-base); }
  .archive-intro p:first-of-type::first-letter { font-size: 2.6em; }
  .featured__rule-line { display: none; }
  .featured__rule      { justify-content: center; }
  .featured__rule-mark { text-align: center; }
  .footer__bottom   { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .sidebar__masthead { letter-spacing: 0.1em; gap: var(--space-2); }

  /* Hero pill: prevent overflow on narrow phones (placement TBD) */
  .statehero__pill { font-size: var(--text-lg); padding: var(--space-3-5) var(--space-5); gap: var(--space-2-5); min-height: 44px; }
  .statehero__pill svg { width: 18px; height: 18px; }
  .statehero__indicators { gap: var(--space-3-5); }

}

/* ─── Static page templates (hero band + prose card) ──────────────────── */
.page-hero {
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-16) var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.page-hero__inner {
  max-width: var(--container-4xl); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.page-hero__mark {
  display: inline-block;
  font-size: var(--text-2xl); color: var(--sand);
  margin-bottom: var(--space-4);
}
.page-hero__title {
  font-family: var(--serif-display); font-weight: 700;
  font-size: var(--display-2);
  line-height: var(--leading-tight); letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--cream);
}
.page-hero__sub {
  margin: var(--space-3) 0 0;
  font-family: var(--serif-text);
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  max-width: 50ch;
}
.page-content {
  max-width: var(--container-4xl); margin: 0 auto;
  padding: var(--space-16) var(--gutter);
}
.page-content__card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
@media (min-width: 640px) {
  .page-content__card { padding: var(--space-12); }
}

/* ─── Site footer (used on PHP page templates) ────────────────────────── */
.site-footer { background: var(--ink); color: var(--cream); }
.site-footer__inner {
  max-width: var(--container-7xl); margin: 0 auto;
  padding: var(--space-14) var(--gutter) var(--space-10);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
.site-footer__brand-name {
  font-family: var(--serif-display); font-size: var(--text-3xl);
  letter-spacing: -0.01em;
}
.site-footer__brand-name em { font-style: italic; color: var(--terracotta); }
.site-footer__tagline {
  font-family: var(--serif-text); font-style: italic;
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  margin: var(--space-3) 0 0; max-width: 36ch;
}
.site-footer__col-title {
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); margin: 0;
}
.site-footer__col-rule {
  width: 40px; height: 3px; background: var(--terracotta);
  border-radius: var(--radius-full); margin-top: var(--space-2);
}
.site-footer__col-list {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1-5);
}
.site-footer__col-list a {
  font-family: var(--sans); font-size: var(--text-sm);
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  transition: color 160ms;
  display: inline-block; padding: var(--space-1) 0;
}
.site-footer__col-list a:hover { color: var(--terracotta); }

.site-footer__bottom {
  max-width: var(--container-7xl); margin: 0 auto;
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}

@media (max-width: 1023px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-10) var(--gutter) var(--space-8); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .page-hero { padding: var(--space-12) var(--gutter); }
  .page-content { padding: var(--space-10) var(--gutter); }
  .page-content__card { padding: var(--space-6); }
}

/* ─── Scroll-to-top button ────────────────────────────────────────────── */
.scroll-to-top {
  position: fixed;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  right: var(--space-6); z-index: 70;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--terracotta); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 200ms, background 200ms;
}
.scroll-to-top svg { width: 20px; height: 20px; }
.scroll-to-top:hover { background: var(--terracotta-deep); transform: translateY(-2px); }
.scroll-to-top[hidden] { display: none; }

/* ─── Pagination ────────────────────────────────────────────────────────── */
.pagination {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) 0 var(--space-14); /* 32 top / 0 sides (parent has gutter) / 56 bottom — section-end rhythm */
}
.pagination a, .pagination span {
  font-family: var(--sans); font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3-5);
  border: 1px solid var(--rule); border-radius: var(--radius-full);
  min-height: 36px; display: inline-flex; align-items: center;
  color: var(--ink); text-decoration: none;
  transition: border-color 160ms, color 160ms, background 160ms;
}
.pagination a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.pagination .current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ─── Site footer ───────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid var(--ink);
}

/* Intro — star + pull-quote + thin divider, centred. */
.site-footer__intro {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: var(--space-14) var(--gutter) var(--space-10);
  text-align: center;
}
.site-footer__star {
  display: inline-block;
  font-size: var(--text-2xl);
  color: var(--sand);
  margin-bottom: var(--space-4);
}
.site-footer__quote {
  font-family: var(--serif-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--cream);
  margin: 0;
}
@media (min-width: 640px) { .site-footer__quote { font-size: var(--text-3xl); } }
.site-footer__intro-rule {
  margin: var(--space-8) auto 0;
  width: 64px; height: 1px;
  background: color-mix(in srgb, var(--sand) 40%, transparent);
}

/* 4-column band */
.site-footer__cols {
  max-width: var(--container-7xl);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
}
.site-footer__col { min-width: 0; }
.site-footer__col-title {
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream); margin: 0;
}
.site-footer__col-rule {
  margin-top: var(--space-1);
  width: 40px; height: 4px;
  background: var(--sand);
  border-radius: var(--radius-full);
}
.site-footer__col-rule--primary { background: var(--terracotta); }

.site-footer__col-blurb {
  font-family: var(--sans); font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cream);
  margin: var(--space-3) 0 0;
}
.site-footer__col-cta {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 700;
  color: var(--terracotta);
  text-decoration: none;
  transition: color 140ms;
}
.site-footer__col-cta:hover { color: color-mix(in srgb, var(--terracotta) 70%, var(--cream)); }

.site-footer__col-list,
.site-footer__contact-list {
  list-style: none;
  margin: var(--space-3-5) 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.site-footer__col-list a {
  font-family: var(--sans); font-size: var(--text-sm); color: var(--cream);
  text-decoration: none; transition: color 140ms, text-decoration-color 140ms;
  text-underline-offset: 4px;
}
.site-footer__col-list a:hover { color: var(--terracotta); text-decoration: underline; }

.site-footer__col-empty {
  font-family: var(--sans); font-size: var(--text-xs);
  color: color-mix(in srgb, var(--cream) 50%, transparent);
  margin: var(--space-3-5) 0 0; line-height: var(--leading-snug);
}

/* Contact list — icon + text rows */
.site-footer__contact-list { gap: var(--space-3); }
.site-footer__contact-list li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-family: var(--sans); font-size: var(--text-sm); line-height: var(--leading-snug);
  color: var(--cream);
}
.site-footer__contact-list a { color: var(--cream); text-decoration: none; }
.site-footer__contact-list a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 4px; }
.site-footer__contact-icon { flex-shrink: 0; color: var(--terracotta); display: inline-flex; margin-top: 2px; }
.site-footer__contact-icon svg { width: 16px; height: 16px; }

.site-footer__socials { margin-top: var(--space-4); display: flex; gap: var(--space-3); }
.site-footer__socials a { color: color-mix(in srgb, var(--cream) 70%, transparent); transition: color 140ms; }
.site-footer__socials a:hover { color: var(--terracotta); }
.site-footer__socials svg { width: 20px; height: 20px; }

/* Copyright bar */
.site-footer__copyright {
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  padding: var(--space-6) var(--gutter);
  text-align: center;
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--cream);
  max-width: var(--container-7xl); margin: 0 auto;
}
.site-footer__copyright p { margin: 0; line-height: var(--leading-relaxed); }
.site-footer__copyright p + p { margin-top: 2px; }

@media (max-width: 1023px) { .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 639px)  { .site-footer__cols { grid-template-columns: 1fr; padding: var(--space-8) var(--gutter); } .site-footer__intro { padding: var(--space-10) var(--gutter) var(--space-6); } }

/* ─── Scroll-to-top button ──────────────────────────────────────────── */
.scroll-to-top {
  position: fixed; right: var(--space-6);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--ink); color: var(--cream); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  cursor: pointer; transition: transform 160ms, background 160ms;
}
.scroll-to-top:hover { transform: translateY(-2px); background: var(--terracotta); }
.scroll-to-top svg  { width: 18px; height: 18px; }

/* ─── 404 ───────────────────────────────────────────────────────────────── */
.not-found { padding: var(--space-20) var(--gutter); text-align: center; }
.not-found__inner { max-width: 32rem; margin: 0 auto; }
.not-found__eyebrow {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.3em;
  color: var(--terracotta); text-transform: uppercase; margin-bottom: var(--space-4);
}
.not-found__title {
  font-family: var(--serif-display); font-size: var(--display-1);
  margin: 0; line-height: var(--leading-none); letter-spacing: -0.02em;
}
.not-found__dek {
  font-family: var(--serif-text); font-style: italic; font-size: var(--text-lg);
  color: var(--ink-soft); margin-top: var(--space-5); line-height: var(--leading-relaxed);
}
.not-found__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-8);
}
.not-found__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--ink); color: var(--cream); border: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--radius-full); text-decoration: none;
  min-height: 44px;
  transition: background 160ms;
}
.not-found__cta:hover { background: var(--terracotta); }
.not-found__cta--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.not-found__cta--ghost:hover { background: var(--ink); color: var(--cream); }
.not-found__cta svg { width: 16px; height: 16px; }

/* ─── Inline search form (used by the WP search results page) ──────────── */
.search-form {
  display: flex; gap: var(--space-2); align-items: center;
  max-width: 32rem; margin: 0 auto;
}
.search-form__input {
  flex: 1; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule); border-radius: var(--radius-full);
  font-family: var(--sans); font-size: var(--text-base); color: var(--ink);
  background: var(--paper);
}
.search-form__submit {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--ink); color: var(--cream); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-form__submit svg { width: 16px; height: 16px; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* ─── Team blocks: Author Card + Team Cards ─────────────────────────── */

/* Author Card — single dark card with photo + bio. Matches .post__author-card. */
.nys-author-card {
  display: flex; gap: var(--space-6); align-items: flex-start;
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin: var(--space-10) 0;
  width: 100%;
}
.nys-author-card__photo {
  flex-shrink: 0;
  width: 144px; height: 144px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: color-mix(in srgb, var(--cream) 12%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
}
.nys-author-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nys-author-card__photo-fallback { color: color-mix(in srgb, var(--cream) 40%, transparent); }
.nys-author-card .nys-author-card__body { flex: 1; min-width: 0; }
/* Chained-class selectors below give specificity 0,2,0 to beat .article-body p
 * and .article-body h3 (both 0,1,1) when the card is placed on a page. */
.nys-author-card .nys-author-card__name {
  font-family: var(--serif-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); /* 20 → 24 */
  font-weight: 700;
  margin: 0;
  color: var(--cream);
}
.nys-author-card .nys-author-card__role {
  font-family: var(--sans);
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sand); /* WCAG AA: ~12.6:1 on --ink (was terracotta @ 3.8:1, failed) */
  margin: var(--space-1) 0 0;
}
.nys-author-card .nys-author-card__bio {
  font-family: var(--serif-text);
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  margin: var(--space-3) 0 0;
}
.nys-author-card__socials {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-4);
}
.nys-author-card__social {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms ease, color 160ms ease;
}
.nys-author-card__social:hover { background: var(--terracotta); color: var(--cream); }
.nys-author-card__social svg { width: 16px; height: 16px; }

/* Team Cards — grid of lighter cream cards. */
.nys-team-cards {
  padding: var(--space-10) 0;
}
.nys-team-cards .nys-team-cards__heading {
  font-family: var(--serif-display);
  font-size: var(--text-4xl); line-height: var(--leading-none);
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--space-8);
}
.nys-team-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--space-6);
}
.nys-team-cards[data-cols="1"] .nys-team-cards__grid { --cols: 1; }
.nys-team-cards[data-cols="2"] .nys-team-cards__grid { --cols: 2; }
.nys-team-cards[data-cols="3"] .nys-team-cards__grid { --cols: 3; }
.nys-team-cards[data-cols="4"] .nys-team-cards__grid { --cols: 4; }
.nys-team-cards[data-cols="5"] .nys-team-cards__grid { --cols: 5; }
.nys-team-cards[data-cols="6"] .nys-team-cards__grid { --cols: 6; }

/* Horizontal team card — photo left, info right (matches txheadlines layout).
 * Outer card is flex-column so an optional gallery row sits below the main
 * photo+body row. */
.nys-team-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: transform 240ms ease, box-shadow 240ms ease;
  opacity: 0;
  animation: nys-team-fade-up 480ms ease forwards;
}
.nys-team-card .nys-team-card__main {
  display: flex; flex-direction: row; align-items: center; gap: var(--space-5);
}
.nys-team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
@keyframes nys-team-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nys-team-card { opacity: 1; animation: none; }
}
.nys-team-card__photo {
  flex-shrink: 0;
  width: 112px; height: 112px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.nys-team-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.nys-team-card__photo-fallback { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.nys-team-card .nys-team-card__body { flex: 1; min-width: 0; }
/* Chained-class selectors (specificity 0,2,0) so the cards stay styled when
 * placed inside .article-body, which has .article-body p / h3 rules at 0,1,1. */
.nys-team-card .nys-team-card__name {
  font-family: var(--serif-display);
  font-size: clamp(1.125rem, 1.5vw, 1.25rem); /* 18 → 20 */
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: var(--leading-tight);
}
.nys-team-card .nys-team-card__name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 4px;
  transition: text-decoration-thickness 160ms ease;
}
.nys-team-card .nys-team-card__name a:hover { text-decoration-thickness: 2px; }
.nys-team-card .nys-team-card__role {
  font-family: var(--sans);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta-deep); /* WCAG AA: ~7.4:1 on --paper */
  margin: var(--space-1) 0 0;
}
.nys-team-card .nys-team-card__bio {
  font-family: var(--serif-text);
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--ink);
  margin: var(--space-2) 0 0;
}
.nys-team-card__socials {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-3);
}
.nys-team-card__social {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 160ms ease;
}
.nys-team-card__social:hover {
  background: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
}
.nys-team-card__social svg { width: 14px; height: 14px; }

@media (max-width: 1023px) {
  .nys-team-cards[data-cols="3"] .nys-team-cards__grid,
  .nys-team-cards[data-cols="4"] .nys-team-cards__grid,
  .nys-team-cards[data-cols="5"] .nys-team-cards__grid,
  .nys-team-cards[data-cols="6"] .nys-team-cards__grid { --cols: 2; }
}
@media (max-width: 767px) {
  .nys-team-cards__grid { --cols: 1 !important; }
  .nys-team-card .nys-team-card__main { flex-direction: column; align-items: center; text-align: center; }
  .nys-team-card__photo { width: 128px; height: 128px; }
  .nys-team-card__socials { justify-content: center; }
  .nys-team-card__gallery { justify-content: center; }
  .nys-author-card { flex-direction: column; align-items: center; text-align: center; padding: var(--space-6); }
  .nys-author-card__socials { justify-content: center; }
}

/* Team-card gallery thumbnails — sits below the main photo+body row. */
.nys-team-card .nys-team-card__gallery {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.nys-team-card__gallery-thumb {
  width: 48px; height: 48px;
  padding: 0; border: 0; background: transparent;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.nys-team-card__gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.nys-team-card__gallery-thumb:hover { opacity: 0.85; transform: translateY(-1px); }
.nys-team-card__gallery-thumb:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 2px;
}

/* ─── Lightbox for team gallery (modal overlay with prev/next/swipe) ──── */
.nys-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(26, 26, 46, 0.95); /* var(--ink) at 95% */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.nys-lightbox.is-open { opacity: 1; visibility: visible; }
.nys-lightbox-img-wrap {
  max-width: 90vw; max-height: 80vh;
  display: flex; align-items: center; justify-content: center;
}
.nys-lightbox-img {
  max-width: 90vw; max-height: 80vh;
  border-radius: var(--radius-md, 8px);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.nys-lightbox-close,
.nys-lightbox-prev,
.nys-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 0;
  color: var(--cream);
  cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 200ms ease;
}
.nys-lightbox-close { top: 1rem; right: 1rem; font-size: 2rem; line-height: 1; background: transparent; }
.nys-lightbox-close:hover { background: rgba(255,255,255,0.1); }
.nys-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.nys-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.nys-lightbox-prev:hover, .nys-lightbox-next:hover { background: rgba(255,255,255,0.2); }
.nys-lightbox-counter {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  font-family: var(--sans); font-size: 0.8125rem;
  opacity: 0.7;
}
@media (max-width: 639px) {
  .nys-lightbox-prev, .nys-lightbox-next {
    top: auto; bottom: 3.5rem; transform: none;
  }
  .nys-lightbox-prev { left: calc(50% - 60px); }
  .nys-lightbox-next { right: calc(50% - 60px); }
  .nys-lightbox-counter { bottom: 1rem; }
}