/* ============================================================
   base.css — typography, colors, resets
   Shared across all templates.
   ============================================================ */

/* Fonts: Source Serif 4, Poppins (loaded per-template HTML to avoid blocking) */

/* REVERTED 2026-05-02: previously hid body until variant-loader added
   `variant-loaded` class. On slow 4G mobile this caused a 2-3 second
   blank-screen window that hurt engagement (users assume page broken,
   bounce). Tradeoff was fixing a brief cosmetic flash — bad trade for
   ad-traffic mobile users.

   The brief flash of bare template before variant data populates is
   acceptable. Users see structure (hero, brand mark, CTA) immediately
   on page load, then content fills in. Visible-then-better is much
   better perceived speed than blank-then-complete. */

:root {
  --crimson: #FF0E4D;
  --crimson-dark: #E20B44;
  --accent: #6F2DBD;             /* editorial purple — focus/active states across modal + Stripe */
  --accent-soft: rgba(111, 45, 189, 0.15);
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --ink-faint: #8A8A8A;
  --line: rgba(26, 26, 26, 0.08);
  --cream: #FFFBF4;        /* warm off-white page background */
  --paper: #FFFCF8;         /* off-white card background */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
  --max-article: 680px;
  --max-wide: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Stop iOS Safari from auto-shrinking text when it thinks the page
     is desktop-styled. Without this, headlines can render visibly
     smaller on a real iPhone than they do in DevTools mobile preview. */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* Block any sideways scroll caused by carousels / 100vw breakouts. */
  overflow-x: hidden;
}
html { overflow-x: hidden; }

/* Kill blue tap highlight on iOS/Android */
a, button, [role="button"], input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}

img, video {
  max-width: 100%;
  height: auto;
}

a { color: var(--crimson); }
a.unstyled { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Serif 4', Georgia, serif;
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ----- Loading state visibility ----- */
[data-field]:empty::before {
  content: attr(data-field-fallback-text);
  color: transparent;
}

/* While variant is loading, hide the body to avoid placeholder flash */
body:not(.variant-loaded):not(.variant-load-failed) [data-field-hide-until-loaded] {
  visibility: hidden;
}
body.variant-loaded [data-field-hide-until-loaded] {
  visibility: visible;
}

/* ----- Screen reader only ----- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----- Brand kicker (italic Source Serif uppercase) ----- */
.kicker {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}