/* The season: the strip, the holiday hours and the decorations (inc/season.php).
   Decoration only: nothing here takes a click except the jack-o'-lanterns, and everything that
   moves stands still for prefers-reduced-motion. Colors stay off the site's own controls: the
   season dresses the house, it does not repaint it. */

/* ---- The strip across the top ------------------------------------------------------------ */

.hp-strip { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.5rem 3.25rem; box-sizing: border-box; text-align: center; font-size: 0.9375rem; line-height: 1.35; background: var(--wp--preset--color--ink); color: #fff; }
.hp-strip__text { margin: 0; }
.hp-strip__text b { font-weight: 600; }
.hp-strip a { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 0.35em; }
.hp-strip--halloween { background: #F28C28; color: #1D1D1F; }
.hp-strip__close { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }
.hp-strip__close::before, .hp-strip__close::after { content: ""; position: absolute; left: 15px; right: 15px; top: 21px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.hp-strip__close::after { transform: rotate(-45deg); }
.hp-strip.is-gone { display: none; }

/* ---- Holiday hours in the footer --------------------------------------------------------- */

/* A title and a row of small cards: the date, the holiday, and what the shop does that day. Six across
   on a wide screen, three on a tablet, two on a phone. The next closed day is marked. */
.hp-hours { display: flex; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 var(--wp--preset--spacing--50); padding: 1rem 1.25rem; background: var(--wp--preset--color--surface); border-radius: 18px; scroll-margin-top: calc(var(--hp-header-height) + 1rem); }
.hp-hours__title { flex: none; margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.hp-hours__list { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hp-hours__day { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--wp--preset--color--tile); font-size: 0.8125rem; line-height: 1.25; }
.hp-hours__date { font-weight: 700; color: var(--wp--preset--color--ink); }
.hp-hours__name { color: var(--wp--preset--color--quiet); }
.hp-hours__state { margin-top: 0.2rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.hp-hours__day.is-next { box-shadow: inset 0 0 0 1.5px #D9661F; }
.hp-hours__day.is-next .hp-hours__state { color: #B4501A; }
@media (max-width: 1000px) { .hp-hours { flex-direction: column; align-items: stretch; } .hp-hours__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hp-hours__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Halloween: what floats over every page ---------------------------------------------- */

/* Under the bar (z-index 50) and the phone menu, over the page; never in the way of a click. */
.hp-haunt { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.hp-haunt__web { position: absolute; top: var(--hp-header-height); width: 150px; height: 150px; }
.hp-haunt__web--left { left: 0; }
.hp-haunt__web--right { right: 0; transform: scaleX(-1); }
.hp-haunt__web svg { display: block; width: 100%; height: 100%; fill: none; stroke: #8A8A93; stroke-opacity: 0.5; stroke-width: 1.3; }
@media (max-width: 900px) { .hp-haunt__web { width: 84px; height: 84px; } }

/* Bats cross the window now and then: each flies for the first third of its loop and rests offstage. */
.hp-haunt__bat { position: absolute; left: 0; width: 52px; transform: translateX(-100px); animation: hp-bat-across 27s linear infinite; }
.hp-haunt__bat > span { display: block; animation: hp-bat-bob 1.7s ease-in-out infinite alternate; }
.hp-haunt__bat svg { display: block; width: 100%; height: auto; overflow: visible; fill: #8E7CF0; }
/* The wings are their own shapes and beat from the shoulder, up and down, the way a wing does.
   (A whole bat squashed on one axis read as "some kind of horizontal resizing", Chris, 2026-10-29.) */
.hp-bat__wing { transform-box: fill-box; animation: 0.3s ease-in-out infinite alternate; animation-duration: var(--hp-flap, 0.3s); }
.hp-bat__wing--l { transform-origin: 100% 15%; animation-name: hp-wing-l; }
.hp-bat__wing--r { transform-origin: 0% 15%; animation-name: hp-wing-r; }
@keyframes hp-wing-l { from { transform: rotate(34deg); } to { transform: rotate(-32deg); } }
@keyframes hp-wing-r { from { transform: rotate(-34deg); } to { transform: rotate(32deg); } }
.hp-haunt__bat--1 { top: 22%; animation-delay: -2s; }
.hp-haunt__bat--2 { top: 38%; width: 38px; animation-name: hp-bat-back; animation-duration: 33s; animation-delay: -14s; --hp-flap: 0.24s; }
.hp-haunt__bat--3 { top: 14%; width: 64px; animation-duration: 41s; animation-delay: -26s; --hp-flap: 0.38s; }
.hp-haunt__bat--4 { top: 56%; width: 44px; animation-name: hp-bat-back; animation-duration: 37s; animation-delay: -5s; --hp-flap: 0.28s; }
.hp-haunt__bat--5 { top: 30%; width: 34px; animation-duration: 29s; animation-delay: -20s; --hp-flap: 0.22s; }
@keyframes hp-bat-across { 0% { transform: translateX(-100px); } 32%, 100% { transform: translateX(calc(100vw + 100px)); } }
@keyframes hp-bat-back { 0% { transform: translateX(calc(100vw + 100px)) scaleX(-1); } 32%, 100% { transform: translateX(-100px) scaleX(-1); } }
@keyframes hp-bat-bob { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
/* The witch: one pass across the upper window every 70 seconds or so, the first some seconds after the page opens,
   rising a little as she goes and bobbing on her broom. Far rarer than the bats. */
.hp-haunt__witch { position: absolute; left: 0; top: 16%; width: clamp(90px, 9vw, 130px); transform: translateX(-160px); animation: hp-witch-across 70s linear 14s infinite; }
.hp-haunt__witch > span { display: block; animation: hp-bat-bob 2.2s ease-in-out infinite alternate; }
.hp-haunt__witch svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes hp-witch-across { 0% { transform: translate(-160px, 40px) rotate(-4deg); } 14% { transform: translate(calc(100vw + 160px), -30px) rotate(-8deg); } 14.01%, 100% { transform: translate(-160px, 40px); } }
/* Her mist: soft purple puffs left in the air behind her, growing and fading within a second and a half. */
.hp-haunt__mist { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(142, 124, 240, 0.55) 0%, rgba(142, 124, 240, 0.25) 45%, rgba(142, 124, 240, 0) 70%); filter: blur(3px); animation: hp-mist 1.5s ease-out forwards; }
@keyframes hp-mist { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: translateY(10px) scale(2.2); } }

/* A spider on a thread under the bar, on every page with the site's own bar. */
.hp-season-halloween .wp-site-blocks > header.wp-block-template-part:has(.hp-header)::after {
  content: ""; position: absolute; top: 100%; right: 16%; width: 28px; height: 64px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 120'%3E%3Cpath d='M14 0V100' stroke='%238A8A93' stroke-width='1'/%3E%3Cg stroke='%231D1D1F' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M10 104l-7-6-3 5M10 107l-8-2-2 6M10 109l-7 3-2 6M11 111l-4 6M18 104l7-6 3 5M18 107l8-2 2 6M18 109l7 3 2 6M17 111l4 6'/%3E%3C/g%3E%3Cellipse cx='14' cy='109' rx='5' ry='6' fill='%231D1D1F'/%3E%3Ccircle cx='14' cy='101.5' r='3.5' fill='%231D1D1F'/%3E%3C/svg%3E") no-repeat bottom center / 28px 120px;
  animation: hp-spider-climb 6s ease-in-out infinite alternate;
}
@keyframes hp-spider-climb { from { height: 40px; } to { height: 112px; } }
@media (max-width: 781px) { .hp-season-halloween .wp-site-blocks > header.wp-block-template-part:has(.hp-header)::after { right: 22%; animation-name: hp-spider-climb-short; } }
@keyframes hp-spider-climb-short { from { height: 30px; } to { height: 64px; } }
/* The front page has the night's own spider; a black one over the night would be lost. */
.hp-season-halloween.home .wp-site-blocks > header.wp-block-template-part:has(.hp-header)::after { display: none; }

/* A jack-o'-lantern on some of the tiles, staggered so a three-column grid does not stack them in one column. */
.hp-season-halloween :is(.hp-tile-card, .hp-bento__tile) { position: relative; }
/* On the order page: the "Where it is" box and Messages; in Mailings, the list's second row and a mailing's "Speed by region". */
.hp-season-halloween :is(.hp-tile-card, .hp-bento__tile):nth-child(4n+2)::after,
.hp-season-halloween .hp-jobpage__tile:has(.hp-steps)::after, .hp-season-halloween .hp-messages::after,
.hp-season-halloween li:nth-child(2) > .hpm-listrow::after, .hp-season-halloween .hpm-tiles > .hpm-tile:nth-child(2)::after {
  content: ""; position: absolute; top: 14px; right: 16px; width: 40px; height: 36px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Crect x='46' y='2' width='8' height='16' rx='3' fill='%234E6B2E'/%3E%3Cellipse cx='30' cy='54' rx='26' ry='32' fill='%23D9661F'/%3E%3Cellipse cx='70' cy='54' rx='26' ry='32' fill='%23D9661F'/%3E%3Cellipse cx='50' cy='54' rx='28' ry='34' fill='%23F28C28'/%3E%3Cg fill='%23FFD25A'%3E%3Cpolygon points='34,46 45,46 39.5,35'/%3E%3Cpolygon points='55,46 66,46 60.5,35'/%3E%3Cpolygon points='30,63 70,63 66,73 60,68 55,75 50,68 45,75 40,68 34,73'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  animation: hp-glow 2.6s linear infinite;
}
.hp-season-halloween :is(.hp-tile-card, .hp-bento__tile):nth-child(8n+6)::after { animation-delay: -1.2s; }

/* The footer is the porch: bunting along its top edge and three pumpkins on the step. */
.hp-season-halloween .hp-footer { position: relative; }
.hp-season-halloween .hp-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 34'%3E%3Cpath d='M0 2 Q44 8 88 2 Q132 8 176 2' fill='none' stroke='%238A8A93' stroke-width='1.2'/%3E%3Cpolygon points='6,4 38,6 22,32' fill='%23F28C28'/%3E%3Cpolygon points='50,6 82,4 66,32' fill='%231D1D1F'/%3E%3Cpolygon points='94,4 126,6 110,32' fill='%238E7CF0'/%3E%3Cpolygon points='138,6 170,4 154,32' fill='%23D9661F'/%3E%3C/svg%3E") repeat-x top left / 176px 34px;
}
.hp-season-halloween .hp-footer::after {
  content: ""; position: absolute; top: -58px; right: 7%; width: 168px; height: 60px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 100'%3E%3Cg transform='translate(0 22) scale(0.85)'%3E%3Crect x='46' y='2' width='8' height='16' rx='3' fill='%234E6B2E'/%3E%3Cellipse cx='30' cy='54' rx='26' ry='32' fill='%23D9661F'/%3E%3Cellipse cx='70' cy='54' rx='26' ry='32' fill='%23D9661F'/%3E%3Cellipse cx='50' cy='54' rx='28' ry='34' fill='%23F28C28'/%3E%3Cg fill='%23FFD25A'%3E%3Cpolygon points='34,46 45,46 39.5,35'/%3E%3Cpolygon points='55,46 66,46 60.5,35'/%3E%3Cpolygon points='30,63 70,63 66,73 60,68 55,75 50,68 45,75 40,68 34,73'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(90 0)'%3E%3Crect x='46' y='2' width='8' height='16' rx='3' fill='%234E6B2E'/%3E%3Cellipse cx='30' cy='54' rx='26' ry='32' fill='%23D9661F'/%3E%3Cellipse cx='70' cy='54' rx='26' ry='32' fill='%23D9661F'/%3E%3Cellipse cx='50' cy='54' rx='28' ry='34' fill='%23F28C28'/%3E%3C/g%3E%3Cg transform='translate(196 40) scale(0.6)'%3E%3Crect x='46' y='2' width='8' height='16' rx='3' fill='%234E6B2E'/%3E%3Cellipse cx='50' cy='54' rx='40' ry='34' fill='%23F28C28'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom center / contain;
}

/* ---- Halloween: the front page's night hero ---------------------------------------------- */

/* The night runs up behind the bar (data-dark), and the bar is dark from the first paint with the
   all-white logo (patterns/header.php), so the top of the page is one night (Chris, 2026-10-29:
   "I wish the navigation bar ... blended in with the dark background. You could've chosen the
   completely white logo"). Before that the bar started transparent and was ink on black until the
   script ran, and the white-lettered logo's deep wolf sank into the black. */
.hp-main:has(> .hp-hero--night) { margin-block-start: 0; }
.hp-main > .hp-hero--night { margin-block-start: calc(-1 * var(--hp-header-height)); }
.hp-main > :is(.hp-party, .hp-made) { margin-block-start: 0; }
.hp-season-halloween.home .hp-header.is-dark { background: rgba(14, 14, 16, 0.6); border-bottom-color: transparent; }
.hp-logo__layer--allwhite { opacity: 0; }
.hp-header.is-dark .hp-logo__layer--allwhite { opacity: 1; }
.hp-header.is-dark .hp-logo__layer--allwhite ~ .hp-logo__layer--white,
.hp-header.is-dark .hp-logo__layer--white:has(+ .hp-logo__layer--allwhite) { opacity: 0; }

/* A little taller than the standard hero: the scene stands along the bottom, under the words. */
.hp-hero.hp-hero--night { position: relative; overflow: hidden; background: #0E0E10; padding-top: calc(var(--hp-header-height) + clamp(3.5rem, 7vw, 7rem)); padding-bottom: clamp(14rem, 22vw, 20rem); }
.hp-hero--night .hp-hero__text { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.hp-hero--night .hp-hero__eyebrow { color: #A1A1A6; }
.hp-hero--night h1 { color: #fff; }
.hp-hero--night .hp-hero__lede { color: #D2D2D7; }
.hp-hero--night .wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; }
.hp-hero--night .wp-block-button:not(.is-style-link) .wp-block-button__link { background: #F28C28; color: #1D1D1F; font-weight: 600; }
.hp-hero--night .wp-block-button:not(.is-style-link) .wp-block-button__link:hover { background: #FF9E3D; }
.hp-hero--night .is-style-link .wp-block-button__link { color: #C9BEFA; }

.hp-night { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hp-night__star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #F5F0E6; animation: hp-twinkle 3.2s ease-in-out infinite; }
@keyframes hp-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } }
/* The spider lets itself down once the page has settled, and bobs. */
.hp-night__spider { position: absolute; left: 19%; top: var(--hp-header-height); width: 40px; transform: translateY(-210px); animation: hp-spider-drop 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s forwards, hp-spider-bob 3s ease-in-out 3s infinite alternate; }
.hp-night__spider i { display: block; width: 1px; height: 170px; margin: 0 auto; background: rgba(245, 240, 230, 0.55); }
.hp-night__spider svg { display: block; width: 40px; height: 32px; }
@keyframes hp-spider-drop { to { transform: translateY(0); } }
@keyframes hp-spider-bob { from { transform: translateY(0); } to { transform: translateY(-18px); } }

/* The scene: one drawing along the bottom, anchored right so a narrow screen keeps the wolf and the
   moon and loses the left end of the graveyard. */
.hp-night__land { position: absolute; right: 0; bottom: 0; width: max(100%, 860px); height: auto; overflow: visible; }
/* One ghost drifts about the graveyard; the others hide behind tombstones and pop up now and then. */
.hp-night__ghost { animation: hp-drift 16s ease-in-out infinite; }
@keyframes hp-drift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(70px, -30px); } 50% { transform: translate(150px, -6px); } 75% { transform: translate(60px, -46px); } }
.hp-night__pop { animation: hp-pop 7s ease-in-out infinite; }
.hp-night__pop--two { animation-duration: 9s; animation-delay: -4s; }
@keyframes hp-pop { 0%, 52%, 100% { transform: translate(0, 0) rotate(0deg); } 60%, 78% { transform: translate(0, -58px) rotate(-6deg); } 70% { transform: translate(0, -62px) rotate(5deg); } 86% { transform: translate(0, 0) rotate(0deg); } }
/* The skeleton walks the length of the fence and back; legs and arms swing from hip and shoulder. */
.hp-night__walker { animation: hp-walk 16s ease-in-out infinite; }
@keyframes hp-walk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(260px); } }
.hp-bone-leg, .hp-bone-arm { transform-box: fill-box; transform-origin: 50% 0; animation: hp-step 0.45s ease-in-out infinite alternate; }
.hp-bone-leg--b, .hp-bone-arm { animation-delay: -0.45s; }
.hp-bone-arm--b { animation-delay: 0s; }
@keyframes hp-step { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
/* The phone scene (patterns/hero-halloween.php): under 600px it takes the wide scene's place and spreads
   the cast across the screen; the hero leaves room for it under the words. */
.hp-night__phone-land { display: none; }
.hp-night__walker--phone { animation-name: hp-walk-phone; animation-duration: 15s; animation-delay: -4.5s; }
@keyframes hp-walk-phone { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(218px); } }
.hp-night__ghost--phone { animation-name: hp-drift-phone; animation-duration: 13s; }
@keyframes hp-drift-phone { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(60px, -26px); } 60% { transform: translate(112px, -4px); } 80% { transform: translate(44px, -36px); } }
/* Bills keep falling out of the mailbox, one after another, and land in the pile. */
.hp-night__bill--fall { transform-box: fill-box; transform-origin: 50% 50%; animation: hp-bill 4.5s ease-in infinite; }
@keyframes hp-bill { 0% { transform: translate(0, 0) rotate(-20deg); opacity: 0; } 8% { opacity: 1; } 55% { transform: translate(-26px, 40px) rotate(-200deg); } 70%, 88% { transform: translate(-30px, 52px) rotate(-352deg); opacity: 1; } 100% { transform: translate(-30px, 52px) rotate(-352deg); opacity: 0; } }

/* Jack-o'-lanterns: real buttons on the ground; a click lights one or puts it out. */
.hp-jack { position: absolute; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transition: transform 0.25s var(--hp-ease), filter 0.3s; }
.hp-jack:hover { transform: scale(1.06) rotate(-3deg); }
.hp-jack:focus-visible { outline: 2px solid #F28C28; outline-offset: 6px; border-radius: 50%; }
.hp-jack svg { display: block; width: 100%; height: auto; }
.hp-jack .hp-jack__face { fill: #3A1E08; transition: fill 0.3s; }
.hp-jack.is-lit { filter: drop-shadow(0 0 22px rgba(255, 190, 60, 0.75)); }
.hp-jack.is-lit .hp-jack__face { fill: #FFD25A; }
/* A lit jack-o'-lantern flickers like a candle: the glow and the face waver, each lantern on its own beat. */
.hp-jack.is-lit { animation: hp-glow 2.6s linear infinite; }
.hp-jack.is-lit .hp-jack__face { animation: hp-flame 1.9s steps(1, end) infinite; }
.hp-jack--2.is-lit, .hp-jack--2.is-lit .hp-jack__face { animation-delay: -0.8s; }
.hp-jack--3.is-lit, .hp-jack--3.is-lit .hp-jack__face { animation-delay: -1.5s; }
@keyframes hp-glow {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(255, 190, 60, 0.75)); }
  9% { filter: drop-shadow(0 0 14px rgba(255, 170, 50, 0.5)); }
  13% { filter: drop-shadow(0 0 26px rgba(255, 200, 70, 0.85)); }
  31% { filter: drop-shadow(0 0 18px rgba(255, 180, 55, 0.62)); }
  48% { filter: drop-shadow(0 0 25px rgba(255, 195, 65, 0.82)); }
  51% { filter: drop-shadow(0 0 10px rgba(255, 160, 45, 0.42)); }
  55% { filter: drop-shadow(0 0 24px rgba(255, 195, 65, 0.8)); }
  77% { filter: drop-shadow(0 0 19px rgba(255, 185, 60, 0.68)); }
}
@keyframes hp-flame { 0%, 100% { fill: #FFD25A; } 18% { fill: #FFC24A; } 34% { fill: #FFE07A; } 52% { fill: #F5A83A; } 61% { fill: #FFD25A; } 83% { fill: #FFCB52; } }
.hp-jack--1 { left: 3%; bottom: 1.5%; width: clamp(72px, 7vw, 110px); }
.hp-jack--2 { left: 47%; bottom: 2%; width: clamp(56px, 5vw, 80px); }
.hp-jack--3 { left: 71%; bottom: 3%; width: clamp(44px, 4vw, 62px); }
@media (max-width: 781px) {
  /* On a phone the headline is a poster: two lines, nearly the width of the screen (Chris, 2026-10-29: "That
     hero line doesn't hit as hard as it does on desktop"). */
  .hp-hero--night h1 { font-size: clamp(3.25rem, 21vw, 6.5rem); line-height: 0.92; letter-spacing: -0.035em; }
  .hp-hero--night .hp-hero__lede { margin-top: 1.25rem; }
  .hp-night__spider { left: 4%; }
  .hp-night__spider i { height: 6px; }
  .hp-jack--1 { left: 22%; bottom: 1.5%; width: 58px; }
  .hp-jack--2, .hp-jack--3 { display: none; }
  .hp-hero.hp-hero--night { padding-bottom: 19.5rem; }
}
@media (max-width: 599px) {
  .hp-night__land { display: none; }
  .hp-night__phone-land { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; }
  .hp-hero.hp-hero--night { padding-bottom: 100vw; }
  .hp-jack--1 { left: 47%; right: auto; bottom: 34px; width: 50px; }
  .hp-jack--2 { display: block; left: 4%; right: auto; bottom: 40px; width: 44px; }
  .hp-jack--3 { display: none; }
}

/* ---- Halloween: the front page's band and products ---------------------------------------- */

.hp-party { background: #F28C28; color: #1D1D1F; padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.hp-party__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hp-party__eyebrow { margin: 0 0 0.85rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hp-party h2 { margin: 0; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.05; font-weight: 700; color: #1D1D1F; }
.hp-party__lede { margin: 1.25rem 0 0; max-width: 30rem; font-size: 1.1875rem; line-height: 1.5; }
.hp-party__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hp-party__actions .hp-party__go { display: inline-block; background: #1D1D1F; color: #fff; border-radius: 999px; padding: 0.75rem 1.4rem; font-weight: 500; text-decoration: none; }
.hp-party__actions .hp-party__more { color: #1D1D1F; font-weight: 600; text-decoration: none; }
.hp-party__actions .hp-party__more::after { content: "\203A"; margin-left: 0.35em; }
.hp-party__facts { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(29, 29, 31, 0.25); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 30rem; }
.hp-party__facts p { margin: 0; font-size: 0.875rem; color: #3A2A10; }
.hp-party__facts b, .hp-party__facts a { display: block; margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 700; color: #1D1D1F; text-decoration: none; }
.hp-party__art { position: relative; height: 460px; }
.hp-party__invite { position: absolute; left: 4%; top: 30px; width: 300px; height: 400px; box-sizing: border-box; padding: 36px 30px; display: flex; flex-direction: column; background: #0E0E10; border-radius: 4px; box-shadow: 0 26px 56px rgba(0, 0, 0, 0.3); transform: rotate(-4deg); }
.hp-party__invite small { margin-top: 28px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #F28C28; }
.hp-party__invite strong { margin-top: 10px; font-size: 2.875rem; line-height: 1; font-weight: 700; color: #F5F0E6; }
.hp-party__invite span { margin-top: auto; font-size: 0.9375rem; color: #D2D2D7; }
.hp-party__invite span + span { margin-top: 4px; }
.hp-party__sign { position: absolute; left: 58%; top: 10px; width: 210px; height: 300px; box-sizing: border-box; padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; background: #F5F0E6; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); transform: rotate(6deg); }
.hp-party__sign strong { margin-top: 10px; font-size: 2.125rem; line-height: 1; font-weight: 700; color: #0E0E10; }
.hp-party__sign span { font-size: 1.125rem; font-weight: 600; color: #B4501A; }
.hp-party__sign svg:last-child { margin-top: auto; }
@media (max-width: 900px) {
  .hp-party__inner { grid-template-columns: 1fr; }
  .hp-party__art { height: 420px; max-width: 460px; width: 100%; margin: 0 auto; }
  .hp-party__invite { left: 0; transform: rotate(-4deg) scale(0.86); transform-origin: top left; }
  .hp-party__sign { left: auto; right: 0; transform: rotate(6deg) scale(0.86); transform-origin: top right; }
}

.hp-made { padding: clamp(4rem, 8vw, 7rem) 1.5rem; text-align: center; }
.hp-made h2 { margin: 0; font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem); font-weight: 700; color: var(--wp--preset--color--ink); }
.hp-made__lede { margin: 1rem 0 0; font-size: 1.3125rem; }
.hp-made__grid { max-width: 1200px; margin: 3rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.hp-made__tile { position: relative; display: block; min-height: 300px; box-sizing: border-box; padding: 1.75rem 1.5rem; overflow: hidden; background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); color: inherit; text-decoration: none; transition: transform 200ms var(--hp-ease); }
.hp-made__tile:hover { transform: translateY(-2px); }
.hp-made__tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #F28C28; color: #1D1D1F; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hp-made__tile b { display: block; margin-top: 1rem; font-size: 1.625rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.hp-made__tile b::after { content: "\203A"; margin-left: 0.3em; color: var(--wp--preset--color--brand); }
.hp-made__tile small { display: block; margin-top: 0.6rem; max-width: 15rem; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--quiet); }
.hp-made__tile svg { position: absolute; right: 24px; bottom: 20px; }
@media (max-width: 781px) {
  .hp-made__grid { grid-template-columns: 1fr; }
  .hp-made__tile { min-height: 240px; }
}

/* ---- Still, for anyone who asks for less motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Still, the phone skeleton stands in the open middle of the front row, not on the left pumpkin. */
  .hp-night__walker--phone { transform: translateX(118px); }
  .hp-haunt__bat, .hp-haunt__bat > span, .hp-bat__wing, .hp-night__star, .hp-night__spider, .hp-night__ghost, .hp-night__pop, .hp-night__walker, .hp-bone-leg, .hp-bone-arm, .hp-night__bill--fall, .hp-jack, .hp-jack.is-lit, .hp-jack__face, .hp-music__face { animation: none !important; transition: none; }
  .hp-haunt__bat { transform: none; }
  .hp-haunt__bat--1 { left: 64px; top: calc(var(--hp-header-height) + 74px); }
  .hp-haunt__bat--2 { left: auto; right: 64px; top: calc(var(--hp-header-height) + 90px); }
  @media (max-width: 900px) { .hp-haunt__bat--1, .hp-haunt__bat--2 { display: none; } }
  .hp-haunt__bat--3, .hp-haunt__bat--4, .hp-haunt__bat--5, .hp-haunt__witch { display: none; }
  .hp-night__spider { transform: none; }
  .hp-season-halloween .wp-site-blocks > header.wp-block-template-part:has(.hp-header)::after { animation: none; height: 80px; }
}

/* ---- The season's music: the "Spooky ambiance" button (inc/season.php) -------------------- */

/* Floating in the bottom right corner of every page, over the decorations, under the bar's menus.
   The pill holds the on and off button and, while the music plays, a volume slider. */
.hp-music { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.25rem; min-height: 48px; padding: 0 0.85rem 0 0.15rem; border: 1.5px solid #F28C28; border-radius: 999px; background: rgba(14, 14, 16, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: box-shadow 0.3s; }
.hp-music__toggle { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.4rem; border: 0; border-radius: 999px; background: none; color: #F5F0E6; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; cursor: pointer; }
.hp-music__toggle:focus-visible { outline: 2px solid #F28C28; outline-offset: 2px; }
.hp-music__jack { width: 34px; height: 30px; flex-shrink: 0; transition: filter 0.3s, transform 0.3s; }
.hp-music__toggle:hover .hp-music__jack { transform: rotate(-8deg) scale(1.06); }
.hp-music__face { fill: #3A1E08; transition: fill 0.3s; }
.hp-music__state { min-width: 2.1rem; padding: 0.3rem 0.5rem; border-radius: 999px; background: rgba(245, 240, 230, 0.12); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.hp-music.is-on { box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.18), 0 10px 30px rgba(0, 0, 0, 0.25); }
.hp-music.is-on .hp-music__jack { filter: drop-shadow(0 0 8px rgba(255, 190, 60, 0.8)); }
.hp-music.is-on .hp-music__face { fill: #FFD25A; animation: hp-flame 1.7s steps(1, end) infinite; }
.hp-music.is-on .hp-music__state { background: #F28C28; color: #1D1D1F; }
/* The volume slider: only while it plays, an orange track on the dark pill. */
.hp-music__volume { display: none; width: 88px; height: 44px; margin: 0 0 0 0.25rem; background: none; cursor: pointer; accent-color: #F28C28; -webkit-appearance: none; appearance: none; }
.hp-music.is-on .hp-music__volume { display: block; }
.hp-music__volume:focus-visible { outline: 2px solid #F28C28; outline-offset: 2px; border-radius: 4px; }
.hp-music__volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(245, 240, 230, 0.3); }
.hp-music__volume::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #F28C28; border: 2px solid #F5F0E6; }
.hp-music__volume::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(245, 240, 230, 0.3); }
.hp-music__volume::-moz-range-progress { height: 4px; border-radius: 2px; background: #F28C28; }
.hp-music__volume::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #F28C28; border: 2px solid #F5F0E6; }
/* Out of the way while the phone menu is open (the menu sits inside the bar, under this layer). */
body:has(.hp-menu:not([hidden])) .hp-music { display: none; }
@media (max-width: 600px) { .hp-music { right: 0.75rem; bottom: 0.75rem; } .hp-music__toggle { font-size: 0.875rem; } .hp-music__volume { width: 72px; } }

/* ---- Halloween around the house: skeletons on the tiles, ghosts behind them (season.js) ------- */

/* The tiles stand above the yard, so a ghost placed behind one is hidden until it rises over the edge. */
.hp-season-halloween :is(.hp-tile-card, .hp-bento__tile, .hp-made__tile, .hp-hours, .hp-jobpage__ask, .hp-jobpage__tile, .hp-jobpage__more > *, .hp-shell .hp-tile, .hp-hub__tile, .hpm-listrow, .hpm-mapbox, .hpm-tile) { position: relative; z-index: 2; }
.hp-season-halloween .hp-messages::after { animation-delay: -1.2s; }
/* A mailing's name runs the row's whole width on a phone: no room for the lantern there. */
@media (max-width: 600px) { .hp-season-halloween li:nth-child(2) > .hpm-listrow::after { display: none; } }
.hp-yard { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; overflow: hidden; pointer-events: none; }
.hp-yard__walk { position: absolute; width: 20px; animation: hp-yard-walk 12s ease-in-out infinite; }
.hp-yard__walk svg, .hp-yard__boo svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes hp-yard-walk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--room)); } }
.hp-yard__boo { position: absolute; width: 30px; animation: hp-yard-boo 8s ease-in-out infinite; }
@keyframes hp-yard-boo { 0%, 55%, 100% { transform: translateY(0) rotate(0deg); } 63%, 80% { transform: translateY(-36px) rotate(-7deg); } 72% { transform: translateY(-40px) rotate(6deg); } 88% { transform: translateY(0) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .hp-yard__walk, .hp-yard__boo { animation: none; }
  .hp-yard__boo { transform: translateY(-26px) rotate(-6deg); }
}

/* ---- Halloween: the footer is the night, built around its content (inc/season-night.php) ---------- */

/* Dark, with light words and the all-white logo; the stars and a cobweb behind the columns; the ground
   along the bottom edge, flush with it. Replaces the bunting and the porch pumpkins. */
.hp-footer.hp-footer--night { position: relative; overflow: hidden; background: #0E0E10 !important; color: #A1A1A6; padding-bottom: 0; }
.hp-footer--night::before, .hp-footer--night::after { display: none !important; }
.hp-footer--night > :not(.hp-footer-sky):not(.hp-night-ground) { position: relative; z-index: 1; }
.hp-footer--night .hp-footer__tagline { color: #F5F0E6; }
.hp-footer--night .hp-footer__heading { color: #FFFFFF !important; }
.hp-footer--night :is(.hp-footer__contact, .hp-footer__links) a { color: #D2D2D7; }
.hp-footer--night :is(.hp-footer__contact, .hp-footer__links) a:hover { color: #F28C28; }
/* The bottom row sits on the ground, with no rule above it: the ground's edge is the line. */
.hp-footer.hp-footer--night { padding-bottom: 26px; }
.hp-footer--night .hp-footer__bottom { border-top: 0; padding-top: 0; color: #A1A1A6; }
/* The hours stand just above the ground on the left, leaving the right to the scene. */
.hp-footer--night .hp-hours { box-sizing: border-box; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.6rem; max-width: 1280px; margin-left: auto; margin-right: auto; background: none; padding: 0 min(50%, 640px) 0 0; border-radius: 0; margin-bottom: 40px; }
/* Three across in two rows, so every name and "Closes at noon" stays on one line (Chris, 2026-10-29: "make sure it
   isn't getting squished and unreadable"); six across in half the footer was 92px a card. */
.hp-footer--night .hp-hours__list { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-footer--night .hp-hours__day { font-size: 0.8125rem; padding: 0.6rem 0.75rem; }
.hp-footer--night .hp-hours__state { font-size: 0.75rem; }
.hp-footer--night .hp-hours__date { white-space: nowrap; }
.hp-footer--night .hp-hours__title, .hp-footer--night .hp-hours__date, .hp-footer--night .hp-hours__state { color: #F5F0E6; }
.hp-footer--night .hp-hours__name { color: #A1A1A6; }
.hp-footer--night .hp-hours__day { background: rgba(245, 240, 230, 0.07); }
.hp-footer--night .hp-hours__day.is-next { box-shadow: inset 0 0 0 1.5px #F28C28; }
.hp-footer--night .hp-hours__day.is-next .hp-hours__state { color: #F28C28; }
@media (max-width: 1000px) { .hp-footer--night .hp-hours { padding-right: 0; margin-bottom: 128px; } }
/* The scene, behind the bottom of the footer: as wide as the footer, its ground under the last row. */
.hp-footer--night > .hp-night-ground { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(190px, 19.5vw, 280px); max-width: none; margin: 0 !important; }
@media (max-width: 600px) {
  .hp-footer--night > .hp-night-ground { height: 270px; }
  .hp-footer.hp-footer--night { padding-bottom: 12px; }
  .hp-footer--night .hp-footer__bottom { row-gap: 0.2rem; }
  .hp-footer--night .hp-hours__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-night-ground__moon { display: none; }
  /* On a phone the mailbox stands half off the left edge and its bills fall on the copyright. */
  .hp-night-ground .hp-night__mailbox { display: none; }
}
/* Wider than the drawing (1440), the scene keeps its size in the right corner and the ground runs on to the left,
   rather than growing and losing the moon off its top. */
@media (min-width: 1441px) {
  .hp-footer--night > .hp-night-ground { left: auto; width: 1440px; height: 280px; }
  .hp-footer.hp-footer--night::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 80px; background: #050507; }
}
/* The whole footer, corner to corner: the constrained layout would hold it to the content's width. */
.hp-footer-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; max-width: none !important; margin: 0 !important; }
.hp-footer-sky__web { position: absolute; top: 0; right: 0; width: clamp(110px, 12vw, 180px); transform: scaleX(-1); fill: none; stroke: #F5F0E6; stroke-opacity: 0.22; stroke-width: 1.2; }
.hp-night__twinkle { animation: hp-twinkle-dot 3.2s ease-in-out infinite; }
@keyframes hp-twinkle-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.hp-night__lantern { animation: hp-glow 2.6s linear infinite; }
.hp-night__lantern .hp-jack__face { animation: hp-flame 1.9s steps(1, end) infinite; }
.hp-night__lantern:nth-of-type(2n) { animation-delay: -1.1s; }
@media (prefers-reduced-motion: reduce) { .hp-night__twinkle, .hp-night__lantern, .hp-night__lantern .hp-jack__face { animation: none; } }

/* ---- Halloween: cobwebs and a spider in the top corner of the grey bands ------------------------ */

.hp-season-halloween .has-paper-background-color.alignfull:not(.hp-footer) { position: relative; }
.hp-season-halloween .has-paper-background-color.alignfull:not(.hp-footer)::before {
  content: ""; position: absolute; top: 0; left: 0; width: clamp(90px, 11vw, 160px); aspect-ratio: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%238A8A93' stroke-opacity='0.55' stroke-width='1.3'%3E%3Cpath d='M0 0 L200 0 M0 0 L184.8 76.5 M0 0 L141.4 141.4 M0 0 L76.5 184.8 M0 0 L0 200'/%3E%3Cpath d='M60 0 Q52 10 55.4 23 Q46 31 42.4 42.4 Q31 46 23 55.4 Q10 52 0 60'/%3E%3Cpath d='M110 0 Q95.3 18.3 101.6 42.1 Q84.3 56.8 77.8 77.8 Q56.8 84.3 42.1 101.6 Q18.3 95.3 0 110'/%3E%3Cpath d='M160 0 Q138.7 26.7 147.8 61.3 Q122.7 82.7 113.1 113.1 Q82.7 122.7 61.3 147.8 Q26.7 138.7 0 160'/%3E%3C/g%3E%3C/svg%3E") no-repeat top left / contain;
}
.hp-season-halloween .has-paper-background-color.alignfull:not(.hp-footer)::after {
  content: ""; position: absolute; top: 0; right: 9%; width: 28px; height: 70px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 120'%3E%3Cpath d='M14 0V100' stroke='%238A8A93' stroke-width='1'/%3E%3Cg stroke='%231D1D1F' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M10 104l-7-6-3 5M10 107l-8-2-2 6M10 109l-7 3-2 6M11 111l-4 6M18 104l7-6 3 5M18 107l8-2 2 6M18 109l7 3 2 6M17 111l4 6'/%3E%3C/g%3E%3Cellipse cx='14' cy='109' rx='5' ry='6' fill='%231D1D1F'/%3E%3Ccircle cx='14' cy='101.5' r='3.5' fill='%231D1D1F'/%3E%3C/svg%3E") no-repeat bottom center / 28px 120px;
  animation: hp-spider-climb 7s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .hp-season-halloween .has-paper-background-color.alignfull:not(.hp-footer)::after { animation: none; height: 80px; } }

/* ---- Halloween: more flickering jack-o'-lanterns (Chris, 2026-10-29: "can be used more around the site") - */

/* The porch pumpkins on the front page's footer glow and flicker. */
.hp-season-halloween .hp-footer::after { animation: hp-glow 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .hp-season-halloween :is(.hp-tile-card, .hp-bento__tile, .hp-jobpage__tile, .hp-messages, .hpm-listrow, .hpm-tile)::after, .hp-season-halloween .hp-footer::after { animation: none; filter: drop-shadow(0 0 10px rgba(255, 190, 60, 0.6)); }
}