/* ==========================================================================
   Sobremesa Press — main.css
   Magazine editorial. Mobile-first. Light mode only in v1.
   Dark-mode hooks live in CSS variables only — no media query yet.
   ========================================================================== */

/* ---------- web fonts ----------
   Variable fonts, self-hosted. font-display: optional = the browser blocks
   text paint for ~100ms waiting on the font; if it hasn't arrived in time,
   the metric-matched fallback is used for the WHOLE pageview with no later
   swap. This is what eliminates font-swap CLS (Core Web Vitals). On any
   subsequent pageview the font is cache-warm and renders immediately. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/fonts/fraunces.woff2") format("woff2-variations"),
       url("/fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: optional;
  src: url("/fonts/fraunces-italic.woff2") format("woff2-variations"),
       url("/fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/fonts/inter.woff2") format("woff2-variations"),
       url("/fonts/inter.woff2") format("woff2");
}

/* Metric-matched fallback faces — same advance width and line height as the
   real fonts, drawn from local Georgia / Arial. Eliminates layout shift on
   font swap. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* type */
  --font-serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", "Times", "Hoefler Text", "Liberation Serif", serif;
  --font-sans:  "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* color (light mode) */
  --color-bg:        #fbf9f5;       /* warm off-white, premium print feel */
  --color-bg-elev:   #ffffff;
  --color-text:      #1a1a1a;
  --color-text-mute: #555555;
  --color-text-faint:#666666;
  --color-rule:      #e3ddd1;
  --color-rule-soft: #efeae0;
  --color-accent:    #c2420c;       /* terracotta */
  --color-accent-ink:#8a2e08;
  --color-accent-soft:#fbe8df;
  --color-link:      var(--color-accent);
  --color-link-hover:var(--color-accent-ink);

  /* per-section tones — each block on the homepage gets its own tonal palette
     so the page reads like an issue rather than a flat grid. */
  --tone-eat:          #6b1f2a;
  --tone-eat-ink:      #f4ddd8;
  --tone-cook:         #c2420c;
  --tone-cook-ink:     #fff1d6;
  --tone-gear:         #1f1d1b;
  --tone-gear-ink:     #d8d2c4;
  --tone-industry:     #e6dcc4;
  --tone-industry-ink: #2a2622;
  --tone-world:        #a96d23;
  --tone-world-ink:    #fff1d6;

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* layout */
  --measure: 36rem;            /* ~70-75ch body line */
  --container: 72rem;
  --container-wide: 84rem;
  --radius: 2px;

  /* type scale */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.125rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.85rem;
  --fs-2xl:  2.4rem;
  --fs-3xl:  3.2rem;
  --fs-4xl:  4rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --lh-loose: 1.8;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .15s ease;
}
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.005em;
}

p { margin: 0 0 var(--space-5); }
ul, ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
li { margin-bottom: var(--space-2); }

blockquote {
  margin: var(--space-6) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-text-mute);
}

hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-7) 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-rule-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--fs-sm);
}
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-rule); }
th { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; color: var(--color-text-mute); }

::selection { background: var(--color-accent); color: #fff; }

/* ---------- utilities ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-text); color: #fff;
  padding: var(--space-3) var(--space-4); z-index: 100;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg);
  padding: var(--space-5) var(--space-4);
}
.site-header-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.masthead {
  display: inline-flex;
  text-decoration: none;
  color: var(--color-text);
  line-height: 1;
}
.masthead-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  line-height: 1;
}
.masthead-sobre { color: var(--color-text); font-style: normal; }
.masthead-mesa  { color: var(--color-accent); font-style: italic; }

.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--color-text);
  padding: var(--space-1) 0;
  position: relative;
  transition: color .15s ease;
}
.site-nav a::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.site-nav a:hover { color: var(--color-accent); }
.site-nav a:hover::before { opacity: 1; transform: translateX(0); }

@media (min-width: 720px) {
  .site-header-inner { flex-direction: row; justify-content: space-between; gap: var(--space-6); }
}

/* ---------- main / containers ---------- */
main { padding: var(--space-7) var(--space-4); }
@media (min-width: 720px) { main { padding: var(--space-8) var(--space-5); } }

/* ---------- home ---------- */
.home { max-width: var(--container-wide); margin: 0 auto; }
.masthead-tagline { text-align: center; margin-bottom: var(--space-7); }
.tagline {
  font-family: var(--font-serif); font-style: italic;
  color: var(--color-text-mute); font-size: var(--fs-lg);
}
/* Magazine-cover hero: full-bleed image, issue line top-right, title bottom-left */
.hero-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 520px;
  max-height: 880px;
  overflow: hidden;
  margin-bottom: var(--space-9);
  background: #0d0d0d;
  isolation: isolate;
}
@media (min-width: 720px) { .hero-feature { aspect-ratio: 16 / 10; } }
@media (min-width: 1080px) { .hero-feature { aspect-ratio: 16 / 9; } }
.hero-feature .hero-feature-bg,
.hero-feature .hero-feature-bg a {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-feature .hero-feature-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Stronger scrim — large dark zone at the bottom guarantees text readability
   over any photo. Top fade keeps the issue line legible without dominating. */
.hero-feature .hero-feature-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.10) 18%,
      rgba(0,0,0,0.0) 35%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.78) 78%,
      rgba(0,0,0,0.95) 100%);
  pointer-events: none;
}
.hero-feature .hero-feature-issue {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
@media (min-width: 720px) {
  .hero-feature .hero-feature-issue { padding: var(--space-4) var(--space-7); }
}
.hero-feature .hero-feature-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-6) var(--space-5) var(--space-6);
  color: #fff;
  max-width: 64rem;
}
@media (min-width: 720px) {
  .hero-feature .hero-feature-body {
    padding: var(--space-7) var(--space-7) var(--space-7);
  }
}
@media (min-width: 1080px) {
  .hero-feature .hero-feature-body {
    padding: var(--space-8) var(--space-8) var(--space-8);
  }
}
.hero-feature .hero-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 700;
  padding: 6px 14px 5px;
  border-radius: 999px;
  margin: 0 0 var(--space-3);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.hero-feature .hero-feature-eyebrow a {
  color: inherit;
  text-decoration: none;
}
.hero-feature .hero-feature-eyebrow a:hover { color: #1a1a1a; }
.hero-feature .hero-feature-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: inherit;
  max-width: 22ch;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
}
.hero-feature .hero-feature-title a { color: inherit; text-decoration: none; }
.hero-feature .hero-feature-title a:hover { color: #f6c5a8; }
.hero-feature .hero-feature-dek {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.4;
  margin: 0 0 var(--space-3);
  color: rgba(255,255,255,0.95);
  max-width: 50ch;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.hero-feature .hero-feature-meta {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.section-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--color-text-mute);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ---------- card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7) var(--space-5);
}
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; }
.card-image { margin-bottom: var(--space-4); overflow: hidden; }
.card-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.card a:hover .card-image img { transform: scale(1.02); }
.card-kicker {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--fs-xs);
  color: var(--color-accent); font-weight: 600;
  margin: 0 0 var(--space-2);
}
.card-title {
  font-family: var(--font-serif); font-size: var(--fs-lg);
  margin: 0 0 var(--space-3); line-height: var(--lh-snug);
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--color-accent); }
.card-dek { color: var(--color-text-mute); font-size: var(--fs-base); line-height: 1.5; margin: 0 0 var(--space-3); }
.card-meta { color: var(--color-text-faint); font-size: var(--fs-xs); margin: 0; font-family: var(--font-sans); }

/* ---------- placeholder cover ----------
   Used on the homepage while real photography hasn't arrived yet.
   Each section sets its own --ph-bg / --ph-fg via .section-{key}. */
.ph-image {
  position: relative;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ph-bg, var(--color-text));
  color: var(--ph-fg, #fbf9f5);
  isolation: isolate;
  transition: transform .4s ease;
}
.ph-image::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(at 28% 22%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(at 80% 88%, rgba(0,0,0,0.22), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.035) 22px 44px);
  pointer-events: none;
}
.ph-image .ph-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.92;
  z-index: 1;
}
.ph-image .ph-no {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  opacity: 0.7;
  z-index: 1;
}
.ph-image .ph-section {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  opacity: 0.72;
  z-index: 1;
}
.card a:hover .ph-image { transform: scale(1.02); }

/* ---------- dispatch marker (above tagline) ---------- */
.dispatch-marker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.dispatch-marker .accent { color: var(--color-accent); font-weight: 600; }
.dispatch-marker .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
}

/* ---------- section nameplate (the divider above each section block) ---------- */
.section-nameplate {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-5);
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-4);
  margin-bottom: var(--space-6);
  grid-column: 1 / -1;
}
.section-nameplate .label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1;
}
.section-nameplate .label a { color: inherit; text-decoration: none; }
.section-nameplate .label a:hover { color: var(--color-accent); }
.section-nameplate .dek {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  color: var(--color-text-mute);
  text-align: right;
  padding-bottom: 0.35em;
  margin: 0;
  max-width: 22rem;
}
.section-nameplate .more {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.5em;
}
.section-nameplate .more:hover { color: var(--color-accent-ink); text-decoration: underline; }

.section-block { margin-bottom: var(--space-9); }

/* lead + two stacked: prime layout for Eat */
.section-block--lead { display: grid; gap: var(--space-7); }
.section-block--lead .lead-card .card-title { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.section-block--lead .lead-card .card-dek { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--color-text); }
.section-block--lead .stack { display: flex; flex-direction: column; gap: var(--space-6); }
.section-block--lead .stack .card { border-top: 1px solid var(--color-rule); padding-top: var(--space-5); display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); align-items: start; }
.section-block--lead .stack .card:first-child { border-top: none; padding-top: 0; }
.section-block--lead .stack .card-image { aspect-ratio: 4 / 3; margin: 0; }
.section-block--lead .stack .card-image img,
.section-block--lead .stack .card-image .ph-image { width: 100%; height: 100%; object-fit: cover; }
.section-block--lead .stack .card-kicker,
.section-block--lead .stack .card-title,
.section-block--lead .stack .card-dek,
.section-block--lead .stack .card-meta { grid-column: 2; }
.section-block--lead .stack .card-image { grid-column: 1; grid-row: 1 / span 4; }
.section-block--lead .stack .card-title { font-size: var(--fs-md); }
.section-block--lead .stack .card-dek { display: none; }
@media (min-width: 880px) {
  .section-block--lead { grid-template-columns: 1fr 1.55fr; align-items: start; }
  .section-block--lead .stack { grid-column: 1; grid-row: 2; }
  .section-block--lead .lead-card { grid-column: 2; grid-row: 2; }
}

/* listicle: ranked rows with serif numerals — Gear */
.section-block--listicle .listicle-row { display: grid; gap: 0; }
.section-block--listicle .listicle-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-rule);
}
.section-block--listicle .listicle-card:first-child { border-top: 1px solid var(--color-text); }
.section-block--listicle .rank {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--color-accent);
  line-height: 0.9;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
  padding-top: 0.05em;
}
.section-block--listicle .listicle-card .card-image,
.section-block--listicle .listicle-card .ph-image {
  aspect-ratio: 4 / 3;
}
.section-block--listicle .listicle-body { display: flex; flex-direction: column; }
.section-block--listicle .listicle-body .card-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}
@media (min-width: 720px) {
  .section-block--listicle .listicle-card {
    grid-template-columns: 4rem 12rem 1fr;
  }
  .section-block--listicle .listicle-card > .card-image,
  .section-block--listicle .listicle-card > .ph-image {
    grid-row: 1;
    grid-column: 2;
  }
}

/* dispatch: wire-service grid with image — Industry */
.section-block--dispatch .dispatch-grid { display: grid; gap: var(--space-6); }
.section-block--dispatch .dispatch-item {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
}
.section-block--dispatch .dispatch-item:first-child { border-top: 1px solid var(--color-text); }
.section-block--dispatch .dispatch-image {
  display: block;
  aspect-ratio: 16 / 10;
  margin: 0 0 var(--space-3);
  overflow: hidden;
}
.section-block--dispatch .dispatch-image img,
.section-block--dispatch .dispatch-image .ph-image {
  width: 100%; height: 100%; object-fit: cover;
}
.section-block--dispatch .dispatch-kicker {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.section-block--dispatch .dispatch-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
.section-block--dispatch .dispatch-title a { color: inherit; text-decoration: none; }
.section-block--dispatch .dispatch-title a:hover { color: var(--color-accent); }
.section-block--dispatch .dispatch-dek { color: var(--color-text-mute); font-size: var(--fs-base); line-height: 1.5; margin: 0 0 var(--space-3); }
@media (min-width: 720px) { .section-block--dispatch .dispatch-grid { grid-template-columns: repeat(3, 1fr); } }

/* photo-led: one wide cinematic lead, two below — World */
.section-block--photo { display: grid; gap: var(--space-6); }
.section-block--photo .photo-lead { grid-column: 1 / -1; }
.section-block--photo .photo-lead .card-image,
.section-block--photo .photo-lead .ph-image { aspect-ratio: 21 / 9; }
.section-block--photo .photo-lead .card-title { font-size: clamp(1.7rem, 3.2vw, 2.2rem); }
.section-block--photo .photo-rest { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .section-block--photo .photo-rest { grid-template-columns: 1fr 1fr; } }

/* category-3 grid: classic three-column — Cook */
.section-block--grid .grid-row { display: grid; gap: var(--space-7) var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .section-block--grid .grid-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .section-block--grid .grid-row { grid-template-columns: repeat(3, 1fr); } }

/* per-section tone application — sets placeholder cover bg/fg */
.section-eat       { --ph-bg: var(--tone-eat);      --ph-fg: var(--tone-eat-ink); }
.section-cook      { --ph-bg: var(--tone-cook);     --ph-fg: var(--tone-cook-ink); }
.section-gear      { --ph-bg: var(--tone-gear);     --ph-fg: var(--tone-gear-ink); }
.section-industry  { --ph-bg: var(--tone-industry); --ph-fg: var(--tone-industry-ink); }
.section-world     { --ph-bg: var(--tone-world);    --ph-fg: var(--tone-world-ink); }

/* placeholder fallback for cinematic hero (no real image yet) */
.hero-feature .ph-image {
  aspect-ratio: auto;
  width: 100%; height: 100%;
  --ph-bg: var(--tone-eat); --ph-fg: var(--tone-eat-ink);
}

/* ---------- category ---------- */
.category { max-width: var(--container-wide); margin: 0 auto; }
.category-header {
  text-align: center;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}
.category-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.category-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.category-dek {
  font-family: var(--font-serif);
  color: var(--color-text-mute);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  max-width: 36rem;
  margin: 0 auto;
}

/* Leaderboard / banner ad slots — used on category pages and possibly
   homepage in the future. CLS-safe: reserves space even when empty. */
.ad-slot-leaderboard {
  min-height: 100px;
  background: var(--color-rule-soft);
  display: grid;
  place-items: center;
  margin: var(--space-6) auto;
  position: relative;
  max-width: 970px;
}
.ad-slot-leaderboard::before {
  content: "Advertisement";
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-text-faint);
}
.ad-slot-leaderboard:not(:empty)::before { display: none; }
@media (min-width: 1080px) { .ad-slot-leaderboard { min-height: 250px; } }

/* On category pages the inline house ad sits in the flow as a centered card. */
.category .ad-house {
  max-width: 24rem;
  margin: var(--space-7) auto;
}

.pagination {
  display: flex; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.pagination a, .pagination span {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule);
  text-decoration: none; color: var(--color-text);
}
.pagination .current { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* ---------- article ---------- */
.article {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.breadcrumbs {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
  overflow: hidden;
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
}
.breadcrumbs li {
  white-space: nowrap;
  min-width: 0;
}
.breadcrumbs li[aria-current="page"] {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.breadcrumbs a { color: var(--color-text-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs .sep { color: var(--color-text-faint); }

.article-header { text-align: center; max-width: 48rem; margin: 0 auto; }
.kicker {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--fs-xs);
  color: var(--color-accent); font-weight: 600; margin: 0 0 var(--space-3);
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.article-title {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  margin: 0 0 var(--space-4);
  line-height: 1.1;
}
.dek {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--color-text-mute);
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 var(--space-5);
}
.article-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.article-meta .meta-sep { color: var(--color-text-faint); }
.article-meta time, .article-meta .reading-time, .article-meta .updated { font-variant-numeric: tabular-nums; }
.article-meta .updated { color: var(--color-text-faint); }

.hero {
  margin: var(--space-6) calc(var(--space-4) * -1) 0;
}
.hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero figcaption {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-align: right;
  padding: var(--space-2) var(--space-4) 0;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.figcaption-disclaimer {
  display: inline;
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
  color: var(--color-text-faint);
  margin-left: 0.4em;
}
@media (min-width: 720px) {
  .hero { margin-left: 0; margin-right: 0; }
}

.affiliate-disclosure {
  font-size: var(--fs-xs);
  color: var(--color-text-mute);
  font-style: italic;
  border: 1px dashed var(--color-rule);
  padding: var(--space-3) var(--space-4);
  max-width: var(--measure);
  margin: 0 auto;
}

.article-body {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  /* Defensive: long URLs / unbreakable strings can't push the page wider
     than the viewport. Combined with body { overflow-x: clip }, this keeps
     every article responsive regardless of what the markdown contains. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.article-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  margin: var(--space-7) 0 var(--space-4);
  letter-spacing: -0.005em;
}
.article-body h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  margin: var(--space-6) 0 var(--space-3);
}
.article-body img {
  margin: var(--space-6) 0;
  width: 100%;
  height: auto;
}
.article-body figure { margin: var(--space-6) 0; max-width: 100%; }
.article-body pre {
  overflow-x: auto;
  max-width: 100%;
  padding: var(--space-4);
  background: var(--color-rule-soft);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.article-body table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.article-body figcaption {
  font-size: var(--fs-xs); color: var(--color-text-faint); text-align: center;
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.1em;
  padding-top: var(--space-2);
}

/* TL;DR / Key Takeaways block */
.tldr {
  background: rgba(194, 66, 12, 0.045);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-7);
}
.tldr-title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-accent-ink);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
.tldr ul { margin: 0; padding-left: 1.2em; }
.tldr li {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.tldr li:last-child { margin-bottom: 0; }

/* FAQ */
.faq { margin-top: var(--space-7); }
.faq-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--color-text-mute);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-4);
  margin-bottom: var(--space-5);
}
.faq-item { border-bottom: 1px solid var(--color-rule); padding: var(--space-4) 0; }
.faq-q { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.faq-a { color: var(--color-text-mute); margin: 0; }

/* article footer + tags + share */
.article-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-mute);
  border: 1px solid var(--color-rule);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}
.tag:hover { color: var(--color-accent); border-color: var(--color-accent); }

.share { font-family: var(--font-sans); }
.share-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-mute);
  margin: 0 0 var(--space-3);
}
.share-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.share-btn:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.share-copy.is-copied { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* sidebar (desktop only) */
.sidebar { display: none; }
.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
@media (min-width: 1080px) {
  .sidebar-inner {
    position: sticky;
    top: var(--space-5);
  }
}

/* Table of contents */
.toc {
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-3);
}
.toc-title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-text-mute);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc-list li {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-rule);
}
.toc-list li:last-child { border-bottom: none; }
.toc-list a {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  text-decoration: none;
  color: var(--color-text);
  transition: color .15s ease;
}
.toc-list a:hover { color: var(--color-accent); }
.toc-list a:hover .toc-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.toc-num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  flex-shrink: 0;
  min-width: 1.6em;
  padding-top: 0.18em;
  font-variant-numeric: lining-nums tabular-nums;
}
.toc-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.3;
}

/* Sponsored / house ad */
.ad-house {
  border: 1px solid var(--color-rule);
  background: var(--color-bg-elev);
  padding: var(--space-5);
}
.ad-house-disclosure {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4);
  font-weight: 600;
}
.ad-house-kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}
.ad-house-brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
  line-height: 1;
  letter-spacing: -0.015em;
}
.ad-house-logo {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-3);
}
.ad-house-tag {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  line-height: 1.3;
}
.ad-house-features {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-top: 1px solid var(--color-rule);
}
.ad-house-features li {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
  line-height: 1.35;
}
.ad-house-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  transition: background .15s ease;
}
.ad-house-cta:hover { background: var(--color-accent-ink); }

@media (min-width: 1080px) {
  .article {
    max-width: 60rem;
    grid-template-columns: var(--measure) 20rem;
    grid-template-areas:
      "crumbs crumbs"
      "header header"
      "hero hero"
      "ad-top ad-top"
      "disclose disclose"
      "body sidebar"
      "related related";
    column-gap: var(--space-8);
  }
  .breadcrumbs { grid-area: crumbs; }
  .article-header { grid-area: header; }
  .hero { grid-area: hero; }
  .ad-slot-top { grid-area: ad-top; }
  .affiliate-disclosure { grid-area: disclose; }
  .article-body { grid-area: body; max-width: var(--measure); margin: 0; }
  .sidebar { grid-area: sidebar; display: block; }
  .related { grid-area: related; }
}

/* related */
.related { margin-top: var(--space-8); }
.related-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- end-of-article author bio ---------- */
.author-bio {
  margin: var(--space-7) 0 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-elev);
}
.author-bio-kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-text-faint);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.author-bio-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.author-bio-photo {
  width: 110px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
  display: block;
}
.author-bio-text-wrap {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .author-bio-row { flex-direction: column; gap: var(--space-3); }
  .author-bio-photo { width: 100px; }
}
.author-bio-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-xl);
  margin: 0 0 var(--space-1);
  color: var(--color-accent);
  letter-spacing: -0.01em;
}
.author-bio-role {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-mute);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.author-bio-text {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.author-bio-links {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  margin: 0;
}
.author-bio-links a { color: var(--color-accent); text-decoration: underline; }
.author-bio-links a:hover { color: var(--color-accent-ink); }

/* ---------- static page (privacy, terms, contact) ---------- */
.static-page { max-width: var(--container); margin: 0 auto; }
.static-page-header { text-align: center; max-width: 44rem; margin: 0 auto var(--space-8); }
.static-page-title { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 var(--space-3); }
.static-page-body {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
.static-page-body .lede {
  font-family: var(--font-serif);
  font-size: 1.2em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.static-page-body h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--color-text-mute);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-4);
  margin: var(--space-7) 0 var(--space-4);
}
.static-page-body ul { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.static-page-body li { margin-bottom: var(--space-2); }
.static-page-body a { color: var(--color-accent); }
.static-page-body a:hover { color: var(--color-accent-ink); }
.static-page-disclaimer {
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

/* ---------- cookie consent banner ----------
   Mobile-first: compact, edge-pinned, stacked buttons. Scales up on tablet+. */
.cookie-banner {
  position: fixed;
  bottom: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  max-width: 36rem;
  margin: 0 auto;
  background: var(--color-text);
  color: #faf7f0;
  padding: var(--space-4);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  z-index: 100;
  display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
}
.cookie-banner-text a {
  color: #f6c5a8;
  text-decoration: underline;
}
.cookie-banner-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cookie-banner button {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #faf7f0;
  cursor: pointer;
  background: transparent;
  color: #faf7f0;
  width: 100%;
  transition: background .15s ease, color .15s ease;
}
.cookie-banner button.cookie-accept {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.cookie-banner button.cookie-accept:hover { background: var(--color-accent-ink); }
.cookie-banner button.cookie-reject:hover { background: #faf7f0; color: var(--color-text); }
@media (min-width: 600px) {
  .cookie-banner { padding: var(--space-5); }
  .cookie-banner-buttons { flex-direction: row; gap: var(--space-3); }
  .cookie-banner button { width: auto; padding: var(--space-3) var(--space-5); font-size: var(--fs-sm); letter-spacing: 0.18em; }
}

/* ---------- about page ---------- */
.about { max-width: var(--container); margin: 0 auto; }
.about-header { text-align: center; max-width: 44rem; margin: 0 auto var(--space-8); }
.about-title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 var(--space-3); }
.about-body { max-width: var(--measure); margin: 0 auto; font-size: var(--fs-md); line-height: var(--lh-body); }
.about-body .lede {
  font-family: var(--font-serif);
  font-size: 1.25em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.about-body h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--color-text-mute);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-4);
  margin: var(--space-7) 0 var(--space-4);
}
.about-figure {
  margin: var(--space-7) 0;
  text-align: center;
}
.about-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.about-figure figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-top: var(--space-2);
}
.about-staff { margin-top: var(--space-8); }
.about-staff .section-heading,
.about-contact .section-heading { margin-bottom: var(--space-5); }
.staff-card { padding: var(--space-5) 0; border-top: 1px solid var(--color-rule); display: flex; gap: var(--space-5); align-items: flex-start; }
.staff-card:first-of-type { border-top: 1px solid var(--color-text); }
.staff-photo {
  width: 140px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
  display: block;
}
.staff-text { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .staff-card { flex-direction: column; gap: var(--space-3); }
  .staff-photo { width: 120px; }
}
.staff-name { font-size: var(--fs-xl); margin: 0 0 var(--space-1); }
.staff-role {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.staff-bio { color: var(--color-text-mute); margin: 0 0 var(--space-3); }
.staff-links { font-family: var(--font-sans); font-size: var(--fs-sm); margin: 0; }
.about-contact { margin-top: var(--space-8); }

/* ---------- newsletter ---------- */
.newsletter {
  background: var(--color-bg-elev);
  border: 1px solid var(--color-rule);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}
.newsletter-inner { max-width: 36rem; margin: 0 auto; text-align: center; }
.newsletter-title { font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.newsletter-dek { color: var(--color-text-mute); margin: 0 0 var(--space-5); font-size: var(--fs-sm); }
.newsletter-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-mute);
  text-align: left;
  margin-bottom: var(--space-2);
}
/* Mobile-first: stacked input + button with full-width tap targets.
   Side-by-side at 480px+ where there's room. */
.newsletter-row { display: flex; flex-direction: column; gap: var(--space-2); }
.newsletter-row input[type="email"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  background: #fff;
  font-size: var(--fs-base);
}
.newsletter-row input[type="email"]:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.newsletter-row button {
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.newsletter-row button:hover { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
@media (min-width: 480px) {
  .newsletter-row { flex-direction: row; }
}
.newsletter-fineprint { font-size: var(--fs-xs); color: var(--color-text-faint); margin: var(--space-3) 0 0; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--color-bg-elev);
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-9);
  padding: var(--space-8) var(--space-4) var(--space-5);
}
.site-footer-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 720px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}
.masthead-mini {
  font-family: var(--font-serif); font-size: var(--fs-xl);
  margin: 0 0 var(--space-2);
}
.footer-tag { color: var(--color-text-mute); font-size: var(--fs-sm); margin: 0; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.footer-nav h3 {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-mute);
  margin: 0 0 var(--space-3); font-weight: 600;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: var(--space-2); }
.footer-nav a { color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); }
.footer-nav a:hover { color: var(--color-accent); }
.copyright {
  max-width: var(--container-wide);
  margin: var(--space-7) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  font-family: var(--font-sans);
  text-align: center;
}

/* ---------- ad slots ---------- */
.ad-slot {
  min-height: 0;
  margin: 0;
}
.ad-slot:not(:empty) {
  margin: var(--space-6) 0;
  text-align: center;
  background: var(--color-rule-soft);
  padding: var(--space-3);
}

/* Sidebar ad slots reserve their space even when empty — prevents CLS layout
   shift when the ad network injects content after page load. The
   "Advertisement" pseudo-element shows during dev / fallback; the network's
   iframe visually covers it once the slot is filled. */
.sidebar .ad-slot-sidebar-1,
.sidebar .ad-slot-sidebar-2 {
  min-height: 250px;
  background: var(--color-rule-soft);
  display: grid;
  place-items: center;
  margin: 0;
  position: relative;
}
.sidebar .ad-slot-sidebar-1::before,
.sidebar .ad-slot-sidebar-2::before {
  content: "Advertisement";
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-text-faint);
}
.sidebar .ad-slot-sidebar-1:not(:empty)::before,
.sidebar .ad-slot-sidebar-2:not(:empty)::before {
  display: none;
}

/* ---------- focus ring ---------- */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }