@font-face{font-family:"Hand";src:url(/media/Mynerve-Regular.ttf) format("truetype");font-display:swap}
:root{
  --night:#0f0a07;--ember:#1b120c;--panel:#22170f;--ink:#f4ead8;--muted:#c4ae8f;--gold:#d8a556;--gold-ink:#1a1108;
  --wax:#7d1f1a;--parch:#f1e6cc;--parch-2:#e6d6b3;--pink:#3a2817;--blueink:#203a6b;--line:rgba(216,165,86,.22);
  --serif:"Cormorant Garamond",Georgia,serif;--body:"EB Garamond",Georgia,serif;--ui:-apple-system,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--night);color:var(--ink);font:18px/1.55 var(--body)}
a{color:var(--gold)}
button{font:inherit;cursor:pointer}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.screen{display:none;position:relative;z-index:2;min-height:100vh}
.screen.on{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (hover:none) and (pointer:coarse){#soundBtn,#hearBtn{display:none!important}}   /* phones: no workshop sound */
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}

/* top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(var(--night),rgba(15,10,7,0));transition:background .3s}
.bar.solid{background:rgba(15,10,7,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--line)}
.brand{font:600 20px var(--serif);letter-spacing:.04em;color:var(--gold)}
.sound{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);border-radius:999px;padding:7px 14px;font:500 14px var(--ui)}
.sound .dot{width:8px;height:8px;border-radius:50%;background:#6c5a45}
.sound.on .dot{background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;margin-top:-58px}
.hero video,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,7,.25) 0%,rgba(15,10,7,.1) 35%,rgba(15,10,7,.92) 82%,var(--night))}
.hero .copy{position:relative;z-index:2;padding:0 20px 56px;max-width:760px}
h1{font:600 clamp(36px,6.4vw,68px)/1.04 var(--serif);margin:0 0 14px;letter-spacing:-.01em}
h1 em{color:var(--gold);font-style:italic}
.lede{font-size:clamp(18px,2.1vw,22px);color:var(--muted);margin:0 0 26px;max-width:600px}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--gold-ink);border:0;border-radius:999px;padding:16px 28px;font:600 18px var(--ui);box-shadow:0 8px 30px rgba(216,165,86,.25)}
.cta:hover{filter:brightness(1.06)}
.micro{font:500 13px var(--ui);color:var(--muted);margin-top:14px;letter-spacing:.02em}

section{padding:72px 0;border-top:1px solid var(--line)}
h2{font:600 clamp(28px,4vw,42px)/1.12 var(--serif);margin:0 0 12px}
.kicker{font:600 12px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.film{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.5);aspect-ratio:16/9;background:#000}
.film video{width:100%;height:100%;display:block;object-fit:cover}
.film .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);border:0;color:#fff}
.film .play span{width:78px;height:78px;border-radius:50%;background:rgba(216,165,86,.95);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gold-ink)}
.senders{font:italic 500 24px var(--serif);color:var(--parch);min-height:2.6em}
.hello{display:inline-flex;gap:10px;align-items:center;margin-top:16px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:10px 18px;font:500 15px var(--ui)}
.smell{color:var(--muted);font-style:italic;margin-top:18px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.step{background:linear-gradient(var(--parch),var(--parch-2));color:var(--pink);border-radius:8px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative}
.step b{font:600 26px var(--serif);display:block;color:#2a1b10}
.step .n{position:absolute;top:-14px;left:18px;width:30px;height:30px;border-radius:50%;background:var(--wax);color:#f8e7d0;font:700 14px var(--ui);display:flex;align-items:center;justify-content:center}
.far{background:radial-gradient(ellipse at 20% 0%,#3a2414,var(--ember));border:1px solid var(--line);border-radius:14px;padding:30px}
.corner{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.corner div{border:1px solid var(--line);border-radius:10px;padding:14px;font:15px/1.45 var(--ui);color:var(--muted)}
.corner b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
footer{padding:40px 0 70px;color:var(--muted);font:14px var(--ui);text-align:center}
footer a{color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{cursor:pointer;font:600 17px var(--ui);color:var(--ink);list-style:none}.faq summary::after{content:'+';float:right;color:var(--gold)}
.faq details[open] summary::after{content:'–'}.faq p{color:var(--muted);margin:8px 0 0;font:16px/1.5 var(--ui)}

/* composer */
.desk{min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#3b2414 0%,#1a110b 55%,var(--night) 100%);padding:76px 16px 40px}
.trail{display:flex;justify-content:center;gap:8px;margin:0 auto 20px;flex-wrap:wrap}
.trail span{font:600 12px var(--ui);letter-spacing:.06em;padding:6px 10px;border-radius:4px;border:1px dashed rgba(216,165,86,.35);color:var(--muted)}
.trail span.done{background:rgba(216,165,86,.14);color:var(--gold);border-style:solid}
.trail span.now{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.paper{max-width:640px;margin:0 auto;background:linear-gradient(180deg,#f4ead2,#eadcbc);color:#2c1d10;border-radius:4px;padding:34px 34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 60px rgba(150,110,60,.18);position:relative}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;background:radial-gradient(ellipse at 0% 50%,rgba(255,180,90,.18),transparent 55%);animation:flick 3.2s infinite alternate}
@keyframes flick{0%{opacity:.6}40%{opacity:1}70%{opacity:.75}100%{opacity:.95}}
.elf{font:600 30px/1.15 var(--serif);margin:0 0 6px;color:#2a1b10}
.elfsub{color:#6b5236;margin:0 0 20px;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.chip{border:1.5px solid #b79b72;background:transparent;color:#3a2817;border-radius:999px;padding:9px 16px;font:500 16px var(--ui)}
.chip.on{background:var(--wax);border-color:var(--wax);color:#f8e7d0}
label.f{display:block;font:600 13px var(--ui);letter-spacing:.04em;color:#6b5236;margin:14px 0 6px;text-transform:uppercase}
input.t,textarea.t{width:100%;border:0;border-bottom:1.5px solid #b79b72;background:transparent;color:#1d2f58;font:26px/1.4 "Hand",cursive;padding:4px 2px;outline:none}
textarea.t{border:0;resize:none;min-height:230px;background:repeating-linear-gradient(transparent 0 39px,rgba(120,90,50,.25) 39px 40px);line-height:40px;font-size:24px}
input.t:focus{border-bottom-color:var(--wax)}
.hint{font:14px var(--ui);color:#7a6247;margin-top:6px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btnrow{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:10px}
.back{background:transparent;border:0;color:#6b5236;font:500 15px var(--ui)}
.next{background:var(--wax);color:#f8e7d0;border:0;border-radius:999px;padding:13px 24px;font:600 16px var(--ui)}
.next:disabled,.next.dim{opacity:.45}
.need{font:14px var(--ui);color:#8a6d4c;text-align:right;min-height:18px;margin-top:8px}.need.hard{color:#a1271f;font-weight:600}
.warming::before{content:'✦';display:inline-block;margin-right:6px;color:var(--gold);animation:twinkle 1.1s ease-in-out infinite}@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.warming::before{animation:none}}
#childName,.sibrow input[data-f=name]{border:1.5px solid #b79b72;border-radius:12px;background:#fffaf0;padding:8px 14px;box-shadow:inset 0 1px 2px rgba(60,40,20,.08)}#childName:focus,.sibrow input[data-f=name]:focus{border-color:var(--wax);box-shadow:0 0 0 3px rgba(125,31,26,.15)}
#email{border:1.5px solid #b79b72;border-radius:12px;background:#fffaf0;padding:12px 14px;box-shadow:inset 0 1px 2px rgba(60,40,20,.08)}#email:focus{border-color:var(--wax);box-shadow:0 0 0 3px rgba(125,31,26,.15)}
.nudge{animation:nudge 1.1s ease-out 2}@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(125,31,26,.5)}100%{box-shadow:0 0 0 14px rgba(125,31,26,0)}}
.hearrow{display:flex;justify-content:flex-end;margin-top:6px}.alts{text-align:right;margin-top:12px;font:14px var(--ui);color:#7a6247}.linkbtn{background:none;border:0;padding:4px 2px;font:500 15px var(--ui);color:#6b5236;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.nudge{animation:none;outline:2px solid var(--wax);outline-offset:3px}}
.t::placeholder{font:16px var(--ui);color:#a08a6c;letter-spacing:0}
.sayas{display:flex;align-items:baseline;gap:8px}.sayas span{font:20px var(--ui);color:#6b5236}
.env{border:1.5px dashed #b79b72;border-radius:4px;padding:18px;text-align:center;margin-bottom:18px;background:rgba(255,255,255,.25)}
.env small{font:13px var(--ui);color:#7a6247;display:block}
.env .to{font:28px "Hand",cursive;color:var(--blueink);min-height:42px}
.prompts{display:grid;gap:8px;margin:6px 0 14px}
.prompts button{text-align:left;border:1px dashed #b79b72;background:rgba(255,255,255,.3);border-radius:6px;padding:9px 12px;font:15px var(--ui);color:#4a3520}
.room{display:flex;align-items:center;gap:10px;justify-content:flex-end;font:13px var(--ui);color:#7a6247;margin-top:6px}
.inkbar{flex:1;max-width:220px;height:4px;border-radius:4px;background:rgba(120,90,50,.18);overflow:hidden}.inkbar i{display:block;height:100%;width:0;background:#1d2f58;border-radius:4px;transition:width .2s}
.room.low{color:#9a6b12}.room.low .inkbar i{background:var(--gold)}.room.out{color:#a1271f;font-weight:600}.room.out .inkbar i{background:var(--wax)}
.idea{font:italic 15px var(--serif);color:#6b5236;margin:-6px 0 10px;min-height:0}
.longoffer{margin:12px 0 0;padding:12px 14px;border:1.5px solid var(--gold);border-radius:12px;background:rgba(216,165,86,.14);font:14px/1.45 var(--ui);color:#3a2817}
.longoffer b{display:block;font:600 16px var(--serif);color:#5a1a14;margin-bottom:2px}.longoffer .lorow{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}.longoffer .next{padding:10px 18px;font-size:15px;background:var(--gold);color:var(--gold-ink)}
.longline{font:14px var(--ui);color:#4a3726;margin-top:8px}.codebox{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.codebox input{font:15px var(--ui);padding:6px 10px;border:1.5px solid #b79b72;border-radius:8px;background:#fffdf9;width:9em;text-transform:uppercase}#codeMsg{color:#a1271f;font-size:13px}
.longline button{background:none;border:0;padding:0 2px;font:500 14px var(--ui);color:#6b5236;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.listen{display:flex;align-items:center;gap:14px;background:#2a1d14;color:#f4ead8;border-radius:10px;padding:16px 18px;margin:12px 0 18px}
.listen button{width:52px;height:52px;border-radius:50%;border:0;background:var(--gold);color:var(--gold-ink);font-size:20px;flex:none}
.listen q{font:italic 20px var(--serif)}
.extras{display:grid;gap:10px;margin:8px 0 22px}
.extra{display:flex;gap:12px;align-items:flex-start;border:1.5px solid #c9b088;border-radius:8px;padding:14px;background:rgba(255,255,255,.35);font:15px var(--ui);color:#3a2817}
.extra input{width:20px;height:20px;accent-color:var(--wax);margin-top:2px}
.signoff{font:26px "Hand",cursive;color:var(--blueink);display:flex;align-items:center;gap:10px;margin:2px 0 6px 30%;min-height:44px}
.signoff svg,.chip svg{width:28px;height:28px;flex:none}.chip.on svg{stroke:#f8e7d0}.chip.on svg path[fill]{fill:#f8e7d0}.chip svg{width:20px;height:20px;vertical-align:-4px;margin-right:4px}
.sealwrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
.seal{width:132px;height:132px;border-radius:50%;border:0;position:relative;background:radial-gradient(circle at 35% 30%,#b33a2f,#7d1f1a 55%,#4f120f);box-shadow:0 10px 30px rgba(80,15,10,.55),inset 0 -8px 18px rgba(0,0,0,.35);color:#f2c9b5;font:600 46px var(--serif);user-select:none;touch-action:none}
.seal::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(125,31,26,.25)}
.seal .fill{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(255,220,170,.45) var(--p,0%),transparent 0)}
.seal.pressed{transform:scale(.94);box-shadow:0 4px 12px rgba(80,15,10,.6),inset 0 6px 16px rgba(0,0,0,.45)}
.sealed .seal{border-radius:47% 53% 50% 50%/52% 48% 52% 48%;transform:scale(1.03);box-shadow:0 6px 18px rgba(80,15,10,.55),inset 0 4px 10px rgba(0,0,0,.45),inset 0 -3px 6px rgba(255,190,160,.18)}
.sealed .seal .fill{opacity:0;transition:opacity .4s}
.stampbox{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.stamp{flex:none;width:112px;height:136px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.28))}
.stamp .perf{height:100%;background:#f7efdc;padding:8px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4px,#0000 96%,#000) -6px -6px/12px 12px round;
  mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4px,#0000 96%,#000) -6px -6px/12px 12px round}
.stamp .in{height:100%;border:1.5px solid var(--wax);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--wax);font:600 11px var(--ui);letter-spacing:.08em;background:repeating-linear-gradient(45deg,#f7efdc 0 6px,#f2e6cd 6px 12px)}
.stamp .val{font:600 30px var(--serif);color:#2a1b10;letter-spacing:0}
.pay{background:#fff;border-radius:10px;padding:16px;color:#1a1a1a;font:15px var(--ui);box-shadow:0 2px 0 #ddd}
.applepay{background:#000;color:#fff;border-radius:8px;height:48px;display:flex;align-items:center;justify-content:center;font:600 18px var(--ui);margin-bottom:10px;border:0;width:100%}
.or{text-align:center;color:#888;font-size:13px;margin:8px 0}
.field{border:1px solid #d6d6d6;border-radius:6px;padding:12px;color:#999;margin-bottom:8px;background:#fafafa}
.tick{display:flex;gap:10px;align-items:flex-start;font:14px var(--ui);color:#3a2817;margin:10px 0}
.tick input{width:18px;height:18px;margin-top:2px;accent-color:var(--wax)}
.gcorner{font:13px/1.5 var(--ui);color:#6b5236;border-top:1px dashed #c9b088;margin-top:16px;padding-top:12px}

/* posting + wait + ready */
.night{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;background:radial-gradient(ellipse at 50% 100%,#2a1a10,var(--night) 70%)}
.slot{width:240px;height:22px;border-radius:6px;background:linear-gradient(#a7823f,#6d5126);box-shadow:inset 0 -6px 10px rgba(0,0,0,.6);margin:30px auto 0;position:relative}
.letterfly{width:200px;height:120px;margin:0 auto;background:linear-gradient(#f4ead2,#e2d0aa);border-radius:4px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.letterfly::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 49%,rgba(0,0,0,.12) 50%,transparent 51%),linear-gradient(25deg,transparent 49%,rgba(0,0,0,.12) 50%,transparent 51%)}
.letterfly .wax{position:absolute;left:50%;top:52%;width:38px;height:38px;margin:-19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b33a2f,#6d1915);color:#f2c9b5;font:600 18px var(--serif);display:flex;align-items:center;justify-content:center}
.postmark{position:absolute;right:-18px;top:-20px;width:84px;height:84px;border-radius:50%;border:2.5px solid rgba(216,165,86,.9);color:rgba(236,200,140,.95);font:700 9px var(--ui);display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-14deg) scale(1.6);opacity:0}
.posted .postmark{animation:thunk .35s .2s forwards,pmdrop 1.1s .9s cubic-bezier(.5,0,.75,0) forwards}
@keyframes pmdrop{from{transform:rotate(-14deg) scale(1);opacity:1}to{transform:translateY(150px) rotate(-14deg) scale(.6);opacity:0}}
@keyframes thunk{to{transform:rotate(-14deg) scale(1);opacity:1}}
.posted .letterfly{animation:drop 1.1s .9s cubic-bezier(.5,0,.75,0) forwards}
@keyframes drop{to{transform:translateY(150px) scale(.6);opacity:0}}
.status{font:600 clamp(26px,4vw,38px)/1.2 var(--serif);max-width:640px;margin:22px auto 8px;min-height:2.4em}
.substatus{color:var(--muted);max-width:520px;margin:0 auto}
.track{display:flex;gap:6px;justify-content:center;margin:26px 0 8px;flex-wrap:wrap}
.track i{font:normal 600 12px var(--ui);padding:6px 10px;border-radius:4px;border:1px dashed var(--line);color:var(--muted)}
.track i.done{background:rgba(216,165,86,.14);color:var(--gold);border-style:solid}
.track i.now{background:var(--gold);color:var(--gold-ink)}
.eta{font:14px var(--ui);color:var(--muted)}
.vignette{width:min(560px,92vw);aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6);margin:6px auto 0}
.vignette video{width:100%;height:100%;object-fit:cover;display:block}
.plan{margin-top:26px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;max-width:560px}
.plan .chips{justify-content:center}
.plan .chip{color:var(--ink);border-color:var(--line)}
.plan .chip.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.ready .film{width:min(820px,94vw);margin:22px auto}
.guide{max-width:640px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left;margin:16px auto}
.guide div{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:15px/1.4 var(--ui);color:var(--muted)}
.guide b{color:var(--ink)}
.proto{position:fixed;left:12px;bottom:12px;z-index:9;font:600 11px var(--ui);letter-spacing:.08em;color:#8a7458;background:rgba(0,0,0,.5);padding:5px 8px;border-radius:4px}

/* the journey north (wait) */
.journey{justify-content:flex-start;padding-top:84px;overflow-x:clip}
.route{width:min(660px,96vw);margin:0 auto 4px}
.route svg{width:100%;height:auto;overflow:visible;display:block}
.route .way{fill:none;stroke:rgba(216,165,86,.28);stroke-width:1.6;stroke-dasharray:1.5 6;stroke-linecap:round}
.route .walked{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-dasharray:1.5 6;stroke-linecap:round}
.route .stop .dot{fill:var(--night);stroke:rgba(216,165,86,.45);stroke-width:1.4}
.route .stop text{font:600 9.5px var(--ui);fill:var(--muted);letter-spacing:.05em;text-anchor:middle;text-transform:uppercase}
.route .stop.done text{fill:var(--gold)}
.route .pm{opacity:0;transform-box:fill-box;transform-origin:center}
.route .stop.done .pm{animation:pmthunk .16s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes pmthunk{from{opacity:0;transform:scale(1.9) rotate(var(--r,-12deg))}to{opacity:1;transform:scale(1) rotate(var(--r,-12deg))}}
.route .star{fill:rgba(216,165,86,.35);transition:fill .5s,filter .5s}.route .stop.done .star{fill:var(--gold);filter:drop-shadow(0 0 7px rgba(216,165,86,.9))}
.route .mk{transform-box:fill-box;transform-origin:center}.route .stop.done .mk{animation:mkpop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes mkpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.route .stop.seal .mk{opacity:.45;transition:opacity .5s}.route .stop.seal.done .mk{opacity:1}
.route .stop.house .home{stroke:var(--gold)}
.route .home{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}
.route .lampg,.route .lampb{fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linejoin:round;transition:stroke .5s}.route .flame{fill:var(--muted);transition:fill .5s,filter .5s}
.route .stop.lamp.done .lampg,.route .stop.lamp.done .lampb{stroke:var(--gold)}.route .stop.lamp.done .flame{fill:#ffc66b;filter:drop-shadow(0 0 5px rgba(255,190,90,.95))}
.route .win{fill:none;stroke:var(--muted);stroke-width:1;transition:fill .6s,stroke .6s}
.route .stop.ready.done .home{stroke:var(--gold)}.route .stop.ready.done .win{fill:#ffc66b;stroke:#ffc66b;animation:glow 2.4s ease-in-out .6s infinite}
.route .stop.ready .mk{transform:scale(1.3)}.route .stop.ready.done .mk{filter:drop-shadow(0 0 8px rgba(255,190,90,.85));animation:none}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.55}}
#mail{transition:opacity .6s}#mail.home{opacity:0}
.stagebox{position:relative;width:min(640px,94vw);aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.65);background:#000;margin:8px auto 0}
.stagebox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.stagebox video.on{opacity:1}
.stagebox::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.miles{position:absolute;left:12px;bottom:10px;z-index:2;font:600 12px var(--ui);letter-spacing:.03em;color:var(--ink);background:rgba(15,10,7,.55);border:1px solid var(--line);padding:5px 10px;border-radius:999px;opacity:0;transition:opacity .5s}
.miles.on{opacity:1}
.journey .status{margin-top:18px;min-height:1.2em}
.journey .sub{color:var(--muted);min-height:1.5em;margin:0 auto 6px;max-width:560px;transition:opacity .4s}
.readstrip{width:min(560px,92vw);margin:8px auto 4px;height:0;overflow:hidden;transition:height .7s ease}
.readstrip.on{height:132px}
.readstrip .pp{position:relative;height:118px;margin:6px 4px;padding:10px 20px;overflow:hidden;text-align:left;color:var(--blueink);font:23px/1.42 "Hand",cursive;
  background:linear-gradient(#f3e8cf,#e7d7b2);border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.5);transform:rotate(-.5deg);
  -webkit-mask-image:linear-gradient(transparent,#000 34%);mask-image:linear-gradient(transparent,#000 34%);display:flex;flex-direction:column;justify-content:flex-end}
.readstrip .ln{opacity:0;transform:translateY(8px);transition:opacity 1.4s ease,transform 1.4s ease;white-space:nowrap}
.readstrip .ln.on{opacity:1;transform:none}
.hearbtn{margin-top:12px;font:500 13px var(--ui);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
/* Santa's reply: sealed, then opened */
#reply{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at 50% 58%,#2e1c10,#0c0805 72%)}
#reply.on{display:flex}#reply.show{opacity:1}
#reply .kick{font:600 12px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;opacity:0;transition:opacity .8s}
#reply.show .kick{opacity:1}
.renv{position:relative;width:min(440px,84vw);aspect-ratio:3/2;perspective:1400px}
.renv .body{position:absolute;inset:0;border-radius:5px;background:linear-gradient(162deg,#f6ecd6,#e2cfa6);box-shadow:0 34px 90px rgba(0,0,0,.65),inset 0 0 40px rgba(120,80,30,.18)}
.renv .body::before{content:"";position:absolute;inset:0;border-radius:5px;background:
  linear-gradient(to top right,transparent calc(50% - 1px),rgba(110,75,35,.18) 50%,transparent calc(50% + 1px)) left bottom/50% 66% no-repeat,
  linear-gradient(to top left,transparent calc(50% - 1px),rgba(110,75,35,.18) 50%,transparent calc(50% + 1px)) right bottom/50% 66% no-repeat}
.renv .glow{position:absolute;left:8%;right:8%;top:6%;height:60%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,rgba(255,214,140,.95),rgba(255,180,90,.0) 70%);opacity:0;transition:opacity .9s}
.renv.open .glow{opacity:1}
.renv .flap{position:absolute;left:0;right:0;top:0;height:50%;transform-origin:50% 0;transition:transform .85s cubic-bezier(.35,.6,.2,1);z-index:3;transform-style:preserve-3d}
.renv .flap i{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#efe2c4,#dcc69a);filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.renv.open .flap{transform:rotateX(178deg)}
.renv .to{position:absolute;left:0;right:0;bottom:7%;text-align:center;z-index:2}
.renv .to b{display:inline-block;font:clamp(28px,6vw,42px)/1 "Pinyon Script",cursive;font-weight:400;color:#3b2212;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.45,.1,.3,1)}
.renv.writ .to b{clip-path:inset(0 0 0 0)}
.renv .to small{display:block;font:600 9px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:#7b5a35;margin-top:6px;opacity:0;transition:opacity .8s .8s}
.renv.writ .to small{opacity:1}
.renv .wax{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;overflow:visible}
.wax .blob{transform-box:fill-box;transform-origin:center;transform:scale(.05);opacity:0}
.renv.pour .wax .blob{animation:pour .75s cubic-bezier(.2,.8,.25,1.05) forwards}
@keyframes pour{0%{opacity:1;transform:scale(.05)}70%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
.wax .gloss{opacity:0;transition:opacity .45s}
.renv.pour .wax .gloss{opacity:.32}.renv.matte .wax .gloss{opacity:.09}
.wax .art{opacity:0}.renv.pressed .wax .art{opacity:1}
.wax .half{transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .5s}
.renv.crack .wax .l{transform:translate(-9px,-4px) rotate(-11deg)}.renv.crack .wax .r{transform:translate(9px,3px) rotate(9deg)}
.renv.open .wax .half{opacity:0;transition-delay:.25s}
.wax .glint{opacity:0}.renv.pressed .wax .glint{animation:glint 1.6s .4s ease-in-out}
@keyframes glint{0%,100%{opacity:0}40%{opacity:.9}}
.stamper{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;border-radius:50%;z-index:5;transform:translate(-50%,-50%) translateY(-60px) scale(1.25);opacity:0;
  background:radial-gradient(circle at 36% 30%,#c9a25a,#6e4f1c 50%,#2a1c08 85%);box-shadow:0 22px 34px rgba(0,0,0,.6),inset 0 -4px 8px rgba(0,0,0,.5);transition:transform .1s ease-in,opacity .1s}
.renv.press .stamper{opacity:1;transform:translate(-50%,-50%) scale(1)}
.renv.lift .stamper{opacity:0;transform:translate(-50%,-50%) translateY(-70px) scale(1.2);transition:transform .32s ease-out,opacity .32s}
@media (prefers-reduced-motion:reduce){.renv .flap,.wax .half,.stamper,.renv .to b{transition:none!important}.wax .blob{animation:none!important;opacity:1;transform:none}}

/* siblings */
.sibrow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:12px;align-items:center}
.sibrow input.t{font-size:20px;margin:0}
.sibrow input.say{font-size:16px}
.sibrow .x{border:0;background:transparent;color:#8a6a45;font:600 20px var(--ui);width:34px;height:34px;border-radius:50%}
.addsib{display:inline-flex;align-items:center;gap:10px;margin-top:14px;border:1.5px solid #a8865c;background:#fffaf0;color:#3a2817;border-radius:999px;padding:9px 18px 9px 10px;font:600 15px var(--ui);box-shadow:0 2px 6px rgba(60,40,20,.12);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.addsib .plus{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--wax);color:#f8e7d0;font:600 18px/1 var(--ui)}
.addsib:hover,.addsib:focus-visible{border-color:var(--wax);box-shadow:0 3px 10px rgba(125,31,26,.18)}
.addsib[hidden]{display:none}
/* ready: the grown-up starts the film themselves */
.watchfirst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:999px;padding:16px 28px;background:var(--gold);color:var(--gold-ink);font:600 18px var(--ui);box-shadow:0 12px 40px rgba(0,0,0,.6);transition:opacity .3s}
.watchfirst.gone{opacity:0;pointer-events:none}
/* no snow over the film */
#snow{transition:opacity .8s}body.film-on #snow{opacity:0}
@media (max-width:760px){.sibrow{grid-template-columns:1fr auto}.sibrow input.say{grid-column:1/2}}
/* one rule on the letter pages: white means you can type or tap here (owner, 25 Oct 2026) */
.paper input.t,.paper textarea.t,#email{background:#fffdf9;border:1.5px solid #b79b72;border-radius:12px;padding:8px 14px;box-shadow:inset 0 1px 2px rgba(60,40,20,.08)}
.paper input.t:focus,.paper textarea.t:focus,#email:focus{border-color:var(--wax);box-shadow:0 0 0 3px rgba(125,31,26,.15);outline:none}
#email{padding:12px 14px}
.paper textarea.t{padding:0 14px;background:#fffdf9 repeating-linear-gradient(transparent 0 39px,rgba(120,90,50,.22) 39px 40px)}
.sayas input.t{flex:1}
.paper .chip:not(.on){background:#fffdf9;box-shadow:0 1px 3px rgba(60,40,20,.10)}
.paper .prompts button{background:#fffdf9;border:1.5px solid #cdb48e;box-shadow:0 1px 3px rgba(60,40,20,.08)}
.addsib{background:#fffdf9}
@media (max-width:760px){
  body{font-size:17px}.two{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:26px}.corner{grid-template-columns:1fr 1fr}
  .bar{padding-top:26px}.brand{font-size:16px;white-space:nowrap}.sound{padding:6px 10px;font-size:12px}.sound .long{display:none}.sound #soundLbl{white-space:nowrap}
  .trail{gap:5px;flex-wrap:nowrap}.trail span{padding:6px 8px}.trail span:not(.now) b{display:none}.proto{left:8px!important;transform:none!important;top:6px;bottom:auto;left:50%;transform:translateX(-50%);font-size:9px;padding:3px 6px}
  .paper{padding:26px 20px 22px}.elf{font-size:26px}.guide{grid-template-columns:1fr}.hero{min-height:88vh}
}

/* static pages (web/build.py) */
.screen.page{animation:none}   /* no fade-in: it would hold back LCP */
a.cta,a.brand{text-decoration:none}
.brand{display:flex;align-items:center}.brand .logo{height:40px;width:auto;display:block}
.footlogo{display:block;width:max-content;margin:0 auto 22px}.footlogo img{height:120px;width:auto;display:block}
@media (max-width:760px){.brand .logo{height:30px}.footlogo img{height:96px}}a.brand:hover{color:var(--gold)}
.barcta{font:600 14px var(--ui);color:var(--gold-ink);background:var(--gold);border-radius:999px;padding:8px 16px;text-decoration:none}
.prose{max-width:760px;margin:0 auto;padding:48px 20px 64px}
.prose h1{font-size:clamp(34px,5.4vw,56px)}.prose h2{font-size:clamp(24px,3.2vw,32px);margin-top:38px}
.prose p,.prose li{color:var(--ink)}.prose li{margin:6px 0}.prose .lede{color:var(--muted)}
.prose .steps{margin:30px 0 10px}
.draft{background:var(--wax);color:#f8e7d0;border-radius:6px;padding:10px 14px;font:600 13px/1.4 var(--ui);margin-bottom:24px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:14px}
.hero .copy .micro a{color:var(--muted)}