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

: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.8000rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1.0000rem);
  --step-0:  clamp(1.0000rem, 0.9130rem + 0.4350vw, 1.2500rem);
  --step-1:  clamp(1.2000rem, 1.0717rem + 0.6413vw, 1.5625rem);
  --step-2:  clamp(1.4400rem, 1.2545rem + 0.9277vw, 1.9531rem);
  --step-3:  clamp(1.7280rem, 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.9860rem, 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.50rem, 0.457rem + 0.217vw, 0.6250rem);
  --space-xs:  clamp(0.75rem, 0.685rem + 0.326vw, 0.9375rem);
  --space-s:   clamp(1.00rem, 0.913rem + 0.435vw, 1.2500rem);
  --space-m:   clamp(1.50rem, 1.370rem + 0.652vw, 1.8750rem);
  --space-l:   clamp(2.00rem, 1.826rem + 0.870vw, 2.5000rem);
  --space-xl:  clamp(3.00rem, 2.739rem + 1.304vw, 3.7500rem);
  --space-2xl: clamp(4.00rem, 3.652rem + 1.739vw, 5.0000rem);
  --space-3xl: clamp(6.00rem, 5.478rem + 2.609vw, 7.5000rem);

  /* 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);

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

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

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

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

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

/* ── 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;
  margin-inline: auto;
  max-inline-size: var(--measure);
  padding-inline: var(--space-m);
}
.l-center--wide { max-inline-size: 78rem; }

.l-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
}
.l-sidebar > :first-child { flex-basis: 18rem; flex-grow: 1; }
.l-sidebar > :last-child  { flex-basis: 0; flex-grow: 999; 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); }