/* sd-base.css — the CSS contract sd-engine.js relies on. Keep it, restyle the rest. */

/* 1. Two-colour theme. Sections flip by SWAPPING the vars, not by restyling. */
:root, .theme-light {
  --sd-paper: #fffdf2;          /* warm white (bg in light theme)   */
  --sd-ink:   #3d4341;          /* brand charcoal (text)            */
  --sd-accent: #fbde22;         /* brand yellow — buttons, icons, highlights (never body text on white) */
  --sd-on-accent: #2e3231;
  --sd-dot: #e3c51e;            /* world-map dots */
  --sd-ink-50: color-mix(in srgb, var(--sd-ink) 50%, transparent);
  --sd-ink-10: color-mix(in srgb, var(--sd-ink) 10%, transparent);
  --sd-radius: 1.5rem;
  color: var(--sd-ink);
}
.theme-dark {                   /* brand-yellow bands (hero, holiday cards, closing CTA) */
  --sd-paper: #fbde22;
  --sd-ink:   #2e3231;
  --sd-accent: #2e3231;
  --sd-on-accent: #fbde22;
  --sd-dot: #c5b13e;
  color: var(--sd-ink);
}
.theme-charcoal {               /* footer, menu, marquee: charcoal with warm-white ink, yellow accent */
  --sd-paper: #2e3231;
  --sd-ink:   #f6f2e2;
  --sd-accent: #fbde22;
  --sd-on-accent: #2e3231;
  color: var(--sd-ink);
}
[data-sd-bg] { background: var(--sd-paper); color: var(--sd-ink); }

/* 2. Hide things that will be revealed — only when JS is running (no-JS users see everything) */
.sd-js [data-sd-reveal], .sd-js [data-sd-slider-reveal] > *, .sd-js [data-sd-header], .sd-js [data-sd-dock] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sd-js [data-sd-reveal] { visibility: visible; } }

/* 3. SplitText output must be transformable */
.sd-word, .sd-line, .sd-char { display: inline-block; will-change: transform; }

/* 4. Page-transition grid (20 × 12 cells generated by JS) */
.sd-transition { position: fixed; inset: 0; z-index: 9998; display: none; pointer-events: none; }
.sd-transition-grid { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sd-transition-row { flex: 1; display: flex; }
.sd-transition-cell { flex: 1; margin: -1px; background: var(--sd-paper); transform: scaleX(0); will-change: transform; }
[data-sd-transition-over] { position: absolute; inset: 0; background: var(--sd-paper); opacity: 0; }

/* 5. Preloader */
[data-sd-preloader] { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; text-align: center; }

/* 6. Menu: a long soft gradient mask that slides up (--sd-mask-y 200% → 0%) */
[data-sd-menu] {
  --sd-mask-y: 0%;
  position: fixed; inset: 0; z-index: 900; display: none;
  background: var(--sd-paper);
  -webkit-mask-image: linear-gradient(#fff 50%, rgba(255,255,255,.9) 62%, rgba(255,255,255,.6) 70%, rgba(255,255,255,.25) 80%, transparent 100%);
          mask-image: linear-gradient(#fff 50%, rgba(255,255,255,.9) 62%, rgba(255,255,255,.6) 70%, rgba(255,255,255,.25) 80%, transparent 100%);
  -webkit-mask-size: 100% 400%;  mask-size: 100% 400%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 var(--sd-mask-y); mask-position: 0 var(--sd-mask-y);
}

/* 7. Header */
[data-sd-header] { position: fixed; inset: 0 0 auto; z-index: 1000; }
[data-sd-header-bg] { position: absolute; inset: 0; background: var(--sd-paper); opacity: 0; z-index: -1; }

/* 8. Components */
[data-sd-slider] { position: relative; overflow: hidden; }
[data-sd-slider] [data-sd-slide] { position: absolute; inset: 0; }
[data-sd-slider] [data-sd-slide] > img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-sd-tabs] { position: relative; overflow: hidden; }
[data-sd-hscroll] { position: relative; }
[data-sd-hscroll] > .sd-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
[data-sd-hscroll-track] { display: flex; gap: 4vw; padding-inline: 50vw; will-change: transform; }
[data-sd-marquee] { overflow: hidden; display: flex; white-space: nowrap; }
[data-sd-marquee-list] { flex: none; display: flex; }
[data-sd-footer-zoom] { position: relative; }
[data-sd-footer-zoom] > .sd-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
[data-sd-torn] { color: var(--sd-paper); height: clamp(24px, 4vw, 64px); line-height: 0; }
[data-sd-modal] { position: fixed; inset: 0; z-index: 1100; display: none; perspective: 1000px; }
[data-sd-modal-over] { position: absolute; inset: 0; background: color-mix(in srgb, var(--sd-ink) 60%, transparent); }
[data-sd-sound-bars] > * { transform-origin: 50% 100%; }
.sd-linocut { display: block; width: 100%; height: 100%; }