/* ─────────────────────────────────────────────────────────────
   Songs — default theme
   Light, near-monochrome, hard radius, editorial type hierarchy.
   Type & space generated via utopia.fyi (320 → 1240 viewport).
   ───────────────────────────────────────────────────────────── */

/* Newsreader is self-hosted to keep the production path on a single
   static binary and to avoid the FOUT-driven wordmark shift we got from
   Google Fonts' &display=swap. font-display: optional means: use the
   font only if it can be applied within the browser's short fetch
   window. On first visit the user sees the system serif fallback;
   subsequent visits hit the cache and render Newsreader immediately.
   This trades brand-fidelity on cold visits for guaranteed zero shift.
   The variable font carries weights 400 to 700 in a single file. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src:
    url("/static/fonts/newsreader-latin-normal.woff2") format("woff2-variations"),
    url("/static/fonts/newsreader-latin-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 700;
  font-display: optional;
  src:
    url("/static/fonts/newsreader-latin-italic.woff2") format("woff2-variations"),
    url("/static/fonts/newsreader-latin-italic.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* Color — warm paper, oxide-red accent */
  --color-bg: #f6f3ec;
  --color-surface: #ffffff;
  --color-ink: #161514;
  --color-ink-soft: #3a3835;
  --color-ink-muted: #6c6963;
  --color-rule: #161514;
  --color-rule-soft: #c9c4b8;
  --color-accent: #b8330a;
  --color-accent-ink: #ffffff;
  --color-highlight: #f6e7c1;

  /* Typography — serif headlines, system sans body */
  --font-serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid clamp, ratios 1.2 → 1.25 */
  --step--2: clamp(0.6944rem, 0.6614rem + 0.165vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  --step-0: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0717rem + 0.6413vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2545rem + 0.9277vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4607rem + 1.3367vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.6938rem + 1.8989vw, 3.0518rem);
  --step-5: clamp(2.4883rem, 1.9532rem + 2.6757vw, 3.8147rem);
  --step-6: clamp(2.986rem, 2.2434rem + 3.7128vw, 4.7684rem);

  /* Space scale — fluid clamp */
  --space-3xs: clamp(0.25rem, 0.228rem + 0.109vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.457rem + 0.217vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.685rem + 0.326vw, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.37rem + 0.652vw, 1.875rem);
  --space-l: clamp(2rem, 1.826rem + 0.87vw, 2.5rem);
  --space-xl: clamp(3rem, 2.739rem + 1.304vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.652rem + 1.739vw, 5rem);
  --space-3xl: clamp(6rem, 5.478rem + 2.609vw, 7.5rem);

  /* Shape — hard radius, no exceptions */
  --radius: 0;
  --radius-pill: 0;

  /* Rules */
  --rule-thin: 1px solid var(--color-rule);
  --rule-thick: 2px solid var(--color-rule);
  --rule-soft: 1px solid var(--color-rule-soft);

  /* Focus ring — accent outline shared by every text input's :focus */
  --focus-ring: 2px solid var(--color-accent);

  /* Measure */
  --measure: 65ch;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
}

img,
svg,
audio,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--color-accent);
}

/* Visible keyboard focus on every interactive element. The reset above strips
   button borders, and text inputs carry their own --focus-ring on :focus; this
   extends the same ring to links, buttons, and the native <details> summaries
   (masthead menus, comment actions) that otherwise leaned solely on the UA
   default. :focus-visible so a pointer click doesn't draw it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ── Layout primitives (CUBE composition) ─────────────────── */
.l-stack > * + * {
  margin-block-start: var(--space-s);
}
.l-stack--m > * + * {
  margin-block-start: var(--space-m);
}
.l-stack--l > * + * {
  margin-block-start: var(--space-l);
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.l-center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  padding-inline: var(--space-m);
  margin-inline: auto;
}
.l-center--wide {
  max-inline-size: 78rem;
}

.l-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
}
.l-sidebar > :first-child {
  flex-grow: 1;
  flex-basis: 18rem;
}
.l-sidebar > :last-child {
  flex-grow: 999;
  flex-basis: 0;
  min-inline-size: 60%;
}

/* ── Utility ──────────────────────────────────────────────── */
.u-rule-top {
  border-block-start: var(--rule-thin);
}
.u-rule-bottom {
  border-block-end: var(--rule-thin);
}
.u-rule-thick {
  border-block-end: var(--rule-thick);
}
.u-muted {
  color: var(--color-ink-muted);
}
.u-mono {
  font-family: var(--font-mono);
}
.u-serif {
  font-family: var(--font-serif);
}
.u-measure {
  max-inline-size: var(--measure);
}

/* Skip link — the first focusable element on every page. Visually hidden
   until focused (same clip technique as .u-visually-hidden), then a visible
   chip pinned to the top corner. Lets keyboard users jump past the masthead
   nav straight to <main id="main">. z-index clears the masthead menus (max 10). */
.u-skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-surface);
  border: var(--rule-thick);
}
.u-skip-link:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}