@font-face{font-family:"DoudouSerif";src:url("assets/fonts/NotoSerifSC-500.ttf") format("truetype");font-display:swap;font-weight:500}
:root{--gold:#cda567;--gold-bright:#edc98d;--paper:#f7ead4;--ink:#0a0907;--serif:"DoudouSerif","Songti SC","STSong",serif;--sans:"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:#090706}
body{margin:0;min-width:320px;background:#090706;color:var(--paper);font-family:var(--serif);overflow-x:hidden}
body.modal-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
img{max-width:100%}

.chapter-zero{position:fixed;z-index:120;inset:0;overflow:hidden;background:#090706;opacity:1;visibility:visible;transition:opacity .65s ease,visibility .65s ease}
body.main-entered .chapter-zero{opacity:0;visibility:hidden;pointer-events:none}
.opening-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#090706;transform:scale(1.002)}
.opening-shade{position:absolute;z-index:2;inset:0;background:rgba(0,0,0,.1);box-shadow:inset 0 -120px 130px rgba(0,0,0,.28),inset 0 100px 100px rgba(0,0,0,.18);pointer-events:none}
.opening-intro{position:absolute;z-index:4;left:50%;bottom:10vh;width:min(88vw,640px);transform:translateX(-50%);text-align:center;text-shadow:0 3px 26px #000;transition:opacity .2s linear}
.opening-intro p{margin:0 0 13px;font:600 8px/1.4 var(--serif);letter-spacing:.32em}
.opening-intro h1{margin:0;font:500 clamp(46px,11vw,78px)/1 var(--serif);letter-spacing:.2em;padding-left:.2em}
.opening-intro span{display:block;margin-top:14px;font:500 13px/1.8 var(--serif);letter-spacing:.16em}
.opening-cue{position:absolute;z-index:5;left:25px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:13px;font:600 8px/1 var(--serif);letter-spacing:.24em;text-shadow:0 1px 14px #000;transition:opacity .25s}
.opening-cue i{display:block;width:42px;height:1px;background:currentColor;transform-origin:left center;animation:cueBreath 1.7s ease-in-out infinite}
.opening-progress{position:absolute;z-index:5;top:50%;right:22px;display:flex;align-items:center;gap:12px;transform:translateY(-50%);color:rgba(255,248,234,.82)}
.opening-track{position:relative;width:1px;height:150px;background:rgba(255,255,255,.25)}
.opening-track i{position:absolute;inset:0 0 auto;height:0;background:#fff}
.opening-progress small{font:600 7px/1 var(--serif);letter-spacing:.17em;writing-mode:vertical-rl}
.opening-loading{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:#090706;transition:opacity .55s ease,visibility .55s ease}
.opening-loading.ready{opacity:0;visibility:hidden}
.opening-loading span{font:600 9px/1 var(--serif);letter-spacing:.28em;animation:loadingPulse 1.4s ease-in-out infinite}
.opening-scroll-space{height:720vh;background:#090706}
@keyframes cueBreath{0%,100%{transform:scaleX(.35);opacity:.4}50%{transform:scaleX(1);opacity:1}}
@keyframes loadingPulse{0%,100%{opacity:.28}50%{opacity:1}}

.living-background{position:fixed;z-index:0;inset:0;overflow:hidden;background:#11120f;opacity:0;transition:opacity .7s ease;pointer-events:none}
body.main-entered .living-background{opacity:1}
.season-film{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .65s ease}
.season-film.ready{opacity:1}
.season-scrim{position:absolute;inset:0;background:rgba(8,8,6,.46);box-shadow:inset 0 0 220px rgba(0,0,0,.68)}
.film-grain{position:absolute;inset:0;background:rgba(255,238,210,.015);opacity:.8}

.topbar{position:fixed;z-index:80;left:3vw;right:3vw;top:27px;display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(218,180,114,.3);opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .55s ease,transform .55s ease}
body.main-entered .topbar{opacity:1;transform:none;pointer-events:auto}
.brand{color:var(--gold-bright);font:500 16px/1 var(--serif);letter-spacing:.22em;text-decoration:none}
.sound-toggle{border:1px solid rgba(218,180,114,.45);border-radius:999px;padding:8px 13px;color:var(--paper);background:rgba(7,7,5,.62);cursor:pointer;font-size:11px;letter-spacing:.08em;backdrop-filter:blur(12px)}
.sound-toggle[aria-pressed="false"]{color:rgba(255,245,226,.58)}

.chapter-rail{position:fixed;z-index:75;right:2.25vw;top:50%;display:flex;flex-direction:column;gap:20px;transform:translateY(-50%) translateX(16px);opacity:0;pointer-events:none;transition:opacity .55s ease .12s,transform .55s ease .12s}
body.main-entered .chapter-rail{opacity:1;transform:translateY(-50%);pointer-events:auto}
.chapter-rail::before{content:"";position:absolute;z-index:-1;left:50%;top:12px;bottom:12px;width:1px;background:rgba(218,180,114,.28)}
.chapter-rail button{position:relative;display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:50%;padding:0;color:rgba(245,225,193,.62);background:#13110d;cursor:pointer;font:500 11px/1 var(--serif);transition:.25s ease}
.chapter-rail button::before{content:"";position:absolute;inset:8px;border:1px solid rgba(218,180,114,.52);border-radius:50%}
.chapter-rail button.active{color:var(--gold-bright);box-shadow:0 0 0 1px rgba(218,180,114,.48),0 0 24px rgba(218,180,114,.22)}
.chapter-rail button.active::before{background:var(--gold-bright)}
.chapter-rail button.active span{opacity:0}

.memorial-main{position:relative;z-index:2;background:transparent}
.chapter{position:relative;min-height:100vh;display:flex;align-items:center;padding:13vh 8vw 10vh 4vw;overflow:hidden}
.chapter::after{content:"";position:absolute;left:4vw;right:4vw;bottom:0;height:1px;background:rgba(218,180,114,.16)}
.chapter-inner{position:relative;width:100%;max-width:1680px;margin:0 auto}
.cinematic-layout{display:grid;grid-template-columns:minmax(620px,1.05fr) minmax(590px,.95fr);gap:clamp(42px,3vw,54px);align-items:center}
.chapter-head{align-self:center;padding-left:.5vw;text-shadow:0 3px 26px rgba(0,0,0,.72)}
.cinematic-layout .chapter-head.visible{transform:translate(-11px,-5vh)}
.chapter-no{margin:0 0 31px;color:var(--gold-bright);font:500 15px/1.2 Georgia,serif;letter-spacing:.24em}
.chapter-head h2,.archive-head h2,.film-head h2{margin:0;color:#fff0d8;font:500 clamp(44px,3.9vw,64px)/1.3 var(--serif);letter-spacing:.06em}
.gold-rule{display:block;width:96px;height:1px;margin:31px 0;background:var(--gold)}
.chapter-date{margin:0 0 13px;color:var(--gold-bright);font:500 23px/1 Georgia,serif;letter-spacing:.13em}
.chapter-caption{max-width:680px;margin:0;color:rgba(255,238,210,.84);font:500 clamp(18px,1.5vw,25px)/1.9 var(--serif);letter-spacing:.11em}
.photo-stage{position:relative;height:min(72vh,710px);min-height:560px}
.photo-frame{margin:0;border:1px solid rgba(224,184,111,.75);padding:0;background:#15120d;overflow:hidden;box-shadow:0 28px 82px rgba(0,0,0,.48);cursor:zoom-in}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.photo-frame:hover img,.photo-frame:focus-visible img{transform:scale(1.035)}
.stage-main{position:absolute;z-index:2;left:3%;top:8%;width:74%;height:82%}
.stage-side{position:absolute;z-index:3;right:-2%;top:27%;width:37%;height:68%}
.photo-filmstrip{position:absolute;z-index:4;left:0;bottom:0;width:73%;height:25%;display:flex;gap:10px;align-items:flex-end}
.photo-filmstrip .photo-frame{position:relative;width:31%;height:100%;border-color:rgba(217,179,107,.58)}
.photo-filmstrip.four{width:84%}
.photo-filmstrip.four .photo-frame{width:23%}
.family-strip{width:90%;height:21%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.family-strip .photo-frame{flex:0 0 18%;width:auto;scroll-snap-align:start}
.scroll-cue{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);color:var(--gold-bright);font:500 10px/1 Georgia,serif;letter-spacing:.18em}
.scroll-cue::before{content:"";display:block;width:1px;height:29px;margin:0 auto 8px;background:var(--gold-bright);opacity:.65}

.birthday-chapter{padding-bottom:14vh}
.birthday-feature{position:relative;height:min(68vh,680px);min-height:540px}
.birthday-main,.birthday-side{position:absolute}
.birthday-main{z-index:2;left:2%;top:2%;width:69%;height:80%}
.birthday-side{z-index:3;right:0;top:24%;width:34%;height:65%}
.birthday-timeline{grid-column:2;position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:0;margin-top:29px;padding-top:6px}
.timeline-line{position:absolute;left:5%;right:5%;top:21px;height:1px;background:rgba(217,179,107,.46)}
.birthday-node{position:relative;z-index:1;border:0;padding:0 3px;color:rgba(255,239,210,.76);background:transparent;cursor:pointer;font-size:11px;letter-spacing:.08em}
.birthday-node i{display:block;width:10px;height:10px;margin:10px auto 13px;border:1px solid var(--gold-bright);border-radius:50%;background:#15110d;box-shadow:0 0 0 5px rgba(217,179,107,.09);transition:.25s ease}
.birthday-node:hover i,.birthday-node:focus-visible i{background:var(--gold-bright);transform:scale(1.22);box-shadow:0 0 0 8px rgba(217,179,107,.14)}

.archive-chapter{align-items:flex-start;padding-top:14vh;background:rgba(5,6,5,.22)}
.archive-layout{width:min(1450px,100%)}
.archive-head{max-width:820px;margin-bottom:54px;text-shadow:0 3px 28px rgba(0,0,0,.75)}
.archive-head>p:last-child,.film-head>p:last-child{margin-top:22px;color:rgba(255,239,213,.74);font:500 19px/1.9 var(--serif)}
.memory-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.memory-card{position:relative;min-height:57vh;border:1px solid rgba(217,179,107,.42);padding:0;color:var(--paper);background:#100e0b;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 24px 72px rgba(0,0,0,.34)}
.memory-card:nth-child(even){transform:translateY(28px)}
.memory-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) brightness(.74);transition:transform .7s ease,filter .5s ease}
.memory-card:hover img,.memory-card:focus-visible img{transform:scale(1.045);filter:saturate(.95) brightness(.86)}
.memory-card>span{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:28px 20px;background:rgba(7,7,5,.72);border-top:1px solid rgba(217,179,107,.32)}
.memory-card small,.memory-card em{display:block;color:var(--gold-bright);font-size:10px;line-height:1;letter-spacing:.16em;font-style:normal}
.memory-card small{font-family:Georgia,serif}.memory-card em{font-family:var(--serif)}
.memory-card strong{display:block;margin:10px 0 13px;font:500 clamp(20px,1.8vw,30px)/1.4 var(--serif);letter-spacing:.08em}
.memory-card em{color:rgba(255,240,214,.6);letter-spacing:.08em}

.film-chapter{padding-top:13vh;background:rgba(5,5,8,.28)}
.film-layout{width:min(1180px,100%)}
.film-head{text-align:center;max-width:850px;margin:0 auto 45px;text-shadow:0 3px 28px rgba(0,0,0,.75)}
.video-theatre{position:relative;min-height:min(65vh,700px);overflow:hidden;border:1px solid rgba(217,179,107,.45);background:#050608;box-shadow:0 35px 110px rgba(0,0,0,.52)}
.video-theatre video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050608}
.video-play-btn{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;border:0;color:#fff2dc;background:rgba(3,4,5,.4);cursor:pointer;text-shadow:0 3px 22px #000}
.video-play-btn.hidden{display:none}
.video-play-btn strong{font:500 18px/1.4 var(--serif);letter-spacing:.12em}
.easter-trigger-area{text-align:center;margin-top:68px;padding-top:47px;border-top:1px solid rgba(217,179,107,.25)}
.easter-trigger-area p{font:500 clamp(21px,2.4vw,34px)/1.7 var(--serif)}
.easter-trigger{margin-top:20px;border:1px solid rgba(217,179,107,.65);border-radius:999px;padding:14px 24px;color:var(--paper);background:rgba(7,7,5,.48);cursor:pointer;letter-spacing:.1em}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .95s cubic-bezier(.2,.74,.2,1)}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}

.lightbox{position:fixed;z-index:220;inset:0;display:none;align-items:center;justify-content:center;padding:30px 86px;background:rgba(0,0,0,.94);backdrop-filter:blur(16px)}
.lightbox.open{display:flex}
.lightbox-stage{width:min(1180px,100%);height:calc(100vh - 76px);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.lightbox-stage img{display:block;max-width:100%;max-height:calc(100% - 48px);object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lightbox-stage figcaption{display:flex;gap:18px;align-items:center;color:rgba(255,241,215,.72);font-size:12px;letter-spacing:.08em}
.lightbox-stage figcaption strong{color:var(--gold-bright);font:500 16px/1 var(--serif)}
.lightbox-close,.lightbox-nav{position:absolute;border:1px solid rgba(217,179,107,.35);border-radius:999px;color:#fff0d4;background:rgba(10,9,7,.7);cursor:pointer}
.lightbox-close{right:25px;top:22px;padding:9px 14px;font-size:12px}
.lightbox-nav{top:50%;transform:translateY(-50%);padding:12px 15px;font-size:12px}
.lightbox-nav.prev{left:22px}.lightbox-nav.next{right:22px}

.easter-overlay{display:none;position:fixed;z-index:300;inset:0;align-items:center;justify-content:center;padding:28px;background:#000;color:#fff;overflow-y:auto}
.easter-overlay.active{display:flex}
.easter-stage{position:relative;width:min(920px,100%);text-align:center;transition:opacity .3s ease}
.easter-question{font:500 clamp(24px,4vw,48px)/1.5 var(--serif);letter-spacing:.08em}
.easter-photo-card{opacity:0;transform:translateY(20px);transition:.7s ease}
.easter-photo-card.show{opacity:1;transform:none}
.easter-photo-card img{display:block;max-width:min(76vw,560px);max-height:56vh;margin:auto;object-fit:contain;border:1px solid rgba(217,179,107,.42);box-shadow:0 0 90px rgba(183,205,255,.16)}
.easter-caption{max-width:800px;margin:25px auto 0;font:500 clamp(22px,3.5vw,42px)/1.65 var(--serif)}
.touch-paw{display:none;margin:24px auto 0;border:1px solid rgba(217,179,107,.42);border-radius:999px;padding:12px 20px;color:#fff;background:rgba(255,255,255,.06);cursor:pointer}
.touch-paw.show{display:block}
.private-message{display:none;max-width:760px;margin:35px auto 0;text-align:left;color:rgba(255,247,233,.9);white-space:pre-line;font:500 20px/2 var(--serif)}
.private-message.show{display:block}
.life-dates{text-align:center;color:var(--gold-bright);letter-spacing:.15em}
.easter-actions{display:none;gap:12px;justify-content:center;margin-top:28px}
.easter-actions.show{display:flex}
.easter-actions button{border:1px solid rgba(217,179,107,.4);border-radius:999px;padding:11px 17px;color:#fff;background:rgba(255,255,255,.07);cursor:pointer}
.fireworks-wipe{position:absolute;z-index:20;inset:0;display:none;background:#000;overflow:hidden}
.fireworks-wipe video{display:block;width:100%;height:100%;object-fit:cover}
.easter-overlay.fireworks-active .fireworks-wipe{display:block}
.easter-overlay.fireworks-active .easter-stage{opacity:0;pointer-events:none}

@media(max-width:1100px){
  .chapter{padding-right:9vw}
  .cinematic-layout{grid-template-columns:minmax(330px,.78fr) minmax(470px,1.22fr);gap:38px}
  .photo-stage,.birthday-feature{min-height:510px;height:64vh}
  .memory-categories{grid-template-columns:repeat(3,1fr)}
  .memory-card{min-height:53vh}.memory-card:nth-child(even){transform:none}
}
@media(max-width:820px){
  .opening-scroll-space{height:620vh}
  .opening-progress{right:13px}.opening-cue{left:18px}
  .topbar{left:16px;right:16px;top:calc(12px + env(safe-area-inset-top));padding-bottom:11px}
  .brand{font-size:13px}.sound-toggle{font-size:10px;padding:7px 10px}
  .chapter-rail{right:8px;gap:13px}.chapter-rail button{width:23px;height:23px;font-size:9px}
  .chapter{min-height:100svh;padding:calc(88px + env(safe-area-inset-top)) 34px calc(72px + env(safe-area-inset-bottom)) 18px;align-items:flex-start}
  .cinematic-layout{display:block}
  .chapter-head{position:relative;z-index:5;margin:2vh 0 34px;padding:0}
  .cinematic-layout .chapter-head.visible{transform:none}
  .chapter-no{margin-bottom:18px;font-size:10px}
  .chapter-head h2,.archive-head h2,.film-head h2{font-size:clamp(40px,11.5vw,62px)}
  .gold-rule{margin:22px 0}.chapter-caption{font-size:17px}
  .photo-stage,.birthday-feature{height:56vh;min-height:430px}
  .stage-main,.birthday-main{left:0;width:73%;height:73%}
  .stage-side,.birthday-side{right:0;top:19%;width:35%;height:58%}
  .photo-filmstrip{height:24%;width:82%;gap:6px}
  .family-strip{width:100%}.family-strip .photo-frame{flex-basis:28%}
  .birthday-timeline{grid-column:auto;overflow-x:auto;grid-template-columns:repeat(9,minmax(74px,1fr));margin-top:24px;padding-bottom:12px}
  .timeline-line{left:37px;right:auto;width:600px}
  .archive-chapter{padding-top:13vh}.archive-head{margin-bottom:35px}
  .memory-categories{grid-template-columns:1fr 1fr;gap:9px}
  .memory-card{min-height:47vh}.memory-card:last-child{grid-column:1/-1;min-height:53vh}
  .memory-card>span{padding:20px 14px}.memory-card strong{font-size:20px}
  .video-theatre{min-height:60vh}
  .lightbox{padding:20px 14px 68px}.lightbox-stage{height:calc(100vh - 70px)}
  .lightbox-close{top:auto;bottom:18px;right:50%;transform:translateX(50%)}
  .lightbox-nav{top:auto;bottom:17px;transform:none}.lightbox-nav.prev{left:18px}.lightbox-nav.next{right:18px}
}
@media(max-width:520px){
  .season-scrim{background:rgba(7,7,5,.52);box-shadow:inset 0 0 110px rgba(0,0,0,.6)}
  .chapter{padding-right:33px}
  .photo-stage,.birthday-feature{height:53vh;min-height:405px}
  .stage-main,.birthday-main{width:76%;height:70%}
  .stage-side,.birthday-side{top:17%;width:36%;height:57%}
  .photo-filmstrip{width:90%;height:25%}
  .memory-card{min-height:42vh}
  .lightbox-stage figcaption{flex-direction:column;gap:7px}
  .easter-overlay{padding:18px}.easter-photo-card img{max-width:88vw;max-height:48vh}.private-message{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}