/* ============================================================
   Roulsen — base element styles & editorial primitives
   Lightweight reset + brand defaults. Imported last.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings --- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ============================================================
   Editorial type utilities
   ============================================================ */

.r-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.r-h1 { font-size: var(--fs-h1); font-weight: var(--w-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.r-h2 { font-size: var(--fs-h2); font-weight: var(--w-medium); letter-spacing: var(--ls-head); }
.r-h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); letter-spacing: var(--ls-head); }
.r-h4 { font-size: var(--fs-h4); font-weight: var(--w-semibold); letter-spacing: -0.01em; }
.r-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); font-weight: var(--w-regular); }
.r-body { font-size: var(--fs-body); line-height: var(--lh-normal); }
.r-small { font-size: var(--fs-small); }
.r-caption { font-size: var(--fs-caption); color: var(--text-muted); }

/* Mono eyebrow / label — the music-credits motif */
.r-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Optional cobalt index numeral / dot in front of an eyebrow */
.r-eyebrow .r-mark { color: var(--accent); }

::selection { background: var(--accent); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}