@font-face{font-family:"Young Serif";src:url(/fonts/youngserif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(/fonts/albertsans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(/fonts/albertsans-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(/fonts/fragmentmono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--frost:#EEF2F3;--rime:#DCE4E6;--glacier:#BECED3;--slate:#1F2A2E;--mute:#5F6E72;--wool:#D2B488;--candle:#F0D6A6;--cran:#8E1F2F;
--serif:"Young Serif",Georgia,"Times New Roman",serif;--sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Fragment Mono",ui-monospace,Menlo,Consolas,monospace;
--pad:clamp(16px,4vw,48px);--max:1180px;--bar:72px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--frost);color:var(--slate);font:400 17px/1.6 var(--sans);padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
background-image:radial-gradient(circle at 12% 8%,rgba(255,255,255,.9),transparent 40%),radial-gradient(circle at 88% 30%,rgba(190,206,211,.35),transparent 45%);background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--glacier)}
a:hover{text-decoration-color:var(--cran)}
:focus-visible{outline:2px solid var(--cran);outline-offset:3px;border-radius:4px}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--slate);color:var(--frost);padding:8px 14px;border-radius:6px;z-index:99}
.skip:focus{top:12px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(238,242,243,.82);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.solid{border-bottom-color:var(--glacier)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:1.32rem;line-height:1;white-space:nowrap}
.mark svg{width:26px;height:26px;flex:none}
.mark i{font-family:var(--sans);font-style:italic;font-weight:400;color:var(--mute)}
.nav{display:flex;gap:18px;margin-left:auto;font-size:.92rem}
.nav a{text-decoration:none;color:var(--mute)}
.nav a:hover{color:var(--slate)}
.status{font-family:var(--mono);font-size:.72rem;color:var(--mute);border:1px solid var(--glacier);border-radius:99px;padding:4px 10px;white-space:nowrap}
@media (max-width:900px){.nav{display:none}.status{margin-left:auto}}
@media (max-width:380px){.status{display:none}}
/* hero */
.hero{padding:clamp(18px,4vh,40px) 0 40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:22px}.hero-l{display:contents}.intro{order:1}.sash{order:2}.controls{order:3}.lede{margin-bottom:0}.hero h1{font-size:clamp(2rem,9vw,2.6rem)}.two>div:first-child{max-width:300px}}
.kicker{font-family:var(--mono);font-size:.76rem;color:var(--mute);text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem)}
h1 em{font-family:var(--sans);font-style:italic;color:var(--mute)}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--mute);max-width:34em;margin:18px 0 24px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--slate);background:transparent;border-radius:99px;padding:11px 20px;font-weight:500;font-size:.97rem;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--slate);color:var(--frost)}
.btn.main{background:var(--cran);border-color:var(--cran);color:#fff}
.btn.main:hover{background:#74192a}
.btn svg{width:14px;height:14px}
.btn.sm{padding:7px 14px;font-size:.86rem}
.switch{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--mute);cursor:pointer;user-select:none}
.switch input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:99px;border:1px solid var(--glacier);background:var(--rime);position:relative;margin:0;cursor:pointer;transition:background .2s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(31,42,46,.25);transition:transform .2s}
.switch input:checked{background:var(--cran);border-color:var(--cran)}
.switch input:checked::after{transform:translateX(16px)}
.facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:26px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.74rem;color:var(--mute)}
.facts li+li::before{content:"·";margin-right:14px;color:var(--glacier)}
.hint{font-size:.88rem;color:var(--mute);margin:14px 0 0;min-height:1.4em}
/* window */
.sash{position:relative;padding:clamp(10px,1.4vw,16px);background:linear-gradient(#f7f9f9,#e6ecee);border:1px solid var(--glacier);border-radius:6px;box-shadow:0 30px 60px -30px rgba(31,42,46,.35),inset 0 0 0 1px #fff}
.sash::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-14px;height:14px;background:linear-gradient(#e9eef0,#d5dfe2);border:1px solid var(--glacier);border-radius:0 0 6px 6px}
.window{position:relative;aspect-ratio:3/4;max-height:78vh;margin:0 auto;border-radius:2px;overflow:hidden;touch-action:pan-y;
background:radial-gradient(60% 45% at 50% 62%,var(--candle),transparent 72%),radial-gradient(90% 70% at 50% 70%,var(--wool),transparent 80%),linear-gradient(#c9b48e,#9d8462 120%)}
@media (max-width:860px){.window{max-height:none;aspect-ratio:3/3.6}}
.room{position:absolute;inset:0;width:100%;height:100%;opacity:.32;pointer-events:none}
.panes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(6px,.9vw,10px);background:transparent}
.pane{position:relative;border:0;margin:0;padding:10px;background:transparent;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;color:var(--slate);box-shadow:0 0 0 clamp(3px,.45vw,5px) #f3f6f7,inset 0 0 0 1px rgba(255,255,255,.4)}
.pane .n{font-family:var(--mono);font-size:.68rem;opacity:.75}
.pane .t{font-family:var(--serif);font-size:clamp(.86rem,1.25vw,1.06rem);line-height:1.1}
.pane .d{font-family:var(--mono);font-size:.64rem;opacity:.7}
.pane.tonight{box-shadow:0 0 0 clamp(3px,.45vw,5px) #f3f6f7,inset 0 0 0 2px var(--cran)}
.pane.tonight::before{content:"tonight";position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:.6rem;color:#fff;background:var(--cran);border-radius:99px;padding:1px 7px}
.pane.playing .t{text-decoration:underline;text-decoration-color:var(--cran);text-decoration-thickness:2px}
.pane:hover{background:rgba(255,255,255,.08)}
#frost{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .6s}
.clear #frost{opacity:0}
.mullion{position:absolute;inset:0;pointer-events:none;border:1px solid rgba(190,206,211,.9)}
.under{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-top:26px}
/* sections */
.sec{padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--glacier)}
.sec-h{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;margin-bottom:clamp(26px,4vw,44px)}
.sec-h .no{font-family:var(--mono);font-size:.78rem;color:var(--cran)}
.sec-h h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.sec-h p{grid-column:2;margin:6px 0 0;color:var(--mute);max-width:40em}
@media (max-width:600px){.sec-h{grid-template-columns:1fr}.sec-h p{grid-column:1}}
/* calendar strip */
.strip{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:0 0 30px;padding:0;list-style:none}
.strip li{border:1px solid var(--glacier);border-radius:4px;padding:6px 2px;text-align:center;font-family:var(--mono);font-size:.66rem;color:var(--mute);background:rgba(255,255,255,.4)}
.strip li b{display:block;font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--slate)}
.strip li.thawed{background:linear-gradient(var(--candle),var(--wool));border-color:var(--wool);color:var(--slate)}
.strip li.today{outline:2px solid var(--cran);outline-offset:1px}
@media (max-width:600px){.strip{grid-template-columns:repeat(6,1fr)}}
/* track list */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--glacier)}
.tl li{display:grid;grid-template-columns:34px 44px minmax(0,1fr) auto auto 34px;gap:12px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--glacier)}
.tl li.on{background:rgba(255,255,255,.55)}
.tl .ix{font-family:var(--mono);font-size:.72rem;color:var(--mute);text-align:right}
.tl img{width:44px;height:44px;border-radius:3px}
.tl .ti{min-width:0}
.tl .ti b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl .ti span{font-size:.84rem;color:var(--mute)}
.tl .du{font-family:var(--mono);font-size:.74rem;color:var(--mute)}
.pl{width:34px;height:34px;border-radius:50%;border:1px solid var(--glacier);background:#fff;display:grid;place-items:center;padding:0}
.pl svg{width:12px;height:12px;fill:var(--cran)}
.pl:hover{border-color:var(--cran)}
.dl{font-family:var(--mono);font-size:.7rem;color:var(--mute);text-decoration:none;border:1px solid var(--glacier);border-radius:99px;padding:3px 9px}
.dl:hover{color:var(--slate);border-color:var(--slate)}
@media (max-width:600px){.tl li{grid-template-columns:44px minmax(0,1fr) auto 34px;gap:10px}.tl .ix{display:none}.tl .du{display:none}}
.two{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.cover{border-radius:4px;box-shadow:0 20px 40px -24px rgba(31,42,46,.5);width:100%;aspect-ratio:1;height:auto}
.alb-meta{margin:14px 0 0;color:var(--mute);font-size:.92rem}
.alb-meta .mono{display:block;margin-bottom:6px}
.note{border:1px dashed var(--glacier);border-radius:6px;padding:12px 14px;font-size:.92rem;color:var(--mute);margin:16px 0 0;background:rgba(255,255,255,.4)}
/* rituals */
.rituals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.ritual{background:linear-gradient(160deg,#e3cfa9,var(--wool));border-radius:8px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.ritual svg.draw{width:100%;height:92px;stroke:var(--slate);stroke-width:1;fill:none;opacity:.8}
.ritual h3{font-size:1.6rem}
.ritual .diary{font-family:var(--mono);font-size:.76rem;color:#4a3d29;margin:0}
.ritual p{margin:0;font-size:.95rem}
.ritual .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:8px}
.ritual .btn{border-color:var(--slate)}
.ritual details{font-size:.9rem}
.ritual summary{cursor:pointer;font-family:var(--mono);font-size:.74rem}
.ritual ol{margin:8px 0 0;padding-left:22px}
.ritual ol li{padding:2px 0}
.ritual ol span{color:#5b4a31}
.ritual.on{box-shadow:0 0 0 2px var(--cran)}
/* postcard */
.pc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.pc{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.field label,.field legend{font-family:var(--mono);font-size:.74rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
fieldset.field{border:0;padding:0}
select,textarea{font:inherit;color:var(--slate);background:#fff;border:1px solid var(--glacier);border-radius:6px;padding:10px 12px;width:100%}
textarea{resize:vertical;min-height:84px}
.stamps{display:flex;gap:10px}
.stamps label{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--glacier);border-radius:6px;padding:8px 10px;background:#fff;cursor:pointer;font-size:.8rem;text-transform:none;letter-spacing:0;font-family:var(--sans);color:var(--slate)}
.stamps input{position:absolute;opacity:0}
.stamps svg{width:30px;height:36px;stroke:var(--cran);fill:none}
.stamps input:checked+svg{fill:rgba(142,31,47,.1)}
.stamps label:has(input:checked){border-color:var(--cran)}
.stamps label:has(input:focus-visible){outline:2px solid var(--cran);outline-offset:2px}
#pc-prev{width:100%;height:auto;border-radius:6px;box-shadow:0 20px 40px -24px rgba(31,42,46,.45);background:#fff}
.pc .ctas{margin-top:16px}
/* shelf */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px 16px;list-style:none;margin:0;padding:0}
.shelf a{text-decoration:none;display:block}
.shelf img{width:100%;height:auto;aspect-ratio:1;border-radius:3px;box-shadow:0 12px 24px -16px rgba(31,42,46,.5)}
.shelf b{display:block;font-weight:500;font-size:.94rem;margin-top:8px;line-height:1.25}
.shelf span{font-family:var(--mono);font-size:.7rem;color:var(--mute)}
.shelf .xmas span::after{content:" · Christmas";color:var(--cran)}
/* free */
.free{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.card{border:1px solid var(--glacier);border-radius:8px;padding:20px;background:rgba(255,255,255,.5)}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p,.card ul{margin:0;font-size:.95rem;color:var(--mute)}
.card ul{padding-left:18px}
.card.no{border-color:rgba(142,31,47,.45)}
.credit{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:8px;background:var(--rime)}
.credit code{font-family:var(--mono);font-size:.84rem;flex:1 1 280px}
/* guide + faq */
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px 40px}
.guide article h3{font-size:1.35rem;margin-bottom:8px}
.guide article p{margin:0 0 8px;color:#38464a}
.faq details{border-bottom:1px solid var(--glacier);padding:14px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cran)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:#38464a;max-width:46em}
/* footer */
.foot{border-top:1px solid var(--glacier);padding:48px 0 36px;font-size:.92rem;color:var(--mute)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot h4{font-family:var(--mono);font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px;color:var(--slate)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:3px 0}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}
/* player */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--bar) + env(safe-area-inset-bottom));padding:0 var(--pad) env(safe-area-inset-bottom);background:rgba(247,249,249,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--glacier);display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.4fr) auto;gap:16px;align-items:center}
.pb-now{display:flex;gap:12px;align-items:center;min-width:0}
.pb-now img{width:46px;height:46px;border-radius:3px;flex:none;background:var(--rime)}
.pb-now div{min-width:0}
.pb-now b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-now span{display:block;font-size:.8rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ctl{display:flex;gap:6px;align-items:center}
.ib{width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:transparent;display:grid;place-items:center;padding:0}
.ib:hover{border-color:var(--glacier)}
.ib svg{width:14px;height:14px;fill:var(--slate)}
.ib.pp{width:44px;height:44px;background:var(--cran)}
.ib.pp svg{fill:#fff;width:15px;height:15px}
.pb-seek{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:.7rem;color:var(--mute)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:18px;background:transparent;margin:0;min-width:60px}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(var(--cran),var(--cran)) 0/var(--p,0%) 100% no-repeat,var(--glacier)}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:var(--glacier)}
input[type=range]::-moz-range-progress{height:3px;background:var(--cran)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--cran);margin-top:-5px;border:2px solid #fff}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--cran);border:2px solid #fff}
.pb-x{display:flex;gap:8px;align-items:center}
.glass-t{font-family:var(--mono);font-size:.7rem;border:1px solid var(--glacier);border-radius:99px;padding:6px 10px;background:#fff;white-space:nowrap}
.glass-t[aria-pressed=true]{border-color:var(--wool);background:var(--candle)}
@media (max-width:860px){.pbar{grid-template-columns:minmax(0,1fr) auto;gap:10px}.pb-seek{display:none}.pb-x .dl{display:none}.pb-ctl .ib.pv{display:none}}
@media (max-width:420px){.glass-t{display:none}}
.pbar .prog{position:absolute;left:0;top:-1px;height:2px;background:var(--cran);width:0}
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 18px);transform:translate(-50%,20px);opacity:0;background:var(--slate);color:var(--frost);padding:9px 16px;border-radius:99px;font-size:.9rem;transition:.25s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* sub pages */
.crumbs{font-family:var(--mono);font-size:.74rem;color:var(--mute);margin:28px 0 18px}
.page-h{padding:10px 0 40px}
.page-h h1{font-size:clamp(2rem,4.6vw,3.4rem)}
audio.native{width:100%;height:34px;margin-top:4px}
/* 404 */
.lost{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:40px var(--pad)}
.lost .window{width:min(420px,86vw);aspect-ratio:3/4}
.lost .inside{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.lost h1{font-size:clamp(1.6rem,4vw,2.2rem)}

body:not(:has(#pbar)){padding-bottom:0}