/* ── WYLJO Shop — design tokens ─────────────────────────────────
   Fonts loaded via Google Fonts in header.php:
   Fraunces 700 · Instrument Serif italic · Figtree 300/400
──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; border: none; background: none; }
a { color: inherit; text-decoration: none; }

:root {
  --groen:     #7EC8A4;
  --mos:       #3D6B57;
  --goud:      #E8C96A;
  --nacht:     #0D0B14;
  --perkament: #F2EDE4;
  --woud:      #1A2E25;

  --font-display: 'Fraunces', Georgia, serif;
  --font-tagline: 'Instrument Serif', Georgia, serif;
  --font-body:    'Figtree', system-ui, sans-serif;

  --border:      1px solid rgba(26, 46, 37, .08);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-luxe:   cubic-bezier(.22, 1, .36, 1);

  --shadow-sm:   0 2px 8px rgba(13, 11, 20, .06);
  --shadow-md:   0 12px 32px rgba(13, 11, 20, .12);
  --shadow-lg:   0 28px 64px rgba(13, 11, 20, .22);
  --shadow-gold: 0 10px 28px rgba(232, 201, 106, .28);

  --max-w: 1200px;
  --pad-x: 80px;
  --pad-x-sm: 24px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-body); font-weight: 300; background: var(--perkament); color: var(--woud); }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .10s; }
.reveal-d2 { transition-delay: .22s; }
.reveal-d3 { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: .01ms !important; }
}

/* ── TYPE SCALE ── */
.h-display-xl { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.02; color: var(--woud); }
.h-display-lg { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.05; color: var(--woud); }
.h-tagline    { font-family: var(--font-tagline); font-style: italic; font-size: 19px; color: var(--mos); line-height: 1.5; }
.eyebrow      { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--groen); }

@media (max-width: 768px) {
  .h-display-xl { font-size: 36px; }
  .h-display-lg { font-size: 28px; }
}