/* Groundswell Post — static site styles.
   The page look is 100% inline styles (theme tokens) rendered at build time; this file adds only the
   three things inline styles can't do: font-family variables, smooth-scroll, and responsive overrides.
   Mobile rules use !important because they override the desktop inline styles (higher specificity). */

/* Self-hosted fonts (latin subset, variable weight 400–600) — replaces next/font. No external
   request: the woff2s ship from /fonts and are copied into out/fonts by the generator. */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/newsreader.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/geist.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* Hide the horizontal scrollbar on the sticky category nav (it scrolls, but no chrome). */
.catnav { -ms-overflow-style: none; scrollbar-width: none; }
.catnav::-webkit-scrollbar { display: none; }

/* ---- Tablet / small-desktop: soften the widest desktop metrics ---- */
@media (max-width: 900px) {
  .hero-h1 { font-size: 46px !important; }
}

/* ---- Phone: the desktop grids stack ---- */
@media (max-width: 760px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero: two columns → one, tighter vertical rhythm. */
  .hero { grid-template-columns: 1fr !important; gap: 36px !important; padding: 44px 0 40px !important; }
  .hero-h1 { font-size: 34px !important; }
  .hero-lede { font-size: 16px !important; }

  /* Issue header title. */
  .issue-h1 { font-size: 32px !important; }

  /* Story rows: the coverage meter drops below the text instead of a fixed 150px side column. */
  .story { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* The sticky category bar bleeds to the (now 20px) container edge. */
  .catnav { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; }

  /* Archive rows: shrink the issue-number gutter. */
  .arow { grid-template-columns: 64px 1fr 16px !important; gap: 16px !important; }
  .arow-no { font-size: 30px !important; }
  .arow-title { font-size: 18px !important; }
}

@media (max-width: 420px) {
  .hero-h1 { font-size: 29px !important; }
  .issue-h1 { font-size: 27px !important; }
}