/* Seasonal props rest on section dividers or the blank preview's lower edge. */
@media (min-width: 781px) {
  .halloween-hero .hero-art {
    background-size: min(104vw, 2100px) auto;
  }
  /* Keep the dark text backdrop, while letting the illustrated side scenes read. */
  html:not([data-theme="light"]) .halloween-hero::before {
    background:
      linear-gradient(90deg, rgb(2 7 17 / 0.12), rgb(2 7 17 / 0.74) 29%, rgb(2 7 17 / 0.74) 71%, rgb(2 7 17 / 0.12)),
      linear-gradient(180deg, rgb(2 7 17 / 0.08), rgb(2 7 17 / 0.20) 60%, #020711 96%);
  }
}

.halloween-host--footer,
.halloween-host--reader,
.halloween-host--legal {
  position: relative;
}

.halloween-scene {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 48px;
  height: 40px;
  pointer-events: none;
  user-select: none;
  opacity: 0.56;
  filter: saturate(0.55) brightness(0.72);
}

.halloween-pumpkin {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  -webkit-user-select: none;
}

html[data-theme="light"] .halloween-scene {
  opacity: 0.42;
  filter: saturate(0.45);
  mix-blend-mode: multiply;
}

/* The base of the trimmed illustration meets the existing footer rule. */
.halloween-scene--footer {
  inset-inline-end: 24px;
  inset-block-end: 100%;
}

body:is(.page-gallery, .page-news) .site-footer.halloween-host--footer {
  margin-block-start: 56px;
}

.halloween-scene--reader {
  inset-inline-start: 8px;
  inset-block-end: 4px;
  width: 36px;
  height: 28px;
  border-block-end: 1px solid var(--line);
}

.halloween-scene--reader .halloween-pumpkin {
  width: 28px;
  height: 28px;
}

.halloween-host--legal {
  padding-block-end: 48px;
  border-block-end: 1px solid var(--line);
}

.halloween-scene--legal {
  inset-inline-end: 12px;
  inset-block-end: 0;
}

@media (max-width: 780px) {
  .site-footer.halloween-host--footer { margin-block-start: 48px; }
  .halloween-scene { width: 40px; height: 32px; }
  .halloween-pumpkin { width: 32px; height: 32px; }
  .halloween-scene--footer { inset-inline-end: 16px; }
}

@media (max-width: 720px) {
  .halloween-scene--reader { width: 30px; height: 24px; }
  .halloween-scene--reader .halloween-pumpkin {
    width: 24px;
    height: 24px;
  }
  .halloween-scene--reader { inset-block-end: -32px; }
}