* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#101010; --panel:#171717; --ink:#e8e5e0; --muted:#aaa6a0; --line:#625e59; }
html { scroll-behavior:smooth; }
body { margin:0; background:#090909; color:var(--ink); font-family:Inter,Arial,sans-serif; font-weight:300; }
.memorial { position:relative; width:min(100%, 900px); min-height:100vh; margin:0 auto; padding:44px clamp(20px,6vw,72px) 34px; overflow:hidden; background:radial-gradient(ellipse at 50% 5%,#242424 0,#141414 42%,#0d0d0d 100%); }
.memorial:before,.memorial:after { content:""; position:absolute; pointer-events:none; width:260px; height:520px; opacity:.09; filter:grayscale(1); background:radial-gradient(ellipse at center, #bdbdbd 0 2%, transparent 65%); }
.memorial:before { right:-190px; top:280px; transform:rotate(30deg); }
.memorial:after { left:-210px; bottom:100px; transform:rotate(-30deg); }
.top-note { display:flex; align-items:center; gap:12px; color:#c9c5bf; font:italic 20px/1.15 "Cormorant Garamond",serif; }
.sprig { font-size:42px; line-height:1; }
.hero { text-align:center; padding:34px 0 8px; }
.portrait-wrap { width:min(270px,72vw); aspect-ratio: .88; margin:0 auto 22px; padding:6px; border:1px solid #aaa49d; background:#242424; box-shadow:0 12px 40px #0008; }
.portrait-wrap img { width:100%; height:100%; display:block; object-fit:cover; filter:grayscale(1); }
.eyebrow { margin:0 0 3px; color:#aaa49d; text-transform:uppercase; letter-spacing:.24em; font-size:10px; }
h1,h2,.quote,.farewell { font-family:"Cormorant Garamond",Georgia,serif; font-weight:400; }
h1 { margin:0; font-size:clamp(48px,9vw,76px); line-height:1; font-style:italic; letter-spacing:-.025em; }
.dates { display:flex; justify-content:center; align-items:center; gap:16px; margin:15px 0 20px; color:#d3d0cb; font:400 clamp(16px,3vw,22px) "Cormorant Garamond",serif; }
.cross { font-size:25px; color:#aaa49d; }
.quote { max-width:540px; margin:0 auto; color:#bdb8b1; font-size:22px; font-style:italic; }
.ornament { display:flex; align-items:center; justify-content:center; gap:14px; margin:34px 0 22px; color:#aaa49d; font-size:25px; }
.ornament span { height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line)); }
.ornament span:last-child { transform:scaleX(-1); }
section { text-align:center; }
h2 { margin:0 0 10px; font-size:36px; font-style:italic; }
.story p { max-width:650px; margin:0 auto; color:#d0ccc6; font:400 21px/1.55 "Cormorant Garamond",Georgia,serif; }
.section-intro { margin:0 0 20px; color:var(--muted); font-size:12px; letter-spacing:.04em; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery figure { margin:0; }
.gallery img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:1px solid #77716a; padding:3px; background:#242424; filter:grayscale(1); }
.gallery figcaption { margin-top:7px; color:#aaa49d; font:italic 16px "Cormorant Garamond",serif; }
footer { text-align:center; padding-top:4px; }
.farewell { margin:0 0 18px; font-size:29px; font-style:italic; }
.candle { position:relative; width:42px; height:70px; margin:0 auto 18px; }
.wax { position:absolute; bottom:0; left:7px; width:28px; height:48px; border-radius:5px 5px 3px 3px; background:linear-gradient(90deg,#777,#e4e1dc 45%,#aaa); box-shadow:0 8px 22px #0009; }
.flame { position:absolute; z-index:1; top:0; left:16px; width:11px; height:20px; border-radius:80% 0 80% 80%; transform:rotate(45deg); background:#eee9d8; box-shadow:0 0 18px 7px #d5c9a455; }
.footer-small { margin:0; color:#77716a; text-transform:uppercase; letter-spacing:.2em; font-size:9px; }
@media (max-width:560px) {
 .memorial { padding:26px 20px 28px; }
 .top-note { font-size:17px; }
 .hero { padding-top:25px; }
 .portrait-wrap { width:min(220px,68vw); }
 .dates { gap:10px; }
 .quote { font-size:19px; }
 .ornament { margin:27px 0 18px; }
 h2 { font-size:31px; }
 .story p { font-size:19px; }
 .gallery { grid-template-columns:repeat(2,1fr); gap:14px; }
 .farewell { font-size:25px; }
}