/* The holidays (inc/season-snow.php, patterns/hero-holidays.php, patterns/season-holidays.php), on top of
   season.css, whose hero, band, tiles, footer and music button it shares. Those carry Halloween's orange;
   here they carry the season's red, green and gold. It looks like Christmas, with a place for every big
   holiday from Diwali to New Year's Day. Decoration only: nothing here takes a click except the lamps, the
   trees and the ornaments, and everything that moves stands still for prefers-reduced-motion. */

/* ---- The strip and the hours ------------------------------------------------------------- */

.hp-strip--holidays { background: #A81A27; color: #fff; }
.hp-hours__day.is-next { box-shadow: inset 0 0 0 1.5px #C8202F; }
.hp-hours__day.is-next .hp-hours__state { color: #A81A27; }

/* ---- What floats over every page --------------------------------------------------------- */

/* The holly hangs from the bar's lower edge wherever the bar is (season.js sets --hp-bar-bottom): the strip and
   the admin bar push the bar down at the top of a page. Only where the window leaves room beside the words. */
.hp-haunt__holly { position: absolute; top: var(--hp-bar-bottom, var(--hp-header-height)); width: 80px; height: 80px; }
.hp-haunt__holly--left { left: 0; }
.hp-haunt__holly--right { right: 0; transform: scaleX(-1); }
.hp-haunt__holly svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1279px) { .hp-haunt__holly { display: none; } }

/* The snow: a few flakes at a time, each falling the height of the window at its own pace and swaying a
   little from side to side. A blue the white pages can show, which the night shows too. */
.hp-haunt__flake { position: absolute; top: -48px; width: 22px; animation: hp-flake-fall 24s linear infinite; }
.hp-haunt__flake > span { display: block; animation: hp-flake-sway 3.4s ease-in-out infinite alternate; }
.hp-haunt__flake svg { display: block; width: 100%; height: auto; overflow: visible; stroke: #9DBBD8; }
.hp-haunt__flake--1 { left: 4%; animation-delay: -3s; }
.hp-haunt__flake--2 { left: 13%; width: 14px; animation-duration: 31s; animation-delay: -19s; }
.hp-haunt__flake--3 { left: 22%; width: 26px; animation-duration: 21s; animation-delay: -9s; }
.hp-haunt__flake--4 { left: 33%; width: 12px; animation-duration: 34s; animation-delay: -25s; }
.hp-haunt__flake--5 { left: 44%; width: 18px; animation-duration: 27s; animation-delay: -14s; }
.hp-haunt__flake--6 { left: 53%; width: 13px; animation-duration: 33s; animation-delay: -2s; }
.hp-haunt__flake--7 { left: 62%; width: 24px; animation-duration: 23s; animation-delay: -17s; }
.hp-haunt__flake--8 { left: 71%; width: 15px; animation-duration: 29s; animation-delay: -6s; }
.hp-haunt__flake--9 { left: 79%; width: 20px; animation-duration: 25s; animation-delay: -21s; }
.hp-haunt__flake--10 { left: 87%; width: 12px; animation-duration: 36s; animation-delay: -11s; }
.hp-haunt__flake--11 { left: 93%; width: 26px; animation-duration: 22s; animation-delay: -16s; }
.hp-haunt__flake--12 { left: 98%; width: 14px; animation-duration: 30s; animation-delay: -28s; }
@keyframes hp-flake-fall { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 96px)) rotate(200deg); } }
@keyframes hp-flake-sway { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
/* On a phone, half as many. */
@media (max-width: 600px) { .hp-haunt__flake:nth-child(even) { display: none; } }

/* Farther off: small, soft and slow. */
.hp-haunt__flake--far > span { display: block; aspect-ratio: 1; border-radius: 50%; background: #9DBBD8; opacity: 0.75; filter: blur(0.6px); animation-duration: 6s; }

/* New Year's fireworks: a burst now and then, opening from its middle and fading as the sparks do. */
.hp-burst { display: block; pointer-events: none; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: hp-burst 8s ease-out infinite; }
.hp-burst svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes hp-burst { 0%, 62% { opacity: 0; transform: scale(0.15); } 68% { opacity: 1; transform: scale(0.75); } 82% { opacity: 0.95; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1.08); } }
.hp-burst--1 { position: absolute; left: 6%; top: 44%; width: 116px; }
.hp-burst--2 { position: absolute; right: 7%; top: 25%; width: 92px; animation-delay: -3.4s; }
.hp-burst--ground { animation-delay: -5.2s; }
.hp-haunt__burst { position: absolute; right: 5%; top: 30%; width: 84px; animation-duration: 26s; animation-delay: -6s; }
@media (max-width: 1100px) { .hp-haunt__burst { display: none; } .hp-burst--2 { display: none; } }

/* Santa's sleigh: one pass across the upper window every 70 seconds or so, the first some seconds after the
   page opens, as Halloween's witch. Far rarer than the snow. Sparkles behind it (season.js). */
.hp-haunt__sleigh { position: absolute; left: 0; top: calc(var(--hp-bar-bottom, var(--hp-header-height)) + 80px); width: clamp(230px, 26vw, 380px); transform: translateX(-420px); animation: hp-sleigh-across 70s linear 14s infinite; }
.hp-haunt__sleigh > span { display: block; animation: hp-bat-bob 2.4s ease-in-out infinite alternate; }
.hp-haunt__sleigh svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Past the far edge it waits there until the next pass, which starts it over at once: sent back across the window within the animation, it could be caught for a frame on the way (Chris, 2026-11-01: "Santa glitches onto the screen for a split second"). */
@keyframes hp-sleigh-across { 0% { transform: translate(-420px, 40px) rotate(-4deg); } 16%, 100% { transform: translate(calc(100vw + 60px), -30px) rotate(-7deg); } }
/* The reindeer gallop: each leg swings from the hip and its lower half folds from the knee (inc/season-snow.php sets each one's moment). */
.hp-deer__leg, .hp-deer__shin, .hp-santa__wave { transform-origin: 0 0; animation: 0.36s ease-in-out infinite alternate; }
.hp-deer__leg { animation-name: hp-gallop; }
.hp-deer__shin { animation-name: hp-gallop-shin; }
@keyframes hp-gallop { from { transform: rotate(-40deg); } to { transform: rotate(34deg); } }
@keyframes hp-gallop-shin { from { transform: rotate(6deg); } to { transform: rotate(62deg); } }
/* Santa waves from the shoulder, and Rudolph's nose glows, slowly. */
.hp-santa__wave { animation-name: hp-wave; animation-duration: 0.5s; }
@keyframes hp-wave { from { transform: rotate(-24deg); } to { transform: rotate(22deg); } }
.hp-rudolph__glow { transform-box: fill-box; transform-origin: 50% 50%; animation: hp-nose 1.1s ease-in-out infinite alternate; }
@keyframes hp-nose { from { opacity: 0.25; transform: scale(0.8); } to { opacity: 0.7; transform: scale(1.25); } }
/* One gold star of the trail: it opens, twinkles and falls away, left where the sleigh was. */
.hp-haunt__sparkle { position: absolute; pointer-events: none; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: hp-sparkle 1.4s ease-out forwards; }
/* Tap Santa: a burst of the same stars, a word from him, a present falling from the sleigh and a harder wave. */
.hp-sleigh__hit { pointer-events: all; cursor: pointer; }
.hp-haunt__sparkle--burst { animation: hp-sparkle-burst 1.1s ease-out forwards; }
@keyframes hp-sparkle-burst { 0% { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0deg); } 45% { opacity: 1; transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * 0.8)) scale(1.1) rotate(70deg); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 34px)) scale(0.3) rotate(140deg); } }
.hp-haunt__ho { position: absolute; padding: 0.3rem 0.7rem; border-radius: 999px; background: #fff; color: #A81A27; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); animation: hp-ho 1.7s ease-out forwards; }
@keyframes hp-ho { 0% { opacity: 0; transform: translateY(10px) scale(0.8); } 15%, 70% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-16px) scale(1); } }
.hp-haunt__present { position: absolute; width: 34px; animation: hp-present 2.1s cubic-bezier(0.45, 0.05, 0.8, 0.5) forwards; }
.hp-haunt__present svg { display: block; width: 100%; height: auto; }
@keyframes hp-present { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(70px, 105vh) rotate(150deg); } }
.is-merry .hp-santa__wave { animation-duration: 0.24s; }
@keyframes hp-sparkle { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 18% { opacity: 1; transform: scale(1.15) rotate(25deg); } 45% { opacity: 0.75; transform: translateY(calc(var(--fall) * 0.4)) scale(0.75) rotate(50deg); } 62% { opacity: 1; transform: translateY(calc(var(--fall) * 0.62)) scale(1) rotate(70deg); } 100% { opacity: 0; transform: translateY(var(--fall)) scale(0.3) rotate(120deg); } }

/* String lights along the underside of the bar, on every page with the site's own bar: one bulb each, built and
   put through their patterns by season.js (Chris, 2026-11-01: "light up with colors and in patterns"). Each
   bulb knows its place (--i), its place in fours and twos (--g, --o), a random moment (--r) and its color (--c). */
.hp-lights { position: absolute; top: 100%; left: 0; right: 0; height: 38px; overflow: hidden; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 30'%3E%3Cpath d='M0 2 Q44 14 88 2 Q132 14 176 2' fill='none' stroke='%233A3846' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x top left / 176px 30px; }
.hp-light { position: absolute; top: 6px; left: calc(22px + var(--i) * 44px); width: 10px; height: 18px; margin-left: -5px; }
.hp-light::before { content: ""; position: absolute; top: 0; left: 2.5px; width: 5px; height: 5px; border-radius: 1px; background: #3A3846; }
.hp-light i { position: absolute; top: 4px; left: 0; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%; color: var(--c); background: currentColor; box-shadow: 0 0 9px 2px currentColor; }
/* No bulb snaps on or off and nothing runs fast (Chris, 2026-11-01: "on mobile devices ... the flashing lights can go
   very quickly"). A phone shows only nine bulbs, too few to see a light travel, so a quick chase reads as a strobe. */
/* Lights run left to right along the string, four at a time. */
.hp-lights[data-pattern="chase"] i { animation: hp-l-chase 3.2s ease-in-out infinite; animation-delay: calc(var(--g) * 0.8s - 3.2s); }
@keyframes hp-l-chase { 0%, 44%, 100% { opacity: 0.16; } 10%, 30% { opacity: 1; } }
/* Every color flows down the whole string. */
.hp-lights[data-pattern="flow"] i { animation: hp-l-colors 4s linear infinite; animation-delay: calc(var(--i) * 0.16s - 60s); }
@keyframes hp-l-colors { 0%, 100% { color: #E8313F; } 25% { color: #F6C433; } 50% { color: #22A55F; } 75% { color: #3D9BEA; } }
/* Every other bulb, back and forth. */
.hp-lights[data-pattern="flash"] i { animation: hp-l-flash 2.8s ease-in-out infinite; animation-delay: calc(var(--o) * -1.4s); }
@keyframes hp-l-flash { 0%, 38%, 100% { opacity: 1; } 50%, 88% { opacity: 0.16; } }
/* A swell of light rolls down the string. */
.hp-lights[data-pattern="wave"] i { animation: hp-l-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s - 26s); }
@keyframes hp-l-wave { 0%, 100% { opacity: 0.14; } 50% { opacity: 1; } }
/* The whole string one color, then the next. */
.hp-lights[data-pattern="one"] i { animation: hp-l-one 8s linear infinite; }
@keyframes hp-l-one { 0%, 20%, 100% { color: #E8313F; } 25%, 45% { color: #22A55F; } 50%, 70% { color: #F6C433; } 75%, 95% { color: #3D9BEA; } }
/* Dim, with bulbs glowing white here and there. */
.hp-lights[data-pattern="sparkle"] i { opacity: 0.32; animation: hp-l-sparkle 5.2s ease-in-out infinite; animation-delay: calc(var(--r) * -5.2s); }
@keyframes hp-l-sparkle { 0%, 32%, 100% { opacity: 0.32; } 8% { opacity: 1; color: #FFFFFF; } 16% { opacity: 1; color: #FFF3C4; } }

/* A present on some of the tiles, staggered as the lanterns are, giving a little shake now and then. */
.hp-season-holidays :is(.hp-tile-card, .hp-bento__tile):nth-child(4n+2)::after,
.hp-season-holidays .hp-jobpage__tile:has(.hp-steps)::after, .hp-season-holidays .hp-messages::after,
.hp-season-holidays li:nth-child(2) > .hpm-listrow::after, .hp-season-holidays .hpm-tiles > .hpm-tile:nth-child(2)::after {
  content: ""; position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; pointer-events: none; transform-origin: 50% 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 26 C30 2 12 14 24 26 Z M50 26 C70 2 88 14 76 26 Z' fill='%23E2B23C'/%3E%3Crect x='10' y='40' width='80' height='56' rx='3' fill='%23C8202F'/%3E%3Crect x='4' y='26' width='92' height='18' rx='3' fill='%23A81A27'/%3E%3Crect x='42' y='26' width='16' height='70' fill='%23E2B23C'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: hp-gift-shake 7s ease-in-out infinite;
}
.hp-season-holidays :is(.hp-tile-card, .hp-bento__tile):nth-child(8n+6)::after, .hp-season-holidays .hp-messages::after { animation-delay: -3.2s; }
@keyframes hp-gift-shake { 0%, 86%, 100% { transform: rotate(0deg); } 88% { transform: rotate(-7deg); } 91% { transform: rotate(6deg); } 94% { transform: rotate(-4deg); } 97% { transform: rotate(2deg); } }
/* Each holiday takes its turn on the tiles (season.js sets which); a present until it has. */
.hp-season-holidays [data-hp-picture="menorah"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 120 110'%3E%3Cg fill='none' stroke='%23C79A22' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M60 26 V92'/%3E%3Cpath d='M48 40 A12 12 0 0 0 72 40'/%3E%3Cpath d='M36 40 A24 24 0 0 0 84 40'/%3E%3Cpath d='M24 40 A36 36 0 0 0 96 40'/%3E%3Cpath d='M12 40 A48 48 0 0 0 108 40'/%3E%3C/g%3E%3Cpath d='M40 100 Q60 82 80 100 Z' fill='%23C79A22'/%3E%3Crect x='10' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='12' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='22' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='24' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='34' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='36' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='46' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='48' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='70' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='72' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='82' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='84' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='94' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='96' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='106' y='24' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='108' cy='17' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='58' y='10' width='4' height='15' fill='%237FB2E5'/%3E%3Cellipse cx='60' cy='3' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3C/svg%3E"); }
.hp-season-holidays [data-hp-picture="kinara"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 12 120 72'%3E%3Cpath d='M14 50 Q60 66 106 50 L106 57 Q60 74 14 57 Z' fill='%238A5A2B'/%3E%3Crect x='54' y='62' width='12' height='14' fill='%236E4522'/%3E%3Crect x='38' y='74' width='44' height='9' rx='4' fill='%238A5A2B'/%3E%3Crect x='21.5' y='29.1' width='5' height='25' rx='1' fill='%23C8202F'/%3E%3Cellipse cx='24' cy='22.1' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='33.5' y='31.799999999999997' width='5' height='25' rx='1' fill='%23C8202F'/%3E%3Cellipse cx='36' cy='24.799999999999997' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='45.5' y='33.5' width='5' height='25' rx='1' fill='%23C8202F'/%3E%3Cellipse cx='48' cy='26.5' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='57.5' y='34.0' width='5' height='25' rx='1' fill='%231D1D1F'/%3E%3Cellipse cx='60' cy='27.0' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='69.5' y='33.5' width='5' height='25' rx='1' fill='%231F7A4D'/%3E%3Cellipse cx='72' cy='26.5' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='81.5' y='31.799999999999997' width='5' height='25' rx='1' fill='%231F7A4D'/%3E%3Cellipse cx='84' cy='24.799999999999997' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3Crect x='93.5' y='29.1' width='5' height='25' rx='1' fill='%231F7A4D'/%3E%3Cellipse cx='96' cy='22.1' rx='3' ry='5.5' fill='%23F2A71B'/%3E%3C/svg%3E"); }
.hp-season-holidays [data-hp-picture="diya"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cellipse cx='20' cy='9' rx='4' ry='7.5' fill='%23F2A71B'/%3E%3Cpath d='M2 14 C6 34 34 34 38 14 C26 21 14 21 2 14 Z' fill='%23C8622D'/%3E%3Ccircle cx='12' cy='24' r='1.6' fill='%23FFD25A'/%3E%3Ccircle cx='20' cy='27' r='1.6' fill='%23FFD25A'/%3E%3Ccircle cx='28' cy='24' r='1.6' fill='%23FFD25A'/%3E%3C/svg%3E"); }
.hp-season-holidays [data-hp-picture="turkey"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-48 -80 96 84'%3E%3Cellipse cx='0' cy='-54' rx='10' ry='22' fill='%23C8202F' transform='rotate(-72 0 -26)'/%3E%3Cellipse cx='0' cy='-54' rx='10' ry='22' fill='%23E2B23C' transform='rotate(-36 0 -26)'/%3E%3Cellipse cx='0' cy='-54' rx='10' ry='22' fill='%23D9661F' transform='rotate(0 0 -26)'/%3E%3Cellipse cx='0' cy='-54' rx='10' ry='22' fill='%23E2B23C' transform='rotate(36 0 -26)'/%3E%3Cellipse cx='0' cy='-54' rx='10' ry='22' fill='%23C8202F' transform='rotate(72 0 -26)'/%3E%3Cpath d='M-5 -12 V0 M5 -12 V0' stroke='%23D9661F' stroke-width='3'/%3E%3Ccircle cx='0' cy='-26' r='17' fill='%236B3F22'/%3E%3Ccircle cx='0' cy='-45' r='8.5' fill='%238A5A2B'/%3E%3Ccircle cx='-3' cy='-47' r='1.5' fill='%23111'/%3E%3Ccircle cx='3' cy='-47' r='1.5' fill='%23111'/%3E%3Cpolygon points='-3,-44 3,-44 0,-39' fill='%23E2B23C'/%3E%3C/svg%3E"); }
.hp-season-holidays [data-hp-picture="burst"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 80 80'%3E%3Cpath d='M9.0 0.0 L30.0 0.0' stroke='%23C79A22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='36.0' cy='0.0' r='2.2' fill='%23C79A22'/%3E%3Cpath d='M7.8 4.5 L19.9 11.5' stroke='%23D6447A' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='25.1' cy='14.5' r='2.2' fill='%23D6447A'/%3E%3Cpath d='M4.5 7.8 L15.0 26.0' stroke='%23C79A22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='18.0' cy='31.2' r='2.2' fill='%23C79A22'/%3E%3Cpath d='M0.0 9.0 L0.0 23.0' stroke='%23D6447A' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='0.0' cy='29.0' r='2.2' fill='%23D6447A'/%3E%3Cpath d='M-4.5 7.8 L-15.0 26.0' stroke='%23C79A22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='-18.0' cy='31.2' r='2.2' fill='%23C79A22'/%3E%3Cpath d='M-7.8 4.5 L-19.9 11.5' stroke='%23D6447A' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='-25.1' cy='14.5' r='2.2' fill='%23D6447A'/%3E%3Cpath d='M-9.0 0.0 L-30.0 0.0' stroke='%23C79A22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='-36.0' cy='0.0' r='2.2' fill='%23C79A22'/%3E%3Cpath d='M-7.8 -4.5 L-19.9 -11.5' stroke='%23D6447A' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='-25.1' cy='-14.5' r='2.2' fill='%23D6447A'/%3E%3Cpath d='M-4.5 -7.8 L-15.0 -26.0' stroke='%23C79A22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='-18.0' cy='-31.2' r='2.2' fill='%23C79A22'/%3E%3Cpath d='M-0.0 -9.0 L-0.0 -23.0' stroke='%23D6447A' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='-0.0' cy='-29.0' r='2.2' fill='%23D6447A'/%3E%3Cpath d='M4.5 -7.8 L15.0 -26.0' stroke='%23C79A22' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='18.0' cy='-31.2' r='2.2' fill='%23C79A22'/%3E%3Cpath d='M7.8 -4.5 L19.9 -11.5' stroke='%23D6447A' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='25.1' cy='-14.5' r='2.2' fill='%23D6447A'/%3E%3C/svg%3E"); }
.hp-season-holidays [data-hp-picture="parol"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-58 -58 116 116'%3E%3Ccircle r='52' fill='none' stroke='%23C9A15A' stroke-width='4'/%3E%3Cpolygon points='0,0 -11.2,-15.4 0.0,-46.0' fill='%23E8313F'/%3E%3Cpolygon points='0,0 0.0,-46.0 11.2,-15.4' fill='%23B81F2C'/%3E%3Cpolygon points='0,0 11.2,-15.4 43.7,-14.2' fill='%23F6C433'/%3E%3Cpolygon points='0,0 43.7,-14.2 18.1,5.9' fill='%23D49E17'/%3E%3Cpolygon points='0,0 18.1,5.9 27.0,37.2' fill='%2322A55F'/%3E%3Cpolygon points='0,0 27.0,37.2 0.0,19.0' fill='%2317804A'/%3E%3Cpolygon points='0,0 0.0,19.0 -27.0,37.2' fill='%233D9BEA'/%3E%3Cpolygon points='0,0 -27.0,37.2 -18.1,5.9' fill='%232577BF'/%3E%3Cpolygon points='0,0 -18.1,5.9 -43.7,-14.2' fill='%23F26BA8'/%3E%3Cpolygon points='0,0 -43.7,-14.2 -11.2,-15.4' fill='%23CF4586'/%3E%3Ccircle r='9' fill='%23FFE59A'/%3E%3C/svg%3E"); }
/* A mailing's name runs the row's whole width on a phone: no room for the present there. */
@media (max-width: 600px) { .hp-season-holidays li:nth-child(2) > .hpm-listrow::after { display: none; } }

/* Holly and an ornament on a ribbon in the top corners of the grey bands, where Halloween has its cobweb and spider. */
.hp-season-holidays .has-paper-background-color.alignfull:not(.hp-footer) { position: relative; }
.hp-season-holidays .has-paper-background-color.alignfull:not(.hp-footer)::before {
  content: ""; position: absolute; top: 0; left: 0; width: clamp(64px, 7vw, 104px); aspect-ratio: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='l' d='M0 0 Q9 -3 8 -12 Q16 -7 22 -15 Q29 -9 38 -15 Q44 -8 52 -12 Q52 -4 66 0 Q52 4 52 12 Q44 8 38 15 Q29 9 22 15 Q16 7 8 12 Q9 3 0 0Z'/%3E%3C/defs%3E%3Cg transform='translate(8 8)'%3E%3Cuse href='%23l' transform='translate(20 6) rotate(6) scale(1.15)' fill='%231F7A4D'/%3E%3Cuse href='%23l' transform='translate(6 22) rotate(82) scale(1.15)' fill='%23155C39'/%3E%3Cuse href='%23l' transform='translate(16 18) rotate(44) scale(1.15)' fill='%232A9462'/%3E%3Ccircle cx='14' cy='10' r='6.5' fill='%23C8202F'/%3E%3Ccircle cx='26' cy='18' r='6.5' fill='%23E03A47'/%3E%3Ccircle cx='10' cy='24' r='6.5' fill='%23A81A27'/%3E%3C/g%3E%3C/svg%3E") no-repeat top left / contain;
}
/* It swings from the top of its ribbon, the way a hung thing does. */
.hp-season-holidays .has-paper-background-color.alignfull:not(.hp-footer)::after {
  content: ""; position: absolute; top: 0; right: 9%; width: 30px; height: 96px; pointer-events: none; transform-origin: 50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 96'%3E%3Cpath d='M15 0V62' stroke='%238A8A93' stroke-width='1'/%3E%3Crect x='11.5' y='60' width='7' height='6' rx='1.5' fill='%23E2B23C'/%3E%3Ccircle cx='15' cy='80' r='15' fill='%23C8202F'/%3E%3Cpath d='M0.4 77 Q15 85 29.6 77 L29.6 82 Q15 90 0.4 82 Z' fill='%23FFFFFF' fill-opacity='0.85'/%3E%3C/svg%3E") no-repeat top center / contain;
  animation: hp-swing 4.2s ease-in-out infinite alternate;
}
@keyframes hp-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* ---- The front page's hero ---------------------------------------------------------------- */

/* An elf peeks over a present, his chin still behind it; a ghost can rise clear, a head cannot. */
.hp-season-holidays .hp-night__pop { animation-name: hp-peek; }
@keyframes hp-peek { 0%, 52%, 100% { transform: translate(0, 0) rotate(0deg); } 60%, 78% { transform: translate(0, -30px) rotate(-4deg); } 70% { transform: translate(0, -30px) rotate(4deg); } 86% { transform: translate(0, 0) rotate(0deg); } }

.hp-hero--snow .wp-block-button:not(.is-style-link) .wp-block-button__link { background: #C8202F; color: #fff; }
.hp-hero--snow .wp-block-button:not(.is-style-link) .wp-block-button__link:hover { background: #DE2E3D; }

/* Ornaments on strings from under the bar. Real buttons: a pointer over one or a tap sets it ringing. */
.hp-bauble { position: absolute; z-index: 3; top: var(--hp-header-height); padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 0; animation: hp-swing 4.6s ease-in-out infinite alternate; }
.hp-bauble i { display: block; width: 1px; height: var(--hp-string, 90px); margin: 0 auto; background: rgba(245, 240, 230, 0.55); }
.hp-bauble svg { display: block; width: 100%; height: auto; }
.hp-bauble:hover, .hp-bauble.is-ringing { animation: hp-jingle 0.9s ease-in-out; }
.hp-bauble:focus-visible { outline: 2px solid #FFD25A; outline-offset: 4px; border-radius: 50%; }
@keyframes hp-jingle { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-16deg); } 35% { transform: rotate(13deg); } 55% { transform: rotate(-9deg); } 75% { transform: rotate(5deg); } }
.hp-bauble--1 { left: 7%; width: 54px; --hp-string: 56px; }
.hp-bauble--2 { left: 14%; width: 38px; --hp-string: 112px; animation-duration: 3.8s; animation-delay: -1.4s; }
.hp-bauble--3 { right: 25%; width: 34px; --hp-string: 38px; animation-duration: 4.1s; animation-delay: -2.2s; }
.hp-bauble--4 { right: 18%; width: 46px; --hp-string: 84px; animation-duration: 5s; animation-delay: -3s; }

/* The parol: hanging from under the bar with the ornaments, lit by a click as the lamps are, and flashing through
   its patterns, a new one every six seconds (season.js; Chris, 2026-11-01: "more vibrant and active"). Livelier than
   the string lights by his word, but small on the page, soft at the edges, and no part faster than about 3 flashes a second. */
.hp-parol { display: block; padding: 0; border: 0; background: none; }
.hp-parol i { display: block; width: 1px; height: var(--hp-string, 36px); margin: 0 auto; background: rgba(245, 240, 230, 0.55); }
.hp-parol svg { display: block; width: 100%; height: auto; overflow: visible; }
.hp-parol.is-lit svg { filter: drop-shadow(0 0 14px rgba(255, 205, 90, 0.85)); }
.hp-jack.hp-parol { top: var(--hp-header-height); right: 4%; width: clamp(78px, 7.4vw, 124px); transform-origin: 50% 0; animation: hp-swing 5.4s ease-in-out infinite alternate; }
.hp-jack.hp-parol:hover { transform: none; animation-play-state: paused; }
.hp-jack.hp-parol:focus-visible { outline: 2px solid #FFD25A; outline-offset: 4px; border-radius: 8px; }
.hp-parol__point, .hp-parol__panel, .hp-parol__bulb, .hp-parol__heart { opacity: 0.2; transition: opacity 0.3s; }
.is-lit .hp-parol__point, .is-lit .hp-parol__panel, .is-lit .hp-parol__bulb, .is-lit .hp-parol__heart { opacity: 1; }
/* On for a share of each turn, then off, the edges quick but not hard. */
@keyframes hp-p-quarter { 0%, 32%, 100% { opacity: 0.14; } 5%, 24% { opacity: 1; } }
@keyframes hp-p-half { 0%, 56%, 100% { opacity: 0.14; } 6%, 48% { opacity: 1; } }
@keyframes hp-p-spark { 0%, 40%, 100% { opacity: 0.2; } 8%, 16% { opacity: 1; } }
@keyframes hp-p-fill { 0%, 100% { opacity: 0.14; } 6%, 86% { opacity: 1; } 94% { opacity: 0.14; } }
@keyframes hp-p-beat { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes hp-p-colors { from { filter: hue-rotate(0deg) saturate(1.2); } to { filter: hue-rotate(360deg) saturate(1.2); } }
/* Spin: one point at a time round the star, the bulbs racing the other way. */
.is-lit[data-pattern="spin"] .hp-parol__point { animation: hp-p-quarter 1.25s linear infinite; animation-delay: calc(var(--n) * 0.25s - 1.25s); }
.is-lit[data-pattern="spin"] .hp-parol__panel { animation: hp-p-quarter 1.25s linear infinite; animation-delay: calc(var(--n) * 0.25s - 1.125s); }
.is-lit[data-pattern="spin"] .hp-parol__bulb { animation: hp-p-quarter 1s linear infinite; animation-delay: calc(var(--g) * -0.25s); }
/* All: the whole star on and off together. */
.is-lit[data-pattern="all"] :is(.hp-parol__point, .hp-parol__panel, .hp-parol__bulb) { animation: hp-p-half 0.9s linear infinite; }
.is-lit[data-pattern="all"] .hp-parol__heart { animation: hp-p-half 0.9s linear infinite; animation-delay: -0.45s; }
/* Burst: light rushes out from the heart, through the points and panels to the ring. */
.is-lit[data-pattern="burst"] .hp-parol__heart { animation: hp-p-quarter 1.2s linear infinite; }
.is-lit[data-pattern="burst"] .hp-parol__point { animation: hp-p-quarter 1.2s linear infinite; animation-delay: 0.15s; }
.is-lit[data-pattern="burst"] .hp-parol__panel { animation: hp-p-quarter 1.2s linear infinite; animation-delay: 0.3s; }
.is-lit[data-pattern="burst"] .hp-parol__bulb { animation: hp-p-quarter 1.2s linear infinite; animation-delay: 0.45s; }
/* Swap: points and panels trade places, every other bulb with them. */
.is-lit[data-pattern="swap"] .hp-parol__point, .is-lit[data-pattern="swap"] .hp-parol__bulb:nth-of-type(even) { animation: hp-p-half 1s linear infinite; }
.is-lit[data-pattern="swap"] .hp-parol__panel, .is-lit[data-pattern="swap"] .hp-parol__bulb:nth-of-type(odd) { animation: hp-p-half 1s linear infinite; animation-delay: -0.5s; }
/* Wipe: the star fills point by point and the ring bulb by bulb, then goes dark and starts over. */
.is-lit[data-pattern="wipe"] .hp-parol__point { animation: hp-p-fill 3s linear infinite; animation-delay: calc(var(--n) * 0.2s); }
.is-lit[data-pattern="wipe"] .hp-parol__panel { animation: hp-p-fill 3s linear infinite; animation-delay: calc(var(--n) * 0.2s + 0.1s); }
.is-lit[data-pattern="wipe"] .hp-parol__bulb { animation: hp-p-fill 3s linear infinite; animation-delay: calc(var(--i) * 0.06s); }
/* Colors: everything lit, the colors turning round the wheel, the heart beating. */
.is-lit[data-pattern="colors"] svg > .hp-parol__panel, .is-lit[data-pattern="colors"] .hp-parol__point { animation: hp-p-colors 2.4s linear infinite; }
.is-lit[data-pattern="colors"] .hp-parol__bulb { animation: hp-p-quarter 0.8s linear infinite; animation-delay: calc(var(--g) * -0.2s); }
.is-lit[data-pattern="colors"] .hp-parol__heart { animation: hp-p-beat 0.8s ease-in-out infinite; }
/* Twinkle: every part flashing white-hot at its own moment. */
.is-lit[data-pattern="twinkle"] :is(.hp-parol__point, .hp-parol__panel) { animation: hp-p-spark 1.3s linear infinite; animation-delay: calc(var(--r) * -1.3s); }
.is-lit[data-pattern="twinkle"] .hp-parol__bulb { animation: hp-p-spark 0.9s linear infinite; animation-delay: calc(var(--r) * -0.9s); }
.is-lit[data-pattern="twinkle"] .hp-parol__heart { animation: hp-p-beat 1.3s ease-in-out infinite; }
/* Ring: light runs round the ring while the points and panels take turns. */
.is-lit[data-pattern="ring"] .hp-parol__bulb { animation: hp-p-quarter 1.6s linear infinite; animation-delay: calc(var(--i) * 0.1s); }
.is-lit[data-pattern="ring"] .hp-parol__point { animation: hp-p-half 1.6s linear infinite; animation-delay: calc(var(--n) * 0.32s); }
.is-lit[data-pattern="ring"] .hp-parol__panel { animation: hp-p-half 1.6s linear infinite; animation-delay: calc(var(--n) * 0.32s + 0.8s); }
/* The trees: on the ground where the jack-o'-lanterns stand, lit by a click (season.js). */
.hp-tree.hp-jack.is-lit { filter: drop-shadow(0 0 14px rgba(255, 210, 110, 0.5)); animation: none; }
.hp-tree:hover { transform: scale(1.04) rotate(-1.5deg); }
.hp-tree__light { opacity: 0.22; }
.hp-tree.is-lit .hp-tree__light { opacity: 1; animation: hp-twinkle-dot 2.6s ease-in-out infinite; }
.hp-tree__star { fill: #6F6A55; transition: fill 0.3s; }
.hp-tree.is-lit .hp-tree__star { fill: #FFD25A; }
.hp-tree.hp-jack--1 { left: 2%; bottom: 2%; width: clamp(92px, 9.5vw, 150px); }
.hp-tree.hp-jack--2 { left: 46%; bottom: 3%; width: clamp(64px, 6vw, 96px); }
.hp-tree.hp-jack--3 { left: 71%; bottom: 7%; width: clamp(56px, 5vw, 78px); }

/* The lamps: on the ground beside the trees, and lit by a click as they are. The flame wavers from its wick. */
.hp-lamp.hp-jack.is-lit { filter: drop-shadow(0 0 10px rgba(255, 190, 80, 0.55)); animation: none; }
.hp-lamp:hover { transform: scale(1.05); }
.hp-lamp__flame { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 0.25s; }
.is-lit .hp-lamp__flame { opacity: 1; animation: hp-flicker 1.5s ease-in-out infinite alternate; }
/* During Hanukkah and Kwanzaa only that night's candles burn (season.js). */
.is-lit .hp-lamp__flame.is-out { opacity: 0; animation: none; }
/* For the five days of Diwali the diyas burn brighter. */
.hp-diwali [data-hp-lamp="diyas"] .hp-lamp__flame { filter: drop-shadow(0 0 4px #FFC23C); }
.hp-diwali .hp-lamp--diyas.hp-jack.is-lit { filter: drop-shadow(0 0 20px rgba(255, 190, 80, 0.95)); }
@keyframes hp-flicker { 0% { transform: scale(1, 1) rotate(-3deg); } 40% { transform: scale(0.9, 1.12) rotate(2deg); } 70% { transform: scale(1.05, 0.92) rotate(-1deg); } 100% { transform: scale(0.96, 1.08) rotate(3deg); } }
.hp-lamp--menorah.hp-jack--3 { left: 70.5%; bottom: 6%; width: clamp(72px, 7vw, 104px); }
.hp-lamp--kinara.hp-jack--4 { left: 40.4%; bottom: 7.5%; width: clamp(56px, 5vw, 72px); }
.hp-lamp--diyas.hp-jack--5 { left: 31%; bottom: 1.5%; width: clamp(72px, 7vw, 100px); }

@media (max-width: 781px) {
  /* "Season's printings." is longer than "Trick or print.": sized so "printings." fills the phone without running off it. */
  .hp-hero--snow h1 { font-size: clamp(2.75rem, 16.5vw, 5.5rem); line-height: 0.96; }
  .hp-bauble--2, .hp-bauble--3 { display: none; }
  .hp-bauble--1 { left: 3%; width: 36px; --hp-string: 18px; }
  /* The parol takes the fourth ornament's place in the corner. */
  .hp-bauble--4 { display: none; }
  .hp-jack.hp-parol { right: 3%; width: 58px; --hp-string: 32px; }
  .hp-parol.is-lit svg { filter: drop-shadow(0 0 6px rgba(255, 210, 110, 0.5)); }
  .hp-tree.hp-jack--1 { left: 22%; bottom: 1.5%; width: 80px; }
  .hp-tree.hp-jack--2 { display: none; }
  /* season.css hides Halloween's other lanterns at this width; the menorah is not one of them. */
  .hp-lamp--menorah.hp-jack--3 { display: block; left: 36%; bottom: 2%; width: 76px; }
  .hp-lamp--kinara.hp-jack--4 { left: 66%; bottom: 3%; width: 58px; }
  .hp-lamp--diyas.hp-jack--5 { left: 6%; bottom: 1.5%; width: 74px; }
}
@media (max-width: 599px) {
  .hp-tree.hp-jack--1 { left: 37%; right: auto; bottom: 6px; width: 78px; }
  .hp-tree.hp-jack--2 { display: block; left: 2%; right: auto; bottom: 6px; width: 54px; }
  .hp-lamp--menorah.hp-jack--3 { display: block; left: 18%; right: auto; bottom: 8px; width: 66px; }
  .hp-lamp--kinara.hp-jack--4 { left: 58%; right: auto; bottom: 8px; width: 54px; }
  .hp-lamp--diyas.hp-jack--5 { left: auto; right: 3%; bottom: 4px; width: 62px; }
  .hp-burst--1 { left: 5%; top: auto; bottom: 66vw; width: 76px; }
}

/* ---- The front page's band and products --------------------------------------------------- */

.hp-season-holidays .hp-party { background: #A81A27; color: #fff; }
.hp-season-holidays .hp-party h2 { color: #fff; }
.hp-season-holidays .hp-party__actions .hp-party__go { background: #fff; color: #1D1D1F; }
.hp-season-holidays .hp-party__actions .hp-party__more { color: #fff; }
.hp-season-holidays .hp-party__facts { border-top-color: rgba(255, 255, 255, 0.3); }
.hp-season-holidays .hp-party__facts p { color: #F7DADC; }
.hp-season-holidays .hp-party__facts b, .hp-season-holidays .hp-party__facts a { color: #fff; }
/* Six printed cards, one for each holiday, in calendar order and all one size: none is the headliner. Each opens when tapped. */
.hp-season-holidays .hp-party__art { height: auto; max-width: none; width: 100%; margin: 0; container-type: inline-size; }
.hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.6rem, 2.6cqw, 1.1rem); }
.hp-card { box-sizing: border-box; width: 100%; aspect-ratio: 5 / 7; margin: 0; padding: 5cqw 3.4cqw 4cqw; border: 0; font-family: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 4px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26); cursor: pointer; transition: transform 0.25s var(--hp-ease), box-shadow 0.25s; }
.hp-card:nth-child(odd) { transform: rotate(-1.6deg); }
.hp-card:nth-child(even) { transform: rotate(1.4deg) translateY(6px); }
.hp-cards .hp-card:hover, .hp-cards .hp-card:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.36); }
.hp-card:focus-visible { outline: 2px solid #FFD25A; outline-offset: 3px; }
.hp-card svg { flex: 1 1 0; min-height: 0; width: 88%; overflow: visible; }
.hp-card strong { margin-top: auto; padding-top: 2.4cqw; font-size: clamp(0.8125rem, 3.5cqw, 1.3125rem); line-height: 1.12; font-weight: 700; }
.hp-card span { margin-top: 1.2cqw; font-size: clamp(0.625rem, 2.3cqw, 0.8125rem); line-height: 1.25; font-weight: 500; }
.hp-card--diwali { background: #4A1248; color: #FFE3A8; }
.hp-card--thanksgiving { background: #F5E6CC; color: #4A2C14; }
.hp-card--hanukkah { background: #123E7C; color: #fff; }
.hp-card--christmas { background: #14432F; color: #F5F0E6; }
.hp-card--kwanzaa { background: #F5F0E6; color: #1D1D1F; }
.hp-card--newyear { background: #E2B23C; color: #1D1D1F; }
.hp-season-holidays .hp-made__tag { background: #A81A27; color: #fff; }

/* A card, opened: over the whole window, sized from the window's width and height. Closed it sits in the middle; as
   its cover swings back on the fold it slides right, so the open spread is centered. */
.hp-opencard { --w: min(43vw, 300px, calc((100dvh - 190px) * 0.714)); position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1rem; border: 0; background: none; color: #1D1D1F; overflow: hidden; }
.hp-opencard[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; }
.hp-opencard::backdrop { background: rgba(14, 14, 16, 0.76); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.hp-opencard__book { position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); transition: transform 0.6s var(--hp-ease); }
.hp-opencard.is-open .hp-opencard__book { transform: translateX(calc(var(--w) / 2)); }
.hp-opencard__page, .hp-opencard__back { box-sizing: border-box; border-radius: 0 4px 4px 0; }
.hp-opencard__page { background: #FFFDF8; }
.hp-opencard__page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; padding: 12%; text-align: center; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); border-top: calc(var(--w) * 0.03) solid var(--hp-card-color, #A81A27); }
.hp-opencard__words { margin: 0; font-size: calc(var(--w) * 0.088); line-height: 1.28; font-weight: 600; letter-spacing: -0.01em; color: #1D1D1F; }
.hp-opencard__sign { margin: 0; font-size: calc(var(--w) * 0.052); line-height: 1.3; color: #6E6E73; }
.hp-opencard__cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transform: perspective(1500px) rotateY(0deg); transition: transform 0.6s var(--hp-ease); }
.hp-opencard.is-open .hp-opencard__cover { transform: perspective(1500px) rotateY(-180deg); }
.hp-opencard__front, .hp-opencard__back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hp-opencard__front.hp-card { aspect-ratio: auto; height: 100%; padding: 15% 10% 12%; cursor: default; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); transform: none; }
.hp-opencard__front strong { padding-top: 7%; font-size: calc(var(--w) * 0.105); }
.hp-opencard__front span { margin-top: 3.5%; font-size: calc(var(--w) * 0.062); }
/* The inside of the cover: the card's own color and picture, at full strength (Chris, 2026-11-01). */
.hp-opencard__back { display: flex; align-items: center; justify-content: center; padding: 14%; transform: rotateY(180deg); border-radius: 4px 0 0 4px; box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, 0.3); }
.hp-opencard__back svg { width: 100%; max-height: 70%; overflow: visible; }
.hp-opencard__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; max-width: 34rem; text-align: center; opacity: 0; transition: opacity 0.4s 0.25s; }
.hp-opencard.is-open .hp-opencard__foot { opacity: 1; }
.hp-opencard__foot p { flex: 1 1 100%; margin: 0; font-size: 0.9375rem; color: #F5F0E6; }
.hp-opencard__foot .hp-party__go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: 999px; background: #fff; color: #1D1D1F; font-size: 1rem; font-weight: 600; text-decoration: none; }
.hp-opencard__close { min-height: 44px; padding: 0 1rem; border: 0; background: none; color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.hp-opencard__close:focus-visible { outline: 2px solid #FFD25A; outline-offset: 2px; border-radius: 4px; }

/* The wolf howls when tapped: he stretches up and rings go out across the moon (season.js). */
.hp-howl__wolf { pointer-events: auto; cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
.hp-howl__ring { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: 50% 50%; }
.hp-howl.is-howling .hp-howl__wolf { animation: hp-howl 5.9s ease-in-out; }
.hp-howl.is-howling .hp-howl__ring { animation: hp-howl-ring 1.5s ease-out 3; }
@keyframes hp-howl { 0%, 100% { transform: scale(1) rotate(0deg); } 10%, 82% { transform: scale(1.025, 1.05) rotate(-1.4deg); } }
@keyframes hp-howl-ring { 0% { opacity: 0; transform: scale(0.72); } 30% { opacity: 0.75; } 100% { opacity: 0; transform: scale(1.3); } }

/* See it before it prints: the card on show is a holiday card, green and gold, with a star on its back. */
.hp-season-holidays .hp-3d__cover { background: #14432F; color: #F5F0E6; }
.hp-season-holidays .hp-3d__cover svg { width: 62%; }
.hp-season-holidays .hp-3d__backcover { background: #14432F; }
.hp-season-holidays .hp-3d__backcover span { width: 16px; height: 16px; border-radius: 0; background: #FFD25A; opacity: 1; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 69% 60%, 80% 96%, 50% 75%, 20% 96%, 31% 60%, 0 38%, 38% 36%); }
.hp-season-holidays .hp-3d__inside { background: #FFFDF8; border-top: calc(var(--w) * 0.03) solid #14432F; }
.hp-season-holidays .hp-3d__sig { color: #A81A27; }
/* The inside of its cover: the same green and a gold star in a gold frame. */
.hp-season-holidays .hp-3d__blank { background: #14432F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -14 30 28'%3E%3Cpolygon points='0,-13 4,-4 14,-4 6,2 9,12 0,6 -9,12 -6,2 -14,-4 -4,-4' fill='%23FFD25A'/%3E%3C/svg%3E") no-repeat center / 34%; }
.hp-season-holidays .hp-3d__blank::before { border: 2px solid rgba(255, 210, 90, 0.65); }
/* Print gets kept: the tiles' drawn pictures fill the space the photographs do. */
.hp-moment__figure svg { display: block; width: 100%; height: 100%; font-family: inherit; transition: transform 600ms var(--hp-ease); }
.hp-moment:hover .hp-moment__figure svg { transform: scale(1.03); }

/* ---- The footer: a snowy night, built around its content ----------------------------------- */

.hp-season-holidays .hp-footer--night :is(.hp-footer__contact, .hp-footer__links) a:hover { color: #FFD25A; }
/* The copyright sits on the snow, so its words are ink. */
.hp-season-holidays .hp-footer--night .hp-footer__bottom, .hp-season-holidays .hp-footer--night .hp-footer__bottom p { color: #1D1D1F; }
.hp-season-holidays .hp-footer--night .hp-hours__day.is-next { box-shadow: inset 0 0 0 1.5px #FFD25A; }
.hp-season-holidays .hp-footer--night .hp-hours__day.is-next .hp-hours__state { color: #FFD25A; }
.hp-footer-sky__holly { position: absolute; top: 0; right: 0; width: clamp(72px, 8vw, 112px); transform: scaleX(-1); }
.hp-footer-sky__holly svg { display: block; width: 100%; height: auto; }
/* In the footer's sky, under the holly and clear of the links; a phone has the hero's. */
.hp-footer-sky__parol { position: absolute; top: 0; right: clamp(84px, 9vw, 130px); width: clamp(56px, 5vw, 76px); --hp-string: 34px; }
@media (max-width: 1100px) { .hp-footer-sky__parol { display: none; } }
/* On a phone only the scene's right end shows: more snow under the words, and nothing on it behind them. */
@media (max-width: 600px) {
  .hp-season-holidays .hp-footer--night > .hp-night-ground { height: 300px; }
  .hp-season-holidays .hp-footer--night .hp-hours { margin-bottom: 160px; }
  .hp-night-ground__diyas, .hp-burst--ground { display: none; }
}
/* Wider than the drawing, the snow runs on to the left under the words. */
@media (min-width: 1441px) {
  .hp-season-holidays .hp-footer.hp-footer--night::before { display: block !important; background: #E8EEF6; }
}

/* ---- The music button ---------------------------------------------------------------------- */

.hp-season-holidays .hp-music { border-color: #C8202F; }
.hp-season-holidays .hp-music__toggle:focus-visible, .hp-season-holidays .hp-music__volume:focus-visible { outline-color: #FFD25A; }
.hp-season-holidays .hp-music__toggle[aria-pressed="true"] { color: #FFD25A; }
.hp-season-holidays .hp-music.is-on { box-shadow: 0 0 0 4px rgba(200, 32, 47, 0.28), 0 10px 30px rgba(0, 0, 0, 0.25); }
.hp-season-holidays .hp-music__volume { accent-color: #C8202F; }
.hp-season-holidays .hp-music__volume::-webkit-slider-thumb { background: #C8202F; }
.hp-season-holidays .hp-music__volume::-moz-range-progress { background: #C8202F; }
.hp-season-holidays .hp-music__volume::-moz-range-thumb { background: #C8202F; }

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

@media (prefers-reduced-motion: reduce) {
  .is-lit .hp-lamp__flame, .hp-haunt__sleigh, .hp-haunt__sleigh > span, .hp-haunt__flake > span, .hp-bauble, .hp-bauble:hover, .hp-bauble.is-ringing, .hp-tree.is-lit .hp-tree__light,
  .hp-moment__figure svg, .hp-parol, .hp-lights i, .hp-card, .hp-howl.is-howling .hp-howl__wolf, .hp-howl.is-howling .hp-howl__ring,
  .hp-season-holidays .has-paper-background-color.alignfull:not(.hp-footer)::after,
  .hp-season-holidays :is(.hp-tile-card, .hp-bento__tile, .hp-jobpage__tile, .hp-messages, .hpm-listrow, .hpm-tile)::after { animation: none !important; }
  .hp-haunt__sleigh, .hp-haunt__burst { display: none; }
  .hp-opencard__book, .hp-opencard__cover, .hp-opencard__foot { transition: none; }
  .hp-haunt__flake--far { display: none; }
  /* The string stays lit in its four colors, whatever the pattern. */
  .hp-lights[data-pattern] i { opacity: 1; color: var(--c); }
  /* The fireworks stay open in the sky, not going off. */
  .hp-burst { animation: none; opacity: 0.85; transform: none; }
  /* The snow hangs in the air: a few flakes where they are, not falling. */
  .hp-haunt__flake { animation: none; top: calc(var(--hp-header-height) + 90px); }
  .hp-haunt__flake:nth-child(3n) { top: 42%; }
  .hp-haunt__flake:nth-child(3n+1) { top: 68%; }
}