/* Village mood — overrides landing.css. Reference: lit miniature Christmas village with a winding train line. */
:root{--stage-000:var(--ember-000);--stage-050:var(--ember-050);--stage-100:var(--ember-100);--stage-150:var(--ember-150);--stage-200:var(--ember-200);--ink-on-dark-2:var(--lamp-text-2);--paper:var(--snow);--paper-line:var(--snow-line);--ink-on-paper-2:var(--snow-ink-2)}
body{background:var(--ember-000)}
main,footer{position:relative;z-index:1}

/* ambient window light + bokeh (fixed, behind content) */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 45% at 85% 8%,rgba(255,190,100,.10),transparent 70%),radial-gradient(50% 40% at 8% 60%,rgba(255,170,80,.07),transparent 70%)}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55) 0,rgba(255,190,100,.18) 45%,transparent 70%);filter:blur(1px);animation:twinkle var(--d,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
#snow{position:fixed;inset:0;z-index:2;pointer-events:none}
.gnb{z-index:40}

/* sections sit on the ambient layer */
.sec{position:relative;background:transparent}
.sec.dark{background:linear-gradient(180deg,rgba(18,13,9,.92),rgba(18,13,9,.92))}
.sec.paper{background:var(--snow);background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.5px),radial-gradient(rgba(214,200,182,.35) 1px,transparent 1.5px);background-size:22px 22px,37px 37px;background-position:0 0,11px 17px}
/* snow drift edge on top of light sections */
.sec.paper::before{content:"";position:absolute;left:0;right:0;top:-14px;height:16px;background:radial-gradient(26px 12px at 13px 16px,var(--snow) 97%,transparent) 0 0/52px 16px repeat-x,radial-gradient(44px 14px at 22px 17px,var(--snow) 97%,transparent) 19px 0/88px 16px repeat-x,radial-gradient(70px 10px at 35px 16px,var(--snow) 97%,transparent) 7px 0/131px 16px repeat-x;pointer-events:none;filter:drop-shadow(0 -2px 6px rgba(255,240,220,.12))}

/* gold reads as lamplight */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 10px 3px var(--lamp-glow)}
.paper .eyebrow::before{background:var(--gold-on-paper);box-shadow:none}
.btn-gold{box-shadow:0 0 0 0 var(--lamp-glow),0 10px 40px -8px var(--lamp-glow)}
.btn-gold:hover{box-shadow:0 0 0 6px rgba(255,207,107,.14),0 12px 48px -6px rgba(255,196,102,.5)}
.btn-gold[disabled]{box-shadow:none}

/* string lights (generated by village.js) */
.lights{position:relative;height:64px;width:100%;overflow:hidden;pointer-events:none}
.lights svg{position:absolute;inset:0;width:100%;height:100%}
.lights .bulb{position:absolute;width:9px;height:12px;border-radius:50% 50% 45% 45%;transform:translate(-50%,0);animation:twinkle var(--d,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.lights .bulb.g{background:var(--lamp);box-shadow:0 0 12px 4px var(--lamp-glow)}
.lights .bulb.r{background:#E2545B;box-shadow:0 0 10px 3px rgba(226,84,91,.35)}
.lights .bulb.p{background:#5FA27C;box-shadow:0 0 10px 3px rgba(95,162,124,.3)}
.hero .lights{margin-top:-8px}

/* hero KV placeholder: night village glow */
.kv{background:radial-gradient(70% 60% at 50% 100%,rgba(255,190,100,.35),transparent 70%),radial-gradient(30% 25% at 22% 62%,rgba(255,200,120,.25),transparent 70%),radial-gradient(30% 25% at 78% 58%,rgba(255,200,120,.22),transparent 70%),linear-gradient(180deg,#0d0a10 0%,#1a1210 55%,#2a1d14 100%)}
.kv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8%;background:linear-gradient(180deg,transparent,var(--ember-000));pointer-events:none}
.hero-date{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,207,107,.35);background:rgba(255,207,107,.06)}

/* cards: warm wood-dark with lamplit top edge */
.info,.step,.earn-card,.addr,.tier,.modal .card{box-shadow:inset 0 1px 0 rgba(255,220,170,.08)}
.sec:not(.paper) .step,.earn-card,.info{background:linear-gradient(180deg,#221912,#1A130E)}
.paper .step,.cond-card{background:#fff;box-shadow:0 1px 0 var(--snow-line),0 18px 40px -28px rgba(90,60,30,.35)}
/* snow cap on light cards */
.paper .step,.cond-card{position:relative}
.paper .step::before,.cond-card::before{content:"";position:absolute;left:18px;right:18px;top:-5px;height:10px;border-radius:10px;background:#fff;box-shadow:0 2px 0 var(--snow-line)}

/* program: a real track instead of a dashed line */
.route::before{left:19px;width:18px;border:0;background:linear-gradient(90deg,var(--rail-steel) 0 2px,transparent 2px 16px,var(--rail-steel) 16px 18px),repeating-linear-gradient(180deg,var(--rail) 0 4px,transparent 4px 14px);opacity:.9}
.stop .dot{background:radial-gradient(circle,#2a1e15,#140e0a);box-shadow:inset 0 0 0 2px var(--ember-200)}
.stop .dot i{background:var(--lamp-text-2)}
.stop.lit .dot{box-shadow:inset 0 0 0 2px var(--gold-400),0 0 24px 4px var(--lamp-glow)}
.stop.lit .dot i{background:var(--lamp);box-shadow:0 0 10px 3px var(--lamp-glow)}
.stop.lit .no{color:var(--gold-400)}
.stop .no{color:var(--lamp-text-2);transition:color .3s}
.stop .dot,.stop .dot i{transition:box-shadow .4s,background .4s}
.stop:first-child .dot{box-shadow:inset 0 0 0 2px var(--gold-400),0 0 24px 4px var(--lamp-glow)}
.stop:first-child .dot i{background:var(--lamp)}

/* rail divider between big chapters */
.rail-div{position:relative;height:26px;margin:0;background:linear-gradient(180deg,transparent 7px,var(--rail-steel) 7px 9px,transparent 9px 17px,var(--rail-steel) 17px 19px,transparent 19px),repeating-linear-gradient(90deg,var(--rail) 0 6px,transparent 6px 22px);opacity:.75;z-index:1}
.rail-div .headlight{position:absolute;top:50%;width:120px;height:60px;margin-top:-30px;background:radial-gradient(closest-side,rgba(255,214,140,.55),transparent);animation:runline 9s linear infinite}
@keyframes runline{from{left:-140px}to{left:100%}}

/* places: lamplit windows behind frost */
.place-img{background:radial-gradient(25% 30% at 30% 55%,rgba(255,200,120,.55),transparent 70%),radial-gradient(20% 25% at 70% 45%,rgba(255,200,120,.45),transparent 70%),linear-gradient(160deg,#2a1d14,#120d09)}
.place-img .veil{background:linear-gradient(115deg,rgba(10,7,5,.66) 0 46%,rgba(10,7,5,.3) 46% 100%)}
.place-img .q{box-shadow:inset 0 0 0 1.5px rgba(255,220,170,.7),0 0 30px rgba(255,196,102,.25)}

/* tier table: ticket stub */
.tier td:first-child{position:relative}
.tier tr td:last-child{text-shadow:0 0 18px var(--lamp-glow)}

/* star rows glow */
.earn-card .starrow svg,.lens svg,.shot .stars svg{filter:drop-shadow(0 0 6px rgba(255,196,102,.55))}
.lens{box-shadow:0 0 0 3px var(--gold-400),0 0 40px 6px var(--lamp-glow)}

/* final: warm platform glow */
.final{background:radial-gradient(60% 80% at 50% 100%,rgba(255,190,100,.22),transparent 70%),transparent}

/* map grid warmer */
.map{background:repeating-linear-gradient(0deg,transparent 0 47px,var(--ember-150) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,var(--ember-150) 47px 48px),var(--ember-100)}
.map .pin svg{filter:drop-shadow(0 0 10px var(--lamp-glow))}

.foot{background:var(--ember-050);border-top:0}
.portrait{background:radial-gradient(60% 50% at 50% 30%,rgba(255,200,120,.12),transparent 70%),linear-gradient(180deg,#241a13,#140e0a)}

@media (prefers-reduced-motion:reduce){#snow{display:none}.rail-div .headlight{display:none}}
@media (max-width:767px){.lights{height:44px}.route::before{left:11px}.rail-div{height:22px}}

.kv{aspect-ratio:2776/1606;max-height:none;min-height:0;background:var(--ember-000)}
.kv picture,.kv img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.kv{aspect-ratio:1403/1349;max-height:none;min-height:0}}

/* ---- type scale rebalance (PC 19 body / mobile 16 body) ---- */
body{font-size:19px;line-height:1.65}
.eyebrow{font-size:17px}
.h-sec{font-size:52px;line-height:1.25}
.h-sub{font-size:30px}
.lead{font-size:20px}
.note{font-size:16px}
.demo-tag{font-size:13px}
.hero-date{font-size:20px}
.hero-title{font-size:44px;line-height:1.3}
.info{min-height:180px}
.info dt{font-size:18px;font-weight:600;color:var(--gold-400)}
.info dd{font-size:28px;line-height:1.35}
.teacher figcaption{font-size:20px}
.invite-body{font-size:22px}
.stop .no{font-size:16px}
.stop p{font-size:24px}
.step h3{font-size:24px}
.step p{font-size:18px}
.step .n{font-size:16px}
.cond-card h3{font-size:24px}
.cond-card li,.cond-card p{font-size:18px}
.tier th{font-size:17px}
.tier td{font-size:24px}
.tier td:last-child{font-size:30px}
.acct b{font-size:16px}.acct span{font-size:20px}
.flow .chip{font-size:17px}
.shot-cap{font-size:15px}
.earn-card h3{font-size:22px}
.earn-card p{font-size:17px}
.earn-card .amt{font-size:28px}
.place h3{font-size:24px}.place p{font-size:18px}
.final .period{font-size:22px}
.addr h3{font-size:28px}.addr dt{font-size:16px}.addr dd{font-size:18px}
.qa button{font-size:21px}
.qa .ans p{font-size:18px}
.notice li{font-size:17px}

.btn{font-size:18px}.btn-line{font-size:17px}.btn-text{font-size:17px}
@media (max-width:1099px){.steps{grid-template-columns:repeat(2,1fr)}.steps.three{grid-template-columns:repeat(3,1fr)}.info dd{word-break:keep-all}.h-sec{font-size:44px}.info dd{font-size:24px}.stop p{font-size:21px}}
@media (max-width:767px){
body{font-size:16px}
.eyebrow{font-size:15px}
.h-sec{font-size:28px}
.h-sub{font-size:22px}
.lead{font-size:16px}
.note{font-size:15px}
.demo-tag{font-size:12px}
.hero-date{font-size:16px}
.hero-title{font-size:26px}
.info dt{font-size:15px;width:48px}
.info dd{font-size:19px}
.teacher figcaption{font-size:16px}
.invite-body{font-size:18px}
.stop .no{font-size:13px}
.stop p{font-size:18px}
.step h3{font-size:19px}
.step p{font-size:16px}
.step .n{font-size:14px}
.cond-card h3{font-size:19px}
.cond-card li,.cond-card p{font-size:16px}
.tier th{font-size:14px}
.tier td{font-size:16px}
.tier td:last-child{font-size:20px}
.acct b{font-size:14px}.acct span{font-size:17px}
.flow .chip{font-size:15px}
.shot-cap{font-size:14px}
.earn-card h3{font-size:18px}
.earn-card p{font-size:15px}
.earn-card .amt{font-size:22px}
.place h3{font-size:20px}.place p{font-size:16px}
.final .period{font-size:18px}
.addr h3{font-size:22px}.addr dt{font-size:15px}.addr dd{font-size:16px}
.qa button{font-size:17px}
.qa .ans p{font-size:16px}
.notice li{font-size:15px}

.btn{font-size:17px}.btn-line{font-size:16px}.btn-text{font-size:16px}
}

/* teacher portraits — cutouts on lamplit card, framed head-to-waist */
.portrait{align-items:flex-start;background:radial-gradient(70% 55% at 50% 38%,rgba(255,196,102,.28),transparent 72%),linear-gradient(180deg,#2a1e15,#140e0a)}
.portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;background:linear-gradient(180deg,transparent,rgba(20,14,10,.85));pointer-events:none}
.portrait img{position:absolute;top:0;max-width:none;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.teacher:hover .portrait img{transform:translateY(-6px) scale(1.02)}
figure.teacher{margin:0}
.teacher figcaption{margin-top:16px}

/* face-normalised framing: each img carries width/left/margin-top so eyes sit at 50% x, 30% of card height, eye→chin = 20% of card width */
@media (max-width:767px){.teacher{order:var(--mo)}}

.places-note{text-align:right}

/* Stable snowfall surface while mobile browser chrome expands/collapses. */
@media (max-width:767px){#snow{width:100%;height:100lvh;bottom:auto}}

/* Train and headlight travel together; individual cars gently rattle. */
.rail-div-train{--train-width:360px;--rattle-step:.8px;clip-path:inset(-160px 0 -40px)}
.rail-div-train .headlight{animation-name:runline-train}
.rail-div-train .rail-train{position:absolute;right:60px;bottom:24px;width:var(--train-width);height:calc(var(--train-width) * 389 / 2105);display:flex;pointer-events:none}
.train-car{display:block;flex:0 0 calc(var(--car-width) * 100%);height:100%;background-image:url('../assets/christmas-rail-train-45.png');background-repeat:no-repeat;background-size:calc(var(--train-width) * 2160 / 2105) calc(var(--train-width) * 728 / 2105);background-position:calc(var(--train-width) * var(--car-x)) calc(var(--train-width) * -158 / 2105);transform-origin:50% 90%;animation:toy-rattle var(--rattle-time) ease-in-out var(--rattle-delay) infinite;will-change:transform}
@keyframes toy-rattle{0%,100%{transform:translateY(0) rotate(-.15deg)}25%{transform:translateY(calc(-1 * var(--rattle-step))) rotate(.25deg)}50%{transform:translateY(calc(.35 * var(--rattle-step))) rotate(-.12deg)}75%{transform:translateY(calc(-.25 * var(--rattle-step))) rotate(-.22deg)}}
@keyframes runline-train{from{left:-140px}to{left:calc(100% + var(--train-width))}}
@media (max-width:767px){.rail-div-train{--train-width:260px;--rattle-step:.55px}}
@media (prefers-reduced-motion:reduce){.train-car{animation:none;will-change:auto}}