/* Halloween atmosphere - authorial workshop look for /halloween.html only.
 *
 * Scope: every rule sits inside body.halloween-page main, so the shared portal
 * header, menu, footer and every other page keep their current design. Two
 * original SVGs carry the ornaments: a silver corner web for the plum hero and
 * a plum-ink corner web for the light paper sections, plus a strip of friendly
 * mini pumpkins. Everything is painted as backgrounds and pseudo-elements - no
 * new markup, no JavaScript, no external request, nothing in the accessibility
 * tree, and never over copy, buttons or previews.
 *
 * Loaded as the last stylesheet in <head>, so it refines the layers underneath
 * (halloween.css, hero-v2.css, lanterns.css, headbands.css) without editing them.
 * The stylesheet a section loads from inside #hw-adventures is matched with a
 * more specific selector instead of being rewritten. */

/* ---------- decoration frame ---------- */

body.halloween-page main > section,
body.halloween-page main > nav {
  position: relative;
  isolation: isolate;          /* keeps a decoration behind its own section */
}

/* Ornament clay. The web box shows exactly one half of the symmetric SVG, so
   --atmo-web-w is twice the visible corner width. The pumpkin strip follows the
   section padding curve (clamp 42px / 5.6vw / 84px), which keeps it inside the
   bottom padding at every width and shrinks it on smaller screens. */
body.halloween-page main {
  --atmo-web-visible: 140px;   /* visible corner web; the SVG is 2:1 so the box doubles it */
  --atmo-web-w: calc(var(--atmo-web-visible) * 2);
  --atmo-web-h: var(--atmo-web-visible);
  --atmo-pump-h: clamp(34px, 4.6vw, 76px);
  --atmo-pump-w: calc(var(--atmo-pump-h) * 2.5);
}

/* The hero keeps its own star-dust ::after, so it is excluded here. */
body.halloween-page main > section:not(.hw-hero-v2)::before,
body.halloween-page main > section:not(.hw-hero-v2)::after {
  content: "";
  position: absolute;
  z-index: -1;                 /* above the section surface, under its content */
  pointer-events: none;
  background-repeat: no-repeat;
}

/* Corner web in the outer corner of every decorated paper section. The ink
   variant is dark enough to read on cream; the hero uses the silver one. */
body.halloween-page main #hw-adventures::before,
body.halloween-page main .hw-collection::before,
body.halloween-page main .hw-lanterns::before,
body.halloween-page main .hw-headbands::before,
body.halloween-page main .hw-more::before {
  top: -6px;
  right: 0;
  width: calc(var(--atmo-web-w) / 2);
  height: var(--atmo-web-h);
  background-image: url("/assets/halloween/atmosphere-web-ink.svg");
  background-size: var(--atmo-web-w) var(--atmo-web-h);
  background-position: right calc(var(--atmo-web-w) / -2) top 0;
  opacity: .9;
}

/* Below 960px the heading column reaches the right edge, so the web moves to
   the opposite bottom corner and is mirrored - still clear of the copy. The same
   rule keeps a small, clearly visible web on phones. */
@media (max-width: 959px) {
  body.halloween-page main #hw-adventures::before,
  body.halloween-page main .hw-headbands::before {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    background-position: calc(var(--atmo-web-w) / -2) 0;
  }

  body.halloween-page main .hw-collection::before,
  body.halloween-page main .hw-lanterns::before,
  body.halloween-page main .hw-more::before {
    top: auto;
    bottom: 0;
  }

  body.halloween-page main #hw-adventures::before,
  body.halloween-page main .hw-collection::before,
  body.halloween-page main .hw-lanterns::before,
  body.halloween-page main .hw-headbands::before,
  body.halloween-page main .hw-more::before {
    z-index: -2;               /* stays under the pumpkin strip */
    transform: scaleY(-1);     /* the corner anchor moves to the bottom edge */
  }
}

/* Pumpkin strip: inside the bottom padding, so it never reaches the copy and
   never adds horizontal overflow. */
body.halloween-page main #hw-adventures::after,
body.halloween-page main .hw-headbands::after {
  bottom: 6px;
  right: 2%;
  width: var(--atmo-pump-w);
  height: var(--atmo-pump-h);
  background-image: url("/assets/halloween/atmosphere-pumpkins.svg");
  background-size: contain;
  background-position: right bottom;
  opacity: .95;
}

/* Left-hand clusters, opposite the copy. */
body.halloween-page main .hw-collection::after,
body.halloween-page main .hw-more::after {
  bottom: 6px;
  right: auto;
  left: 2%;
  width: var(--atmo-pump-w);
  height: var(--atmo-pump-h);
  background-image: url("/assets/halloween/atmosphere-pumpkins.svg");
  background-size: contain;
  background-position: left bottom;
  opacity: .95;
}

/* The lanterns section has almost no bottom padding, so its small pair sits in
   the top padding instead - still clear of the heading. */
body.halloween-page main .hw-lanterns::after {
  bottom: auto;
  top: 2px;
  right: 2%;
  width: calc(clamp(28px, 3.2vw, 44px) * 2.5);
  height: clamp(28px, 3.2vw, 44px);
  background-image: url("/assets/halloween/atmosphere-pumpkins.svg");
  background-size: contain;
  background-position: right top;
  opacity: .9;
}

/* ---------- hero: deeper plum light, amber pools, corner webs ---------- */

body.halloween-page main .hw-hero-v2 {
  /* Extra room under the scene so the jump ribbon's arc never clips Buki's
     feet, with or without the motion animation. */
  padding-bottom: clamp(52px, 5.4vw, 72px);
  background-color: #1b0a2c;
  background-image:
    radial-gradient(46% 42% at 9% 84%, rgb(242 116 12 / 30%), transparent 70%),
    radial-gradient(34% 34% at 93% 22%, rgb(255 196 110 / 22%), transparent 72%),
    radial-gradient(118% 86% at 82% 2%, rgb(133 82 182 / 90%), transparent 64%),
    linear-gradient(176deg, #1a0929 0%, #291140 38%, #422064 74%, #5b2f88 100%);
  background-repeat: no-repeat;
}

/* Small silver web in the hero's bottom padding corner: the web that survives
   on every screen where the wide corner webs have no gutter. */
body.halloween-page main .hw-hero-v2::before {
  content: "";
  position: absolute;
  left: auto;
  right: 10px;
  bottom: 4px;
  width: calc(clamp(40px, 6vw, 56px) * 2);
  height: clamp(40px, 6vw, 56px);
  z-index: 0;
  pointer-events: none;
  background: url("/assets/halloween/atmosphere-web.svg") no-repeat;
  background-size: calc(clamp(40px, 6vw, 56px) * 2) clamp(40px, 6vw, 56px);
  background-position: right calc(clamp(40px, 6vw, 56px) * -1) top 0;
  transform: scaleY(-1);
  opacity: .78;
}

/* Silver webs in the hero's outer corners once the page really has a gutter;
   the size follows that gutter so 1366px still shows them without entering the
   copy or the picture. */
@media (min-width: 1348px) {
  body.halloween-page main .hw-hero-v2 {
    --atmo-hero-web: clamp(96px, calc((100vw - 1140px) / 2 - 6px), 140px);
    background-image:
      url("/assets/halloween/atmosphere-web.svg"),
      url("/assets/halloween/atmosphere-web.svg"),
      radial-gradient(46% 42% at 9% 84%, rgb(242 116 12 / 30%), transparent 70%),
      radial-gradient(34% 34% at 93% 22%, rgb(255 196 110 / 22%), transparent 72%),
      radial-gradient(118% 86% at 82% 2%, rgb(133 82 182 / 90%), transparent 64%),
      linear-gradient(176deg, #1a0929 0%, #291140 38%, #422064 74%, #5b2f88 100%);
    background-position:
      calc(var(--atmo-hero-web) * -1) -4px,
      right calc(var(--atmo-hero-web) * -1) top -4px,
      9% 80%,
      93% 22%,
      50% 0,
      50% 0;
    background-size:
      calc(var(--atmo-hero-web) * 2) var(--atmo-hero-web),
      calc(var(--atmo-hero-web) * 2) var(--atmo-hero-web),
      auto, auto, auto, auto;
  }

  body.halloween-page main .hw-hero-v2::before { content: none; }
}

/* Warm rim around the existing Vela/Ori illustration. The artwork itself is
   untouched - only a lantern-lit edge and a deeper cast shadow are added. */
body.halloween-page main .hw-hero-v2 .hw2-stage {
  box-shadow:
    0 0 0 1px rgb(255 214 150 / 42%),
    0 0 0 7px rgb(242 116 12 / 12%),
    0 34px 78px rgb(9 3 18 / 54%),
    inset 0 0 0 1px rgb(255 247 234 / 18%);
}

/* ---------- jump ribbon: one soft paper band, not a flat banner ---------- */

body.halloween-page main .hw-jump {
  border-bottom: 0;
  background: radial-gradient(150% 130% at 50% -14%, #fffaf1 0%, var(--hw-cream-deep) 60%, #f5d9b1 100%);
  box-shadow: 0 18px 36px rgb(42 17 64 / 14%);
  padding-block: clamp(16px, 2vw, 24px);
}

/* The shallow arc rising into the hero: the organic hand-off from the plum night
   to the paper page. Kept at 14px so it stays below Buki's feet. */
body.halloween-page main .hw-jump::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 34px;
  z-index: -1;
  pointer-events: none;
  background: var(--hw-cream-deep);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: drop-shadow(0 -6px 14px rgb(20 8 34 / 20%));
}

body.halloween-page main .hw-jump-list a {
  border-color: var(--hw-line);
  box-shadow: 0 6px 14px rgb(42 17 64 / 10%);
}

/* ---------- adventures: small warm labels, real paper depth ---------- */

body.halloween-page main #hw-adventures {
  background-image:
    radial-gradient(52% 40% at 6% 2%, rgb(255 205 130 / 34%), transparent 70%),
    radial-gradient(44% 34% at 96% 92%, rgb(213 180 233 / 24%), transparent 72%),
    linear-gradient(180deg, #fff9f0 0%, #fdeed8 54%, #fff9f0 100%);
  box-shadow:
    inset 0 20px 32px -22px rgb(69 32 106 / 16%),
    inset 0 -20px 32px -22px rgb(69 32 106 / 16%);
}

body.halloween-page main #hw-adventures .hw-sheet {
  padding: 14px 14px 18px;
  border: 2px solid var(--hw-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  box-shadow: 0 16px 32px rgb(42 17 64 / 12%), inset 0 1px 0 #fff;
}

/* Replaces the tall coloured chips: small plum label, no full-width rectangle.
   More specific than both the !important palette and the 74px rule loaded from
   inside the section. */
body.halloween-page main #hw-adventures .hw-sheet .wm-cat {
  display: inline-block;
  align-self: flex-start;
  min-height: 0;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(69 32 106 / 10%) !important;
  color: var(--hw-plum-700) !important;
  font: 700 12px/1.2 'Segoe UI', system-ui, sans-serif !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgb(69 32 106 / 22%);
}

body.halloween-page main #hw-adventures .hw-page-cta {
  box-shadow: 0 12px 26px rgb(192 90 4 / 30%);
}

/* ---------- coloring collection: warm parchment with light islands ---------- */

body.halloween-page main .hw-collection {
  background-image:
    radial-gradient(46% 32% at 50% 2%, rgb(255 253 246 / 92%), transparent 70%),
    radial-gradient(70% 50% at 6% 4%, rgb(255 196 110 / 30%), transparent 70%),
    radial-gradient(60% 46% at 96% 96%, rgb(213 180 233 / 26%), transparent 72%),
    linear-gradient(180deg, #fdf3e2 0%, #f8e6cf 52%, #fdf3e2 100%);
  box-shadow:
    inset 0 22px 34px -22px rgb(69 32 106 / 22%),
    inset 0 -22px 34px -22px rgb(69 32 106 / 18%);
}

/* Each gallery sits on its own soft island of light instead of a flat band. */
body.halloween-page main .hw-collection .hw-gallery {
  padding: clamp(12px, 1.6vw, 22px);
  border-radius: 26px;
  background: radial-gradient(120% 92% at 50% 0%, rgb(255 255 255 / 78%), rgb(255 255 255 / 0%) 72%);
  box-shadow: 0 20px 44px -30px rgb(42 17 64 / 34%);
}

body.halloween-page main .hw-collection .hw-page-link {
  box-shadow: 0 14px 28px rgb(42 17 64 / 13%);
}

body.halloween-page main .hw-collection .hw-page:nth-child(even) .hw-page-link {
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  box-shadow: 0 18px 34px rgb(42 17 64 / 16%);
}

/* Desktop: the whole gallery description and its preview grid change sides from
   one gallery to the next. DOM order stays heading, grid, details, foot; the
   details and the foot always span the full width underneath. */
@media (min-width: 901px) {
  body.halloween-page main .hw-collection .hw-gallery {
    display: grid;
    grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
    column-gap: clamp(20px, 2.6vw, 46px);
    align-items: start;
  }

  body.halloween-page main .hw-collection .hw-gallery > .hw-heading {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  body.halloween-page main .hw-collection .hw-gallery > ol.hw-pages {
    grid-column: 2;
    grid-row: 1;
  }

  body.halloween-page main .hw-collection .hw-gallery > details,
  body.halloween-page main .hw-collection .hw-gallery > .hw-collection-foot {
    grid-column: 1 / -1;
  }

  body.halloween-page main .hw-collection .hw-gallery:nth-child(even) {
    grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr);
  }

  body.halloween-page main .hw-collection .hw-gallery:nth-child(even) > .hw-heading { grid-column: 2; }
  body.halloween-page main .hw-collection .hw-gallery:nth-child(even) > ol.hw-pages { grid-column: 1; }
}

/* ---------- paper planes per section ---------- */

body.halloween-page main .hw-sheets {
  background-image:
    radial-gradient(54% 38% at 8% 6%, rgb(255 196 110 / 26%), transparent 70%),
    radial-gradient(40% 30% at 94% 94%, rgb(213 180 233 / 20%), transparent 72%),
    linear-gradient(180deg, #fff7ea 0%, #fff2e2 50%, #fff7ea 100%);
}

/* Lanterns and headbands read as one workshop: shared warm gradient and a domed
   hand-off between them, with lantern light on the top right. */
body.halloween-page main .hw-lanterns {
  background-image:
    radial-gradient(60% 48% at 88% 6%, rgb(255 196 110 / 34%), transparent 70%),
    radial-gradient(50% 40% at 8% 100%, rgb(242 116 12 / 16%), transparent 72%),
    linear-gradient(180deg, #fff7ea 0%, #ffe9c9 62%, #ffe2bd 100%);
}

body.halloween-page main .hw-headbands {
  background-image:
    radial-gradient(150% 120px at 50% -40px, #fffaf1 0%, #fffaf1 58%, rgb(255 250 241 / 0%) 59%),
    radial-gradient(46% 36% at 8% 92%, rgb(242 116 12 / 16%), transparent 72%),
    linear-gradient(180deg, #ffe2bd 0%, #ffe9c9 46%, #fff7ea 100%);
}

/* The pack section stays dark plum, now with real depth at both edges. */
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%);
}

body.halloween-page main .hw-game {
  background-image:
    radial-gradient(52% 38% at 10% 10%, rgb(255 196 110 / 26%), transparent 70%),
    radial-gradient(40% 30% at 92% 96%, rgb(213 180 233 / 20%), transparent 72%),
    linear-gradient(180deg, var(--hw-cream-deep) 0%, #fff3e0 60%, var(--hw-cream-deep) 100%);
}

/* Read and listen: warmer at the top right, plum at the bottom left. */
body.halloween-page main .hw-more {
  background-image:
    radial-gradient(50% 38% at 92% 4%, rgb(255 196 110 / 30%), transparent 70%),
    radial-gradient(46% 36% at 6% 96%, rgb(213 180 233 / 30%), transparent 72%),
    linear-gradient(180deg, #fff7ea 0%, #f7e9d8 50%, #fff7ea 100%);
  box-shadow:
    inset 0 20px 32px -22px rgb(69 32 106 / 18%),
    inset 0 -20px 32px -22px rgb(69 32 106 / 16%);
}

/* Read and listen cards: two horizontal paper strips instead of four columns
   with an empty right half. Preview in column one (~180-210px at desktop),
   copy in column two, both vertically centred. The grown-up panel below uses
   the same two cards and gets the same shape. */
@media (min-width: 901px) {
  body.halloween-page main #more .hw-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.halloween-page main #more .hw-resource {
    display: grid;
    grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
    align-items: center;
    column-gap: clamp(14px, 1.8vw, 24px);
    padding: 16px 18px;
  }

  body.halloween-page main #more .hw-resource-preview img {
    width: 100%;
    height: auto;
    object-fit: contain;      /* the whole preview page, never cropped */
  }

  body.halloween-page main #more .hw-resource-links {
    gap: 2px 18px;
  }

  body.halloween-page main #more .hw-resource-links .hw-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- phone: small webs and pumpkins, never a pattern through letters ---------- */

@media (max-width: 760px) {
  /* Small enough to stay inside the 42px bottom padding of every section. */
  body.halloween-page main { --atmo-web-visible: clamp(26px, 3vw, 40px); }

  body.halloween-page main #hw-adventures .hw-sheet { padding: 12px 12px 16px; }
  body.halloween-page main .hw-collection .hw-gallery { padding: 8px; border-radius: 20px; }
}