@font-face{font-family:FuneralSerif;src:url('assets/noto-serif-sc-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
:root{color-scheme:dark;--ivory:#ece8db;--muted:#a7aca4;--amber:#c5ab79;--line:rgba(207,209,189,.24)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#111513}
body{color:var(--ivory);font-family:FuneralSerif,"Songti SC","SimSun",serif;font-weight:500;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #e7d5aa;outline-offset:7px}
button[hidden]{display:none}
::selection{background:#78664c;color:#fff}
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#111513}
.scene-art{position:absolute;inset:-2%;background:url('assets/funeral-hall-v2.png') center center/cover no-repeat;animation:scene-breath 24s ease-in-out infinite alternate;will-change:transform}
.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,9,.35),transparent 22%,rgba(8,12,10,.07) 62%,rgba(8,12,10,.62)),radial-gradient(ellipse at 50% 43%,rgba(9,14,13,.25),transparent 68%)}
.grain{position:absolute;inset:0;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.candle-glow{position:absolute;width:28vw;height:35vh;bottom:4%;background:radial-gradient(ellipse,rgba(201,135,56,.10),transparent 65%);mix-blend-mode:screen;animation:glow 4s ease-in-out infinite alternate}
.glow-left{left:3%}.glow-right{right:3%;animation-delay:-2s}
.mist{position:absolute;left:-25%;width:150%;height:42%;bottom:-12%;background:radial-gradient(ellipse at 32% 65%,rgba(166,178,169,.16),transparent 43%),radial-gradient(ellipse at 69% 50%,rgba(175,185,178,.09),transparent 46%);filter:blur(24px);animation:mist-drift 30s ease-in-out infinite alternate}
.mist-two{bottom:14%;opacity:.5;animation-duration:43s;animation-direction:alternate-reverse}
#petals{position:absolute;inset:0;width:100%;height:100%;opacity:.78}
.page-shell{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:32px 48px 24px;isolation:isolate}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:2}
.identity{display:flex;align-items:center;gap:17px}
.seal{display:grid;place-items:center;width:42px;height:46px;border:1px solid rgba(224,224,206,.4);font-size:24px;color:#d9ddcf;position:relative}
.seal:after{content:"";position:absolute;inset:3px;border:1px solid rgba(224,224,206,.12)}
.identity-text{font-size:15px;letter-spacing:.25em}.identity-text .dot{color:#acac98}
.identity-text small{display:block;margin-top:8px;font:8px/1.2 Arial,sans-serif;letter-spacing:.28em;color:#a1a79b}
.motion-toggle{display:flex;align-items:center;gap:11px;min-height:44px;padding:8px 0 8px 16px;background:none;border:0;font:11px/1.3 system-ui,sans-serif;letter-spacing:.13em;color:#bdc1b5}
.motion-toggle:hover{color:#fff}.motion-toggle:disabled{cursor:default;opacity:.7}.motion-symbol{display:flex;gap:3px;align-items:center;height:16px}
.motion-symbol i{display:block;width:1px;height:12px;background:#d2d0b9;animation:motion-bar 1.7s ease-in-out infinite alternate}
.motion-symbol i:nth-child(2){height:7px;animation-delay:-.6s}.motion-symbol i:nth-child(3){height:14px;animation-delay:-1.2s}
.ceremony{position:relative;flex:1;min-height:610px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0 30px}
.farewell{animation:arrive 1.8s both;position:relative}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 32px;font-size:12px;letter-spacing:.28em;color:#b7bdb0}
.eyebrow span{width:32px;height:1px;background:linear-gradient(90deg,transparent,#808b78)}.eyebrow span:last-child{transform:rotate(180deg)}
h1{font-weight:500;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.addressee{display:block;font-size:clamp(23px,2.1vw,34px);letter-spacing:.5em;padding-left:.5em;color:#c8cdbf;margin-bottom:17px}
.statement{display:block;font-size:clamp(66px,8vw,116px);font-weight:500;line-height:1.45;letter-spacing:.15em;padding-left:.15em;color:#eeede1;text-shadow:0 0 50px rgba(228,228,202,.12),0 3px 20px #090e0a}
.ornament{display:flex;justify-content:center;align-items:center;gap:18px;margin:22px 0}
.ornament span{height:1px;width:65px;background:linear-gradient(90deg,transparent,rgba(201,194,159,.5))}.ornament span:last-child{transform:rotate(180deg)}
.ornament i{width:5px;height:5px;border:1px solid #b0ab90;transform:rotate(45deg)}
.verse{font-size:13px;line-height:2.1;letter-spacing:.3em;color:#b0b7a9;margin:0}.verse-dot{padding:0 6px}.mobile-break{display:none}
.side-note{position:absolute;top:36%;writing-mode:vertical-rl;font-size:12px;letter-spacing:.5em;color:#a7b19f;opacity:.8;line-height:1.7;margin:0}
.note-left{left:15px}.note-right{right:15px}
.side-note:before{content:"";display:block;width:1px;height:40px;background:linear-gradient(transparent,var(--line));margin:0 0 25px 12px}
.offering{display:flex;flex-direction:column;align-items:center;margin-top:40px;animation:arrive 2.4s both}
.votive{position:relative;width:72px;height:93px;margin:0 0 17px}
.wax{position:absolute;bottom:9px;left:28px;width:16px;height:41px;border-radius:45% 45% 2px 2px/3px 3px 2px 2px;background:linear-gradient(90deg,#777866,#d1c9a9 38%,#aaa487 70%,#666c5b);box-shadow:inset 0 1px 1px #e5d3a8,0 2px 15px #0b110b}
.wax i{position:absolute;width:3px;height:17px;left:5px;top:0;background:#ddd1ac;border-radius:0 0 4px 4px;opacity:.8}
.wick{position:absolute;bottom:50px;left:35px;height:6px;width:2px;background:#927952}
.flame{position:absolute;left:31px;bottom:54px;width:11px;height:23px;opacity:.55;border-radius:50% 50% 45% 45%/65% 65% 30% 30%;background:linear-gradient(#f9df92 5%,#ffc974 40%,#d78436 88%,#5d718c);filter:blur(.35px);transform-origin:50% 100%;animation:flame 2.5s ease-in-out infinite alternate;box-shadow:0 0 13px 2px rgba(238,172,64,.32)}
.flame div{position:absolute;inset:8px 3px 3px;background:#fff5d3;border-radius:50%;filter:blur(1px)}
.candle-dish{position:absolute;bottom:5px;left:17px;width:40px;height:6px;border-radius:50%;background:linear-gradient(#837b5b,#3f4634);box-shadow:0 4px 8px #0b110b}
.votive-halo{position:absolute;width:150px;height:150px;top:-44px;left:-39px;background:radial-gradient(ellipse,rgba(233,168,66,.06),transparent 65%);opacity:.6;transition:opacity 1.8s,transform 2.5s}
.offering-button{display:flex;align-items:center;justify-content:center;gap:14px;min-width:176px;min-height:47px;padding:10px 18px;border:1px solid rgba(204,195,158,.38);background:rgba(20,28,21,.6);backdrop-filter:blur(6px);font-size:13px;letter-spacing:.16em;transition:border-color .3s,background .3s,color .3s}
.offering-button svg{width:18px;height:18px;stroke:#c2b995;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}.button-arrow{margin-left:9px;font-family:Arial,sans-serif;color:#a7ae96;font-size:15px}
.offering-button:hover{border-color:#c8b37c;background:rgba(62,55,35,.6);color:#fff4d9}
.offering-status{font-size:10px;letter-spacing:.22em;line-height:1.7;color:#a1aa96;margin:13px 0 0;min-height:17px}
.offering.is-lit .flame{opacity:1;height:31px;width:13px;left:30px;box-shadow:0 0 22px 6px rgba(238,172,64,.5)}
.offering.is-lit .votive-halo{opacity:1;transform:scale(1.8);background:radial-gradient(ellipse,rgba(233,168,66,.17),transparent 65%)}
.offering.is-lit .offering-button{border-color:#ac945e;color:#e9d6a9}
.colophon{display:flex;align-items:center;gap:23px;color:#a6ad9d;letter-spacing:.17em;font-size:10px;line-height:1.8;z-index:1}
.colophon i{font-style:normal;padding:0 5px;color:#707b66}.colophon-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(205,209,185,.19),rgba(205,209,185,.06))}.colophon .end-mark{margin:0 12px;color:#6e7865}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}
body.motion-paused .farewell,body.motion-paused .offering{animation:none}
@keyframes scene-breath{from{transform:scale(1.01)}to{transform:scale(1.055)}}
@keyframes mist-drift{from{transform:translateX(-4%) translateY(2%)}to{transform:translateX(5%) translateY(-4%)}}
@keyframes glow{0%,100%{opacity:.5}25%{opacity:.8}65%{opacity:.55}80%{opacity:1}}
@keyframes flame{0%{transform:rotate(-5deg) scaleY(.95)}30%{transform:rotate(4deg) scaleY(1.05)}60%{transform:rotate(-2deg) scaleY(.98)}100%{transform:rotate(3deg) scaleY(1.06)}}
@keyframes motion-bar{to{transform:scaleY(.4)}}
@keyframes arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.page-shell{padding:38px 64px 30px}.ceremony{padding-bottom:40px}.offering{margin-top:46px}}
@media(max-width:700px){
 .page-shell{padding:22px 23px max(21px,env(safe-area-inset-bottom))}.masthead{gap:10px}.seal{width:33px;height:38px;font-size:20px}.identity{gap:11px}.identity-text{font-size:12px}.identity-text small{font-size:6px;letter-spacing:.2em;margin-top:6px}.motion-toggle{font-size:10px;letter-spacing:.04em;gap:8px}
 .scene-art{background-image:url('assets/funeral-hall-mobile-v2.png');background-position:50% center;inset:-2%}.scene-shade{background:linear-gradient(180deg,rgba(5,10,9,.36),rgba(8,12,10,.13) 25%,rgba(8,12,10,.10) 63%,rgba(8,12,10,.72)),radial-gradient(ellipse at 50% 43%,rgba(8,12,10,.23),transparent 74%)}
 .ceremony{min-height:650px;padding:54px 0 28px}.eyebrow{font-size:10px;margin-bottom:32px;gap:13px}.eyebrow span{width:21px}.addressee{font-size:23px;margin-bottom:15px;letter-spacing:.4em;padding-left:.4em}.statement{font-size:clamp(46px,12.9vw,78px);letter-spacing:.08em;padding-left:.08em;white-space:nowrap;line-height:1.55}
 .side-note{display:none}.ornament{margin:22px 0}.ornament span{width:43px}.verse{font-size:11px;letter-spacing:.22em}.offering{margin-top:35px}.votive{margin-bottom:14px}.offering-button{min-width:166px;min-height:46px;font-size:12px}.colophon{font-size:8px;gap:13px;letter-spacing:.09em}.colophon .end-mark{margin:0 5px}.colophon i{padding:0 2px}.candle-glow{width:45vw}.glow-left{left:-10%}.glow-right{right:-10%}
}
@media(max-width:380px){.page-shell{padding-left:18px;padding-right:18px}.identity-text small{font-size:5px}.motion-toggle{font-size:9px}.verse-dot{display:none}.mobile-break{display:initial}.ceremony{min-height:645px}.offering{margin-top:24px}}
@media(min-width:701px) and (max-height:800px){.page-shell{padding-top:24px;padding-bottom:20px}.ceremony{min-height:530px;padding:36px 0 24px}.eyebrow{margin-bottom:20px}.statement{font-size:88px}.offering{margin-top:19px}.votive{height:76px;margin-bottom:10px}.ornament{margin:15px 0}.addressee{font-size:27px;margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scene-art{will-change:auto}}