:root{color-scheme:light;--ink:#25252a;--night:#171923;--cream:#f4efe7;--paper:#fbf8f2;--gold:#dfc196;--muted:#77716e;--line:#d8d0c4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.65}
button,a{font:inherit}
a{color:inherit}
button{cursor:pointer}
::selection{background:#e8d4b7;color:var(--night)}
.skip-link{position:absolute;top:-4rem;left:1rem;z-index:20;padding:.6rem 1rem;background:#fff;color:#111}
.skip-link:focus{top:1rem}
.opening{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(21rem,.82fr);background:var(--night);color:var(--cream);overflow:hidden}
.opening-top{position:absolute;top:1.6rem;left:3.4%;right:3.4%;z-index:5;display:flex;justify-content:space-between;gap:1rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.21em;color:#ddd0bd}
.scene{position:relative;min-height:46rem;overflow:hidden;background:#1b2030}
.room{position:absolute;inset:0;background:radial-gradient(ellipse at 44% 70%,#443e4a 0%,#272b3b 40%,#171d2b 80%)}
.room:before{content:"";position:absolute;inset:67% 0 0;background:linear-gradient(140deg,#2e2935,#211f2b)}
.room-glow{position:absolute;left:19%;top:30%;width:55%;height:35%;border-radius:50%;background:#c6adc1;filter:blur(7rem);opacity:.13}
.window{position:absolute;width:24%;height:28%;top:16%;right:12%;border:.45rem solid #494555;box-shadow:0 0 0 .13rem #9a8290;background:linear-gradient(#1b2940,#34364e);overflow:hidden}
.window:before,.window:after{content:"";position:absolute;background:#615867;z-index:2}.window:before{width:.34rem;height:100%;left:49%}.window:after{height:.34rem;width:100%;top:48%}
.window i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f5dfc4;box-shadow:2.2rem 1.4rem #f5dfc4,4.3rem .6rem #f5dfc4,1rem 3.8rem #f5dfc4;top:15%;left:12%}
.moon{position:absolute;width:1.6rem;height:1.6rem;border-radius:50%;background:#efdfc9;box-shadow:0 0 2rem #efdfc9;right:16%;top:20%}
.television{position:absolute;left:13%;top:30%;width:35%;aspect-ratio:1.75;border:.45rem solid #101018;border-radius:.25rem;background:radial-gradient(ellipse at center,#394a60,#182331 75%);box-shadow:0 0 0 .15rem #625463,0 1rem 4rem #b3afc333;display:grid;place-items:center;transform:perspective(40rem) rotateY(8deg)}
.television:after{content:"";position:absolute;bottom:-.9rem;left:43%;width:14%;height:.5rem;background:#13121c;border-radius:0 0 .3rem .3rem}
.television span{font-family:Georgia,serif;font-size:clamp(1.2rem,3vw,2.5rem);font-style:italic;color:#f7ebdb;text-shadow:0 0 1rem #f6e4d1}
.television span.beat{transform:scale(1.12)}
.lamp{position:absolute;right:6%;bottom:28%;height:31%;width:13%}.shade{width:100%;height:20%;background:#b18e7d;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);box-shadow:0 0 3rem #c29a71}.stem{height:70%;width:.25rem;margin:auto;background:#715b64}.base{height:.45rem;width:48%;border-radius:50%;background:#715b64;margin:auto}
.sofa{position:absolute;left:8%;right:7%;bottom:5%;height:32%;z-index:3}.sofa-back{position:absolute;inset:0 2% 19%;border-radius:3rem 3rem .8rem .8rem;background:linear-gradient(130deg,#786873,#524b59 70%);box-shadow:inset 0 .7rem 1rem #aaa0a122,0 1.2rem 1.5rem #0d101a80}.cushion{position:absolute;top:44%;width:48%;height:36%;border-radius:1.1rem;background:#6b5e69;box-shadow:inset .3rem .3rem .7rem #ffffff18}.cushion.left{left:2%}.cushion.right{right:2%}.sofa-front{position:absolute;bottom:0;left:0;right:0;height:28%;border-radius:1rem 1rem .8rem .8rem;background:linear-gradient(#605461,#413b49)}
.person{position:absolute;z-index:4;bottom:18%;height:25%;width:19%;transform-origin:bottom center}.person .head{position:absolute;width:34%;height:27%;border-radius:48%;background:#b2897b;top:8%;left:33%}.person .body{position:absolute;bottom:0;width:100%;height:70%;border-radius:45% 45% 8% 8%}.person .hair{position:absolute;z-index:1;top:0;left:27%;width:47%;height:37%;background:#221d29;border-radius:50% 50% 35% 35%}.lulu{left:24%;transition:transform 1.25s ease}.lulu .body{background:#aaa2aa}.lulu .hair{height:44%;background:#28212b}.partner{left:54%;opacity:0;transition:opacity 1.4s ease}.partner .body{background:#353b49}.partner .hair{height:22%;background:#211e24}.scene.show-partner .partner{opacity:1}.scene.lean .lulu{transform:rotate(11deg) translateX(15%)}
.floor-light{position:absolute;bottom:0;left:12%;height:12%;width:70%;background:#a196a4;filter:blur(4rem);opacity:.25}
.scene-caption{position:absolute;bottom:2.6rem;left:3rem;z-index:5;font-family:Georgia,serif;font-style:italic;color:#e7d5c4;font-size:1rem}
.opening-copy{align-self:center;padding:9rem clamp(2rem,7vw,8rem) 7rem clamp(2rem,5vw,6rem)}
.eyebrow,.section-label,.ending>span{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600}
.eyebrow{color:#b7956a}
h1,h2,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.09;letter-spacing:-.045em}h1{font-size:clamp(3.9rem,6vw,7rem);margin:2rem 0}h2{font-size:clamp(2.8rem,5vw,5.4rem)}h1 em,h2 em{font-weight:400;color:var(--gold)}
.opening-copy>p:not(.eyebrow){max-width:27rem;color:#c9c5c3;font-size:1.1rem;line-height:1.8}
.text-link{display:inline-flex;align-items:center;gap:1.8rem;margin-top:2.2rem;padding-bottom:.45rem;border-bottom:1px solid var(--gold);text-decoration:none;color:var(--cream)}.text-link span{font-size:1.3rem;color:var(--gold)}
.replay{position:absolute;right:3.4%;bottom:2.6rem;border:0;background:none;color:#cfc3b5;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}.replay span{font-size:1rem;margin-left:.4rem}.replay:hover,.text-link:hover{color:#fff}
.section{padding:clamp(5rem,10vw,9rem) clamp(1.5rem,7vw,8rem)}
.section-label{display:flex;align-items:center;gap:2rem;color:#8d7965;margin-bottom:clamp(3rem,6vw,6rem);white-space:nowrap}.rule{display:block;height:1px;width:100%;background:var(--line)}
.letter{background:var(--paper)}.letter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.letter h2{max-width:9ch}.letter h2 em,.soundtrack h2 em,.memories h2 em{color:#ad805f}.letter-text{max-width:36rem;font-size:1.15rem}.letter-text p{margin-bottom:1.8rem}.letter-text .aside{font-family:Georgia,serif;font-size:1.5rem;font-style:italic;color:#aa785d;margin-top:2.5rem}
.evenings{background:#ded5c9}.evenings-inner{max-width:55rem;margin:auto;text-align:center}.evenings h2{max-width:13ch;margin:1.5rem auto 4rem}.evening-lines{font-family:Georgia,serif;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.45}.evening-lines p{margin:.8rem 0}.evenings-close{max-width:30rem;margin:4rem auto 0;padding-top:2rem;border-top:1px solid #a89e91;font-size:1.1rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8vw}.two-col h2{max-width:11ch}.soundtrack{background:#ece6db}.placeholder-card{min-height:22rem;border:1px solid #c7b7a6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;color:#6b5a4e}.placeholder-card p{font-family:Georgia,serif;font-size:1.7rem;margin:1rem 0 0}.placeholder-card small{font-size:.85rem}.disc{width:7rem;height:7rem;border:1.4rem solid #c2ad97;border-radius:50%;box-shadow:0 0 0 1px #8c7869,inset 0 0 0 1px #8c7869;background:#e6dbcd}
.memories{background:var(--paper)}.photo-frame{aspect-ratio:4/3;border:1px solid #cbbdaa;padding:1rem;transform:rotate(2deg);box-shadow:1rem 1.5rem 0 #e4d9cb;display:grid;place-items:center;background:#e8e0d4;color:#796e65;font-family:Georgia,serif;font-style:italic;font-size:1.4rem;text-align:center}
.message{background:#272832;color:#f4efe7}.message .section-label{color:#c0aa90}.message .rule{background:#5a5352}.message-inner{max-width:57rem;margin:auto}.message h2{max-width:15ch}.video-frame{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#535062,#22242d 70%);border:1px solid #625d61;color:#d5c8be;font-family:Georgia,serif;font-style:italic;font-size:1.4rem;text-align:center;padding:2rem}
.treat{background:#e7d9c6}.treat-inner{max-width:45rem;margin:auto;text-align:center}.treat h2{max-width:14ch;margin:1rem auto 2rem}.treat-inner>p:not(.eyebrow){font-size:1.15rem}.treat-note{font-size:.9rem!important;color:#766958;border-top:1px solid #bba88e;display:inline-block;padding-top:1rem;margin-top:1.5rem}
.ending{text-align:center;padding:8rem 1.5rem 6rem;background:#171923;color:#f4efe7}.ending h2{margin:2rem auto;max-width:14ch}.ending p:not(.eyebrow){max-width:29rem;margin:0 auto 3rem;color:#c9c5c3}.ending>span{color:#c6a782}
.section{position:relative}
@media(max-width:850px){.opening{display:block}.scene{min-height:60svh}.opening-copy{padding:4rem 1.5rem 7rem}.opening-top{left:1.5rem;right:1.5rem}.replay{right:1.5rem;bottom:2rem}.scene-caption{left:1.5rem;bottom:1rem}.letter-grid,.two-col{grid-template-columns:1fr;gap:2rem}.letter h2,.two-col h2{max-width:16ch}.section-label{margin-bottom:3.5rem}}
@media(max-width:520px){.scene{min-height:56svh}.window{top:18%;right:7%}.television{left:10%;top:33%;width:40%}.sofa{left:2%;right:2%;bottom:8%;height:29%}.person{bottom:19%;height:23%}.lulu{left:23%}.partner{left:56%}.opening-copy h1{font-size:clamp(3.5rem,15vw,5rem)}.section{padding:5rem 1.5rem}.section-label{gap:1rem}.letter-text{font-size:1.05rem}.evenings h2{margin-bottom:3rem}.ending{padding:6rem 1.5rem 5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.section:not(.in-view){opacity:1;transform:none}}