/* Halloween storybook - the approved illustrated direction, painted with the
   three generated production artworks (night-desktop, night-mobile and the
   transparent paper-border). Scoped to body.halloween-page main and loaded
   AFTER atmosphere.css, whose flat gradients and SVG ornaments it replaces.
   No markup, no JavaScript, no fonts, no external request: the scene art is a
   background, the paper framing is a background, and every real control, link,
   fold and description of the page stays exactly where it was. */

/* ---------- 1. retire the earlier SVG ornaments ---------- */

body.halloween-page main .hw-hero-v2::before,
body.halloween-page main .hw-hero-v2::after,
body.halloween-page main #hw-adventures::before,
body.halloween-page main #hw-adventures::after,
body.halloween-page main .hw-collection::before,
body.halloween-page main .hw-collection::after,
body.halloween-page main .hw-lanterns::before,
body.halloween-page main .hw-lanterns::after,
body.halloween-page main .hw-headbands::before,
body.halloween-page main .hw-headbands::after,
body.halloween-page main .hw-more::before,
body.halloween-page main .hw-more::after {
  content: none;
  background-image: none;
}

/* The star dust the hero used to add is part of the night artwork now. */
body.halloween-page main .hw-hero-v2::after { content: none; }

/* ---------- 2. hero: the night world, cream copy left, scene right ---------- */

body.halloween-page main .hw-hero-v2 {
  /* The night artwork keeps its own 16:9 ratio, so at 1920 it really gets its
     1080px and nothing is cut: moon top left, village, lanterns, stone walls and
     every pumpkin stay visible. Below 1025px the original portrait flow and its
     own padding are left to hero-v2.css. */
  background-color: #1b0a2c;
  background-image:
    radial-gradient(46% 40% at 24% 52%, rgb(20 7 33 / 62%) 0%, rgb(20 7 33 / 30%) 55%, rgb(20 7 33 / 0%) 78%),
    url("/assets/halloween/storybook-night-desktop.webp");
  background-position: center, center top;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}

/* Wider stage and the artwork's own height on laptops and desktops. */
@media (min-width: 1025px) {
  body.halloween-page main .hw-hero-v2 {
    display: flex;
    align-items: center;                 /* the copy and the scene sit centred */
    min-height: calc(100vw / 1.78);
    padding-block: clamp(30px, 3.6vw, 64px) clamp(46px, 5vw, 78px);
  }

  body.halloween-page main .hw-hero-v2 .hw2-grid {
    width: min(1500px, 84vw);            /* .wrap pins width, so set width itself */
    max-width: none;
    margin-inline: auto;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: clamp(22px, 3vw, 56px);
  }

  body.halloween-page main .hw-hero-v2 .hw2-title {
    max-width: 22ch;                     /* two or three lines */
    font-size: clamp(34px, 3.7vw, 60px);
  }

body.halloween-page main .hw-hero-v2 .hw2-lead {
  max-width: 40ch;
}

/* The kicker can cross the moon on narrower desktops (1180 px): a restrained
   dark text shadow keeps it legible without a badge or any layout change. */
body.halloween-page main .hw-hero-v2 .hw2-kicker {
  text-shadow: 0 2px 6px rgb(20 7 33 / 74%), 0 0 2px rgb(20 7 33 / 62%);
}

  /* Reference action hierarchy: two primary calls first, the two paper-play
     links second. Intrinsic widths, left aligned, phone order untouched. */
  body.halloween-page main .hw-hero-v2 .hw2-actions {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
  }

  body.halloween-page main .hw-hero-v2 .hw2-actions .hw2-play { grid-area: 1 / 1; }
  body.halloween-page main .hw-hero-v2 .hw2-actions .hw2-color { grid-area: 1 / 2; }
  body.halloween-page main .hw-hero-v2 .hw2-actions .hw2-draw { grid-area: 2 / 1; }
  body.halloween-page main .hw-hero-v2 .hw2-actions .hw-cta-quiet[href="#halloween-lanterns"] { grid-area: 2 / 2; }
}

/* The canonical scene keeps its own picture; the frame becomes a warm lantern
   glow instead of the old thin ring, and the whole panel gets illustrated
   weight without stretching the round moon anywhere. */
body.halloween-page main .hw-hero-v2 .hw2-stage {
  border-radius: 26px;
  box-shadow:
    0 34px 80px rgb(9 3 18 / 58%),
    0 0 70px rgb(242 116 12 / 24%),
    inset 0 0 0 1px rgb(255 224 170 / 16%);
}

/* Portrait night artwork wherever the viewport is taller than it is wide. */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  body.halloween-page main .hw-hero-v2 {
    min-height: 0;
    background-image:
      radial-gradient(96% 44% at 50% 20%, rgb(20 7 33 / 52%) 0%, rgb(20 7 33 / 24%) 60%, rgb(20 7 33 / 0%) 82%),
      url("/assets/halloween/storybook-night-mobile.webp");
    background-position: center, center top;
    background-size: auto, cover;
  }
}

/* ---------- 3. jump ribbon: soft curved cream band ---------- */

body.halloween-page main .hw-jump {
  background: radial-gradient(150% 150% at 50% -30%, #fffdf8 0%, #fff6e6 52%, #f6ddb6 100%);
  box-shadow: 0 22px 44px rgb(42 17 64 / 16%);
}

body.halloween-page main .hw-jump::before {
  top: -30px;
  height: 62px;
  background: radial-gradient(150% 150% at 50% -10%, #fffdf8 0%, #fff6e6 58%, #fff6e6 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: drop-shadow(0 -8px 18px rgb(20 8 34 / 24%));
}

body.halloween-page main .hw-jump-list a {
  background: #fffdf8;
  border-color: rgb(69 32 106 / 34%);
  box-shadow: 0 8px 18px rgb(42 17 64 / 12%);
}

/* ---------- 4. adventures: centred heading, warm paper cards ---------- */

body.halloween-page main #hw-adventures .hw-heading {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

body.halloween-page main #hw-adventures .hw-sheet {
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff4e2 100%);
  box-shadow:
    0 26px 48px -28px rgb(42 17 64 / 40%),
    inset 0 1px 0 #fff;
}

/* One warm paper surface per card: the redundant white nested frame goes away,
   the real cover art stays. */
body.halloween-page main #hw-adventures .hw-page-link {
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* Hover and focus stay visible on the cover itself, with the shared focus ring
   kept by the global rule; no second white container anywhere. */
body.halloween-page main #hw-adventures .hw-page-link:hover .hw-page-frame,
body.halloween-page main #hw-adventures .hw-page-link:focus-visible .hw-page-frame {
  box-shadow: 0 0 0 3px rgb(242 116 12 / 55%);
}

body.halloween-page main #hw-adventures .hw-page-frame {
  border-radius: 14px;
  background: transparent;
}

body.halloween-page main #hw-adventures .hw-page-frame img {
  border-radius: 14px;
}

body.halloween-page main #hw-adventures .wm-card-caption {
  font-size: 1.1rem;
}

body.halloween-page main #hw-adventures .hw-page-cta {
  min-height: 52px;
  border-radius: 999px;
  background: var(--hw-orange);
  color: var(--hw-plum-ink);
  box-shadow: 0 14px 28px rgb(192 90 4 / 32%);
}

body.halloween-page main #hw-adventures .hw-page-cta:hover {
  background: var(--hw-orange-soft);
}

/* Laptops and desktops: the adventure wrapper grows with the hero, so the four
   real covers stay bold. Phones and tablets keep the original wrapper. */
@media (min-width: 1025px) {
  body.halloween-page main #hw-adventures .wrap {
    width: min(1500px, 84vw);
    max-width: none;
    margin-inline: auto;
  }
}

/* ---------- 5. illustrated paper framing ---------- */

/* The transparent paper-border art: tree and lantern on the left, fence and
   pumpkins on the right, centre deliberately clear of the copy. */
body.halloween-page main #hw-adventures,
body.halloween-page main .hw-headbands,
body.halloween-page main .hw-more {
  background-image:
    url("/assets/halloween/storybook-paper-border.webp"),
    radial-gradient(120% 120px at 50% -60px, rgb(255 253 248 / 92%) 0%, rgb(255 253 248 / 0%) 62%),
    radial-gradient(70% 50% at 8% 4%, rgb(255 196 110 / 20%), transparent 70%),
    linear-gradient(180deg, #fdf3e3 0%, #fff7ea 46%, #f9e8d2 100%);
  background-position: center bottom, center top, 0 0, center top;
  background-size: 100% auto, auto, auto, auto;
  background-repeat: no-repeat;
  padding-bottom: clamp(160px, 12vw, 230px);
}

/* A soft paper fade over the band's upper part: it removes the hard rectangular
   top seam where the tree meets the paper and keeps dark leaves away from copy,
   the audio control and the grown-up summary, while the lower pumpkins, lamps
   and fence stay crisp. Same treatment for adventures, headbands and
   Read & Listen. */
body.halloween-page main #hw-adventures,
body.halloween-page main .hw-headbands,
body.halloween-page main .hw-more {
  background-image:
    linear-gradient(180deg, rgb(253 243 227 / 94%) 0%, rgb(253 243 227 / 44%) 36%, rgb(253 243 227 / 0%) 72%),
    url("/assets/halloween/storybook-paper-border.webp"),
    radial-gradient(120% 120px at 50% -60px, rgb(255 253 248 / 92%) 0%, rgb(255 253 248 / 0%) 62%),
    radial-gradient(70% 50% at 8% 4%, rgb(255 196 110 / 20%), transparent 70%),
    linear-gradient(180deg, #fdf3e3 0%, #fff7ea 46%, #f9e8d2 100%);
  background-position: center bottom, center bottom, center top, 0 0, center top;
  background-size: 100% calc(100vw / 3), 100% auto, auto, auto, auto;
}

/* ---------- 6. the rest of the paper world ---------- */

body.halloween-page main .hw-collection,
body.halloween-page main .hw-sheets,
body.halloween-page main .hw-game,
body.halloween-page main .hw-lanterns {
  background-image:
    radial-gradient(120% 120px at 50% -60px, rgb(255 253 248 / 90%) 0%, rgb(255 253 248 / 0%) 62%),
    radial-gradient(64% 46% at 92% 4%, rgb(255 196 110 / 22%), transparent 70%),
    radial-gradient(56% 40% at 6% 96%, rgb(213 180 233 / 22%), transparent 72%),
    linear-gradient(180deg, #fdf3e3 0%, #fff7ea 48%, #f9e8d2 100%);
  background-position: center top, 0 0, 0 0, center top;
  background-size: auto, auto, auto, auto;
  background-repeat: no-repeat;
}

/* Lanterns and headbands: one illustrated workshop, cream and plum, with the
   framed previews in warm paper instead of white islands. */
/* Read & Listen story panel: a warm, almost opaque cream surface with a subtle
   plum edge and a soft shadow replaces the dashed orange frame, so the story
   copy and the audio control never sit on the dark leaves below. Padding,
   layout and the audio element stay exactly as they were. */
body.halloween-page main .hw-listen {
  border: 1px solid rgb(69 32 106 / 24%);
  border-radius: 20px;
  background: rgb(255 250 241 / 94%);
  box-shadow:
    0 20px 38px -24px rgb(42 17 64 / 38%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

body.halloween-page main .hw-lanterns .hw-lanterns-thumb,
body.halloween-page main .hw-headbands .hw-headbands-thumb {
  border-color: rgb(69 32 106 / 22%);
  background: linear-gradient(180deg, #fffdf8 0%, #ffe9c9 100%);
  box-shadow: 0 14px 28px -18px rgb(42 17 64 / 42%), inset 0 1px 0 #fff;
}

body.halloween-page main .hw-lanterns .hw-lanterns-thumb img,
body.halloween-page main .hw-headbands .hw-headbands-thumb img {
  background: #fffdf8;
}

body.halloween-page main .hw-lanterns .hw-lanterns-name,
body.halloween-page main .hw-headbands .hw-headbands-name {
  color: var(--hw-plum-800);
}

/* The pack section is the night world again: keep its depth, add the village
   glow so it does not read as a flat slab. */
body.halloween-page main .hw-ori {
  background-image:
    radial-gradient(46% 40% at 84% 6%, rgb(133 82 182 / 46%), transparent 68%),
    radial-gradient(60% 46% at 10% 96%, rgb(20 6 32 / 60%), transparent 72%),
    linear-gradient(180deg, var(--hw-plum-800) 0%, #2b1140 62%, var(--hw-plum-900) 100%);
  box-shadow:
    inset 0 26px 40px -24px rgb(10 3 18 / 60%),
    inset 0 -26px 40px -24px rgb(10 3 18 / 50%);
}

/* ---------- 7. tablets and phones ---------- */

@media (max-width: 900px) {
  body.halloween-page main #hw-adventures,
  body.halloween-page main .hw-headbands,
  body.halloween-page main .hw-more {
    background-image:
      url("/assets/halloween/storybook-paper-border-mobile.webp"),
      radial-gradient(120% 100px at 50% -50px, rgb(255 253 248 / 92%) 0%, rgb(255 253 248 / 0%) 62%),
      linear-gradient(180deg, #fdf3e3 0%, #fff7ea 46%, #f9e8d2 100%);
    background-position: center bottom, center top, center top;
    background-size: 100% auto, auto, auto;
    padding-bottom: calc(33.4vw + 20px);
  }
}

@media (max-width: 760px) {
  body.halloween-page main .hw-hero-v2 .hw2-grid {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
  }

  body.halloween-page main .hw-hero-v2 .hw2-title { max-width: none; }
  body.halloween-page main .hw-hero-v2 .hw2-stage { border-radius: 20px; }

  body.halloween-page main #hw-adventures .hw-sheet { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body.halloween-page main .hw-jump::before { filter: none; }
}