/* =========================================================
   dd-theme — base reset, typography, layout helpers
   Ported from the approved mockup styles.css. Two intentional
   adaptations vs. the mockup:
     1. .serif / .serif-it font-weight 500 -> 600 — D-03 ships
        only Newsreader 400/600, so the mockup's 500 maps to the
        nearest loaded weight 600 (RESEARCH §CSS Design System Port).
   ========================================================= */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 16px;
  letter-spacing: -0.005em;
}

/* Selección */
::selection { background: var(--ink-1); color: var(--cream); }

/* Tipo */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; }
h4 { font-size: 16px; line-height: 1.3; }

/* Serif accents — mockup uses 500 but only 400/600 load (D-03), so map to 600. */
.serif { font-family: var(--serif); font-weight: 600; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 600; }

.eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-1);
}
.eyebrow-muted { color: var(--muted); }

p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; }

/* Print-safe images */
img { max-width: 100%; display: block; }

button { font-family: inherit; }

/* Layout helpers */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }

/* Reusable section frame */
.section { padding: clamp(56px, 7vw, 112px) 0; }
.section-tight { padding: clamp(40px, 5vw, 72px) 0; }

/* Scroll snap helpers */
.snap-x { scroll-snap-type: x mandatory; overflow-x: auto; }
.snap-x > * { scroll-snap-align: start; }

/* Hide scrollbar but allow scroll */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }