/* The film sets the palette: lamplight, burgundy, warm paper. */
:root{--ink:#3c302a;--night:#241914;--cream:#f8eddf;--paper:#faf3e9;--gold:#dfb583;--muted:#786455;--line:#dfcdbb}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink)}
::selection{background:#ead0ae;color:#39271e}
:focus-visible{outline-color:#dfa875}
.opening{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:6rem 2rem 3rem;background:radial-gradient(ellipse at 50% 55%,#63382755,transparent 68%),#241914;color:var(--cream)}
.opening-top{top:1.8rem;left:5%;right:5%;color:#d3b698;font-size:.65rem;letter-spacing:.2em}
.film-stage{width:min(100%,960px,max(320px,calc((100svh - 18rem)*16/9)));text-align:center}
.film-stage>.eyebrow{margin:0 0 1rem;color:#d5af8d;font-weight:400;font-size:.67rem;letter-spacing:.2em}
.film-heading{font-size:clamp(2.1rem,3.4vw,3.2rem);line-height:1.13;margin:0 0 2rem;letter-spacing:-.03em}
.film-heading br{display:none}
.film-heading em{color:#e7bf90}
.film-frame{position:relative;overflow:hidden;border:1px solid #d6a47338;border-radius:3px;background:#100c09;box-shadow:0 20px 90px #0c060b66,0 0 80px #bb683818}
.film-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:auto auto;align-items:center;gap:.5rem .8rem;min-width:174px;padding:1rem 1.4rem;border:1px solid #efd8b973;border-radius:3px;background:#291b16e8;box-shadow:0 8px 30px #170a0955;color:#fff3df;transition:background .2s}
.film-play:hover{background:#513126}
.film-play>span{font-size:.85rem;color:#e9bf8d}
.film-play small{grid-column:1/-1;font-size:.65rem;letter-spacing:.07em;color:#d9c3af}
.film-continue{border:0;background:none;color:#dec6ad;font-size:.82rem;padding:1rem .8rem;min-height:44px;letter-spacing:.025em}
.film-continue span{margin-left:.7rem;color:#dca76d}
.film-status:empty{display:none}
.film-status{margin:1rem 0 0;font-size:.8rem;color:#efd5bb}
.opening-copy{width:min(100%,900px);padding:4rem 1.5rem;text-align:center;animation:birthday-in 1.2s ease both}
.opening.film-ready .opening-copy{display:none}
.opening.is-complete .film-stage{display:none}
.opening.is-complete .opening-copy{display:block}
.opening-copy h1{font-size:clamp(4rem,8vw,7rem);line-height:1.06;margin:1.5rem 0 2.2rem}
.opening-copy h1:focus{outline:none}
.opening-copy h1 em:after{border-color:#d5a47777}
.opening-copy>p:not(.eyebrow){max-width:31rem;margin:0 auto;color:#e0c7b4;font-size:1.1rem;line-height:1.9}
.opening-copy .eyebrow{font-weight:400;color:#dcb18a}
.opening-copy .text-link{margin-top:2rem;color:#f5e3cf;font-size:.9rem}
.replay{position:static;margin-top:.5rem;padding:.7rem;color:#bfa28b;font-size:.65rem;letter-spacing:.1em;min-height:44px}
.section{padding:6rem clamp(1.5rem,7vw,8rem)}
.section-label{font-weight:400;font-size:.7rem;letter-spacing:.1em;margin-bottom:3.5rem;color:#8a674e;text-transform:none}
.section-label .rule{background:linear-gradient(90deg,#c5a58970,transparent)}
.letter{background:radial-gradient(ellipse at 8% 20%,#e9c9a52c,transparent 65%),var(--paper)}
.letter h2 em,.soundtrack h2 em,.memories h2 em{color:#9e624e}
.letter-text{color:#574239}
.letter-text .aside{color:#9b5d47}
.secret-button{color:#855940;border-color:#b48b6a}
.secret-note{background:#f0e1cf;border-color:#b9865d}
.evenings{background:radial-gradient(ellipse at 50% 95%,#72453744,transparent 75%),#30231e;color:#f5e6d7;padding-top:6rem;padding-bottom:6rem}
.evenings:before{background-image:radial-gradient(circle at 9% 19%,#e6bc8a 0 1px,transparent 2px),radial-gradient(circle at 89% 35%,#e6bc8a 0 1px,transparent 2px),radial-gradient(circle at 79% 81%,#e6bc8a 0 1px,transparent 2px);animation:none;opacity:.5}
.evenings .eyebrow,.evenings .section-label{color:#cfab88}
.evenings h2{font-size:clamp(2.5rem,4.5vw,4.4rem)}
.evening-lines{color:#e5d3c3}
.evening-lines p{margin:1.2rem 0}
.evening-lines p:last-child{color:#e5b68c}
.evenings-close{color:#e4b895;border-color:#bd8b5d44;font-size:1.35rem}
.distance-line{margin:2rem auto 1rem;color:#dbb38b}
.travelling-light{animation-duration:10s}
.soundtrack{background:#f0e4d5}
.soundtrack-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.soundtrack-intro h2{max-width:11ch}
.soundtrack-intro>p:not(.eyebrow){max-width:27rem;color:#715849}
.soundtrack-collection{border:1px solid #c9a78a70;background:#f8efe4;padding:2.5rem;text-align:center;border-radius:3px}
.record-sleeve{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2rem}
.disc{width:8rem;height:8rem;animation-duration:35s;background:repeating-radial-gradient(circle,#362a27 0 2px,#4c3b35 3px 4px)}
.disc:after{background:#b67e62;color:#fff2df}
.sleeve-caption{font-family:Georgia,serif;font-style:italic;color:#8a5d45}
.song-empty{font-size:.9rem;color:#775f50;max-width:24rem;margin:0 auto;line-height:1.8}
.song-card{display:flex;gap:1rem;align-items:center;text-align:left;border-top:1px solid #d9c3ac;padding:1.25rem 0}
.song-number{font-size:.65rem;color:#99745a}
.song-details{flex:1;min-width:0}
.song-details h3{font-family:Georgia,serif;font-size:1.1rem;font-weight:400;margin:0}
.song-details p{font-size:.8rem;margin:.25rem 0 0;color:#795f4f}
.featured-song .song-details:before{content:"our number one";display:block;margin-bottom:.45rem;color:#9e624e;font-family:Georgia,serif;font-style:italic;font-size:.8rem}
.featured-song .song-number{color:#9e624e}
.featured-song .song-details h3{font-size:1.35rem;color:#794536}
.spotify-link{font-size:.75rem;min-height:44px;display:flex;align-items:center}
.soundtrack-corner{display:flex;justify-content:flex-end;padding-top:1.5rem}
.soundtrack-cover{display:block;width:126px;padding:7px 7px 10px;background:#fff9ef;box-shadow:0 6px 16px #69432e26;transform:rotate(5deg);text-decoration:none;transition:transform .25s,box-shadow .25s}
.soundtrack-cover img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.soundtrack-cover span{display:block;margin-top:.6rem;font-family:Georgia,serif;font-style:italic;font-size:.73rem;color:#8a5d45}
.soundtrack-cover:hover,.soundtrack-cover:focus-visible{transform:rotate(1deg) translateY(-3px);box-shadow:0 10px 20px #69432e33}
.memories{background:var(--paper)}
.photo-frame{background:linear-gradient(145deg,#e9d4be,#d5b19c);box-shadow:0 12px 40px #6d423018,10px 12px 0 #eadbc9;border-color:#fff9ef;color:#725242}
.message{background:radial-gradient(ellipse at 70% 20%,#67413866,transparent 75%),#35231f}
.message .eyebrow,.message .section-label{color:#d2ad8b}
.video-frame{border-radius:3px;min-height:0;aspect-ratio:16/9;border-color:#bd917855;background:radial-gradient(ellipse at center,#8e5b4033,#291b17);color:#d8bba4}
.treat{background:radial-gradient(ellipse at 50% 10%,#f9eedd,#ecd8c0)}
.treat-note{color:#785c48}
.ending{background:radial-gradient(ellipse at 50% 30%,#65342c44,transparent 70%),#2b1c18;padding:6rem 1.5rem 3rem}
.ending:before{display:none}
.ending p:not(.eyebrow){color:#dec5b2}
.end-heart{animation:none;color:#d7a179;font-size:3rem;text-shadow:0 0 30px #c1815333;margin-bottom:1.8rem}
.ending>span{font-weight:400;color:#d2aa86}
.ending-note{display:flex;flex-direction:column;align-items:center;min-height:64px;margin-top:2rem}
.little-angel{position:fixed;left:0;top:0;width:58px;height:58px;filter:drop-shadow(0 0 8px #efbb6c88);background:radial-gradient(circle,#edc58c22,transparent 70%);will-change:transform;transition:opacity .4s}
.little-angel .wing{animation:wingbeat 2.6s ease-in-out infinite alternate}
.angel-note{position:fixed;right:5rem;top:var(--note-top,25%);opacity:1;transform:none;max-width:18rem;background:#fff3e2;border:1px solid #cfa57566;border-radius:1rem 1rem 0 1rem;box-shadow:0 10px 35px #1c182122;pointer-events:none;padding:1rem 1.2rem;color:#614735!important;margin:0!important;font-size:1rem}
.motion-toggle{position:fixed;bottom:.8rem;right:.8rem;background:#f8f1e8ed;border:1px solid #be987044;box-shadow:0 3px 15px #18152112;color:#685441;margin:0;font-size:.7rem;min-height:44px}
.film-playing .little-angel,.film-playing .angel-note,.film-playing #light-trail{opacity:0;pointer-events:none}
@keyframes birthday-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:850px){.opening{padding:6rem 1.25rem 3rem}.film-stage{width:100%}.soundtrack-layout{grid-template-columns:1fr;gap:2rem}.soundtrack-intro h2{max-width:16ch}.film-heading{font-size:2.6rem}.letter-grid,.two-col{gap:2.5rem}}
@media(max-width:520px){.opening{padding:6rem 1rem 3rem;min-height:88svh}.opening-top{left:1.25rem;right:1.25rem;top:1.5rem;font-size:.58rem;letter-spacing:.14em}.film-heading{font-size:2.5rem;margin-bottom:2rem}.film-heading br{display:block}.film-stage>.eyebrow{font-size:.61rem;letter-spacing:.16em}.film-frame{margin:0 -.25rem}.film-play{min-width:154px;padding:.8rem 1rem;font-size:.85rem}.film-play small{font-size:.6rem}.film-continue{margin-top:1rem}.opening-copy{padding:3rem .5rem}.opening-copy h1{font-size:clamp(3.5rem,16vw,5rem)}.opening-copy>p:not(.eyebrow){font-size:1rem}.opening-copy .eyebrow{font-size:.62rem}.section{padding:4.5rem 1.5rem}.section-label{margin-bottom:2.5rem}.letter h2,.soundtrack h2,.memories h2,.message h2,.treat h2{font-size:2.9rem}.evenings h2{font-size:2.8rem}.evening-lines{font-size:1.4rem}.evenings-close{font-size:1.15rem}.soundtrack-collection{padding:2rem 1.25rem}.song-card{flex-wrap:wrap}.spotify-link{margin-left:auto}.video-frame{font-size:1rem;padding:1rem}.ending{padding:5rem 1.5rem 2.5rem}.ending h2{font-size:3.6rem}.ending-note{min-height:44px}.angel-note{max-width:100%;font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.opening-copy{animation:none}.travelling-light{display:none}}
@media(max-width:600px){.little-angel{width:46px;height:46px}.angel-note{right:3.7rem;max-width:calc(100vw - 5rem)}}