/* Wondermaths Halloween special, 2026-09-26.
   Seasonal palette: saturated plum and purple, pumpkin orange, cream.
   Headings keep the portal Poppins Black 900 voice; the wordmark stays Fredoka. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/poppins-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/poppins-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.halloween-page {
  --hw-plum-900: #25103b;
  --hw-plum-800: #33164d;
  --hw-plum-700: #45206a;
  --hw-plum-600: #5b2a86;
  --hw-plum-ink: #2a1140;
  --hw-lavender: #d9bcf5;
  --hw-orange: #f2740c;
  --hw-orange-deep: #c05a04;
  --hw-orange-soft: #ffa24d;
  --hw-cream: #fff7ea;
  --hw-cream-deep: #ffe9c9;
  --hw-gold: #f7c56c;
  --hw-line: #e7d8f2;
  --hw-shadow: 0 18px 40px rgb(42 17 64 / 26%);
  --portal-ink: #17324d;
  --portal-purple: #174a7e;
  --portal-line: #e7d8f2;
  --portal-soft: #fff7ea;
  background: var(--hw-cream);
  color: var(--hw-plum-ink);
}

body.halloween-page .wrap {
  width: min(1200px, calc(100% - 64px));
}

body.halloween-page :is(h1, h2, h3) {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: -.03em;
  line-height: 1.06;
  overflow-wrap: break-word;
  color: var(--hw-plum-ink);
}

/* Headings on the dark plum bands must stay cream. This selector is more
   specific than the generic dark-ink rule above, so the hero title and the
   Ori heading keep comfortable contrast instead of near-black-on-purple. */
body.halloween-page .hw-hero :is(h1, h2, h3),
body.halloween-page .hw-ori :is(h2, h3) {
  color: var(--hw-cream);
}

body.halloween-page .hw-hero .hw-title-accent { color: var(--hw-orange-soft); }

body.halloween-page :is(a, button, summary):focus-visible {
  outline: 3px solid var(--hw-orange) !important;
  outline-offset: 4px;
}

/* ---------- Header ----------
   User correction 26 Sep: the header is the canonical world-life header from
   world-menu.css (white paper, Fredoka wordmark and nav, navy For parents pill,
   navy Menu pill and white dropdown on small screens). The seasonal palette
   starts below it, so only this block is restated here. */

body.halloween-page .portal-header {
  --portal-ink: #174a7e;
  position: relative;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #d2f9f6;
  color: #174a7e;
}

body.halloween-page .portal-header > .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1600px;
  min-height: 88px;
  padding: 12px clamp(16px, 4vw, 60px);
  box-sizing: border-box;
}

body.halloween-page .portal-header .portal-logo,
body.halloween-page .portal-header .portal-logo > span {
  color: #174a7e !important;
}

body.halloween-page .portal-header .portal-logo {
  font-family: Fredoka, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

body.halloween-page .portal-header .portal-rune {
  margin-right: 10px;
  background: #174a7e !important;
}

/* Canonical world-page links: rounded bold Fredoka at 18px, navy ink.
   portal-shell ships system-ui 14px, so this scoped rule wins on specificity. */
body.halloween-page .portal-header > .wrap > nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 600;
}

body.halloween-page .portal-header > .wrap > nav a {
  font-family: Fredoka, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 12px;
  border-radius: 12px;
  color: #174a7e;
  text-decoration: none;
  white-space: nowrap;
}

body.halloween-page .portal-header > .wrap > nav a:hover {
  background: #d2f9f6;
  text-decoration: none;
}

body.halloween-page .portal-header > .wrap > nav a.portal-parent-link {
  padding: 14px 22px;
  border-radius: 999px;
  background: #174a7e !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.halloween-page .portal-header .portal-mobile-menu {
  display: none;
  position: relative;
}

@media (max-width: 1099px) {
  body.halloween-page .portal-header > .wrap > nav { display: none !important; }

  body.halloween-page .portal-header .portal-mobile-menu { display: block; }

  body.halloween-page .portal-header .portal-mobile-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: #174a7e !important;
    color: #fff !important;
    font-family: Fredoka, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    list-style: none;
  }

  body.halloween-page .portal-header .portal-mobile-menu > summary::-webkit-details-marker { display: none; }
  body.halloween-page .portal-header .portal-mobile-menu > summary::marker { content: ""; }
  body.halloween-page .portal-header .portal-mobile-menu > summary::after { display: none; content: ""; }

  body.halloween-page .portal-header .portal-mobile-menu nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 100;
    margin-top: 10px;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    padding: 10px;
    border: 1px solid rgb(23 74 126 / 14%);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgb(23 74 126 / 18%);
    box-sizing: border-box;
  }

  body.halloween-page .portal-header .portal-mobile-menu nav a {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    color: #174a7e;
    font-family: Fredoka, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
  }

  body.halloween-page .portal-header .portal-mobile-menu nav a.portal-parent-link {
    background: #174a7e !important;
    color: #fff !important;
    text-decoration: none !important;
  }
}

@media (min-width: 1100px) {
  body.halloween-page .portal-header .portal-mobile-menu { display: none !important; }
}

@media (max-width: 600px) {
  body.halloween-page .portal-header > .wrap {
    min-height: 72px;
    padding: 12px 16px;
    gap: 8px;
  }

  body.halloween-page .portal-header .portal-logo { font-size: 22px; }
}

/* ---------- Shared blocks ---------- */

.hw-heading {
  max-width: 760px;
  margin-bottom: clamp(26px, 3.6vw, 44px);
}

.hw-heading h2 {
  font-size: clamp(30px, 4.4vw, 54px);
  margin: 0 0 16px;
}

.hw-section-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  margin: 0;
  color: #4b3760;
}

.hw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 26px 0 0;
}

.hw-actions .button { margin: 0; }

body.halloween-page .button {
  border-radius: 100px;
  padding: 15px 28px;
  min-height: 52px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
}

body.halloween-page .hw-cta {
  background: var(--hw-orange);
  color: var(--hw-plum-ink);
  box-shadow: 0 12px 26px rgb(192 90 4 / 32%);
}

body.halloween-page .hw-cta:hover {
  background: var(--hw-orange-soft);
  color: var(--hw-plum-ink);
}

body.halloween-page .hw-cta-quiet {
  background: var(--hw-plum-700);
  color: var(--hw-cream);
}

body.halloween-page .hw-cta-quiet:hover {
  background: var(--hw-plum-600);
  color: var(--hw-cream);
}

.hw-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  color: inherit;
}

.hw-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #59436e;
}

.hw-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.hw-list li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.7;
}

.hw-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hw-orange);
  box-shadow: inset 0 0 0 3px rgb(255 247 234 / 85%);
}

/* ---------- Hero ---------- */

.hw-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(178deg, var(--hw-plum-900) 0%, var(--hw-plum-800) 44%, #4a2270 78%, #63338c 100%);
  color: var(--hw-cream);
  padding-block: clamp(30px, 4.4vw, 62px) clamp(22px, 3.2vw, 46px);
}

.hw-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hw-stars,
.hw-stars::before,
.hw-stars::after {
  position: absolute;
  inset: 0;
  content: '';
}

.hw-stars {
  background-image:
    radial-gradient(2.4px 2.4px at 12% 18%, #fff8e4 40%, rgb(255 248 228 / 0%) 60%),
    radial-gradient(2px 2px at 27% 40%, #fff1cf 40%, rgb(255 241 207 / 0%) 60%),
    radial-gradient(3px 3px at 44% 12%, #ffffff 40%, rgb(255 255 255 / 0%) 60%),
    radial-gradient(2px 2px at 62% 32%, #ffe6b8 40%, rgb(255 230 184 / 0%) 60%),
    radial-gradient(2.6px 2.6px at 78% 14%, #fff8e4 40%, rgb(255 248 228 / 0%) 60%),
    radial-gradient(2px 2px at 92% 44%, #fff1cf 40%, rgb(255 241 207 / 0%) 60%),
    radial-gradient(2.2px 2.2px at 8% 62%, #ffeec6 40%, rgb(255 238 198 / 0%) 60%),
    radial-gradient(2.6px 2.6px at 35% 74%, #fff8e4 40%, rgb(255 248 228 / 0%) 60%),
    radial-gradient(2px 2px at 56% 58%, #ffffff 40%, rgb(255 255 255 / 0%) 60%),
    radial-gradient(2.4px 2.4px at 72% 68%, #ffe6b8 40%, rgb(255 230 184 / 0%) 60%),
    radial-gradient(2px 2px at 88% 78%, #fff1cf 40%, rgb(255 241 207 / 0%) 60%);
  animation: hw-twinkle 5.5s ease-in-out infinite alternate;
}

.hw-stars::before {
  background-image:
    radial-gradient(3.4px 3.4px at 20% 28%, #ffffff 38%, rgb(255 255 255 / 0%) 62%),
    radial-gradient(3px 3px at 66% 20%, #fff8e4 38%, rgb(255 248 228 / 0%) 62%),
    radial-gradient(3.2px 3.2px at 84% 56%, #fff1cf 38%, rgb(255 241 207 / 0%) 62%);
  animation: hw-twinkle 3.8s ease-in-out infinite alternate-reverse;
}

.hw-stars::after {
  inset: 0 0 46% 42%;
  background: radial-gradient(closest-side, rgb(255 231 186 / 16%), rgb(255 231 186 / 0%) 100%);
  filter: blur(6px);
}

.hw-moon {
  position: absolute;
  top: clamp(14px, 4%, 46px);
  right: clamp(26px, 9%, 140px);
  width: clamp(96px, 15vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffaf0 0%, #f8e7bd 56%, #e6c689 100%);
  box-shadow: 0 0 60px 16px rgb(255 231 180 / 26%), 0 0 150px 58px rgb(255 216 150 / 14%);
  pointer-events: none;
}

.hw-floor-glow {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: min(760px, 96%);
  height: 46%;
  transform: translateX(-42%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 160 70 / 34%), rgb(255 160 70 / 0%) 100%);
  animation: hw-pulse 4.6s ease-in-out infinite alternate;
}

.hw-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(10px, 2.6vw, 40px);
  align-items: center;
}

.hw-hero-copy { min-width: 0; }

.hw-title {
  font-size: clamp(36px, 5.2vw, 70px);
  margin: 0 0 18px;
  color: var(--hw-cream);
}

.hw-title-accent { color: var(--hw-orange-soft); }

.hw-lead {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.72;
  color: #f4e6ff;
}

.hw-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hw-facts li {
  padding: 8px 15px;
  border: 1.5px solid rgb(255 247 234 / 42%);
  border-radius: 100px;
  font: 600 13px/1.3 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-cream);
}

.hw-motion-row { margin: 22px 0 0; }

.hw-motion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid rgb(255 247 234 / 55%);
  border-radius: 100px;
  background: rgb(37 16 59 / 42%);
  color: var(--hw-cream);
  font: 600 14px/1.3 'Segoe UI', system-ui, sans-serif;
}

.hw-motion::before { content: '❙❙'; font-size: 12px; letter-spacing: 1px; }
.hw-motion[aria-pressed='true']::before { content: '▶'; }
.hw-motion:hover { background: rgb(37 16 59 / 66%); border-color: var(--hw-cream); }

.hw-hero-art {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: end;
  column-gap: clamp(8px, 1.6vw, 22px);
  /* Decorative collage: never swallow clicks meant for the hero copy/buttons. */
  pointer-events: none;
}

/* User correction 26 Sep: the two previews get their own column beside Buki,
   so both pictures stay uncovered and readable at every width. */
.hw-hero-sheets {
  position: relative;
  grid-column: 1;
  align-self: end;
  z-index: 2;
  width: 100%;
  max-width: 320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 20px);
  pointer-events: none;
}

.hw-hero-sheet {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 0 16px 30px rgb(15 5 26 / 48%);
}

.hw-hero-sheet-a { transform: rotate(-3deg); }
.hw-hero-sheet-b { transform: rotate(3deg); }

/* Pumpkins sit at Buki's feet, in front of him but clear of the previews. */
.hw-hero-pumpkins {
  position: absolute;
  right: 6%;
  bottom: -2%;
  z-index: 4;
  width: min(26%, 150px);
  aspect-ratio: 1 / 1;
}

.hw-hero-pumpkin {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68%;
  height: auto;
  filter: drop-shadow(0 12px 16px rgb(20 6 32 / 40%));
  animation: hw-float 9s ease-in-out infinite;
}

.hw-hero-pumpkin-front {
  left: 40%;
  bottom: -6%;
  width: 50%;
  animation-duration: 8s;
  animation-direction: alternate-reverse;
}

.hw-hero-buki {
  position: relative;
  grid-column: 2;
  justify-self: end;
  align-self: end;
  z-index: 3;
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 22px 26px rgb(20 6 32 / 46%));
  animation: hw-float 7.5s ease-in-out infinite;
}

/* ---------- Coloring collection ---------- */

.hw-collection {
  background: var(--hw-cream);
  padding-block: clamp(42px, 5.6vw, 84px);
  overflow: clip;
}

.hw-pages {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 18px 10px 26px;
  list-style: none;
}

/* ori-pumpkin:start */
/* Eight cards in the first Halloween gallery: four across on a desktop, two on a phone. */
.hw-pages-eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1120px) { .hw-pages-eight .hw-page { margin-inline: 0; } }
.hw-page-download { display: flex; flex-direction: column; gap: 28px; }
/* The card shares its row with three plain cards, so let it give up the few
   pixels the extra download line needs instead of overlapping it. */
.hw-page-download .hw-page-link { min-height: 0; }
.hw-page-download .hw-text-link { display: block; align-self: flex-start; font-size: 13px; color: var(--hw-plum-700); }
/* ori-pumpkin:end */
.hw-page { display: flex; min-width: 0; }

.hw-page:nth-child(1) { z-index: 7; }
.hw-page:nth-child(2) { z-index: 6; }
.hw-page:nth-child(3) { z-index: 5; }
.hw-page:nth-child(4) { z-index: 4; }
.hw-page:nth-child(5) { z-index: 3; }
.hw-page:nth-child(6) { z-index: 2; }
.hw-page:nth-child(7) { z-index: 1; }

.hw-page-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 12px 14px;
  border: 2px solid var(--hw-line);
  border-radius: 18px;
  background: #fff;
  color: var(--hw-plum-ink);
  text-decoration: none;
  box-shadow: 0 14px 28px rgb(42 17 64 / 14%);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.hw-page-link:hover,
.hw-page-link:focus-visible {
  transform: rotate(0deg) translateY(-8px);
  border-color: var(--hw-orange);
  box-shadow: 0 22px 38px rgb(42 17 64 / 24%);
}

.hw-page-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  /* User correction: preview paper is white, not cream. */
  background: #fff;
  overflow: hidden;
}

.hw-page-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hw-page-name {
  font: 700 15px/1.35 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-plum-ink);
}

.hw-page-cta {
  margin-top: auto;
  padding-top: 6px;
  font: 600 13px/1.4 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-plum-600);
}

.hw-page:nth-child(odd) .hw-page-link { transform: rotate(-2.6deg) translateY(12px); }
.hw-page:nth-child(even) .hw-page-link { transform: rotate(2.2deg) translateY(-4px); }
.hw-page:nth-child(3) .hw-page-link { transform: rotate(-1.4deg) translateY(4px); }
.hw-page:nth-child(6) .hw-page-link { transform: rotate(1.6deg) translateY(8px); }

.hw-collection-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 26px);
  border: 2px dashed var(--hw-orange);
  border-radius: 20px;
  background: var(--hw-cream-deep);
}

/* ---------- Ori ---------- */

.hw-ori {
  background: linear-gradient(180deg, var(--hw-plum-800), var(--hw-plum-900));
  color: var(--hw-cream);
  padding-block: clamp(42px, 5.6vw, 84px);
  overflow: clip;
}

.hw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

.hw-ori-art {
  position: relative;
  margin: 0;
  min-width: 0;
}

.hw-ori-art img {
  display: block;
  width: min(100%, 440px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 20px 34px rgb(20 6 32 / 46%));
}

.hw-ori-art figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: #e7d5f7;
}

.hw-ori-copy p { color: #f1e3ff; }
.hw-ori-copy .hw-list li { color: #f1e3ff; }

/* ---------- Game ---------- */

.hw-game {
  background: var(--hw-cream-deep);
  padding-block: clamp(42px, 5.6vw, 84px);
  overflow: clip;
}

.hw-split-flip .hw-game-art { order: 2; }

.hw-game-art {
  margin: 0;
  min-width: 0;
}

.hw-game-art img {
  width: 100%;
  height: auto;
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: 0 22px 44px rgb(42 17 64 / 24%);
  transform: rotate(1.6deg);
}

.hw-game-art figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: #59436e;
}

#game-dialog {
  border: 3px solid var(--hw-orange);
  border-radius: 20px;
  background: var(--hw-cream);
}

#game-dialog::backdrop { background: rgb(37 16 59 / 72%); }

.game-dialog-head h2 {
  font-size: clamp(20px, 2.4vw, 27px);
  color: var(--hw-plum-ink);
}

#game-dialog .close-button {
  border-color: var(--hw-orange);
  color: var(--hw-plum-ink);
}

.hw-dialog-note {
  padding: 24px;
  margin: 0;
  color: #59436e;
}

/* ---------- Worksheets ---------- */

.hw-sheets {
  background: var(--hw-cream);
  padding-block: clamp(42px, 5.6vw, 84px);
}

.hw-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-sheet { display: flex; min-width: 0; }

.hw-sheet-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 14px 14px 18px;
  border: 2px solid var(--hw-line);
  border-radius: 18px;
  background: #fff;
  color: var(--hw-plum-ink);
  text-decoration: none;
  box-shadow: 0 14px 28px rgb(42 17 64 / 12%);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.hw-sheet-link:hover,
.hw-sheet-link:focus-visible {
  transform: translateY(-6px);
  border-color: var(--hw-orange);
  box-shadow: 0 20px 34px rgb(42 17 64 / 22%);
}

.hw-sheet-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 85 / 110;
  border-radius: 12px;
  /* User correction: preview paper is white, not cream. */
  background: #fff;
  overflow: hidden;
}

.hw-sheet-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hw-sheet-age {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--hw-plum-700);
  color: var(--hw-cream);
  font: 700 12px/1.3 'Segoe UI', system-ui, sans-serif;
}

.hw-sheet-name {
  font: 700 18px/1.3 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-plum-ink);
}

.hw-sheet-task {
  font-size: 14px;
  line-height: 1.62;
  color: #59436e;
}

/* ---------- Footer ----------
   User correction 26 Sep: the footer matches the portal footer on the world
   pages (navy #174A7E, white wordmark, white headings, thin white dividers,
   four columns, generous spacing). The seasonal palette stays above it. */

body.halloween-page .portal-footer {
  background: #174A7E;
  color: #fff;
}

body.halloween-page .portal-footer .portal-logo,
body.halloween-page .portal-footer .portal-logo span {
  color: #fff !important;
}

body.halloween-page .portal-footer .portal-logo .portal-rune {
  background: #fff !important;
}

/* The page-wide dark ink rule would otherwise print plum headings on navy. */
body.halloween-page .portal-footer :is(h2, h3) {
  color: #fff !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}

body.halloween-page .portal-footer p,
body.halloween-page .portal-footer a {
  color: #fff;
}

body.halloween-page .portal-footer-intro { border-bottom-color: rgb(255 255 255 / 30%); }
body.halloween-page .portal-footer-bottom { border-top-color: rgb(255 255 255 / 30%); }

body.halloween-page .portal-footer a:focus-visible {
  outline-color: #fff !important;
}

/* ---------- Motion ---------- */

@keyframes hw-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -16px, 0); }
}

@keyframes hw-twinkle {
  from { opacity: .5; }
  to { opacity: 1; }
}

@keyframes hw-pulse {
  from { opacity: .55; transform: translateX(-42%) scale(.94); }
  to { opacity: 1; transform: translateX(-42%) scale(1.04); }
}

body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hw-hero-buki,
  .hw-hero-pumpkin,
  .hw-stars,
  .hw-stars::before,
  .hw-floor-glow {
    animation: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (min-width: 1120px) {
  .hw-page { margin-inline: -11px; }
  .hw-page:hover { z-index: 20; }
  .hw-page-link:hover,
  .hw-page-link:focus-visible { z-index: 20; }
}

@media (max-width: 1119px) {
  .hw-pages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
  .hw-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hw-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* Single column: the two previews sit side by side above Buki, still
     uncovered, so the hero copy and buttons never overlap them. */
  .hw-hero-art {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(12px, 3vw, 22px);
    margin-top: clamp(22px, 5vw, 40px);
  }
  .hw-hero-sheets {
    grid-column: 1;
    order: 1;
    align-self: auto;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2.4vw, 18px);
  }
  .hw-hero-sheet {
    position: static;
    width: 100%;
    transform: none;
  }
  .hw-hero-buki {
    grid-column: 1;
    order: 2;
    width: min(78%, 380px);
  }
  .hw-hero-pumpkins { right: 3%; bottom: 1%; width: min(24%, 130px); }
  .hw-split,
  .hw-split.hw-split-flip { grid-template-columns: minmax(0, 1fr); }
  .hw-split-flip .hw-game-art { order: 0; }
  /* Single-column: park the moon behind the art at the hero floor, off the text. */
  .hw-moon { top: auto; bottom: 0; right: clamp(8px, 5vw, 40px); width: clamp(88px, 20vw, 170px); }
  .hw-game-art img { transform: rotate(0deg); }
}

@media (max-width: 620px) {
  body.halloween-page .wrap { width: calc(100% - 40px); }
  .hw-hero-sheet { padding: 4px; border-radius: 8px; }
  .hw-hero-buki { width: min(84%, 320px); }
  .hw-hero-pumpkins { width: min(26%, 110px); }
  .hw-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-inline: 0; }
  .hw-page:nth-child(odd) .hw-page-link { transform: rotate(-1.4deg); }
  .hw-page:nth-child(even) .hw-page-link { transform: rotate(1.2deg); }
  .hw-sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .hw-page-name { font-size: 14px; }
  .hw-actions .button { width: 100%; }
}

/* ---------- Pumpkin Glow coloring, puzzles and materials ----------
   Added 27 Sep: the collection gained a second group of Pumpkin Glow coloring
   pages (stable ids, no printed page numbers), every puzzle card now opens the
   shared drawing desk, and the finished Pumpkin Glow documents from the same
   source folders are offered as optional downloads with one short story player.
   Nothing in the hero, header or footer changes. */

.hw-heading-next { margin-top: clamp(34px, 4.4vw, 64px); }

/* Six pictures instead of the seven Buki cards, so the deck stays even. */
.hw-pages-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Age band instead of the removed "Page 1" labels. */
.hw-page-band {
  margin-top: 4px;
  font: 700 11px/1.3 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hw-orange-deep);
}

.hw-sheet-cta {
  margin-top: auto;
  padding-top: 8px;
  font: 700 13px/1.4 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-plum-600);
}

.hw-more {
  background: var(--hw-cream-deep);
  padding-block: clamp(42px, 5.6vw, 84px);
}

.hw-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-resource {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 16px 20px;
  border: 2px solid var(--hw-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 28px rgb(42 17 64 / 12%);
}

.hw-resource-preview {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.hw-resource-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.hw-resource-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hw-resource-copy h3 {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 23px);
}

.hw-resource-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #59436e;
}

.hw-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.hw-resource-links .hw-text-link {
  font-size: 14px;
  color: var(--hw-plum-700);
}

.hw-listen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(460px, 46%));
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  margin-top: clamp(26px, 3.4vw, 44px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 2px dashed var(--hw-orange);
  border-radius: 20px;
}

.hw-listen h3 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.9vw, 24px);
}

.hw-listen p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #59436e;
}

.hw-listen audio {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 1119px) {
  .hw-pages-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hw-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hw-listen { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .hw-pages-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-resource-grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .hw-motion-row,
  .hw-sky { display: none; }
}

/* Buki additions: 10-picture gallery and the 16-sheet topics. */
.hw-pages-ten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hw-topic { margin-top: clamp(26px, 3.4vw, 40px); }
.hw-topic > h3 { margin: 0 0 clamp(12px, 1.6vw, 20px); color: #174A7E; font-size: clamp(18px, 2.1vw, 23px); }
.hw-sheet-foot { margin: 14px 0 0; font-size: 14px; }
/* >>> adventure-card-categories:start (generated) >>> */
#hw-adventures .wm-cat[data-category="adding"]{background:#A32E6B !important}
#hw-adventures .wm-cat[data-category="balance"]{background:#2F6BD8 !important}
#hw-adventures .wm-cat[data-category="changes"]{background:#6A3FA0 !important}
#hw-adventures .wm-cat[data-category="counting"]{background:#A8541E !important}
#hw-adventures .wm-cat[data-category="discovery"]{background:#7A5A00 !important}
#hw-adventures .wm-cat[data-category="logic"]{background:#7A4A16 !important}
#hw-adventures .wm-cat[data-category="matching"]{background:#8A5A2B !important}
#hw-adventures .wm-cat[data-category="measuring"]{background:#2E7A46 !important}
#hw-adventures .wm-cat[data-category="memory"]{background:#C0503F !important}
#hw-adventures .wm-cat[data-category="paths"]{background:#46539E !important}
#hw-adventures .wm-cat[data-category="patterns"]{background:#127A7D !important}
#hw-adventures .wm-cat[data-category="puzzles"]{background:#5B3A8C !important}
#hw-adventures .wm-cat[data-category="sequencing"]{background:#1F6F6F !important}
#hw-adventures .wm-cat[data-category="shadow"]{background:#40406E !important}
#hw-adventures .wm-cat[data-category="shapes"]{background:#8A4FA0 !important}
#hw-adventures .wm-cat[data-category="sharing"]{background:#8C2F39 !important}
#hw-adventures .wm-cat[data-category="sorting"]{background:#6E5A2E !important}
#hw-adventures .wm-cat[data-category="symmetry"]{background:#2A5C8A !important}
#hw-adventures .hw-sheet{display:flex;flex-direction:column}
#hw-adventures .wm-cat{display:block;margin:0 0 10px;padding:10px 14px;border-radius:12px;background:#5B6470;color:#fff;font:800 clamp(1rem,1.6vw,1.35rem)/1.25 'Poppins','Segoe UI',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center}
#hw-adventures .hw-page-frame{position:relative}
#hw-adventures .wm-card-name{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:22px 12px 10px;background:linear-gradient(180deg,rgba(7,18,37,0),rgba(7,18,37,.8));color:#fff;font:700 clamp(1rem,1.5vw,1.2rem)/1.25 'Poppins','Segoe UI',sans-serif;text-align:center}
#hw-adventures .wm-card-caption{margin:8px 0 0;color:#2a1140;font:600 1.05rem/1.45 'Poppins','Segoe UI',sans-serif}
#hw-adventures .wm-card-age{margin:4px 0 0;color:#59436e;font:600 .85rem/1.5 'Poppins','Segoe UI',sans-serif}
/* <<< adventure-card-categories:end <<< */

/* >>> hw-more-20261001:start (generated) >>> */
/* Correction 2026-10-01: every Halloween coloring gallery shows at most five
   cards and hides the rest behind a native <details> summary. Only the
   coloring gallery is touched; the hero, Ori, sheets and footer keep their
   current palette and spacing. */
.hw-collection .hw-pages {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  row-gap: clamp(14px, 2vw, 22px);
  min-width: 0;
}

.hw-collection .hw-page,
.hw-collection .hw-page-link,
.hw-collection .hw-page-frame {
  min-width: 0;
}

.hw-collection .hw-page-frame {
  width: 100%;
}

@media (min-width: 1120px) {
  .hw-collection .hw-pages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 621px) and (max-width: 1119px) {
  .hw-collection .hw-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hw-collection .hw-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* First card of the opening gallery keeps its picture, title, CTA and its own
   PDF link; the extra line wraps instead of squeezing the flex column. */
.hw-collection .hw-page-download .hw-page-link { flex: none; }

.hw-collection .hw-page-download .hw-text-link {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Native disclosure: keyboard and touch friendly, at least a 44 px target. */
.hw-coloring-more {
  margin-top: clamp(18px, 2.4vw, 28px);
}

.hw-coloring-more > summary.hw-coloring-more-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  margin: 0 auto;
  padding: 12px 26px;
  border: 2px solid var(--hw-orange);
  border-radius: 100px;
  background: #fff;
  color: var(--hw-plum-700);
  font: 700 16px/1.3 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
  list-style: none;
}

.hw-coloring-more > summary.hw-coloring-more-summary::-webkit-details-marker { display: none; }
.hw-coloring-more > summary.hw-coloring-more-summary::marker { content: ""; }

.hw-coloring-more > summary.hw-coloring-more-summary::after {
  content: "\25BE";
  font-size: 12px;
  transition: transform .2s ease;
}

.hw-coloring-more[open] > summary.hw-coloring-more-summary::after {
  transform: rotate(180deg);
}

.hw-coloring-more > summary.hw-coloring-more-summary:hover {
  background: var(--hw-cream-deep);
}

.hw-coloring-more > summary.hw-coloring-more-summary:focus-visible {
  outline: 3px solid var(--hw-orange);
  outline-offset: 4px;
}

.hw-coloring-more > ol.hw-pages {
  padding-top: 18px;
}
/* <<< hw-more-20261001:end <<< */

/* ---------- 2026-10-04: shorter default view ----------
   Every change below belongs to /halloween.html only. The sections above the
   jump bar keep their approved look; the galleries, the activity sheets and
   the read-and-listen section now open in place instead of being long by
   default. Native <details> only, so the page still works without JavaScript. */

/* Jump bar under the opening. It is static, never sticky, so a jump never
   lands underneath the shared menu. */
.hw-jump {
  background: var(--hw-cream-deep);
  border-bottom: 1px solid var(--hw-line);
  padding-block: clamp(12px, 1.7vw, 20px);
}

.hw-jump .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.hw-jump-label {
  margin: 0;
  font: 700 12px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hw-plum-600);
}

.hw-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-jump-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--hw-plum-700);
  border-radius: 100px;
  background: #fff;
  color: var(--hw-plum-ink);
  font: 700 15px/1.2 'Segoe UI', system-ui, sans-serif;
  text-decoration: none;
}

.hw-jump-list a:hover,
.hw-jump-list a:focus-visible {
  background: var(--hw-plum-700);
  color: var(--hw-cream);
}

/* Jump targets clear the top edge on every screen. */
#hw-adventures,
#hw-collection-title,
#hw-buki-sheets-title,
#hw-more-title,
#halloween-lanterns,
#hw-paper-play-title {
  scroll-margin-top: 18px;
}

/* One wording rule for every disclosure button on the page: the closed label
   names the content, the open label says the same action in reverse. */
.hw-more-label-open { display: none; }
details[open] > summary .hw-more-label-closed { display: none; }
details[open] > summary .hw-more-label-open { display: inline; }

/* style.css paints a 1px hairline above every <details> (the FAQ pattern).
   These four boxes are buttons, not FAQ rows, so the hairline goes away. */
.hw-coloring-more,
.hw-topic-more,
.hw-set-more,
.hw-grownup-more { border-top: 0; }

/* Shared pill used by the section-level disclosures. */
.hw-topic-summary,
.hw-grownup-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--hw-orange);
  border-radius: 100px;
  background: #fff;
  color: var(--hw-plum-700);
  font: 700 16px/1.3 'Segoe UI', system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.hw-topic-summary::-webkit-details-marker,
.hw-grownup-summary::-webkit-details-marker,
.hw-set-summary::-webkit-details-marker { display: none; }

.hw-topic-summary::marker,
.hw-grownup-summary::marker,
.hw-set-summary::marker { content: ""; }

/* A drawn chevron instead of the small triangle glyph: crisp at every size and
   identical to the caret the shared menu already uses. */
.hw-coloring-more > summary.hw-coloring-more-summary::after,
.hw-topic-summary::after,
.hw-grownup-summary::after,
.hw-set-summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -5px;
  font-size: 0;
  border: 0;
  border-right: 2px solid var(--hw-plum-700);
  border-bottom: 2px solid var(--hw-plum-700);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

details[open] > summary.hw-coloring-more-summary::after,
details[open] > .hw-topic-summary::after,
details[open] > .hw-grownup-summary::after,
details[open] > .hw-set-summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

.hw-topic-summary:hover,
.hw-grownup-summary:hover,
.hw-set-summary:hover { background: var(--hw-cream-deep); }

/* Four compact, illustrated topic choices for the sixteen Buki sheets. */
.hw-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}

.hw-topic-grid .hw-topic {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 2px solid var(--hw-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 28px rgb(42 17 64 / 12%);
}

.hw-topic-choice {
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  align-items: flex-start;
}

.hw-topic-thumb {
  flex: 0 0 auto;
  width: clamp(82px, 20vw, 112px);
  border: 2px solid var(--hw-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.hw-topic-thumb img { display: block; width: 100%; height: auto; }

.hw-topic-copy { min-width: 0; }

.hw-topic-copy h3 {
  margin: 0 0 6px;
  font-size: clamp(19px, 2.1vw, 23px);
  color: #174A7E;
}

.hw-topic-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.58;
  color: #59436e;
}

.hw-topic-more { margin-top: 16px; }

.hw-topic-more > .hw-sheet-grid {
  margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hw-topic-more .hw-sheet-foot { margin-top: 16px; }

.hw-grownup-more { margin-top: clamp(20px, 2.6vw, 32px); }

.hw-grownup-more > .hw-grownup-summary {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.hw-grownup-more > .hw-resource-grid { margin-top: clamp(18px, 2.4vw, 28px); }

/* One recognizable Pumpkin Glow set preview, the four sheets behind it. */
.hw-set-summary {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  width: 100%;
  max-width: 760px;
  min-height: 48px;
  padding: clamp(14px, 1.8vw, 18px);
  border: 2px solid var(--hw-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 28px rgb(42 17 64 / 12%);
  cursor: pointer;
  list-style: none;
}

.hw-set-thumb {
  flex: 0 0 auto;
  width: clamp(82px, 20vw, 112px);
  border: 2px solid var(--hw-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.hw-set-thumb img { display: block; width: 100%; height: auto; }

.hw-set-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hw-set-summary { justify-content: flex-start; }

.hw-set-name {
  font: 700 18px/1.3 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-plum-ink);
}

.hw-set-meta {
  font-size: 13px;
  line-height: 1.5;
  color: #59436e;
}

.hw-set-copy .hw-more-label-closed,
.hw-set-copy .hw-more-label-open {
  font: 700 15px/1.4 'Segoe UI', system-ui, sans-serif;
  color: var(--hw-orange-deep);
}

.hw-set-more > .hw-sheet-grid { margin-top: clamp(18px, 2.4vw, 28px); }

/* Pumpkin Surprise: the finished folding card, connected with its real
   open/closed preview. */
.hw-paper-play {
  background: var(--hw-cream-deep);
  padding-block: clamp(42px, 5.6vw, 84px);
}

.hw-paper-play-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 52px);
  align-items: center;
}

.hw-paper-play-art { margin: 0; min-width: 0; }

.hw-paper-play-art a {
  display: block;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 22px 44px rgb(42 17 64 / 24%);
}

.hw-paper-play-art img { display: block; width: 100%; height: auto; }

.hw-paper-play-art figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #59436e;
}

.hw-paper-play h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.4vw, 54px);
}

.hw-paper-play-copy p {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: #4b3760;
}

.hw-paper-play-copy .hw-note { font-size: 14px; color: #59436e; }

.hw-paper-play .hw-actions { margin-top: 4px; }

@media (max-width: 900px) {
  .hw-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .hw-paper-play-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .hw-topic-more > .hw-sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .hw-set-summary { max-width: none; }
  .hw-grownup-more > .hw-grownup-summary { width: 100%; }
}

/* ---------- Coloring galleries: compact desktop row ----------
   On a laptop the set name sits beside its two previews, the hidden part of the
   set opens underneath across the full width, and the download bar closes the
   row. Two portraits stay a readable size instead of stretching to the page
   width, and the whole page loses roughly two thousand pixels of default
   height. Below 901 px the gallery stacks exactly as before. */
.hw-gallery + .hw-gallery { margin-top: clamp(28px, 3.6vw, 54px); }
.hw-gallery .hw-heading-next { margin-top: 0; }
.hw-gallery > .hw-collection-foot { margin-top: clamp(12px, 1.6vw, 18px); }

@media (min-width: 901px) {
  .hw-gallery {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    column-gap: clamp(24px, 3.2vw, 52px);
    align-items: center;
  }

  .hw-gallery > .hw-heading {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 4px;
  }

  .hw-gallery > .hw-heading h2 { font-size: clamp(28px, 3.1vw, 44px); }

  .hw-gallery > ol.hw-pages {
    grid-column: 2;
    grid-row: 1;
    max-width: 560px;
    padding: 6px 0 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hw-gallery > details.hw-coloring-more {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .hw-gallery > .hw-collection-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 12px 20px;
    gap: 4px 20px;
  }

  .hw-gallery > .hw-collection-foot .hw-note { font-size: 13px; }
}