/* A shared paper-and-light finish over the existing campus layout. */
:root{--paper:#f8f3e9;--ink:#514a3c;--muted:#817868;--orange:#a76851;--green:#737f64;--gold:#e6c591;--rose:#d5a49c}
html{background:#f8f3e9;scroll-behavior:smooth}
body{background:#f8f3e9;transition:background-color 1.8s ease,color 1.4s ease}
.ambient-light{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:1;transition:opacity 1.8s;background:radial-gradient(ellipse at 92% 8%,#e7c6b82a,transparent 55%),radial-gradient(ellipse at 0 72%,#b7c3a522,transparent 55%)}
.ambient-light i{position:absolute;border-radius:50%;background:radial-gradient(circle,#f3d49a38,transparent 67%);width:300px;height:300px;right:-90px;top:2%;animation:lightBreathe 14s ease-in-out infinite}
.ambient-light i:nth-child(2){width:180px;height:180px;top:57%;left:-90px;animation-delay:-5s;background:radial-gradient(circle,#d8b5af25,transparent 65%)}
.ambient-light i:nth-child(3){width:110px;height:110px;top:22%;left:15%;animation-delay:-9s;background:radial-gradient(circle,#fffdf78c,transparent 68%)}
.paper-grain{opacity:.09}
.site-header{padding-bottom:18px}
.brand{font-size:18px;letter-spacing:.04em}.brand-note{letter-spacing:1.5px;color:#8b8273}.drawn-flower{font-size:25px;color:#aa8e69}
.music-toggle{background:#fffaf15c;border-color:#b4a18155;border-radius:3px 12px 3px 12px;min-height:44px;color:#736551;box-shadow:0 2px 7px #92704405;transition:background .3s,transform .2s}
.music-toggle:active{transform:scale(.97)}
.eyebrow{letter-spacing:1.8px;font-size:10px;color:#88735a}.scene-title{line-height:1.65;font-weight:normal}
.primary-button{background:linear-gradient(115deg,#7b876e,#69765d);border:1px solid #64725699;border-radius:3px 9px 3px 9px;box-shadow:0 4px 8px #53614212,inset 0 1px 0 #ffffff40;padding:0 22px;min-height:54px;letter-spacing:.03em;transition:transform .2s,box-shadow .2s}
.primary-button:active{transform:translateY(2px) scale(.985);box-shadow:0 1px 3px #53614220}
.text-button{color:#76634b}.text-button:focus-visible,.primary-button:focus-visible{outline-color:#a98855}
.intro-copy{position:relative}.scene-intro{gap:30px;padding-top:22px}
.display-title{font-size:43px;line-height:1.38;letter-spacing:.02em;margin:23px 0 23px}
.display-title em:after{height:4px;border-color:#c3a17a70;bottom:-5px}
.pencil-heart{font-size:29px;color:#bd8b80;margin-left:8px}.intro-description{font-size:17px;line-height:1.95;color:#756b5d;max-width:300px}
.opening-cake{position:absolute;right:-5px;top:46px;width:105px;pointer-events:none;transform:rotate(5deg);opacity:.95}
.opening-cake svg{display:block;width:100%;filter:drop-shadow(0 10px 12px #a3794920)}
.opening-flames{transform-origin:90px 47px;animation:flameBreathe 3s ease-in-out infinite}
.campus-postcard{padding:10px 10px 14px;background:linear-gradient(120deg,#fffdf6,#f6efdf);transform:rotate(1.2deg);box-shadow:0 16px 35px -21px #6b51398c,0 1px 2px #ad927c26;border:1px solid #d8c8ad66}
.campus-postcard:after{content:'';position:absolute;inset:7px;border:1px solid #ffffff50;pointer-events:none}
.photo-window{aspect-ratio:1.6}.photo-window:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#fff8de38,transparent 60%,#694e3422);pointer-events:none}
.campus-postcard figcaption{font-size:15px;padding-top:16px;color:#796c55}.postcard-note{background:#ece0bbeb;color:#84734f;font-size:11px;right:-3px;top:17px}
.tape{opacity:.7}.tape-top{background:#c8c5a388}
.intro-bottom{font-size:13px;color:#8a7c65}.ticket{background:#ece5d45c;border-color:#bcae9190;padding:9px 12px}
.birthday-note{isolation:isolate;transform:rotate(-1deg);margin-top:30px;padding:32px 19px 29px;background:radial-gradient(ellipse at 75% 25%,#fffaf0,transparent 70%),linear-gradient(130deg,#fffdf4,#f2e4cf);border-color:#d5c0a174;box-shadow:0 20px 40px -28px #88663d99,3px 5px 0 #e8ddc757}
.birthday-note:before{content:'';position:absolute;inset:9px;border:1px solid #cbb68e4d;pointer-events:none;z-index:-1}
.birthday-note h2{font-size:33px;line-height:1.65}.birthday-note h2 em{font-size:43px;color:#a96f4f}.birthday-note>p{color:#897253}
.birthday-note .note-corner{top:23px;right:24px;font-size:23px;color:#c49386}
.cake{margin-top:24px;margin-bottom:28px;filter:drop-shadow(0 11px 9px #a5754320)}
.cake-cream{background:linear-gradient(#fff4dc,#edd1a6);border-color:#d5b88b}.cake-body{border-color:#ccb295;background:repeating-linear-gradient(0deg,#dec09e 0 25px,#fff3dd 25px 34px);color:#b77c6b}.cake-plate{background:#adb79e}
.candles i:before{background:radial-gradient(ellipse at 50% 70%,#fff3bd 10%,#e7b467 55%,#d7994b);box-shadow:0 0 15px #e6b36566}
.wish-stickers{gap:12px;margin:28px 0 21px}.wish-stickers span{background:#eee3cd;color:#8a7652;box-shadow:1px 3px 5px #ad947d0b;font-size:13px;padding:9px 10px}.wish-stickers span:nth-child(2){background:#e0e5d4;color:#6a775d}.wish-stickers span:nth-child(3){background:#f0dfd8;color:#9b7568}
.envelope-area{padding-top:50px;padding-bottom:45px}.envelope{filter:drop-shadow(0 18px 17px #7d5d3526)}
.envelope-back{background:#d2bb98;border-color:#bda27c}.envelope-front{background:linear-gradient(145deg,#e4d1b2,#cdb18a);border-color:#c0a47e}.envelope-flap{background:linear-gradient(160deg,#eadabd,#d8bf98)}
.envelope-paper{background:linear-gradient(#fffaf0,#f5ead7);color:#8a7152}.envelope-seal{background:radial-gradient(circle at 35% 25%,#c18f78,#a46d59);border:2px solid #d9b19870;box-shadow:1px 3px 5px #6f443a2b,inset 0 0 0 3px #b88069}
.letter-card{padding:31px 26px 34px;border-color:#dac9aa99;background:linear-gradient(100deg,#e0d2ba22,transparent 9%,transparent 94%,#decaab22),repeating-linear-gradient(transparent 0 38px,#c9bca523 38px 39px) #fffaf0;box-shadow:0 23px 38px -28px #745b3699,3px 5px 0 #ebdfc94a;transform:rotate(-.35deg)}
.letter-card:before{content:'';position:absolute;left:14px;right:14px;top:10px;height:1px;background:#d4bb9170}
.letter-card p{font-size:18px;line-height:2.15;color:#655b4a;margin-bottom:20px;overflow-wrap:break-word}.letter-card p:first-child{font-size:23px;color:#a77755}.letter-top{margin-bottom:25px;padding-bottom:13px;border-bottom:1px solid #d4c2a04d;font-size:18px}.letter-signature{font-size:15px;line-height:1.8;color:#8b775b}
.wish-paper{background:radial-gradient(ellipse at 30% 20%,#f8ecd0,transparent 70%),linear-gradient(130deg,#ebdbb3,#e8d4a3);box-shadow:0 16px 28px -16px #82643b63,2px 3px 3px #a2835920;transform:rotate(-3deg)}
.wish-paper:after{content:'';position:absolute;inset:10px;border:1px solid #c6ad7b42;pointer-events:none}.wish-pin{background:radial-gradient(circle at 30% 25%,#dbb5a2,#af7f69)}
.wish-handwriting{color:#8b714a}.star-core{color:#b88973;font-size:66px}.wish-star.is-lit .wish-paper{background:radial-gradient(ellipse at 50% 45%,#fff2d1,#eed8aa);box-shadow:0 18px 40px -18px #b4904e7a;transform:rotate(1deg)}.wish-star.is-lit .star-core{color:#c49180}
.chapter-nav{gap:0}.chapter-nav button{position:relative}.chapter-nav button:before{content:'';position:absolute;left:30px;top:50%;width:28px;height:1px;background:#b9a78333}.chapter-nav button:last-child:before{display:none}.chapter-nav button span{transition:width .5s,background .5s;z-index:1;background:#baac95}.chapter-nav button[aria-current] span{width:15px;height:5px;background:#ac8760}.chapter-nav button:disabled span{background:#d8d0c0}.journey-footer{border-top:1px solid #bca9891c;margin-top:10px}
/* Warm paper darkens through dusk; the cover stays opaque at the scene swap. */
#transition{background:#f3e9d8}#transition.is-running{pointer-events:auto}
#transition.is-night{background:linear-gradient(155deg,#171c2b,#090f1c 65%,#201a23);animation:duskCover 2.6s ease both}
#transition.is-dawn{background:#111827;animation:duskCover 2s ease both}
.transition-stars{position:absolute;inset:0;opacity:0;background-image:radial-gradient(circle,#e9d3b6 0 1px,transparent 1.5px),radial-gradient(circle,#e6d5c49c 0 .5px,transparent 1.2px);background-size:91px 127px,153px 89px;background-position:28px 33px,55px 16px}
.is-night .transition-stars{animation:duskStars 2.6s ease both}
.transition-halo{position:absolute;inset:5%;background:radial-gradient(ellipse at 50% 48%,#ad7d6b1a,transparent 55%);opacity:0}.is-night .transition-halo{animation:duskStars 2.6s ease both}
body[data-scene='4']{background:#090f1c;color:#eddfca}body[data-scene='4'] .ambient-light{opacity:0}
body[data-scene='4'] .brand{color:#dac9ad;font-size:16px}body[data-scene='4'] .brand-note{font-size:8px;color:#a89986;opacity:.8}body[data-scene='4'] .drawn-flower{color:#c59879}
body[data-scene='4'] .music-toggle{background:#161d2b9c;border-color:#b2967540;color:#ddc6a6}
body[data-scene='4'] .scene-finale{padding-top:12px;padding-bottom:34px;max-width:1100px}
.firework-top{border-bottom:1px solid #c7ac7f24;padding:6px 0 13px}.firework-top .eyebrow{font-size:13px;color:#bfa98a}#show-timer{font-size:13px;letter-spacing:2px;color:#b3a28b}
.finale-sky{height:clamp(430px,66svh,720px);margin-top:10px}
#sky-touch>span{bottom:102px;font-size:11px;color:#b6a28c;opacity:.65}
.sky-caption{bottom:26px}#show-chapter{font-size:21px;line-height:1.8;color:#e9c9a1}#show-detail{font-size:12px;line-height:1.9;color:#b5a593}
.show-progress{height:1px;background:#c7ac7f24}#show-progress-fill{background:linear-gradient(90deg,#c89285,#e6c799);box-shadow:0 0 7px #c5a37638;transition:width 1s linear}
.finale-copy{padding:31px 0 0;max-width:600px;margin:auto}
.finale-copy h2{font-weight:normal;line-height:1.8}.credit-name{display:block;font:46px/1.4 var(--hand);letter-spacing:.16em;color:#f2dfbf;padding-left:.16em}.credit-comma{font-size:23px;letter-spacing:0;margin-left:-.15em}
.credit-birthday{display:block;font:29px/1.9 var(--hand);letter-spacing:.12em;color:#e7c28b;text-shadow:0 0 24px #e3b46838}.finale-copy h2>br{display:none}.finale-copy h2 em{font:20px/2 var(--hand);color:#c7b59c;display:block;margin-top:17px}
.finale-copy>p{font:14px/2.2 var(--hand);color:#bcae9b;margin-top:13px}.finale-copy>p>br{display:none}.finale-copy>p>.credit-line{display:block;margin-top:7px}
.credit-line{opacity:0;transform:translateY(8px);transition:opacity 1.4s ease,transform 1.6s ease}
.credit-line.is-visible{opacity:1;transform:translateY(0)}
.final-actions{margin-top:24px;gap:3px;border-top:1px solid #c1a98324;padding-top:14px}.final-actions .text-button{font-size:12px;padding:11px 7px;color:#b5a18a;min-height:44px}.finale-copy .final-dedication{font-size:12px;margin-top:21px;color:#9e8f7a}
body[data-scene='4'] .journey-footer{border-top-color:#baa07817;color:#a1927e}body[data-scene='4'] button:focus-visible{outline-color:#e4c392}
@keyframes lightBreathe{0%,100%{opacity:.5;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(15px,-14px,0)}}
@keyframes flameBreathe{0%,100%{opacity:.82;transform:scale(.98,1)}33%{opacity:1;transform:scale(1,1.045)}61%{opacity:.9;transform:scale(.97,.99)}}
@keyframes duskCover{0%{opacity:0}42%,57%{opacity:1}100%{opacity:0}}
@keyframes duskStars{0%,18%{opacity:0;transform:scale(1.04)}55%,80%{opacity:.65}100%{opacity:0;transform:scale(1)}}
@media(min-width:600px){.scene-intro{gap:36px}.display-title{font-size:57px}.intro-description{font-size:20px;max-width:400px}.opening-cake{width:145px;right:10%;top:70px}.letter-card{padding:40px 46px 44px}.letter-card p{font-size:20px;line-height:2.05}.birthday-note{padding:39px 30px}.credit-name{font-size:59px}.credit-birthday{font-size:36px}.finale-copy h2 em{font-size:23px}.finale-copy>p{font-size:17px}}
@media(min-width:950px){.site-header{padding-top:28px}.scene-intro{column-gap:75px;row-gap:27px}.display-title{font-size:62px}.intro-copy{padding-left:6px}.opening-cake{width:136px;right:0;top:92px}.campus-postcard{padding:15px 15px 20px;rotate:0deg;transform:rotate(1.2deg)}.photo-window{aspect-ratio:1.18}.campus-postcard figcaption{font-size:18px}.intro-bottom{max-width:690px}.finale-sky{height:min(70vh,700px)}#show-chapter{font-size:28px}.finale-copy{padding-top:38px}}
@media(max-width:374px){.display-title{font-size:39px}.opening-cake{width:89px;right:-1px;top:54px}.intro-description{font-size:16px}.intro-copy .primary-button{font-size:16px;gap:12px;padding:0 17px}.letter-card{padding-left:21px;padding-right:21px}.final-actions .text-button{padding:11px 5px;font-size:11px}.credit-name{font-size:40px}#show-chapter{font-size:19px}}
@media(max-height:720px) and (max-width:599px){.finale-sky{height:410px}.display-title{margin-top:17px}.scene-intro{padding-top:14px}.credit-name{font-size:42px}}
@media(orientation:landscape) and (max-height:550px){.finale-sky{height:390px}.opening-cake{width:100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-light i,.opening-flames{animation:none}.credit-line{opacity:1;transform:none}.photo-window img{filter:none!important}.opening-cake{opacity:1!important}}
/* Reserve no empty letter-sized block before the closing credits begin. */
.finale-copy{display:flex;flex-direction:column;padding-top:16px}
.finale-copy .final-actions{order:-1;margin-top:0;margin-bottom:0;padding-top:0;border-top:0}
.finale-copy h2{max-height:0;overflow:hidden;margin-top:0;transition:max-height 1.4s ease,margin-top 1.4s ease}
.finale-copy.credits-started h2{max-height:300px;margin-top:24px}
.finale-copy>p:not(.final-dedication){max-height:0;overflow:hidden;margin-top:0;transition:max-height 1.4s ease,margin-top 1.4s ease}
.finale-copy.credits-message>p:not(.final-dedication){max-height:150px;margin-top:14px}
.finale-copy .final-dedication{max-height:0;overflow:hidden;margin-top:0;transition:max-height 1.4s ease,margin-top 1.4s ease,opacity 1.4s ease}
.finale-copy.credits-complete .final-dedication{max-height:55px;margin-top:24px}
.credit-comma{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){.finale-copy h2{max-height:300px;margin-top:24px}.finale-copy>p:not(.final-dedication){max-height:150px;margin-top:14px}.finale-copy .final-dedication{max-height:55px;margin-top:24px}}
.load-status{position:fixed;z-index:11;left:18px;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:480px;margin:auto;padding:14px 18px;border:1px solid #d5c19f;background:#fff9ed;color:#79654b;box-shadow:0 8px 30px #43352024;font:15px/1.8 var(--hand);text-align:center}
.load-status button{display:block;margin:8px auto 0;min-height:44px;padding:5px 18px;border:1px solid #baa37d;border-radius:3px;background:#f2e6d0;color:#68563e}