:root {
  --fir: #0f2a22;
  --pine: #17503f;
  --berry: #a5281f;
  --gold: #e7bd5b;
  --cream: #f5e9cf;
  --cocoa: #23160f;
  --kraft: #b9925a;
  --display: "Fraunces", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 0 16px 72px;
  background: radial-gradient(120% 70% at 50% 0%, #17463a 0%, var(--fir) 60%) var(--fir);
  color: var(--cream);
  font-family: var(--display);
  overflow-x: hidden;
}
a { color: var(--gold); }

/* Snow drifting over everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 2.5px) 0 0 / 190px 210px,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1.5px, transparent 2px) 60px 90px / 130px 150px,
    radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.5px) 20px 40px / 90px 110px;
  animation: snow 16s linear infinite;
}
@keyframes snow { to { background-position: 40px 210px, 30px 240px, 50px 150px; } }

/* String lights */
.lights { display: block; width: calc(100% + 32px); height: 90px; margin: 0 -16px; }
.bulb ellipse { animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkle { 50% { opacity: .35; } }

.music {
  position: fixed; right: 16px; bottom: 16px; z-index: 10; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--gold); border-radius: 50%;
  background: rgba(11, 31, 25, .9); color: var(--gold); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.music:hover { color: #fff; border-color: #fff; }
.music:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.music .slash, .music.is-on .slash { display: none; }
.music:not(.is-on) .waves { display: none; }
.music:not(.is-on) .slash { display: block; }

/* Masthead */
.masthead { max-width: 760px; margin: 0 auto; padding: 4px 0 44px; text-align: center; }
.masthead h1 { margin: 0; font-weight: 800; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.h-top {
  display: block; font-size: clamp(1.6rem, 5.5vw, 2.6rem); font-weight: 600; color: var(--cream);
  transform: rotate(-3deg); margin-bottom: -.1em;
}
.h-big { display: block; font-size: clamp(4.2rem, 19vw, 9.5rem); line-height: 1; color: var(--gold); letter-spacing: -.02em; }
.h-big span {
  display: inline-block; transform: translateY(var(--hop)) rotate(var(--lean));
  text-shadow: .035em .045em 0 var(--berry);
}
.lede { margin: 22px auto 0; max-width: 34ch; font-size: clamp(1.1rem, 3.4vw, 1.35rem); line-height: 1.45; text-wrap: balance; }
.count { margin: 14px 0 0; font-size: 1.1rem; font-style: italic; }
.count a { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.count a:hover { color: #fff; }
.count a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 2px; }

/* The calendar: candy-cane frame, snow on top */
.frame {
  position: relative; max-width: 760px; margin: 0 auto; padding: 12px; border-radius: 14px;
  background: repeating-linear-gradient(135deg, #fff7e6 0 12px, #c8382e 12px 24px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.frame::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: -16px; height: 46px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, #fff 0 15px, transparent 16px) 0 20px / 46px 26px repeat-x,
    radial-gradient(circle at 50% 0, #fff 0 9px, transparent 10px) 23px 20px / 46px 26px repeat-x,
    linear-gradient(#fff, #fff) 0 0 / 100% 22px no-repeat;
  border-radius: 16px 16px 0 0;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15));
}
.board-inner {
  container-type: inline-size; padding: clamp(18px, 4vw, 30px) clamp(12px, 3vw, 22px) clamp(12px, 3vw, 22px); border-radius: 6px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.5) 0 1.5px, transparent 2px) 0 0 / 71px 67px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 1px, transparent 1.5px) 0 0 / 43px 53px,
    var(--berry);
}
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 2.2cqw, 16px); }

/* Doors: every one the same square */
.door { position: relative; aspect-ratio: 1; perspective: 700px; transform: rotate(var(--tilt)); }
.door[data-state="ready"] { filter: drop-shadow(0 0 10px rgba(255, 215, 120, .45)); }
.flap, .inside {
  position: absolute; inset: 0; margin: 0; border: 0; border-radius: 4px;
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.flap:focus-visible, .inside:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.inside {
  display: flex; align-items: center; justify-content: center;
  padding: 6% 6% 6% 25%;
  background: var(--cream); color: var(--cocoa);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 6px 6px 14px rgba(60, 30, 10, .3);
  font-size: clamp(.66rem, 2.5cqw, 1rem); line-height: 1.15; font-weight: 600;
}
.t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.door.is-open .inside:hover .t { text-decoration: underline; text-underline-offset: 2px; }
.door[data-state="locked"] .inside { background: #3a1a12; }

.flap {
  z-index: 1; display: grid; padding: 9%;
  background: var(--pine);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.3, 1.2, .4, 1), background-color .5s;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 2px 5px rgba(0,0,0,.35);
}
.flap::after {
  content: ""; position: absolute; inset: 5px; border-radius: 2px; pointer-events: none;
  border: 1.5px dashed var(--stitch, rgba(231, 189, 91, .8)); transition: opacity .3s;
}
.num {
  place-self: center; font-style: italic; font-weight: 800; line-height: 1; color: var(--gold);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.5rem, 8cqw, 3.2rem); transition: opacity .25s;
}
.door[data-spot="tl"] .num { place-self: start start; font-size: clamp(1.2rem, 5.6cqw, 2.2rem); }
.door[data-spot="tr"] .num { place-self: start end; font-size: clamp(1.2rem, 5.6cqw, 2.2rem); }
.door[data-spot="bl"] .num { place-self: end start; font-size: clamp(1.2rem, 5.6cqw, 2.2rem); }
.door[data-spot="br"] .num { place-self: end end; font-size: clamp(1.2rem, 5.6cqw, 2.2rem); }

/* Five wrapping papers */
.door[data-wrap="2"] .flap { background: repeating-linear-gradient(135deg, #fff7e6 0 9px, #c8382e 9px 18px); --stitch: transparent; }
.door:is([data-wrap="2"], [data-wrap="5"]) .num {
  display: grid; place-items: center; width: 1.8em; aspect-ratio: 1; border-radius: 50%; padding: 0 .1em .06em 0;
  font-size: clamp(1.1rem, 5.6cqw, 2.3rem);
}
.door:is([data-wrap="2"], [data-wrap="5"]):not([data-spot="c"]) .num { font-size: clamp(1rem, 4.6cqw, 1.9rem); }
.door[data-wrap="2"] .num { color: var(--pine); background: #fff7e6; box-shadow: 0 0 0 2px var(--pine); }
.door[data-wrap="3"] .flap {
  background: radial-gradient(circle, rgba(255,255,255,.85) 0 1.6px, transparent 2.2px) 0 0 / 17px 17px, #123f33;
  --stitch: rgba(255, 255, 255, .5);
}
.door[data-wrap="3"] .num { color: #fff7e6; }
.door[data-wrap="4"] .flap { background: var(--gold); --stitch: rgba(165, 40, 31, .7); }
.door[data-wrap="4"] .num { color: var(--berry); }
.door[data-wrap="5"] .flap {
  background: radial-gradient(circle, #1d6149 0 2.4px, transparent 3px) 0 0 / 15px 15px, #fff7e6;
  --stitch: rgba(23, 80, 63, .6);
}
.door[data-wrap="5"] .num { color: #fff7e6; background: var(--berry); box-shadow: 0 0 0 4px #fff7e6; }

/* Ready doors sit ajar; open doors swing wide; either way you can swing them back */
.door[data-state="ready"] .flap { transform: rotateY(-26deg); }
.door[data-state="ready"]:not(.is-open) .flap:hover { transform: rotateY(-40deg); }
.door.is-open .flap { transform: rotateY(-74deg); background: var(--kraft); }
.door.is-open .flap:hover { transform: rotateY(-62deg); }
.door.is-open .flap::after, .door.is-open .num { opacity: 0; }

/* A puff of sparkle when a door opens */
.door.pop::after {
  content: ""; position: absolute; inset: -22%; z-index: 3; pointer-events: none;
  background:
    radial-gradient(circle, #fff3c4 0 3px, transparent 4px) 12% 18% / 100% 100% no-repeat,
    radial-gradient(circle, #ffd76a 0 4px, transparent 5px) 86% 12% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 2.5px, transparent 3.5px) 94% 62% / 100% 100% no-repeat,
    radial-gradient(circle, #ffd76a 0 3px, transparent 4px) 70% 94% / 100% 100% no-repeat,
    radial-gradient(circle, #fff3c4 0 4px, transparent 5px) 22% 88% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 2.5px, transparent 3.5px) 4% 52% / 100% 100% no-repeat;
  animation: pop .7s ease-out forwards;
}
@keyframes pop {
  from { transform: scale(.45) rotate(-20deg); opacity: 1; }
  to { transform: scale(1.15) rotate(15deg); opacity: 0; }
}

.knock { animation: knock .4s; }
@keyframes knock {
  20% { transform: rotate(calc(var(--tilt) - 4deg)); }
  50% { transform: rotate(calc(var(--tilt) + 4deg)); }
  80% { transform: rotate(calc(var(--tilt) - 2deg)); }
}

.colophon { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: .95rem; color: #cdbf9f; }
.colophon p { margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 20;
  margin: 0; padding: 12px 18px; border-radius: 99px;
  background: var(--cream); color: var(--cocoa); font-size: 1rem; font-weight: 600; font-style: italic;
  box-shadow: 0 0 0 3px var(--berry), 0 10px 30px rgba(0,0,0,.4);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Reader */
.reader {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: 4px;
  background: var(--cream); color: var(--cocoa);
  box-shadow: 0 0 0 6px var(--berry), 0 0 0 8px var(--gold), 0 30px 80px rgba(0, 0, 0, .5);
}
.reader::backdrop { background: rgba(8, 26, 20, .8); }
.reader article { padding: clamp(24px, 6vw, 56px); }
.reader-door { margin: 0 0 8px; font-size: 1.05rem; font-style: italic; color: var(--berry); font-weight: 600; }
.reader h2 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.08; font-weight: 700; text-wrap: balance; }
.reader-body { margin-top: 26px; font-family: "Newsreader", Georgia, serif; font-size: 1.2rem; line-height: 1.62; max-width: 62ch; }
.reader-body p { margin: 0 0 1.1em; }
.reader-date { margin: 10px 0 0; font-size: .95rem; opacity: .65; }
.reader-body :is(h1, h2, h3, h4) { font-family: var(--display); line-height: 1.15; margin: 1.5em 0 .5em; text-wrap: balance; }
.reader-body h1, .reader-body h2 { font-size: 1.5rem; }
.reader-body h3, .reader-body h4 { font-size: 1.25rem; }
.reader-body a { color: var(--berry); text-underline-offset: 3px; }
.reader-body img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 4px; }
.reader-body figure { margin: 1.4em 0; }
.reader-body figcaption { font-size: .85em; opacity: .7; text-align: center; }
.reader-body blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--berry); font-style: italic; }
.reader-body blockquote p:last-child { margin-bottom: 0; }
.reader-body :is(ul, ol) { padding-left: 1.3em; margin: 0 0 1.1em; }
.reader-body li { margin-bottom: .4em; }
.reader-body hr { border: 0; border-top: 1px solid rgba(35, 22, 15, .25); margin: 2em 0; }
.reader-body pre { overflow-x: auto; padding: 12px; background: rgba(35, 22, 15, .08); border-radius: 4px; font-size: .85em; }
.reader-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.reader-link, .reader-close {
  font: 600 1rem/1 var(--display); padding: 13px 20px; border-radius: 99px; cursor: pointer; text-decoration: none;
}
.reader-link { background: var(--berry); color: #fff4dc; border: 2px solid var(--berry); }
.reader-close { background: none; color: inherit; border: 2px solid currentColor; }
.reader-link:focus-visible, .reader-close:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }

/* Phones: three across so titles stay readable; door 25 sits alone in the middle */
@media (max-width: 560px) {
  .lights { height: 64px; }
  .frame { padding: 9px; }
  .board { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .door:last-child { grid-column: 2; }
  .inside { font-size: .8rem; }
  .num { font-size: 2.2rem; }
  .door:is([data-spot="tl"], [data-spot="tr"], [data-spot="bl"], [data-spot="br"]) .num { font-size: 1.6rem; }
  .door:is([data-wrap="2"], [data-wrap="5"]) .num { font-size: 1.5rem; }
  .door:is([data-wrap="2"], [data-wrap="5"]):not([data-spot="c"]) .num { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}