@font-face{font-family:"Mountains of Christmas";font-weight:700;font-display:swap;src:url(/assets/fonts/mountains.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:500 800;font-display:swap;src:url(/assets/fonts/playfairdisplay.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500 700;font-display:swap;src:url(/assets/fonts/playfairdisplay-italic.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:300 700;font-display:swap;src:url(/assets/fonts/fredoka.woff2) format("woff2")}
:root{
  --red:#d62839;--red-d:#9e1424;--green:#1f8a4c;--green-d:#13623a;--gold:#ffd166;--cream:#fff8ec;
  --ink:#2b1d14;--night:#0e1b3d;
  --title:"Mountains of Christmas","Comic Sans MS","Chalkboard SE",cursive;
  --body:"Fredoka","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --display:"Playfair Display",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{font-family:var(--body);color:var(--ink);background:var(--night);-webkit-tap-highlight-color:transparent}
#bg{position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,20,55,.35),rgba(10,20,55,.15) 40%,rgba(10,20,55,.55)),url(/assets/bg-village.jpg) center/cover no-repeat;z-index:-3}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.top{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:calc(16px + env(safe-area-inset-top,0px)) 10px 0;max-width:1100px;margin:0 auto;position:relative;z-index:6}
.hdr-santa,.hdr-elf{height:120px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));object-fit:contain}
.hdr-santa{animation:sway 3.2s ease-in-out infinite;transform-origin:50% 100%}
.hdr-elf{height:104px;animation:hop 2.4s ease-in-out infinite;transform-origin:50% 100%}
.title-wrap{text-align:center;padding-bottom:10px}
h1{font-family:var(--title);font-weight:700;margin:0;font-size:clamp(2.1rem,7vw,4.4rem);line-height:.92;color:#fff;
  text-shadow:0 3px 0 var(--red-d),0 6px 0 #5a0b14,0 10px 18px rgba(0,0,0,.55)}
h1 span{display:block;color:var(--gold);text-shadow:0 3px 0 #b07a12,0 6px 0 #6b4806,0 10px 18px rgba(0,0,0,.55)}
.tag{margin:.4rem 0 0;color:#fff;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.7)}
main{max-width:980px;margin:0 auto;padding:8px 14px 40px;position:relative;z-index:5}
.lead{background:rgba(255,248,236,.92);border-radius:18px;padding:14px 18px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);color:#5a4636;font-weight:500;margin:10px 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--cream);border-radius:22px;padding:18px 16px 16px;box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 0 5px rgba(255,255,255,.3);color:inherit;text-decoration:none;display:flex;flex-direction:column;min-height:180px;position:relative;overflow:hidden}
.card h2{font-family:var(--title);margin:4px 0 6px;color:var(--red);font-size:1.85rem;line-height:1}
.card p{margin:0;color:#5a4636;flex:1}
.card.live{background:linear-gradient(180deg,#fffaf0,#ffe7c2);border:4px solid var(--gold);flex-direction:row;align-items:center;gap:8px;grid-column:1/-1;min-height:0}
.card.live h2{font-size:clamp(2rem,5vw,2.8rem)}
.card.live .go{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:700;letter-spacing:.02em}
.bell-art{width:min(180px,34vw);height:auto;filter:drop-shadow(0 10px 14px rgba(80,30,0,.4));flex:0 0 auto}
.card.soon{opacity:.92}
.card.soon .ico{font-size:2rem}
.card.soon em{display:inline-block;margin-top:10px;font-style:normal;font-weight:700;color:#9e1424;background:#ffe0e4;border-radius:999px;padding:3px 10px;font-size:.82rem;align-self:flex-start}
footer{text-align:center;color:#fff;text-shadow:0 2px 4px #000;padding:8px 12px calc(20px + env(safe-area-inset-bottom,0px));font-weight:600;position:relative;z-index:5}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:520px){
  .hdr-santa,.hdr-elf{height:86px}
  .hdr-elf{height:76px}
  .card.live{flex-direction:column;text-align:center}
  .bell-art{width:min(200px,58vw)}
}