/* THE HOLIDAY CYPHER — inherited layer.
   Ported from JACKO/scripts/TYPE-SPEC-COVER.md. Direction-agnostic: the masthead
   metrics, scrims and series constants come off the printed covers so the site
   and the books cannot drift apart. Re-keying a holiday changes the [data-key]
   block in site.css and nothing in here. */

@font-face {
  font-family: 'Luckiest Guy';
  src: url('../assets/fonts/LuckiestGuy-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/Baloo2-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Series constants — identical on every book, never re-keyed */
  --series-white: #FFFFFF;
  --series-gold:  #FFD24A;

  /* Masthead metrics, print px -> em */
  --track-eyebrow:  0.167em;
  --track-title:    0.031em;
  --track-subtitle: 0.095em;
  --margin-page: clamp(20px, 4.31vw, 64px);

  /* The covers' own scrims */
  --scrim-top: linear-gradient(180deg, rgb(18 8 28 / .63) 0%, rgb(18 8 28 / .28) 45%, rgb(18 8 28 / 0) 100%);
  --scrim-bottom: linear-gradient(0deg, rgb(18 8 28 / .80) 0%, rgb(18 8 28 / .33) 45%, rgb(18 8 28 / 0) 100%);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --dur-tap:120ms; --dur-micro:180ms; --dur-state:260ms; --dur-enter:420ms; --dur-scene:700ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);

  /* The Static ramp — violet-tinted neutrals, never pure grey. Doubles as the
     site's whole neutral palette, so even the dividers are made of the villain. */
  --static-950:#0E0B12; --static-900:#16121C; --static-800:#241E2C; --static-700:#3A3346;
  --static-600:#514961; --static-500:#6B6279; --static-400:#8E85A0; --static-300:#B0A9BC;
  --static-200:#D2CDD9; --static-100:#E8E5EC; --static-050:#F4F2F6;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
/* height:auto is load-bearing: every img carries width/height attributes to
   reserve space and keep CLS down, and without this they render at their
   natural height and blow the layout out. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Elevation here is outline + scrim + glow, never a drop shadow — that is how
   the printed covers build depth, and it is what stops this reading as a
   generic card-with-a-soft-shadow site. */
:root {
  --elev-1: 0 0 0 2px var(--ink);
  --elev-2: 0 0 0 3px var(--ink), 0 0 0 5px var(--accent-quiet);
  --glow-sm: 0 0 24px -4px rgb(255 122 26 / .45);
  --glow-lg: 0 0 72px -8px rgb(255 122 26 / .55);
}

.masthead-title {
  font-family: 'Luckiest Guy', Impact, sans-serif;
  color: var(--series-white);
  letter-spacing: var(--track-title);
  line-height: .86;
  paint-order: stroke fill;
  -webkit-text-stroke: .074em var(--key-hot);
}
.eyebrow {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  color: var(--series-gold);
  text-transform: uppercase;
}
.ages-chip {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  background: var(--series-gold);
  color: var(--key-deep);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 14px;
  white-space: nowrap;
}

/* Skip link — first focusable thing on every page */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--series-gold); color: #12081C; padding: 12px 18px;
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent-quiet); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}