/* ============================================================================
   Global styles — single source of truth for fonts, design tokens, and base
   resets. Loaded by every page (index.html, articles.html, post pages).
   Page-specific layout lives in each page; shared chrome (nav/marquee/footer)
   lives in nav.css / chrome.css.
   ============================================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "American Grotesk";
  src: url("fonts/AmericanGroteskCompressed-Heavy.otf") format("opentype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-SemiBoldItalic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Matter Mono";
  src: url("fonts/MatterMonoRegular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Serrif";
  src: url("fonts/Serrif-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --font-display: "American Grotesk", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Roobert", system-ui, sans-serif;
  --font-mono: "Matter Mono", ui-monospace, monospace;
  --font-serif: "Serrif", Georgia, "Times New Roman", serif;
  --bg: #f4f4f2;
  --ink: #111;
  --ink-soft: #2a2a2a;
  --muted: #6b6b6b;
  --hairline: #d8d8d6;
  --accent: #c6f24e;        /* Capsule lime */
  --accent-deep: #9bdb00;
}

/* ---------- Base resets ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }   /* contain decorative bleed; clip is sticky-safe (no scroll container) */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }

/* Shared-chrome placeholders add no box of their own, so the injected nav
   (position: sticky), marquee, and footer behave as direct children of the
   page — otherwise the sticky nav would only stick within the tiny wrapper. */
#site-nav, #site-marquee, #site-footer { display: contents; }

/* Accessible hide — visible to screen readers and crawlers, not rendered. */
.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;
}

/* Text selection — Capsule lime accent, semi-transparent so text shows through. */
::selection      { background: rgba(198, 242, 78, 0.75); }
::-moz-selection { background: rgba(198, 242, 78, 0.75); }