/* ===========================================================================
   HOLIDAY THEMES (preview only, not on the live site)
   html.hol-thanksgiving or html.hol-christmas switches everything below on.
   =========================================================================== */

/* ---------------------------------------------------------------- shared */
.hol-sky{ position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.hol-greet{
  position:relative; display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  width:fit-content; max-width:100%; margin:var(--sp-4) auto 0; padding:.7rem 1.4rem; border-radius:var(--r-pill);
  font:700 clamp(1rem, 3.6vw, 1.25rem)/1.25 var(--display); text-align:center;
  box-shadow:0 10px 26px -14px rgba(36,28,14,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  animation:holPop .7s var(--ease-out) both .2s;
}
.hol-greet svg{ width:1.6rem; height:1.6rem; flex:none; }
.hol-greet small{ display:block; font:500 var(--t-sm)/1.3 var(--body); opacity:.88; margin-top:.15rem; }
@keyframes holPop{ from{ opacity:0; transform:translateY(8px) scale(.96); } }

.hol-switch{
  position:fixed; right:.75rem; bottom:calc(5.25rem + env(safe-area-inset-bottom)); z-index:2300;
  display:flex; align-items:center; gap:.25rem; padding:.3rem; border-radius:var(--r-pill);
  background:rgba(24,12,8,.88); color:#fff; font:600 .8rem/1 var(--body); box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hol-switch b{ padding:0 .6rem 0 .5rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; opacity:.7; }
.hol-switch button{ min-height:2.4rem; padding:0 .85rem; border:0; border-radius:var(--r-pill); background:transparent; color:#fff; font:inherit; cursor:pointer; }
.hol-switch button[aria-pressed="true"]{ background:#fff; color:#241C0E; }
@media (min-width:64.01rem){ .hol-switch{ bottom:1.25rem; } }

/* ---------------------------------------------------------- thanksgiving */
.hol-thanksgiving{
  --cream:#F4E3C8; --hero-ground:#EFD3AE; --tan:#E7CBA0;
  --pumpkin:#C4591B; --harvest:#D99A2B;
}
.hol-thanksgiving body{ background-color:var(--cream); }
.hol-thanksgiving .masthead{ background:rgba(244,227,200,.96); }
.hol-thanksgiving .topstrip{ background:linear-gradient(90deg, #5A1A0E, #7A2B0F 50%, #5A1A0E); }
.hol-thanksgiving .bleed--hero{
  --band:#EFD3AE;
  background-image:radial-gradient(70% 90% at 50% 0%, rgba(217,154,43,.28), transparent 70%);
}
.hol-thanksgiving .btn--primary{ background:linear-gradient(135deg, var(--maroon), var(--pumpkin)); border-color:transparent; }
.hol-thanksgiving .seal__gem{ fill:var(--harvest); }
.hol-thanksgiving .hol-greet{ background:linear-gradient(135deg, #7A2B0F, var(--pumpkin) 60%, var(--harvest)); color:#FFF4E2; }

.leaf{
  position:absolute; top:-8vh; left:var(--x); width:var(--s); height:var(--s);
  animation:leafFall var(--d) linear var(--delay) infinite;
}
.leaf svg{ width:100%; height:100%; display:block; animation:leafSway calc(var(--d) / 4) ease-in-out var(--delay) infinite alternate;
           filter:drop-shadow(0 3px 3px rgba(60,20,5,.18)); }
@keyframes leafFall{
  0%  { transform:translate(0, 0) rotate(0deg); opacity:0; }
  6%  { opacity:var(--o); }
  92% { opacity:var(--o); }
  100%{ transform:translate(var(--drift), 112vh) rotate(var(--spin)); opacity:0; }
}
@keyframes leafSway{ from{ transform:translateX(-28px) rotateY(0deg) rotate(-18deg); } to{ transform:translateX(28px) rotateY(55deg) rotate(18deg); } }

/* ------------------------------------------------------------- christmas */
.hol-christmas{
  --maroon:#A3161F; --maroon-deep:#7E0F17; --maroon-ink:#5C0A10;
  --cream:#F6F1E7; --hero-ground:#EEF2EC; --tan:#E3E8DF;
  --pine:#1F5A3A; --pine-deep:#123D27; --gold:#E2B44A;
}
.hol-christmas body{ background-color:var(--cream); }
.hol-christmas .masthead{ background:rgba(246,241,231,.96); }
.hol-christmas .topstrip{ background:linear-gradient(90deg, var(--pine-deep), var(--pine) 50%, var(--pine-deep)); }
.hol-christmas .bleed--hero{
  --band:#EEF2EC;
  background-image:radial-gradient(70% 90% at 50% 0%, rgba(226,180,74,.22), transparent 70%);
  padding-bottom:0;
}
.hol-christmas .seal__gem{ fill:var(--gold); }
.hol-christmas .hol-greet{ background:linear-gradient(135deg, var(--pine-deep), var(--pine) 55%, #2D7A4F); color:#FFF8EA; }
.hol-christmas .hol-greet svg{ color:var(--gold); }
.hol-christmas .btn--primary{ background:linear-gradient(135deg, var(--maroon-deep), var(--maroon)); border-color:transparent; }

/* string of lights under the header */
.hol-lights{
  position:absolute; left:0; right:0; bottom:-14px; height:22px; pointer-events:none; z-index:5;
  display:flex; justify-content:space-around; padding:0 1rem;
  background:radial-gradient(ellipse 34px 10px at 17px 0, transparent 8px, rgba(40,40,40,.55) 9px, transparent 10px) 0 0/34px 22px repeat-x;
}
.masthead{ position:relative; }
.hol-lights i{
  width:9px; height:13px; margin-top:5px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:var(--c); box-shadow:0 0 10px 2px var(--c); animation:twinkle 1.6s ease-in-out infinite alternate;
  animation-delay:var(--t);
}
@keyframes twinkle{ from{ opacity:1; } to{ opacity:.35; box-shadow:0 0 2px 0 var(--c); } }

/* the santa hat on the V seal */
.hol-hat{ position:absolute; width:min(74px,20vw); left:50%; transform:translate(-8%, -38%) rotate(18deg); top:0; pointer-events:none; }
.hol-christmas .hero{ position:relative; }
.hol-markwrap{ position:relative; width:fit-content; margin:0 auto; }

/* a snowy little forest along the bottom of the hero */
.hol-forest{ display:block; width:100%; height:auto; margin-top:var(--sp-5); }
.hol-forest .star{ animation:twinkle 1.4s ease-in-out infinite alternate; }

.hol-snow{ position:absolute; inset:0; width:100%; height:100%; }

/* ------------------------------------------------------------- extras */
.hol-markwrap{ position:relative; width:fit-content; margin:0 auto var(--sp-5); }
.hol-markwrap .hero__mark{ position:relative; z-index:1; margin-bottom:0; }
.hol-wreath{ position:absolute; inset:-19%; width:138%; height:138%; z-index:0; pointer-events:none;
             animation:wreathIn .9s var(--ease-out) both; }
@keyframes wreathIn{ from{ opacity:0; transform:scale(.85) rotate(-20deg); } }
.hol-hat{ z-index:2; }

/* autumn banner under the header */
.hol-bunting{
  position:absolute; left:0; right:0; bottom:-22px; height:26px; pointer-events:none; z-index:5;
  display:flex; justify-content:space-around; padding:0 .5rem;
  background:linear-gradient(#7A4420, #7A4420) 0 2px/100% 1.5px no-repeat;
}
.hol-bunting i{
  width:16px; height:20px; margin-top:3px; background:var(--c); clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0; animation:flagSway 2s ease-in-out infinite alternate; animation-delay:var(--t);
}
@keyframes flagSway{ from{ transform:rotate(-7deg); } to{ transform:rotate(7deg); } }
.hol-thanksgiving .bleed--hero{ padding-bottom:0; }
.hol-turkey{ animation:turkeyBob 2.4s ease-in-out infinite; }
@keyframes turkeyBob{ 50%{ transform:translateY(-2px); } }

/* snow resting on the top strip */
.topstrip{ position:relative; }
.hol-snowcap{
  position:absolute; left:0; right:0; bottom:-7px; height:10px; pointer-events:none; z-index:6;
  background:radial-gradient(circle at 12px -2px, #fff 9px, transparent 10px) 0 0/24px 10px repeat-x,
             radial-gradient(circle at 5px -1px, #fff 6px, transparent 7px) 9px 0/31px 9px repeat-x;
  filter:drop-shadow(0 2px 1px rgba(30,60,50,.2));
}

/* Santa's sleigh: crosses in a long swoop every 26 seconds, bobbing as it
   goes, with galloping reindeer, a waving Santa and a sparkle trail */
.hol-sleigh{ position:absolute; top:16vh; left:0; width:min(320px,62vw); opacity:0;
             animation:sleighPath 26s linear 3s infinite; }
.hol-sleigh svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
@keyframes sleighPath{
  0%    { transform:translate(-70vw, 10vh) rotate(-6deg); opacity:1; }
  8%    { transform:translate(-10vw, 1vh) rotate(-8deg); }
  16%   { transform:translate(45vw, 6vh) rotate(3deg); }
  24%   { transform:translate(85vw, -3vh) rotate(-7deg); }
  32%   { transform:translate(115vw, -6vh) rotate(-4deg); opacity:1; }
  32.1%,100%{ transform:translate(115vw, -6vh); opacity:0; }
}
.hol-sleigh__bob{ position:relative; animation:sleighBob 1.4s ease-in-out infinite alternate; }
@keyframes sleighBob{ from{ transform:translateY(-6px) rotate(-1.5deg); } to{ transform:translateY(6px) rotate(1.5deg); } }

.hol-deer, .hol-leg, .hol-santa, .hol-santa-arm, .hol-spark, .hol-nose{ transform-box:fill-box; }
.hol-deer{ transform-origin:50% 50%; animation:deerGallop .5s ease-in-out infinite; }
@keyframes deerGallop{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-5deg); } }
.hol-leg{ transform-origin:50% 0; animation:legSwing .5s ease-in-out infinite; }
.hol-leg--b{ animation-name:legSwingB; }
@keyframes legSwing{ 0%,100%{ transform:rotate(28deg); } 50%{ transform:rotate(-28deg); } }
@keyframes legSwingB{ 0%,100%{ transform:rotate(-28deg); } 50%{ transform:rotate(28deg); } }
.hol-nose{ transform-origin:50% 50%; animation:noseBlink 1s ease-in-out infinite; }
@keyframes noseBlink{ 0%,100%{ opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 3px #FF3B3B); } 50%{ opacity:.55; transform:scale(.85); filter:none; } }
.hol-santa{ transform-origin:50% 100%; animation:santaBounce .7s ease-in-out infinite alternate; }
@keyframes santaBounce{ from{ transform:translateY(0); } to{ transform:translateY(-1.5px); } }
.hol-santa-arm{ transform-origin:0% 100%; animation:santaWave .45s ease-in-out infinite alternate; }
@keyframes santaWave{ from{ transform:rotate(-18deg); } to{ transform:rotate(22deg); } }
.hol-reins{ animation:reins .5s ease-in-out infinite alternate; }
@keyframes reins{ from{ transform:translateY(-1px); } to{ transform:translateY(1px); } }
.hol-spark{ transform-origin:50% 50%; animation:spark 1.26s ease-out infinite; }
@keyframes spark{ 0%{ opacity:0; transform:translate(0,0) scale(.4); } 20%{ opacity:1; transform:translate(-4px,0) scale(1.2); }
                  100%{ opacity:0; transform:translate(-30px,6px) scale(.2); } }
/* "Ho ho ho!" pops up over Santa partway across */
.hol-hoho{
  position:absolute; left:8%; top:-34%; padding:.25rem .6rem; border-radius:999px; white-space:nowrap;
  background:#fff; color:#A3161F; font:700 .85rem/1.2 var(--display); box-shadow:0 4px 12px -4px rgba(0,0,0,.35);
  opacity:0; animation:hoho 26s ease-out 3s infinite;
}
.hol-hoho::after{ content:""; position:absolute; left:40%; bottom:-5px; border:6px solid transparent; border-bottom:0; border-top-color:#fff; }
@keyframes hoho{
  0%,9%   { opacity:0; transform:translateY(6px) scale(.7); }
  10.5%   { opacity:1; transform:translateY(0) scale(1.08); }
  11.5%,19%{ opacity:1; transform:translateY(0) scale(1); }
  21%,100%{ opacity:0; transform:translateY(-6px) scale(.9); }
}

@media (prefers-reduced-motion: reduce){
  .hol-bunting i, .hol-turkey, .hol-wreath, .hol-sleigh, .hol-sleigh *{ animation:none !important; }
  .hol-sleigh{ display:none; }
}
/* ------------------------------------------------------- moving props */
.hol-pk, .hol-wheat, .hol-tail, .hol-gobble, .hol-tree, .hol-gift, .hol-snowman, .hol-wave, .hol-orn{ transform-box:fill-box; }
.hol-pk{ transform-origin:50% 100%; animation:pkWobble 3.2s ease-in-out infinite; }
@keyframes pkWobble{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } }
.hol-wheat{ transform-origin:50% 100%; animation:wheatSway 3.6s ease-in-out infinite alternate; }
@keyframes wheatSway{ from{ transform:rotate(-5deg); } to{ transform:rotate(5deg); } }
.hol-tail{ transform-origin:50% 100%; animation:tailFan 2.4s ease-in-out infinite; }
@keyframes tailFan{ 0%,100%{ transform:scale(.9); } 50%{ transform:scale(1.07); } }
.hol-gobble{ transform-origin:50% 100%; animation:gobble 1.8s ease-in-out infinite; }
@keyframes gobble{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-4deg); } 40%{ transform:rotate(3deg); } 60%{ transform:rotate(0); } }
.hol-thanksgiving .hol-greet svg{ animation:greetBob 2.2s ease-in-out infinite; }
.hol-thanksgiving .hol-greet svg:last-child{ animation-delay:-1.1s; }
@keyframes greetBob{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-3px) rotate(6deg); } }

.hol-tree{ transform-origin:50% 100%; animation:treeSway 5s ease-in-out infinite alternate; }
@keyframes treeSway{ from{ transform:rotate(-1.4deg); } to{ transform:rotate(1.4deg); } }
.hol-orn{ animation:ornGlow 2.4s ease-in-out infinite; }
@keyframes ornGlow{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.hol-gift{ transform-origin:50% 100%; animation:giftHop 4.4s ease-in-out infinite; }
@keyframes giftHop{ 0%,78%,100%{ transform:translateY(0) scaleY(1); } 82%{ transform:translateY(0) scaleY(.9); } 88%{ transform:translateY(-6px) scaleY(1.05); } 94%{ transform:translateY(0) scaleY(.95); } }
.hol-snowman{ transform-origin:50% 100%; animation:snowRock 4s ease-in-out infinite alternate; }
@keyframes snowRock{ from{ transform:rotate(-3deg); } to{ transform:rotate(3deg); } }
.hol-wave{ transform-origin:0% 100%; animation:wave .9s ease-in-out infinite alternate; }
@keyframes wave{ from{ transform:rotate(-14deg); } to{ transform:rotate(16deg); } }
.hol-hat svg{ transform-origin:20% 85%; animation:hatWiggle 3s ease-in-out infinite; }
@keyframes hatWiggle{ 0%,100%{ transform:rotate(0); } 30%{ transform:rotate(-6deg); } 60%{ transform:rotate(4deg); } }
.hol-christmas .hol-greet svg{ animation:starSpin 4s ease-in-out infinite; }
.hol-christmas .hol-greet svg:last-child{ animation-delay:-2s; }
@keyframes starSpin{ 0%,100%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(180deg) scale(1.15); } }
.hol-wreath{ animation:wreathIn .9s var(--ease-out) both, wreathSway 7s ease-in-out 1s infinite alternate; }
@keyframes wreathSway{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }

@media (prefers-reduced-motion: reduce){
  .hol-pk, .hol-wheat, .hol-tail, .hol-gobble, .hol-tree, .hol-orn, .hol-gift, .hol-snowman, .hol-wave, .hol-hat svg, .hol-greet svg{ animation:none !important; }
}
/* ------------------------------------------- the update window, themed */
.hol-thanksgiving .wn__head{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23E39A2A' d='M16 2l2.4 5.4 4.6-2-1.2 5.6 6.2-.6-3.4 4.4 4.4 2.6-6 1.6 1.4 4.6-5.4-2.6L18 30h-4l.6-8.6-5.4 2.6 1.4-4.6-6-1.6 4.4-2.6L5.6 10.8l6.2.6L10.6 5.8l4.6 2z'/%3E%3C/svg%3E") right 3.6rem top .9rem/2.6rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23E39A2A' d='M16 2l2.4 5.4 4.6-2-1.2 5.6 6.2-.6-3.4 4.4 4.4 2.6-6 1.6 1.4 4.6-5.4-2.6L18 30h-4l.6-8.6-5.4 2.6 1.4-4.6-6-1.6 4.4-2.6L5.6 10.8l6.2.6L10.6 5.8l4.6 2z'/%3E%3C/svg%3E") right 1.4rem bottom 1.1rem/1.5rem no-repeat,
    repeating-linear-gradient(135deg, rgba(255,240,215,.06) 0 10px, transparent 10px 20px),
    radial-gradient(120% 140% at 0% 0%, #A8481A 0%, #7A2B0F 50%, #4E1A0A 100%);
}
.hol-thanksgiving .wn__head::after{ background:repeating-linear-gradient(90deg, #E39A2A 0 12px, #C4421A 12px 24px, #8E4A1E 24px 36px); opacity:.85; }
.hol-thanksgiving .wn__icon{ color:#C4591B; }
.hol-thanksgiving .wn__ok{ background:linear-gradient(135deg, #7A2B0F, #C4591B); border-color:transparent; }
.hol-thanksgiving .wn__latest, .hol-thanksgiving .wn__rel.is-latest::after{ background:#C4591B; }
.hol-thanksgiving .wn__reldate, .hol-thanksgiving .wn__all{ color:#9A3D12; }
.hol-thanksgiving .wn__card{ background:#F7E8D2; }

.hol-christmas .wn__head{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 5l-2-2M12 5l2-2M12 19l-2 2M12 19l2 2'/%3E%3C/svg%3E") right 3.8rem top 1rem/2rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 5l-2-2M12 5l2-2M12 19l-2 2M12 19l2 2'/%3E%3C/svg%3E") right 1.6rem bottom 1.2rem/1.2rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 5l-2-2M12 5l2-2M12 19l-2 2M12 19l2 2'/%3E%3C/svg%3E") left 55% top .6rem/1rem no-repeat,
    radial-gradient(120% 140% at 0% 0%, #2D7A4F 0%, #1F5A3A 50%, #123D27 100%);
}
.hol-christmas .wn__head::after{ background:repeating-linear-gradient(90deg, #fff 0 10px, #C8202B 10px 20px); opacity:.9; }
.hol-christmas .wn__icon{ color:#1F5A3A; }
.hol-christmas .wn__badge::before{ background:#FF4B4B; }

@media (prefers-reduced-motion: reduce){
  .leaf, .leaf svg, .hol-lights i, .hol-forest .star, .hol-greet{ animation:none !important; }
  .leaf{ display:none; }
}