/*
 * base.css — Reset, body, paper grain, shared primitives
 *
 * Rules here apply globally to every page.
 * Primitives (.eyebrow, .rule, .accent, .italic) are used
 * across all templates and should not be moved to page files.
 */

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* ── Paper grain overlay ── */
/* Subtle noise texture over the entire page, matching the warm paper feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(42,36,29,0.18) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  z-index: 0;
}

/* ── Primitives ── */

/* Hairline separator — 0.5px per design spec, no border-radius anywhere */
.rule {
  height: 0.5px;
  background: var(--hairline);
  width: 100%;
  border: none;
}

/* Eyebrow label — DM Sans, 9.5px, 0.32em tracking, uppercase, muted */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Inline accent color — used on the & glyph, seconds, open › */
.accent { color: var(--accent); }

/* Italic prose — Cormorant Garamond weight 300 */
.italic { font-style: italic; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}