:root{color-scheme:dark;--cream:#f4e5c7;--gold:#dbc185}*{box-sizing:border-box}body{margin:0;background:#181e1b;color:var(--cream);font-family:Inter,system-ui,sans-serif}main{min-height:100svh;height:100dvh;position:relative;isolation:isolate;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;font-size:14px;border:1px solid #e9d9ac55;background:#171f1d65;padding:11px 17px;border-radius:30px;cursor:pointer;min-height:44px}button:hover{background:#bd996e30;border-color:#e9d9ac}button:disabled{opacity:.45;cursor:wait}a{text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,input:focus-visible,#lyricText:focus-visible{outline:2px solid #f4d299;outline-offset:5px}[hidden]{display:none!important}.landscape,.shade,#lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.landscape{object-fit:cover;object-position:62% 55%;z-index:-3}.shade{z-index:-2;background:linear-gradient(180deg,#0d181d65,transparent 28%,transparent 70%,#0b1217b5),linear-gradient(90deg,#0d181d44,transparent 65%)}#lights{z-index:-1}header{display:flex;justify-content:space-between;align-items:center;padding:32px 4vw;gap:20px}.wordmark{font:500 26px 'Cormorant Garamond',Georgia,serif;letter-spacing:.15em;white-space:nowrap}.wordmark span{color:#d7b77a;margin:0 5px}nav{display:flex;align-items:center;gap:25px;font-size:14px}nav a{padding:12px 0}.title{position:absolute;top:27%;left:7%;text-shadow:0 2px 25px #10201b80}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:#ead2a4}h1{font:400 clamp(68px,9vw,140px)/.95 'Cormorant Garamond',Georgia,serif;margin:15px 0 25px;letter-spacing:-.03em}.motto{font:italic 22px 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em}.player{position:absolute;bottom:24px;left:4%;right:4%;display:flex;align-items:center;gap:22px;padding:18px 24px;background:#111a1bcc;backdrop-filter:blur(16px);border:1px solid #e0cfaa33;border-radius:5px;box-shadow:0 10px 50px #0003}.cover{width:58px;height:58px;object-fit:cover}.track-info{min-width:155px}.track-info strong{display:block;font:500 23px 'Cormorant Garamond',Georgia,serif}.track-info span{display:block;font-size:12px;color:#c4c3b5;margin-top:5px}.play{font-size:20px;width:52px;height:52px;flex-shrink:0;border-color:#d6bd85;border-radius:50%;padding:0}.timeline{flex:1;min-width:80px}.timeline input{width:100%;accent-color:#d9c49a;height:20px;cursor:pointer}.timeline div{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#c1c8bd}#status{text-align:center}.chrome{transition:opacity 1.8s ease}body.resting .chrome{opacity:.15}body.resting .chrome:hover,.chrome:focus-within{opacity:1!important}#lyrics{position:absolute;top:105px;bottom:145px;right:4%;width:min(380px,38vw);background:#f3e7cfef;color:#433a2d;box-shadow:0 12px 60px #0003;border-top:2px solid #d5b879;display:flex;flex-direction:column;padding:20px 26px}.paper-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #69563e33;padding-bottom:12px;font:italic 25px 'Cormorant Garamond',Georgia,serif}.paper-head button{color:#574b3a;background:transparent;border:none;font-size:27px;padding:0 8px}#lyricText{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:15px 10px 20px 0;white-space:pre-wrap;font:400 18px/1.7 'Cormorant Garamond',Georgia,serif}.section-marker{display:block;margin:22px 0 6px;font:500 12px Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#826a46}.section-marker:first-child{margin-top:0}#videoPanel{position:absolute;left:4%;bottom:155px;width:min(400px,70vw);padding:12px;background:#111a1b;border:1px solid #ccb27c55;z-index:4}#youtube{width:100%;aspect-ratio:16/9;min-height:200px}#videoPanel iframe{display:block;width:100%;aspect-ratio:16/9;min-height:200px}#closeVideo{display:block;margin:0 0 8px auto}.fallback{position:absolute;bottom:140px;left:4%;background:#111a1be8;padding:10px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:800px){header{padding:18px 5%;align-items:flex-start}.wordmark{font-size:22px}nav{gap:10px;font-size:12px;flex-wrap:wrap;justify-content:flex-end}nav button{font-size:12px;padding:9px 12px}.title{top:22%;left:7%}h1{font-size:80px}.motto{max-width:230px;font-size:21px}.player{gap:12px;padding:13px 16px;bottom:16px;left:4%;right:4%;flex-wrap:wrap}.cover{width:44px;height:44px}.track-info{flex:1;min-width:120px}.track-info span{font-size:12px}.timeline{order:4;flex-basis:100%}.player>button:not(.play){padding:8px 12px;font-size:12px}.play{width:46px;height:46px}#lyrics{top:90px;bottom:175px;width:92%;padding:15px 22px;z-index:3}.fallback{bottom:180px}.eyebrow{font-size:12px}#status{font-size:12px}#videoPanel{bottom:175px;width:92%}}
@media(max-width:450px){.player{gap:10px}.track-info span{max-width:125px;line-height:1.4}.title{top:20%}h1{font-size:68px}.cover{width:36px;height:36px}.track-info{min-width:100px}.player>button:not(.play){padding:8px}.wordmark{font-size:19px}nav a{max-width:105px;line-height:1.4;padding:4px 0}}
@media(max-height:500px){header{padding:10px 4%}.title{top:23%;left:5%}h1{font-size:52px;margin:8px 0}.motto{font-size:17px}.player{bottom:8px;padding:8px 14px;flex-wrap:nowrap;gap:12px}.cover{width:36px;height:36px}.timeline{order:0;flex-basis:auto}.track-info span{display:none}#lyrics{top:65px;bottom:88px;width:45%}#videoPanel{bottom:90px}.fallback{bottom:90px}}
@media(prefers-reduced-motion:reduce){.chrome{transition:none}body.resting .chrome{opacity:1}}

.night{opacity:0;will-change:opacity}

/* A kept family recipe: legible ink on a worn, opaque paper surface. */
#lyrics{
 background:#ebd7af url('assets/heirloom-paper.png') center/100% 100% no-repeat;
 color:#514332;border:0;border-radius:5px 7px 4px 6px;
 padding:22px 28px;
 box-shadow:0 18px 55px #0005,0 2px 5px #0004;
 color-scheme:light;
}
.paper-head{
 font:500 2.15rem/1.2 'Caveat','Segoe Print','Bradley Hand',cursive;
 border-bottom:1px solid #79634444;padding-bottom:8px;flex-shrink:0;
 color:#554733;
}
.paper-head button{color:#584933;font-family:Inter,system-ui,sans-serif;text-shadow:none}
#lyricText{
 min-height:0;
 font:400 1.55rem/1.5 'Caveat','Segoe Print','Bradley Hand',cursive;
 letter-spacing:.008em;color:#514332;
 padding:16px 6px 26px 0;
 scrollbar-color:#a98c59 transparent;
 overflow-wrap:break-word;
}
#lyricText .section-marker{
 font:500 1.35rem/1.4 'Caveat','Segoe Print','Bradley Hand',cursive;
 letter-spacing:.015em;text-transform:none;color:#7c6241;
 margin:22px 0 7px;
}
#lyricText .section-marker:first-child{margin-top:0}
#lyrics :focus-visible{outline-color:#795c33}
@media(max-width:800px){#lyrics{padding:18px 25px}}
@media(max-height:500px){#lyrics{padding:12px 22px}.paper-head{font-size:1.7rem}#lyricText{padding-top:10px}}

body.absence{background:#171513}
.absence .title{top:26%;left:5%;max-width:29%}
.absence h1{font-size:clamp(48px,6.4vw,100px);line-height:1.04}
.absence .eyebrow{line-height:1.8}.absence .motto{max-width:240px}
.song-switch{font:inherit;color:var(--cream);background:#171f1dcc;border:1px solid #e9d9ac55;border-radius:20px;padding:10px;min-height:44px;max-width:155px}
.song-switch:focus-visible{outline:2px solid #f4d299;outline-offset:4px}
@media(max-width:800px){header{flex-wrap:wrap}nav{gap:8px}.song-switch{max-width:125px;font-size:12px;padding:8px}.absence .title{left:5%;max-width:50%}.absence h1{font-size:48px}}
@media(max-aspect-ratio:1/1){
 .absence .landscape{object-fit:contain}
 .absence .title{top:16%;max-width:90%;left:6%}
 .absence h1{font-size:clamp(44px,12vw,65px);margin:8px 0 12px}
 .absence .motto{max-width:none;font-size:19px}
 .absence .shade{background:linear-gradient(180deg,#17151399,transparent 35%,transparent 75%,#17151388)}
}
@media(max-height:500px){.absence .title{top:24%}.absence h1{font-size:40px}.absence .motto{font-size:16px}.absence .eyebrow{font-size:12px}}

/* Preserve both silhouettes and the space between them at every aspect ratio. */
.stars{background:#050c17}.stars .landscape{object-fit:contain;object-position:50% 50%}
.stars .title{top:16%;left:5%;max-width:48%}.stars h1{font-size:clamp(40px,5vw,78px)}.stars .motto{max-width:390px}
@media(max-aspect-ratio:1/1){.stars .title{top:17%;max-width:90%}.stars h1{font-size:clamp(36px,9vw,60px);margin:8px 0}.stars .motto{font-size:18px;max-width:330px}}
@media(max-height:500px){.stars .title{top:19%}.stars h1{font-size:32px}.stars .motto{font-size:16px}}
.thank .landscape{object-fit:contain;object-position:50% 50%}
.thank .title{top:17%;left:6%;max-width:32%}
.thank .motto{max-width:330px}
@media(max-aspect-ratio:1/1){.thank .title{top:17%;left:6%;max-width:88%}.thank .motto{max-width:340px}}

.now .landscape{object-fit:contain;object-position:50% 50%}.now .title{top:17%;left:7%;max-width:30%}.now .motto{max-width:280px}
@media(max-aspect-ratio:1/1){.now .title{top:17%;left:6%;max-width:88%}.now .motto{max-width:330px}}