:root{color:#3f382f;background:#1b1815;font-family:Songti SC,STSong,"Noto Serif CJK SC","Source Han Serif SC",serif;font-synthesis:none;--paper:#f5efe3;--paper-deep:#e6d8c3;--ink:#40382f;--muted:#7a6d5d;--gold:#b0874d;--night:#11100f}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--night)}body{margin:0;min-width:320px;min-height:100vh;background:var(--night);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}.tribute-page{overflow:clip}.hero{position:relative;min-height:100svh;overflow:hidden;background:#120f0c;isolation:isolate}.hero__photo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 50%;transform:scale(1.015);transition:transform 8s ease}.hero--phase-4 .hero__photo{transform:scale(1.045)}.hero__shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:#07070700;transition:background 2.2s cubic-bezier(.22,.73,.3,1)}.hero--phase-1 .hero__shade,.hero--phase-2 .hero__shade,.hero--phase-3 .hero__shade,.hero--phase-4 .hero__shade{background:#050505d4}.hero__dear{position:absolute;top:clamp(2rem,7vw,6rem);left:clamp(1.25rem,6vw,6rem);width:min(34rem,48vw);opacity:0;transform:translateY(12px);transition:opacity 1s ease,transform 1s ease}.hero__dear img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.24))}.hero--phase-2 .hero__dear,.hero--phase-3 .hero__dear,.hero--phase-4 .hero__dear{opacity:1;transform:translateY(0)}.hero__name{position:absolute;top:51%;right:1.5rem;left:1.5rem;color:#fff9ec;text-align:center;opacity:0;transform:translateY(18px);transition:opacity 1.3s ease,transform 1.3s ease}.hero--phase-3 .hero__name,.hero--phase-4 .hero__name{opacity:1;transform:translateY(0)}.hero__name span{display:block;margin-bottom:1.1rem;color:#fff7e6a3;font-family:Georgia,Times New Roman,serif;font-size:clamp(.62rem,.8vw,.78rem);letter-spacing:.42em}.hero__name h1{margin:0;font-family:Georgia,Kaiti SC,serif;font-size:clamp(5.5rem,13vw,12rem);font-style:italic;font-weight:400;letter-spacing:-.035em;line-height:.8;text-shadow:0 4px 34px rgba(0,0,0,.42)}.hero__name p{margin:2rem 0 0;color:#fff8ebc7;font-size:clamp(.78rem,1vw,1rem);letter-spacing:.45em}.scroll-cue{position:absolute;bottom:2rem;left:50%;display:flex;align-items:center;border:0;background:transparent;color:#fff8ebb8;cursor:pointer;flex-direction:column;gap:.6rem;letter-spacing:.22em;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:color .25s ease,opacity 1s ease,transform 1s ease;white-space:nowrap}.scroll-cue.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.scroll-cue:hover,.scroll-cue:focus-visible{color:#fff;outline:none}.scroll-cue svg{animation:drift 2s ease-in-out infinite}@keyframes drift{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.envelope-section{position:relative;display:grid;min-height:100svh;grid-template-columns:minmax(14rem,.7fr) minmax(22rem,1.2fr);align-items:center;gap:clamp(4rem,10vw,10rem);padding:clamp(6rem,10vw,10rem) max(5vw,2rem) 7rem;background:#ded0ba}.envelope-intro{justify-self:end;width:min(27rem,100%)}.envelope-intro span,.general-paper header span,.participants>span{color:#8e6634;font-family:Georgia,Times New Roman,serif;font-size:.7rem;letter-spacing:.35em}.envelope-intro h2{margin:1.5rem 0 0;color:#493f34;font-size:clamp(3.4rem,6vw,6rem);font-weight:400;line-height:1.3}.envelope-stage{display:grid;width:min(42rem,100%);min-height:36rem;place-items:center}.envelope-button{position:relative;display:flex;width:min(34rem,80vw);aspect-ratio:1.55;align-items:center;justify-content:center;border:1px solid rgba(105,77,43,.35);border-radius:2px;background:#eee4d1;box-shadow:0 28px 60px #41311f29;color:#8f6735;cursor:pointer;flex-direction:column;gap:1rem;transition:transform .45s ease,box-shadow .45s ease,background .45s ease}.envelope-button:hover,.envelope-button:focus-visible{background:#f5ecdc;box-shadow:0 36px 75px #41311f3b;outline:2px solid rgba(139,99,48,.45);outline-offset:5px;transform:translateY(-8px) rotate(-.35deg)}.envelope-button strong{color:#594b3c;font-size:1.1rem;font-weight:400;letter-spacing:.12em}.envelope-button span{font-size:.72rem;letter-spacing:.24em}.personal-letter{width:min(39rem,100%);padding:clamp(2rem,5vw,4.5rem);background:#f8f2e7;box-shadow:0 30px 70px #3c2b1833;animation:letter-arrives .9s cubic-bezier(.2,.72,.2,1) both}@keyframes letter-arrives{0%{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.personal-letter p{margin:0 0 1.1rem;color:#665a4c;font-size:clamp(.98rem,1.15vw,1.08rem);letter-spacing:.035em;line-height:2}.personal-letter .letter-salutation{margin-bottom:2rem;color:#3f372e;font-size:1.18rem}.personal-letter blockquote{margin:0 0 2rem;color:#42382e;font-size:clamp(1.4rem,2.4vw,2.05rem);line-height:1.75}.personal-letter .letter-wish{margin-top:2rem;color:#986f3b}.personal-letter .letter-signature{margin-top:2.4rem;text-align:right}.envelope-section>.scroll-cue{color:#423628a8}.general-section{padding:clamp(5rem,10vw,10rem) max(3vw,1rem);background:#cfc0aa}.general-paper{width:min(920px,100%);margin:0 auto;padding:clamp(3rem,8vw,8rem) clamp(1.5rem,8vw,7rem);background:var(--paper);box-shadow:0 28px 90px #3024182e}.general-paper header{text-align:center}.general-paper h2{margin:1.5rem auto 4rem;color:#9a6f38;font-size:clamp(2.5rem,5vw,4.7rem);font-weight:400;letter-spacing:.05em;line-height:1.35}.general-copy{width:min(38rem,100%);margin:0 auto}.general-copy p{margin:0 0 1.45rem;color:#5e5347;font-size:clamp(1rem,1.3vw,1.12rem);letter-spacing:.04em;line-height:2.15}.general-copy p:first-child{color:#3e372f;font-size:1.17rem}.letter-closing{width:min(38rem,100%);margin:3rem auto 0;color:#746758;text-align:right}.letter-closing p{margin:0 0 .4rem;letter-spacing:.14em}.letter-closing time{font-size:.78rem;letter-spacing:.12em}.participants-photo{width:min(34rem,88%);margin:clamp(5rem,9vw,8rem) auto 0}.participants-photo img{display:block;width:100%;border:8px solid #fffaf0;box-shadow:0 16px 45px #48351f2e}.participants-photo figcaption{margin-top:1rem;color:#8a7965;font-size:.76rem;letter-spacing:.18em;text-align:center}.participants{width:min(38rem,100%);margin:clamp(4rem,7vw,6rem) auto 0;text-align:center}.participants h3{margin:.65rem 0 1.3rem;font-size:1.5rem;font-weight:400;letter-spacing:.25em}.participants__line{width:100%;height:1px;background:#7d654659}.participants p{margin:1.4rem 0 0;color:#776958;font-size:.9rem;letter-spacing:.16em;line-height:2}[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.1s ease}[data-reveal].is-visible{opacity:1;transform:translateY(0)}@media(max-width:760px){.hero__photo{object-position:center center}.hero__dear{top:8vh;left:1.2rem;width:58vw}.hero__name{top:48%}.hero__name h1{font-size:clamp(4.5rem,23vw,7.2rem)}.hero__name p{margin-top:1.5rem}.scroll-cue{bottom:1.5rem;font-size:.72rem}.envelope-section{grid-template-columns:1fr;align-content:center;gap:2.5rem;padding:6rem 1.25rem 7rem}.envelope-intro{justify-self:start;width:100%}.envelope-intro h2{font-size:clamp(3rem,15vw,4.8rem)}.envelope-stage{min-height:auto}.envelope-button{width:min(27rem,92vw)}.personal-letter{padding:2rem 1.5rem 2.5rem}.general-section{padding:1rem 0}.general-paper{padding:5rem 1.5rem 4rem;box-shadow:none}.general-paper h2{margin-bottom:3rem}.participants-photo{width:92%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}