:root{
  --claret:#6e0f1f; --claret-deep:#44060f; --night:#1d0409;
  --pine:#0e3b2e; --pine-lit:#17614a;
  --gold:#e7cb8a; --gold-hi:#f6e2a8; --ivory:#fbf2de; --ink:#3a1a1a;
  --display:"Playfair Display","Didot","Bodoni MT",Georgia,serif;
  --body:"Lora",Georgia,"Times New Roman",serif;
  --script:"Pinyon Script","Snell Roundhand","Brush Script MT",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;min-height:100vh;color:var(--ivory);font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  background:radial-gradient(120% 70% at 50% -10%,#8e1a2e 0%,var(--claret) 38%,var(--claret-deep) 78%,var(--night) 100%);
  padding-top:env(safe-area-inset-top)}
body.locked{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#page{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:0 18px 48px}
a{color:var(--gold-hi)}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:6px}

/* fairy lights */
.lights{position:relative;z-index:3;height:34px;margin-bottom:-6px;
  background:
   radial-gradient(circle at 12px 14px,var(--gold-hi) 0 4px,transparent 5px) 0 0/48px 34px repeat-x,
   radial-gradient(circle at 36px 17px,#ff6f6f 0 4px,transparent 5px) 0 0/48px 34px repeat-x;
  filter:drop-shadow(0 0 5px rgba(246,226,168,.9));
  animation:twinkle 3.2s ease-in-out infinite alternate}
.lights::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(231,203,138,.45)}
@keyframes twinkle{from{opacity:.65}to{opacity:1}}

/* hero + wordmark */
.hero{text-align:center;padding:18px 0 8px}
.tree{width:84px;height:auto;display:block;margin:0 auto 6px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.wordmark{margin:0;font-weight:700;line-height:.95;display:flex;flex-direction:column;align-items:center}
.wm-small{font:italic 700 1.5rem var(--display);color:var(--gold)}
.wm-main{font:900 clamp(2.4rem,10.5vw,4.9rem) var(--display);letter-spacing:.02em;color:var(--gold-hi);
  text-shadow:0 2px 0 #9a7a30,0 0 28px rgba(246,226,168,.35)}
.wm-big{font:900 clamp(2.1rem,9.5vw,4.2rem) var(--display);color:var(--ivory);letter-spacing:.03em;margin-top:.08em;
  text-shadow:0 2px 0 #3b0710,0 0 22px rgba(0,0,0,.3)}
.wm-credit{margin-top:.9rem;font:400 1.05rem var(--body);color:var(--gold);font-style:italic}
.wm-credit em{font:400 1.7rem/1 var(--script);color:var(--gold-hi);font-style:normal;margin-left:.1em}
.tagline{margin:1.1rem 0 1.2rem;font:italic 700 clamp(1.1rem,3.6vw,1.45rem) var(--display);color:var(--gold)}
.intro{max-width:36rem;margin:0 auto;padding:1.2rem 1.4rem;border:1px solid rgba(231,203,138,.55);border-radius:6px;
  background:rgba(29,4,9,.35);box-shadow:inset 0 0 0 4px rgba(29,4,9,.35),inset 0 0 0 5px rgba(231,203,138,.25);text-align:left}
.intro p{margin:0 0 .8rem}
.sign,.foot-sign,.r-sign{font:400 2.1rem/1.1 var(--script);color:var(--gold-hi);margin:.4rem 0 0}

/* status */
.status{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 6px}
.pill{padding:.45rem 1.1rem;border-radius:999px;background:var(--pine);border:1px solid var(--gold);color:var(--ivory);
  font:700 1rem var(--display);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.preview-note{text-align:center;color:var(--gold-hi);font-style:italic;margin:6px 0}

/* doors */
.grid{list-style:none;margin:22px 0 10px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
@media(min-width:620px){.grid{grid-template-columns:repeat(6,1fr);gap:16px}}
.grid li{margin:0}
.door{position:relative;display:block;width:100%;aspect-ratio:1/1.08;padding:0;border:0;cursor:pointer;border-radius:8px;color:var(--ivory);
  font-family:var(--display);-webkit-tap-highlight-color:transparent;overflow:hidden;
  background:linear-gradient(160deg,var(--pine-lit),var(--pine));box-shadow:0 3px 0 rgba(0,0,0,.35),0 8px 16px rgba(0,0,0,.3)}
.door::before,.door::after{content:"";position:absolute;background:var(--gold);opacity:.9}
.door::before{left:46%;width:8%;top:0;bottom:0}           /* ribbon down */
.door::after{top:46%;height:8%;left:0;right:0}            /* ribbon across */
.door .num{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);min-width:2.1rem;height:2.1rem;padding:0 .35rem;
  display:grid;place-items:center;border-radius:50%;background:var(--ivory);color:var(--claret);font-weight:900;font-size:1.05rem;
  box-shadow:0 0 0 2px var(--gold),0 2px 6px rgba(0,0,0,.4)}
.door .tag{position:absolute;z-index:2;right:6px;bottom:4px;font-size:.8rem}
.door.wait{filter:saturate(.55) brightness(.8);cursor:not-allowed}
.door.ready{background:linear-gradient(160deg,#a5182f,#7d1024);animation:glow 2.4s ease-in-out infinite alternate}
.door.ready::before,.door.ready::after{background:var(--gold-hi)}
.door.seen{background:linear-gradient(160deg,#1f6a52,#134735)}
.door.seen .num{background:var(--gold);}
.door:not(.wait):hover{transform:translateY(-3px) rotate(-1deg)}
.door{transition:transform .2s}
.door.shake{animation:shake .4s}
@keyframes glow{from{box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 8px rgba(246,226,168,.35)}to{box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px rgba(246,226,168,.9)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.legend{text-align:center;font-size:.85rem;color:var(--gold);margin:16px 0 0}
.k{display:inline-block;width:.9em;height:.9em;border-radius:3px;margin:0 .35em 0 .9em;vertical-align:-1px;border:1px solid var(--gold)}
.k.wait{background:#2a5a4a}.k.open{background:#a5182f}.k.seen{background:#1f6a52}

footer{text-align:center;margin-top:44px}
.foot-small{font-size:.78rem;color:rgba(251,242,222,.7);max-width:34rem;margin:.8rem auto 0}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:30;
  background:var(--ivory);color:var(--claret);padding:.65rem 1.1rem;border-radius:10px;font:700 .95rem var(--display);
  box-shadow:0 6px 20px rgba(0,0,0,.45);transition:.3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* stage / reveal */
.stage{position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(120% 60% at 50% 0%,#5c0c1a 0%,#2a060d 60%,#1d0409 100%);display:flex;justify-content:center;padding:0}
.stage[hidden]{display:none}
#sparkles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}
.dialog{position:relative;width:100%;max-width:640px;margin:auto;padding:max(18px,env(safe-area-inset-top)) 20px 36px}
.dialog:focus{outline:none}
.x{position:sticky;top:8px;float:right;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:var(--claret-deep);
  color:var(--gold-hi);font-size:1.7rem;line-height:1;cursor:pointer}
.doorway{position:relative;height:min(62vh,420px);margin:30px auto 0;max-width:340px;border-radius:120px 120px 8px 8px;overflow:hidden;
  border:6px solid var(--gold);background:#120305;perspective:900px}
.doorway .glow{position:absolute;inset:0;background:radial-gradient(circle,#fff6d6 0%,var(--gold-hi) 35%,#b88a2e 100%);opacity:.95}
.doornum{position:absolute;inset:0;display:grid;place-items:center;font:900 6rem var(--display);color:var(--claret);text-shadow:0 0 18px #fff}
.leaf{position:absolute;top:0;bottom:0;width:50%;z-index:2;background:linear-gradient(160deg,#a5182f,#6e0f1f);
  box-shadow:inset 0 0 0 6px var(--gold),inset 0 0 0 9px rgba(0,0,0,.25);transition:transform 1.1s cubic-bezier(.6,.05,.25,1)}
.leaf.l{left:0;transform-origin:left center}.leaf.r{right:0;transform-origin:right center}
.doorway.open .leaf.l{transform:rotateY(-105deg)}
.doorway.open .leaf.r{transform:rotateY(105deg)}
.doorway.done{display:none}
.reveal{padding-top:8px;text-align:center}
.reveal>*{animation:rise .7s both}
.reveal>*:nth-child(2){animation-delay:.05s}.reveal>*:nth-child(3){animation-delay:.2s}.reveal>*:nth-child(4){animation-delay:.3s}
.reveal>*:nth-child(5){animation-delay:.4s}.reveal>*:nth-child(6){animation-delay:.5s}.reveal>*:nth-child(7){animation-delay:.6s}
.reveal>*:nth-child(8){animation-delay:.9s}.reveal>*:nth-child(9){animation-delay:1.1s}.reveal>*:nth-child(n+10){animation-delay:1.3s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.r-day{margin:0;font:italic 700 1.1rem var(--display);color:var(--gold)}
.poster{margin:14px auto;width:min(66%,280px);padding:8px;background:var(--gold);border-radius:4px;box-shadow:0 0 0 2px #8f6d22,0 14px 34px rgba(0,0,0,.6)}
.poster img{display:block;width:100%;height:auto;border-radius:2px}
.card-poster{aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-align:center;
  background:linear-gradient(160deg,var(--pine-lit),var(--pine));color:var(--ivory);font:900 1.5rem/1.15 var(--display);border:2px solid var(--claret)}
.card-poster small{font:italic 400 1rem var(--body);color:var(--gold);margin-top:.5rem}
.r-title{margin:.3rem 0 0;font:900 clamp(1.8rem,7vw,2.6rem)/1.1 var(--display);color:var(--gold-hi)}
.r-meta{margin:.3rem 0 1rem;color:var(--gold);font-style:italic}
.r-syn{text-align:left;max-width:34rem;margin:0 auto 1.2rem}
.r-intro{margin:0 auto 1.4rem;max-width:34rem;padding:1rem 1.2rem;border-left:3px solid var(--gold);background:rgba(231,203,138,.12);text-align:left;border-radius:0 8px 8px 0}
.r-intro p{margin:0}
.song{margin:0 auto 1.2rem;max-width:34rem;padding:1.1rem;border-radius:10px;background:var(--pine);border:1px solid var(--gold);text-align:center}
.song h3{margin:0;font:italic 700 1rem var(--display);color:var(--gold)}
.s-title{margin:.3rem 0 0;font:900 1.3rem/1.25 var(--display);color:var(--ivory)}
.s-blurb{margin:.4rem 0 .9rem;font-size:.97rem}
.player iframe{width:100%;height:215px;border:0;border-radius:8px;background:#000}
.s-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--gold);
  background:var(--gold);color:var(--claret-deep);font:700 .95rem var(--display);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--gold-hi)}
.btn.ghost:hover{background:rgba(231,203,138,.15)}
.btn.play{font-size:1.05rem;padding:.7rem 1.6rem}
.actions,.pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.pager{justify-content:space-between}
.finale-msg{margin:1.4rem auto 0;max-width:30rem;font:italic 700 1.2rem/1.5 var(--display);color:var(--gold-hi)}
.r-sign{font-size:2.6rem;margin-top:1.2rem}
.err{text-align:center;margin:3rem 0;font:700 1.1rem var(--display);color:var(--gold-hi)}
.stage.finale .doorway{border-color:var(--gold-hi);box-shadow:0 0 60px rgba(246,226,168,.8)}
.stage.finale .r-title{text-shadow:0 0 24px rgba(246,226,168,.8)}

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