/* Base — reset, body, page-canvas paper texture, main/views shell, type system. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; }
html, body { height: 100%; background: var(--cream); }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-rendering: optimizeLegibility;
  /* Pin Source Serif 4 to opsz 14 site-wide (inherited; Geist has no opsz
     axis so it ignores this). Webflow serves Source Serif 4 as a static cut
     baked at the text optical size (~opsz 14) with no axis, so `auto` optical
     sizing on the variable font rendered too delicate/high-contrast at display
     sizes. Pinning to 14 matches the Webflow rendering exactly. The testimonial
     quote (.review-text) already pins its own opsz 14 — see sections.css. */
  font-variation-settings: 'opsz' 14;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }

/* (Former .grain feTurbulence film-grain overlay removed — replaced by the
   real paper texture tiled on the page canvas below; see --paper-tile in
   tokens.css. Keeping one grain source avoids doubled noise.) */

/* ── Main / views ──────────────────────── */
/* Page canvas carries the paper texture. --paper-tile is the OPAQUE, warm
   original scan, tiled (background-repeat). It intentionally does NOT change
   with the theme — the page keeps the scan's warm, fuzzy wedding-invitation
   feel on every theme (lead's call). NO background-blend-mode (the multiply
   experiment washed the highlights toward gray on dark themes). background-color
   is a pre-load fallback only; the opaque tile covers it. Cards/panels paint
   their own --cream on top (card texture is a later spike). */
.app-main {
  flex: 1; position: relative; overflow: hidden;
  background-color: var(--cream);
  background-image: var(--paper-tile);
}
.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transform: translateY(8px);
  overflow-y: auto;
  background-color: var(--cream);
  background-image: var(--paper-tile);
}
.view.active { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ── Type system ───────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
  /* opsz pinned to 14 globally on body (see base.css body rule) — matches
     the Webflow static Source Serif 4 cut. No font-optical-sizing here. */
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; color: var(--accent); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em { color: var(--champagne); }
p { text-wrap: pretty; }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
}
.eyebrow.on-dark { color: var(--champagne); }

/* Drop cap — restrained editorial flourish */
.dropcap::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  padding: 4px 10px 0 0;
  color: var(--accent);
  font-weight: 400;
}