/* ============================================================
   Base — reset, document defaults, layout container, shared
   primitives (eyebrow label, scroll-reveal animation).
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ember);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block}

.wrap{max-width:1320px;margin:0 auto;padding:0 48px}
@media(max-width:720px){.wrap{padding:0 24px}}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);display:inline-flex;align-items:center;gap:10px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);flex-shrink:0}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}