:root { --ink:#3b3033; --paper:#f7eeea; --violet:#916574; --deep:#30262a; --line:rgba(91,65,70,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow:hidden; background:var(--paper); color:var(--ink); font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-weight:300; }
.memorial-page { position:relative; height:100svh; min-height:620px; display:grid; grid-template-columns:40vw 1fr; align-items:center; padding:0; overflow:hidden; }
.ambient { position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse 58% 50% at 50% 12%,rgba(219,166,151,.24),transparent 70%),radial-gradient(circle at 9% 82%,rgba(126,135,151,.13),transparent 30%),radial-gradient(circle at 93% 74%,rgba(232,190,175,.3),transparent 32%),linear-gradient(145deg,#f1e4df,#f8f1ed 45%,#ece3e0); }
.ambient::before,.ambient::after { content:""; position:absolute; width:42vw; height:42vw; border:1px solid rgba(145,101,116,.1); border-radius:50%; }.ambient::before { top:-29vw; left:-13vw; }.ambient::after { right:-23vw; bottom:-31vw; }
.photo-frame { width:100%; height:100svh; min-height:0; position:relative; overflow:hidden; }
.static-photo { width:100%; height:100%; display:block; object-fit:cover; object-position:46% center; }
.eyebrow { margin:0 0 1.2rem; font-size:.67rem; font-weight:500; letter-spacing:.23em; text-transform:uppercase; }
h1,h2,.quote,#memory-text { font-family:Iowan Old Style,Baskerville,"Times New Roman",serif; font-weight:300; }
h1 { margin:0; font-size:clamp(4rem,10vw,8.5rem); line-height:.82; letter-spacing:-.045em; }
.years { margin:1.5rem 0 0; font-size:.77rem; letter-spacing:.24em; }
.years span { padding:0 .7em; opacity:.65; }
.remembrance { width:min(640px,100%); margin-left:clamp(2rem,7vw,8rem); margin-right:clamp(1.5rem,6vw,7rem); display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.remembrance .eyebrow { margin-top:clamp(1.2rem,3vh,2.4rem); color:var(--violet); }
.remembrance h1 { font-size:clamp(2.4rem,5.4vw,4.5rem); color:var(--ink); }
.remembrance .years { margin:.8rem 0 0; font-size:.66rem; color:#735d63; }
.place-line { margin:.75rem 0 0; color:#866a70; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.place-line span { padding:0 .45em; color:#b28b86; }
.remembrance .quote { max-width:620px; margin:0; color:var(--ink); font-size:clamp(1.12rem,2vw,1.55rem); line-height:1.3; }
h2 { margin:0; font-size:clamp(2.2rem,5vw,4.2rem); letter-spacing:-.025em; }
.lotus-mark { width:88px; margin:clamp(2.5rem,5vh,4.5rem) 0 clamp(1.6rem,3vh,2.6rem); }
.lotus-mark img { display:block; width:100%; opacity:.84; }
.memory-stage { width:100%; min-height:clamp(65px,10vh,105px); margin:.3rem 0 .2rem; display:flex; flex-direction:column; justify-content:center; opacity:1; transform:translateY(0); transition:opacity .9s ease,transform .9s ease; }
.memory-stage.is-changing { opacity:0; transform:translateY(7px); }
#memory-text { margin:0; font-size:clamp(1rem,1.8vw,1.35rem); line-height:1.38; }
#memory-name { margin:.55rem 0 0; font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:var(--violet); }
.memory-next { align-self:flex-start; width:28px; height:28px; margin:.1rem 0 0; border:0; padding:0; background:transparent; color:#80676d; font:300 1.25rem/1 Inter,"Helvetica Neue",Arial,sans-serif; cursor:pointer; transition:transform .2s ease,color .2s ease; }.memory-next:hover,.memory-next:focus-visible { color:var(--deep); transform:translateX(3px); }
.memory-link { margin-top:1.3rem; border:1px solid var(--deep); padding:.58rem 1.1rem; background:transparent; color:var(--deep); font:500 .68rem Inter,"Helvetica Neue",Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; transition:background .2s ease,color .2s ease; }.memory-link:hover,.memory-link:focus-visible { background:var(--deep); color:#fff; }
.legal-links { align-self:stretch; display:flex; justify-content:flex-end; gap:1.25rem; margin-top:clamp(3rem,7vh,6rem); font-size:.62rem; letter-spacing:.08em; }
.legal-links a { color:#80676d; text-decoration:none; border-bottom:1px solid transparent; }.legal-links a:hover,.legal-links a:focus-visible { border-color:currentColor; }
dialog { width:min(92vw,580px); padding:0; border:0; background:#f8f5f2; color:var(--ink); box-shadow:0 24px 90px rgba(26,19,30,.3); }
dialog::backdrop { background:rgba(24,18,28,.72); backdrop-filter:blur(5px); }
dialog[open] { animation:appear .4s ease; }
form { padding:clamp(1.45rem,3vw,2.25rem); }
form h2 { font-size:clamp(1.9rem,4vw,2.55rem); line-height:1; white-space:nowrap; }
.form-intro { margin:.35rem 0 1.15rem; color:#756d77; line-height:1.5; }
label { display:block; margin:.8rem 0 .35rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
label span { float:right; color:#988e99; font-size:.62rem; }
textarea,input { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:.8rem .2rem; background:transparent; color:var(--ink); font:1rem Inter,"Helvetica Neue",Arial,sans-serif; outline:none; }
textarea { resize:vertical; border:1px solid var(--line); padding:1rem; }
textarea:focus,input:focus { border-color:var(--violet); }
.submit { width:100%; margin-top:1.2rem; padding:.72rem; border:1px solid #121011; background:transparent; color:#121011; font:500 .7rem Inter,"Helvetica Neue",Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; transition:border-color .2s ease,color .2s ease; }.submit:hover,.submit:focus-visible { border-color:var(--violet); background:transparent; color:var(--violet); }
.close { position:absolute; right:1rem; top:.7rem; border:0; background:none; color:var(--ink); font:300 1.8rem serif; cursor:pointer; }
.prototype-note { margin:.9rem 0 0; text-align:center; color:#4e4045; font-size:.88rem; font-weight:400; line-height:1.4; }
.consent { display:flex; align-items:flex-start; gap:.55rem; margin:1.35rem 0 0; color:#756b73; font-size:.72rem; line-height:1.5; letter-spacing:0; text-transform:none; }
.consent input { width:auto; margin:.18rem 0 0; accent-color:var(--deep); }.consent a { color:var(--ink); }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.form-error { margin:1rem 0 0; color:#9a3e47; font-size:.78rem; }.submit:disabled { opacity:.55; cursor:wait; }
.confirmation { position:fixed; z-index:10; left:50%; top:50%; width:min(90vw,460px); transform:translate(-50%,-42%); padding:1.15rem 1.4rem; background:#121011; color:#fff; font-size:.94rem; line-height:1.45; text-align:center; opacity:0; pointer-events:none; transition:.5s ease; }
.confirmation.is-visible { opacity:1; transform:translate(-50%,-50%); }
@keyframes appear { from { opacity:0; transform:translateY(8px); } }
@media (max-width:700px) { body { overflow:auto; } .memorial-page { height:auto; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-start; padding:0 0 1.5rem; gap:1.25rem; overflow:visible; } .photo-frame { width:100%; height:auto; aspect-ratio:3 / 4; flex:none; } .remembrance { width:calc(100% - 1.8rem); margin:0 .9rem; align-items:center; text-align:center; } .remembrance .eyebrow { margin-bottom:.5rem; font-size:.56rem; } .remembrance h1 { font-size:clamp(2.25rem,10vw,3.5rem); } .remembrance .quote { font-size:clamp(1rem,4.6vw,1.25rem); margin:.7rem auto 0; } .lotus-mark { display:none; } .memory-stage { min-height:50px; margin:.6rem auto 0; } #memory-text { font-size:clamp(.88rem,3.7vw,1.05rem); } #memory-name { margin:.4rem 0 0; } .memory-next { align-self:center; } .memory-link { padding:.3rem .1rem; font-size:.63rem; } form h2 { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.slide,.quote,.memory-stage,.confirmation{transition-duration:.01ms!important}.slide{transform:none}.scroll-cue{display:none} }
@media (max-width:700px) { .place-line { font-size:.57rem; line-height:1.7; } .legal-links { align-self:auto; justify-content:center; margin-top:2.2rem; } }
.legal-page { min-height:100svh; overflow:auto; background:linear-gradient(145deg,#f1e4df,#f8f1ed 45%,#ece3e0); }
.legal-content { width:min(720px,calc(100% - 3rem)); margin:0 auto; padding:clamp(3rem,10vw,7rem) 0; color:var(--ink); }
.legal-content h1 { margin:0 0 .6rem; font-size:clamp(3rem,7vw,5.5rem); }.legal-content h1 span { font-size:.42em; letter-spacing:0; }
.legal-content h2 { margin:2.6rem 0 .65rem; font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.legal-content p { max-width:650px; margin:0; color:#584a4e; font-size:1rem; line-height:1.75; }.legal-content p + p { margin-top:1rem; }
.legal-content a { color:var(--ink); text-underline-offset:.2em; }.legal-content .back-link { display:inline-block; margin-bottom:4rem; font-size:.72rem; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }.legal-content .updated { color:#80676d; font-size:.76rem; }.legal-content footer { margin-top:4rem; font-size:.75rem; }
.admin-login form { width:min(360px,100%); margin-top:2.5rem; }.admin-login label,.memory-card label { display:block; margin-bottom:.5rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }.admin-login input { width:100%; }.admin-login .submit { margin-top:1.2rem; }.memory-card { margin:1.2rem 0; padding:1.4rem; border:1px solid var(--line); background:rgba(255,255,255,.28); }.memory-card blockquote { margin:0; font:1.25rem/1.5 Iowan Old Style,Baskerville,"Times New Roman",serif; }.memory-card p,.memory-card small { display:block; margin-top:.8rem; font-size:.76rem; }.memory-card .submission-label { color:#80676d; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }.memory-card form { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }.memory-card form label { width:100%; margin-top:.5rem; }.memory-card form textarea,.memory-card form input { width:100%; }.memory-card button { border:1px solid var(--deep); padding:.45rem .7rem; background:transparent; color:var(--deep); font-size:.68rem; cursor:pointer; }.memory-card button.danger { border-color:#9a3e47; color:#9a3e47; }.memory-card.compact { padding:1rem 1.2rem; }.status { display:inline-block; margin-bottom:.7rem; padding:.25rem .45rem; font-size:.61rem; letter-spacing:.09em; text-transform:uppercase; }.status.approved { background:#dce8da; color:#38613c; }.status.rejected { background:#f0dede; color:#8a373e; }