/* ═══════════════════════════════════════════════════════════════════════
   MY TOWN NEWS — Design System
   mytown.news · San Francisco hyperlocal news
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:      #1a2744;
  --gold:      #c8943a;
  --cream:     #faf8f3;
  --white:     #ffffff;
  --text:      #1c1c1e;
  --muted:     #6b6560;
  --rule:      #d4cfc6;
  --bg-light:  #f0ede6;
  --bg-dark:   #111827;

  /* Cluster accent — overridden per-cluster via data attribute.
     Defaults are the gold brand hue; see the [data-cluster] block below. */
  --accent:         var(--gold);
  --accent-on-dark: var(--gold);   /* legible on the navy events band */
  --accent-btn:     var(--gold);   /* solid button background          */
  --accent-ink:     var(--navy);   /* text colour on --accent-btn      */

  /* Typography */
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.5rem;      /* 40px */
  --text-4xl:  3.5rem;      /* 56px */

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Layout */
  --container: 1160px;
  --gap:        28px;
  --radius:     3px;
  /* Sticky nav height — drives anchor scroll offsets. Measured at runtime by
     the scrollspy in base.njk and rewritten here if it differs. */
  --nav-h:      52px;

  /* Transitions */
  --ease: 0.18s ease;
}

/* ── Cluster accent overrides ────────────────────────────────────────
   NOT DEFINED HERE. The four accent tokens for every edition are generated
   into an inline <style> block in base.njk, straight from
   src/_data/clusters.json. They used to be hand-written here, which made
   the stylesheet a second source of edition data — and the pairs must be
   contrast-checked rather than eyeballed, since ten of the original twelve
   failed WCAG AA on the navy band before anyone noticed.

   Defaults live in :root above; per-edition values arrive from data.       */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Anchor jumps stop --nav-h below the top plus a little breathing room, so a
     section heading lands clear of the sticky nav instead of under it. */
  scroll-padding-top: calc(var(--nav-h) + 28px);
  -webkit-text-size-adjust: 100%;
}

/* Belt-and-braces: some engines honour scroll-margin on the target more
   reliably than scroll-padding on the scroll container. */
.page-main section[id],
main section[id] {
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Utility ───────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── PDF/Print Button ─────────────────────────────────────────────── */
.pdf-bar {
  background: #f0ede6;
  border-bottom: 1px solid var(--rule);
  padding: 5px var(--sp-6);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-ui);
}

.pdf-bar__label {
  font-size: 0.625rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* Secondary utility — keep it quiet so it doesn't compete with the masthead */
.pdf-bar .btn-pdf {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 3px 10px;
  font-size: 0.5625rem;
}

.pdf-bar .btn-pdf:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.pdf-bar .btn-pdf svg { width: 11px; height: 11px; }

.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ease);
}

.btn-pdf:hover { background: var(--accent); }
.btn-pdf svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Masthead ──────────────────────────────────────────────────────── */
.masthead {
  background: var(--navy);
  color: var(--white);
}

.masthead__inner {
  padding-block: var(--sp-4) var(--sp-3);
  text-align: center;
}

.masthead__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: var(--sp-1);
}

.masthead__title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.masthead__title em {
  color: var(--accent-on-dark);
  font-style: normal;
}

.masthead__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block: var(--sp-2);
}

.masthead__ornament-rule {
  height: 1px;
  width: 44px;
  background: var(--accent-on-dark);
  opacity: 0.6;
}

.masthead__ornament-diamond {
  width: 6px;
  height: 6px;
  background: var(--accent-on-dark);
  transform: rotate(45deg);
}

/* The list of neighborhoods this edition covers. Deliberately quiet — it is
   reassurance for someone checking they are in the right place, not a
   headline. One line on desktop; it wraps rather than truncating on narrow
   screens, because a reader whose neighborhood fell off the end would be
   left with exactly the doubt this line exists to remove. */
.masthead__subtitle {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 10px auto 0;
  max-width: 46rem;
  line-height: 1.6;
  text-wrap: balance;
}

.masthead__subtitle-label {
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.16em;
}

.masthead__bar {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.masthead__bar-date {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.03em;
}
.masthead__bar-date strong {
  color: var(--accent-on-dark);
  font-weight: 800;
  font-size: 1rem;
}

.masthead__bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: 5px;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

.masthead__bar-url {
  color: var(--accent-on-dark);
  font-weight: 600;
  text-decoration: none;
}

/* ── Gold Rule ─────────────────────────────────────────────────────── */
.gold-rule {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
}

/* ── Site Nav ──────────────────────────────────────────────────────── */
.site-nav {
  background: var(--white);
  border-bottom: 2px solid var(--navy);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* Display-serif label naming the sections that follow.
   Allowed to shrink and ellipsise: "Civic Center & Hayes Valley" is nearly
   twice the width of "The Sunset" and was pushing the section tabs into the
   right-hand group. */
.site-nav__label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 15em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -0.01em;
  padding-right: var(--sp-4);
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}

/* Tabs scroll rather than overlap when space runs out. */
.site-nav__links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site-nav__links::-webkit-scrollbar { display: none; }

.site-nav__links a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.site-nav__links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Active section — set by the scrollspy in base.njk */
.site-nav__links a.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.site-nav__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Right-hand utility group */
.site-nav__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  margin-left: auto;
}

/* Brand mark, top left, linking home — the conventional position, and the
   only place in the nav where the logo does work rather than decorate. It
   replaces the "All neighborhoods" text link that used to sit on the right,
   which frees roughly 75px on the element most prone to crowding. */
.site-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--sp-3);
  color: var(--navy);
  transition: color var(--ease);
}

.site-nav__logo svg {
  width: 27px;
  height: 27px;
  display: block;
}

.site-nav__logo:hover { color: var(--accent); }

.site-nav__logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Secondary text link in the right-hand group (About on the homepage) */
.site-nav__aux {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap;
}

.site-nav__aux:hover {
  color: var(--navy);
  border-bottom-color: var(--rule);
}

.site-nav__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.site-nav__subscribe-btn {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Ink is paired to the button background per cluster — navy text on the
     dark purple or navy-blue accents was effectively invisible. */
  color: var(--accent-ink);
  background: var(--accent-btn);
  border-radius: 4px;
  padding: 4px 10px;
  line-height: 1.4;
  text-decoration: none;
  transition: filter 0.15s;
}
.site-nav__subscribe-btn:hover {
  filter: brightness(1.12);
}

/* ── Section Heading ───────────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.section-head__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.section-head__line {
  flex: 1;
  height: 2px;
  background: var(--navy);
}

/* Dark variant */
.section-head--light .section-head__label { color: var(--white); }
.section-head--light .section-head__line  { background: rgba(255,255,255,0.25); }

/* ── Tags / Badges ─────────────────────────────────────────────────── */
.tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.nbadge {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 20px;
  margin-bottom: var(--sp-1);
}

/* ── Byline ────────────────────────────────────────────────────────── */
.byline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}

/* One-line summary beneath the headline */
.dek {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

.story-side .dek,
.news-card .dek { font-size: var(--text-base); }

/* ── Story body text ───────────────────────────────────────────────── */
.story-body p {
  font-size: var(--text-md);
  line-height: 1.72;
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.story-body p:last-child { margin-bottom: 0; }

/* ── Source link ───────────────────────────────────────────────────── */
.source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  margin-top: var(--sp-3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
}

.source-link:hover { border-bottom-color: var(--accent); }

/* ── Pull Quote ────────────────────────────────────────────────────── */
.pullquote {
  border-left: 4px solid var(--accent);
  padding: var(--sp-3) var(--sp-5);
  margin-block: var(--sp-5);
  font-family: var(--font-head);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--navy);
}

/* ── Story image placeholder ────────────────────────────────────────── */
.story-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-light);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  overflow: hidden;
  position: relative;
}

.story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-img__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: rgba(255,255,255,0.8);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  letter-spacing: 0.04em;
}

/* ── Top Stories Grid ──────────────────────────────────────────────── */
.top-stories {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: var(--sp-10);
  overflow: hidden;
}

/* Cards are flex columns so the source link pins to the bottom edge — the
   body text absorbs the slack instead of leaving a gap under short stories. */
.story-main,
.story-side {
  display: flex;
  flex-direction: column;
}

.story-main .story-body,
.story-side .story-body,
.news-card .story-body { flex: 1 1 auto; }

.story-main .source-link,
.story-side .source-link,
.news-card .source-link { margin-top: auto; padding-top: var(--sp-3); }

.story-main {
  padding: var(--sp-6) var(--sp-8);
  border-right: 1px solid var(--rule);
}

.story-main h3 {
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}

.story-side {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--rule);
}

.story-side:last-child { border-right: none; }

.story-side h3 {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}

.story-side .story-img { aspect-ratio: 4/3; }

/* ── Equal-height clamping ─────────────────────────────────────────────
   The lead story column is roughly twice as wide, so at an identical line
   count it carries about twice the words while occupying the same height.
   Headline and dek are clamped too, otherwise a long headline in one card
   pushes its body down relative to its neighbours. */
.story-main h3 { -webkit-line-clamp: 3; line-clamp: 3; }
.story-side h3 { -webkit-line-clamp: 4; line-clamp: 4; }

.story-main h3,
.story-side h3,
.news-card h3,
.story-main .dek,
.story-side .dek,
.news-card .dek,
.story-main .story-body p,
.story-side .story-body p,
.news-card .story-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card h3 { -webkit-line-clamp: 3; line-clamp: 3; }

.story-main .dek,
.story-side .dek,
.news-card .dek { -webkit-line-clamp: 2; line-clamp: 2; }

.story-main .story-body p,
.story-side .story-body p { -webkit-line-clamp: 9; line-clamp: 9; }

.news-card .story-body p { -webkit-line-clamp: 7; line-clamp: 7; }

.news-card {
  display: flex;
  flex-direction: column;
}

/* ── Events Band ───────────────────────────────────────────────────── */
.events-band {
  background: var(--navy);
  color: var(--white);
  padding: var(--sp-8) var(--sp-8) var(--sp-10);
  border-radius: var(--radius);
  margin-bottom: var(--sp-10);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.event-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}

.event-card__desc { flex: 1 1 auto; }
.event-card__source { margin-top: auto; }

.event-card__date {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: var(--sp-2);
}

.event-card__badge {
  display: inline-block;
  background: rgba(200,148,58,0.18);
  border: 1px solid rgba(200,148,58,0.4);
  color: var(--accent-on-dark);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 20px;
  margin-bottom: var(--sp-2);
}

.event-card__title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}

.event-card__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  margin-bottom: var(--sp-3);
}

.event-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.04em;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.event-card__meta li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 7px;
  align-items: start;
}

.event-icon {
  width: 13px;
  height: 13px;
  margin-top: 1px;
  color: var(--accent-on-dark);
  flex-shrink: 0;
}

/* Screen-reader-only label so "📍" style meaning survives without the emoji */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.event-card__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(200,148,58,0.7);
  text-decoration: none;
  margin-top: var(--sp-2);
  transition: color var(--ease);
}

.event-card__source:hover { color: var(--accent-on-dark); }

/* ── More News Grid ────────────────────────────────────────────────── */
.more-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-bottom: var(--sp-10);
}

.news-card {
  border-top: 3px solid var(--accent);
  padding-top: var(--sp-5);
}

.news-card h3 {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: var(--sp-2);
}

/* ── Directory ─────────────────────────────────────────────────────── */
.directory {
  background: var(--bg-light);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.dir-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-10);
  margin-top: var(--sp-6);
}

.dir-col__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.dir-entry {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid #d8d2c8;
}

.dir-entry:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.dir-entry__badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  margin-bottom: var(--sp-1);
}

.dir-entry__badge--new    { background: var(--accent); }
.dir-entry__badge--coming { background: var(--muted); }
.dir-entry__badge--landmark { background: var(--navy); }

.dir-entry__name {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.dir-entry__type {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--sp-1);
  letter-spacing: 0.04em;
}

.dir-entry__detail {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.55;
}

/* ── Directory Accordion Sections ─────────────────────────────────── */
.dir-section {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}

.dir-section__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--ease);
}

.dir-section__toggle:hover { background: var(--bg-light); }

.dir-section__emoji {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.dir-section__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  flex: 1;
}

.dir-section__count {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--accent);
  border-radius: 20px;
  padding: 1px 9px;
}

.dir-section__chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.dir-section__toggle[aria-expanded="true"] .dir-section__chevron {
  transform: rotate(180deg);
}

.dir-section__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--rule);
}

.dir-section__body.is-collapsed { display: none; }

/* ── Directory sub-groups (cuisine / shop type / venue type) ─────── */
.dir-group { margin-bottom: var(--sp-6); }
.dir-group:last-child { margin-bottom: 0; }

.dir-group__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.dir-group__entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-4);
}

/* ── Badges wrapper inside dir-entries ──────────────────────────── */
.dir-entry__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
  min-height: 16px;
}

/* ── Address / phone line ────────────────────────────────────────── */
.dir-entry__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
  margin-top: var(--sp-1);
}

.dir-entry__website {
  display: inline-block;
  margin-top: var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dir-entry__website:hover { color: var(--accent); }

.dir-correction {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
}
.dir-correction__link {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.dir-correction__link:hover { color: var(--accent); }

/* ── Empty-state message ─────────────────────────────────────────── */
.dir-empty {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
  padding: var(--sp-3) 0;
}

/* ── Sources Section ───────────────────────────────────────────────── */
.sources-section {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.editorial-note {
  background: var(--bg-light);
  border-left: 3px solid var(--accent);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.65;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1) var(--sp-8);
}

.source-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--bg-light);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text);
  line-height: 1.5;
}

.source-item:last-child { border-bottom: none; }

.source-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: rgba(200,148,58,0.1);
  border: 1px solid rgba(200,148,58,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--accent);
}

.source-item__title {
  font-weight: 600;
  color: var(--navy);
}

.source-item__org { color: var(--muted); font-size: 0.625rem; }

.source-item a {
  color: var(--accent);
  text-decoration: none;
}

.source-item a:hover { text-decoration: underline; }

/* ── Newsletter ────────────────────────────────────────────────────── */
.newsletter {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  margin-bottom: var(--sp-10);
}

.newsletter__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: var(--sp-3);
}

.newsletter__headline {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  margin-bottom: var(--sp-3);
}

.newsletter__sub {
  color: rgba(255,255,255,0.55);
  font-size: var(--text-md);
  margin-bottom: var(--sp-6);
  max-width: 480px;
  margin-inline: auto;
}

.newsletter__form {
  display: flex;
  gap: var(--sp-2);
  max-width: 420px;
  margin-inline: auto;
}

.newsletter__input {
  flex: 1;
  padding: 11px var(--sp-4);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--ease);
}

.newsletter__input::placeholder { color: rgba(255,255,255,0.35); }
.newsletter__input:focus { border-color: var(--accent-on-dark); }

.newsletter__btn {
  padding: 11px var(--sp-5);
  background: var(--accent-btn);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), transform var(--ease);
}

.newsletter__btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.newsletter__note {
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.4);
  padding-block: var(--sp-10);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: start;
}

.site-footer__brand {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--white);
  margin-bottom: var(--sp-2);
}

.site-footer__brand em {
  color: var(--accent-on-dark);
  font-style: normal;
}

.site-footer__tagline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-5);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

.site-footer__links a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--ease);
}

.site-footer__links a:hover { color: var(--accent-on-dark); }

.site-footer__copy {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  color: rgba(255,255,255,0.2);
  margin-top: var(--sp-5);
  letter-spacing: 0.04em;
}

.site-footer__cluster-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

.site-footer__cluster-links-head {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: var(--sp-2);
}

.site-footer__cluster-links a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color var(--ease);
}

.site-footer__cluster-links a:hover { color: var(--accent-on-dark); }

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-block: var(--sp-6);
}

/* ── Homepage Hero ─────────────────────────────────────────────────── */
.home-hero {
  background: var(--navy);
  color: var(--white);
  padding-block: var(--sp-16) var(--sp-12);
  text-align: center;
}

.home-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}

.home-hero__title {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-5);
}

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

.home-hero__week {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-4);
}
.home-hero__week strong {
  color: var(--gold);
  font-weight: 800;
  font-size: 1rem;
}

.home-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  line-height: 1.6;
  font-family: var(--font-body);
  /* Distribute the lines evenly rather than filling greedily, so the last
     line can't end up holding a single orphaned word. Ignored by browsers
     that don't support it, which simply fall back to normal wrapping. */
  text-wrap: balance;
}

/* ── Cluster Map Section ───────────────────────────────────────────── */
.cluster-map-section {
  padding-block: var(--sp-16);
  background: var(--cream);
}

.cluster-map-section__intro {
  text-align: center;
  margin-bottom: var(--sp-10);
}

.cluster-map-section__title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}

.cluster-map-section__sub {
  font-size: var(--text-md);
  color: var(--muted);
  max-width: 480px;
  margin-inline: auto;
}

.cluster-map-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-10);
  align-items: start;
}

/* The SVG map */
.cluster-map-svg {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  display: block;
}

.cluster-polygon {
  fill: var(--bg-light);
  stroke: var(--white);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s, opacity 0.2s;
}

.cluster-polygon:hover { opacity: 0.85; }
.cluster-polygon.is-live { fill: var(--navy); }
.cluster-polygon.is-active { opacity: 1 !important; }

/* Cluster list panel */
.cluster-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cluster-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
  text-decoration: none;
  color: var(--text);
}

.cluster-list__item:hover,
.cluster-list__item.is-active {
  background: var(--white);
  border-color: var(--rule);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cluster-list__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cluster-list__name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  flex: 1;
}

.cluster-list__hoods {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.cluster-list__badge {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--accent);
  padding: 1px 7px;
  border-radius: 20px;
}

/* ZIP lookup */
.zip-lookup {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
}

.zip-lookup__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--sp-3);
  display: block;
}

.zip-lookup__row {
  display: flex;
  gap: var(--sp-2);
}

.zip-lookup__input {
  flex: 1;
  padding: 9px var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--ease);
}

.zip-lookup__input:focus { border-color: var(--navy); }

.zip-lookup__btn {
  padding: 9px var(--sp-4);
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--ease);
}

.zip-lookup__btn:hover { background: var(--accent); }

.zip-lookup__result {
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
  display: none;
}

.zip-lookup__result--warn,
.zip-lookup__result--multi { display: block; }

.zip-lookup__result--warn { color: var(--muted); }

.zip-lookup__result--multi {
  color: var(--text);
  line-height: 1.5;
}
.zip-lookup__result--multi a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.zip-lookup__result--multi a:hover { text-decoration: underline; }

/* ── Subscribe page ────────────────────────────────────────────────── */
.sub-page {
  max-width: 720px;
  margin: var(--sp-10) auto var(--sp-14);
}

.sub-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--sp-2);
}

.sub-email-wrap { margin-bottom: var(--sp-8); }

.sub-email {
  width: 100%;
  max-width: 420px;
  padding: 11px var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--ease);
  color: var(--text);
}
.sub-email:focus { border-color: var(--navy); }

.sub-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.sub-section-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
}

.sub-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.sub-ctrl-btn {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sub-ctrl-btn:hover { color: var(--navy); }
.sub-ctrl-sep { color: var(--muted); font-size: var(--text-xs); }

/* Cluster card grid */
.sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.sub-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
  position: relative;
  user-select: none;
}
.sub-card:hover { border-color: var(--navy); background: var(--off-white); }
.sub-card.is-selected { border-color: var(--navy); background: rgba(26,39,68,0.04); }

.sub-card__check { position: absolute; opacity: 0; width: 0; height: 0; }

.sub-card__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
}

.sub-card__body {
  flex: 1;
  min-width: 0;
}

.sub-card__name {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

.sub-card__hoods {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  color: var(--muted);
  line-height: 1.4;
}

.sub-card__check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--rule);
  transition: color var(--ease);
  margin-top: 1px;
}
.sub-card.is-selected .sub-card__check-icon { color: var(--navy); }

/* Submit */
.sub-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.sub-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-6);
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--ease), opacity var(--ease);
}
.sub-submit:hover:not(:disabled) { background: var(--accent); }
.sub-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.sub-submit__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.sub-submit.is-loading .sub-submit__label { opacity: 0.6; }
.sub-submit.is-loading .sub-submit__spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.sub-note {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

/* Result */
.sub-result {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  display: none;
}
.sub-result--success {
  display: block;
  background: rgba(45,106,79,0.08);
  border: 1px solid rgba(45,106,79,0.3);
  color: #1d4d34;
}
.sub-result--error {
  display: block;
  background: rgba(139,38,53,0.08);
  border: 1px solid rgba(139,38,53,0.3);
  color: #5a1520;
}

@media (max-width: 600px) {
  .sub-grid { grid-template-columns: 1fr; }
  .sub-section-head { flex-direction: column; gap: var(--sp-2); }
  .sub-controls { margin-left: 0; }
}

/* ── Homepage: Editor's Picks ──────────────────────────────────────── */
.editors-picks {
  padding-block: var(--sp-12);
  background: var(--white);
}

/* ── Divider ───────────────────────────────────────────────────────── */
hr.divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin-block: var(--sp-8);
}

/* ── Page main padding ─────────────────────────────────────────────── */
.page-main {
  padding-block: var(--sp-10) var(--sp-16);
}

/* ── Standing pages (about, privacy, etc.) ─────────────────────────── */
.prose {
  max-width: 700px;
  margin-inline: auto;
}

.prose h1 {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  margin-bottom: var(--sp-3);
  color: var(--navy);
}

.prose h2 {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  margin-block: var(--sp-8) var(--sp-3);
  color: var(--navy);
}

.prose p {
  font-size: var(--text-md);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
  color: var(--text);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
}

.prose ul {
  list-style: disc;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.prose ul li {
  margin-bottom: var(--sp-2);
  font-size: var(--text-md);
  line-height: 1.7;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .events-grid { grid-template-columns: repeat(2, 1fr); }
  .cluster-map-wrap { grid-template-columns: 1fr; }

  /* On one column the list comes first and the map second.
     The list is the navigation — fourteen tappable editions with the
     neighborhoods spelled out — and the map is the illustration. Putting a
     480px picture above it costs a phone reader a full screen of scrolling
     before reaching anything they can act on, and if the map ever renders
     badly it hides the thing it was decorating. */
  .cluster-map-wrap__list { order: 1; }
  .cluster-map-wrap__map  { order: 2; }
}

/* A phone screen is 812px tall; a 480px map is more than half of it for a
   picture nobody can usefully pan on a touch screen we have disabled
   scroll-zoom on. */
@media (max-width: 620px) {
  #sf-map { height: 300px !important; }
}

/* Nav crowding — shed the least useful items first, before anything overlaps.
   The date is the first to go: the masthead bar right above it already says
   "Week of ...", so it is pure duplication. */
@media (max-width: 1100px) {
  .site-nav__meta { display: none; }
}

@media (max-width: 900px) {
  /* Two rows: identity + actions on top, scrolling section tabs beneath. */
  .site-nav__inner {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
  }
  .site-nav__label {
    border-right: none;
    padding-right: 0;
    max-width: none;
    flex: 1 1 auto;
  }
  .site-nav__links {
    order: 3;
    flex-basis: 100%;
    border-top: 1px solid var(--rule);
  }
  .site-nav__links a { padding-left: 0; padding-right: var(--sp-4); }
  .site-nav__logo svg { width: 24px; height: 24px; }
}

@media (max-width: 768px) {
  .top-stories {
    grid-template-columns: 1fr;
  }
  .story-main { border-right: none; border-bottom: 1px solid var(--rule); }
  .story-side { border-right: none; border-bottom: 1px solid var(--rule); }
  .story-side:last-child { border-bottom: none; }
  .more-news-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .dir-cols { grid-template-columns: 1fr; }
  .dir-group__entries { grid-template-columns: 1fr 1fr; }
  .sources-grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-nav__links a { padding-inline: var(--sp-3); font-size: 0.625rem; }
  .site-nav__label { font-size: 0.9375rem; }
  .newsletter__form { flex-direction: column; }
  .masthead__bar-inner { flex-direction: column; text-align: center; gap: var(--sp-1); }
}

@media (max-width: 620px) {
  .site-nav__label { font-size: 0.875rem; }
  .site-nav__links a { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .site-nav__aux { font-size: 0.5625rem; }
}

@media (max-width: 540px) {
  .events-grid { grid-template-columns: 1fr; }
  .container { padding-inline: var(--sp-4); }
  .story-main { padding: var(--sp-5); }
  .events-band { padding: var(--sp-5); }
  .directory { padding: var(--sp-5); }
  .dir-group__entries { grid-template-columns: 1fr; }
  .dir-section__toggle { padding: var(--sp-3) var(--sp-4); }
  .dir-section__body { padding: var(--sp-4); }
}

/* ── Print / PDF styles ────────────────────────────────────────────── */
@media print {
  .pdf-bar, .site-nav, .newsletter, .zip-lookup { display: none !important; }

  /* Screen clamps exist to equalise card heights; on paper they'd only lop
     off text that already fits, so release them and print the full excerpt.
     Directory sections print expanded regardless of their toggle state. */
  h3, .dek, .story-body p {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
  }

  .dir-section__body.is-collapsed {
    display: block !important;
    max-height: none !important;
  }

  body { background: white; font-size: 12px; }
  .container { max-width: 100%; padding-inline: 0; }
  .page-main { padding-block: 0; }

  .top-stories { grid-template-columns: 1fr !important; border: 1px solid #ccc; }
  .story-main { border-right: none !important; border-bottom: 1px solid #ccc; }
  .story-side { border-bottom: 1px solid #ccc; }

  .events-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .more-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dir-cols { grid-template-columns: repeat(2, 1fr) !important; }
  .sources-grid { grid-template-columns: 1fr !important; }

  .masthead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .events-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  @page { margin: 1.5cm; size: letter portrait; }

  h2, h3 { page-break-after: avoid; }
  article, .event-card, .news-card { page-break-inside: avoid; }
}