/* The Colin Times : Christmas panel, redone 2026-09-20. Red, white and snow. No string lights. */
.night{background:radial-gradient(130% 85% at 50% 0%,#d02b32 0%,#ab171e 52%,#7c0e13 100%);color:#fff;padding-top:78px;padding-bottom:118px}
.night .kicker,.night .folio{color:#fff}
.night .hed{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.night .copy{color:#fff7f3}
.night .cd-cap{color:#fff;opacity:1}
.night .how{color:#fff;opacity:.92}

/* snow on the roof, snow on the ground */
.snowcap{position:absolute;top:-1px;left:0;right:0;height:46px;z-index:1;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.14))}
.snowcap svg,.drift svg{display:block;width:100%;height:100%}
.snowcap path{fill:#fff}
.drift{position:absolute;left:0;right:0;bottom:-1px;height:66px;z-index:1;pointer-events:none;transform-origin:50% 100%;transform:scaleY(var(--pile,1));transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.drift .back{fill:#fff;opacity:.55}
.drift .front{fill:#fff}

/* big slow snowflakes behind the text */
.bigflake{position:absolute;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;opacity:.17;pointer-events:none;animation:spin 44s linear infinite}
.bigflake.f1{width:200px;height:200px;right:-64px;top:64px}
.bigflake.f2{width:124px;height:124px;left:-42px;top:47%;animation-duration:30s;animation-direction:reverse;opacity:.14}
.bigflake.f3{width:84px;height:84px;right:10%;bottom:128px;animation-duration:24s;opacity:.2}

/* candy cane rule, turning like a barber pole */
.cane{height:9px;margin:26px 0 0;border-radius:5px;background:repeating-linear-gradient(135deg,#fff 0 10px,#d8232a 10px 20px);background-size:28.284px 100%;box-shadow:0 2px 0 rgba(0,0,0,.2);animation:cane 1.4s linear infinite}
@keyframes cane{to{background-position:28.284px 0}}
.night .countdown{margin-top:14px}

/* white tiles, red numbers */
.night .cd-cell{background:#fff;border:0;border-radius:3px;box-shadow:0 5px 0 rgba(0,0,0,.24)}
.night .cd-num{color:#b3181f}
.night .cd-lab{color:#7c0e13;opacity:1}
.cd-num.tock{animation:tock2 .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes tock2{0%{transform:scale(1.16)}100%{transform:scale(1)}}
.big-line{animation:glowW 4.5s ease-in-out infinite}
@keyframes glowW{50%{text-shadow:0 0 26px rgba(255,255,255,.8)}}

/* Santa and the reindeer: the team flies across the sky band above the headline */
.night{padding-top:134px}
.sleigh{position:absolute;left:-230px;top:84px;width:204px;z-index:1;pointer-events:none;animation:cross 16s linear 1.2s infinite}
.sleigh svg{display:block;width:100%;height:auto;overflow:visible;transform:rotate(-7deg);animation:bob 1.9s ease-in-out infinite}
.sleigh svg *,.deer-stand svg *{fill:#fff;stroke:none}
.sleigh .ln,.deer-stand .ln{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sleigh .thin,.deer-stand .thin{stroke-width:1.5}
.sleigh .nose,.deer-stand .nose{fill:#ff3d3d;stroke:#fff;stroke-width:1.1}
.sleigh .nose{animation:nose 1.2s ease-in-out infinite}
@keyframes cross{0%{left:-230px;top:84px}47%{left:100%;top:52px}100%{left:100%;top:52px}}
@keyframes bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-5px)}}
@keyframes nose{50%{fill:#ffb3b3}}
.lg{transform-box:fill-box;transform-origin:50% 0}
.lg.fwd{animation:gallopA .46s ease-in-out infinite}
.lg.bwd{animation:gallopB .46s ease-in-out infinite}
@keyframes gallopA{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(14deg)}}
@keyframes gallopB{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-16deg)}}
.deer-stand{position:absolute;right:11%;bottom:calc(34px * var(--pile,1));width:62px;z-index:1;pointer-events:none;transition:bottom 1s cubic-bezier(.2,.8,.2,1)}
.deer-stand svg{display:block;width:100%;height:auto;overflow:visible}
.nod{transform-box:fill-box;transform-origin:10% 90%;animation:nod 3.6s ease-in-out infinite}
@keyframes nod{0%,60%,100%{transform:rotate(0)}70%,90%{transform:rotate(9deg)}80%{transform:rotate(5deg)}}
.night .cd-cell{position:relative}
.hat{position:absolute;left:-13px;top:-25px;width:46px;transform:rotate(-20deg);transform-origin:70% 90%;animation:hat 3.2s ease-in-out infinite;pointer-events:none}
.hat svg{display:block;width:100%;height:auto}
@keyframes hat{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-15deg)}}

@media (min-width:900px){.night{padding:138px 28px 124px}}
html.still .sleigh{left:auto;right:16px;top:58px}
@media (prefers-reduced-motion:reduce){
  .bigflake,.cane,.lg,.nod,.hat{animation:none}
  .sleigh{animation:none;left:auto;right:16px;top:58px}
  .sleigh svg{animation:none}
}