/* ============ TOKENS ============ */
:root{
  --black:#0a0a0a; --ink:#111; --cream:#f6f3ee; --cream-2:#efe9df;
  --gold:#f2b705; --gold-deep:#b8860b; --gold-light:#ffd34d;
  --orange:#e0681a; --burnt:#b8400f; --maroon:#7a1612; --maroon-d:#4a0b09;
  --text-d:#ece7df; --text-l:#2b2622;
  --serif:'Cinzel','Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Great Vibes','Playfair Display',cursive;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --gold-grad:linear-gradient(90deg,#b8860b,#f6c21b 45%,#d99a0b);
  --orange-grad:linear-gradient(180deg,#f2892a,#c4500f);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--black);color:var(--text-d);line-height:1.7;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html.is-loading,html.is-loading body{overflow:hidden;height:100%}

/* ============ LOADER ============ */
.loader{position:fixed;inset:0;z-index:1000;display:none}
.js .loader{display:block}
.loader__panel{position:absolute;left:0;right:0;height:50.5%;background:var(--black);transition:transform 1.1s var(--ease-io)}
.loader__panel--top{top:0}.loader__panel--bottom{bottom:0}
.loader__panel--top::after,.loader__panel--bottom::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--gold-grad)}
.loader__panel--top::after{bottom:0}.loader__panel--bottom::after{top:0}
.loader.is-open .loader__panel--top{transform:translateY(-101%)}
.loader.is-open .loader__panel--bottom{transform:translateY(101%)}
.loader__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.6rem,2vh,1.1rem);text-align:center;transition:opacity .5s ease,transform .8s var(--ease)}
.loader.is-open .loader__center{opacity:0;transform:scale(1.06)}
.loader__emblem{position:relative;width:clamp(110px,22vmin,170px);aspect-ratio:1;display:grid;place-items:center}
.loader__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1.5}
.ring-draw{fill:none;stroke:url(#gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ring 2.6s .2s var(--ease-io) forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.loader__symbol{width:42%;opacity:0;transform:scale(.6) rotate(-12deg);animation:symbol 1.2s .35s var(--ease) forwards;filter:drop-shadow(0 0 18px rgba(242,183,5,.25))}
@keyframes symbol{to{opacity:.95;transform:none}}
.loader__kicker{font-size:.7rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);opacity:0;animation:fade .9s .9s ease forwards}
@keyframes fade{to{opacity:1}}
.loader__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,6vmin,2.6rem);letter-spacing:.14em;line-height:1.15;color:#fff;display:flex;flex-direction:column;align-items:center}
.loader__line{display:flex;overflow:hidden;padding:.06em .02em}
.loader__line span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.loader__line:nth-child(1) span{animation-delay:calc(1s + var(--n,0)*.05s)}
.loader__line:nth-child(2) span{animation-delay:calc(1.25s + var(--n,0)*.05s)}
.loader__line:nth-child(3) span{animation-delay:calc(1.5s + var(--n,0)*.05s)}
.loader__line:nth-child(3){font-size:1.18em}
@keyframes rise{to{transform:none}}
.loader__years{font-family:var(--serif);font-size:1.05rem;letter-spacing:.3em;color:var(--gold);font-variant-numeric:tabular-nums;opacity:0;animation:fade .8s 1.8s ease forwards}
.loader__bar{width:min(220px,50vw);height:2px;background:rgba(255,255,255,.1);overflow:hidden;opacity:0;animation:fade .6s 1.8s ease forwards}
.loader__bar i{display:block;height:100%;width:0;background:var(--gold-grad)}

/* hero entrance is gated on the loader finishing */
.js .hero-in{opacity:0;transform:translateY(26px)}
.js .hero__photo{opacity:0;transform:scale(1.08)}
.js .adinkra{opacity:0}
.is-ready .hero-in{opacity:1;transform:none;transition:opacity 1.2s var(--ease) calc(var(--i,0)*.14s + .25s),transform 1.4s var(--ease) calc(var(--i,0)*.14s + .25s)}
.is-ready .hero__photo{opacity:1;transform:none;transition:opacity 1.8s ease .1s,transform 2.6s var(--ease) .1s}
.is-ready .adinkra{opacity:.9;transition:opacity 1.6s ease .9s}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:flex-end;align-items:center;padding:.9rem clamp(1rem,4vw,3rem);transition:background .4s,transform .5s var(--ease),backdrop-filter .4s;transform:translateY(-110%)}
.is-ready .nav{transform:none;transition-delay:1.4s,1.4s,0s}
.nav.is-solid{background:rgba(10,10,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition-delay:0s}
.nav__brand{font-family:var(--serif);letter-spacing:.2em;font-size:.8rem;text-transform:uppercase;color:#fff}
.nav ul{display:flex;gap:clamp(.8rem,2.4vw,2rem)}
.nav a{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);position:relative;padding:.4rem 0}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav ul a:hover::after,.nav ul a:focus-visible::after{transform:scaleX(1)}
.nav ul a:hover{color:var(--gold)}

/* ============ LAYOUT HELPERS ============ */
.wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}
.wrap.narrow{width:min(820px,100% - 2.5rem)}
.center{text-align:center}
section{position:relative}
.cream{background:linear-gradient(180deg,#fdfbf8,var(--cream) 60%,var(--cream-2));color:var(--text-l);padding:clamp(4rem,9vw,7rem) 0}
.dark{background:radial-gradient(120% 70% at 50% 0%,#1a1a1a,var(--black) 70%);padding:clamp(4rem,9vw,7rem) 0}
.cinzel{font-family:var(--serif);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.cinzel.bold{font-weight:700}.cinzel.light{font-weight:400;letter-spacing:.1em}
.cinzel.big{font-size:clamp(2.2rem,6vw,3.8rem)}
.gold-grad,.orange-grad{background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700}
.gold-grad{background-image:linear-gradient(180deg,#f8d36a,#c4500f)}
.orange-grad{background-image:var(--orange-grad)}
.kicker,.gold-label,.orange-label{font-size:.72rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase}
.gold-label{color:var(--gold)}
.orange-label{color:var(--burnt)}
.script{font-family:var(--script);font-size:clamp(2rem,5vw,3rem);color:var(--burnt);line-height:1.2}
.script.gold{color:var(--gold)}
.sec-head{margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec-head h2{font-size:clamp(1.9rem,5vw,3.1rem)}
.sec-head h2.light{color:#2a2a2a}
.flourish{width:150px;height:20px;margin:.9rem auto 0;display:block;overflow:visible}
.flourish path{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease-io) .3s}
.flourish.orange path{stroke:var(--orange)}.flourish.gold path{stroke:var(--gold-light)}
.is-in .flourish path,.flourish.is-in path{stroke-dashoffset:0}
.ribbon{font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2rem}
.ribbon span{display:inline-block;padding:.65rem 4rem .65rem 1.4rem;color:#1a0f08;background:linear-gradient(90deg,var(--burnt),#f08a24 70%,rgba(246,160,60,0));clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease-io) .2s}
.is-in.ribbon span,.is-in .ribbon span{clip-path:inset(0 0 0 0)}
.center .ribbon,.tribute .ribbon{text-align:left}
.dropcap::first-letter{font-family:var(--serif);font-size:3.4em;float:left;line-height:.9;margin:.06em .12em 0 0;color:var(--orange);font-weight:700}
p+p{margin-top:1em}
b{font-weight:700}.orange{color:var(--orange)}

/* ============ SCROLL REVEAL ============ */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .polaroid.reveal{transform:translateY(50px) rotate(0deg) scale(.96)}
.js .polaroid.reveal.is-in{transform:rotate(var(--r)) scale(1)}

/* ============ HERO ============ */
.hero{min-height:100svh;background:var(--black);overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.25rem clamp(2.2rem,5vh,3.5rem)}
.hero__photo{position:relative;flex:1 1 0;min-height:32svh;width:min(640px,100%);will-change:transform;margin-bottom:-3.2rem}
.hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;-webkit-mask-image:linear-gradient(#000 62%,transparent 98%);mask-image:linear-gradient(#000 62%,transparent 98%)}
.adinkra{position:absolute;width:clamp(90px,14vw,170px);z-index:1;pointer-events:none}
.adinkra--tl{top:0;left:0}
.adinkra--br{bottom:0;right:0;transform:rotate(180deg)}
.hero__text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero .kicker{color:#fff;font-size:.78rem;letter-spacing:.42em}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6.4vw,4.4rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.02;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero__title span{font-size:1.12em}
.hero__aka{display:flex;align-items:center;gap:1rem;width:min(520px,90vw);justify-content:center;font-size:.85rem;color:rgba(255,255,255,.75);margin-top:.3rem}
.hero__aka i{flex:1;height:1px;background:rgba(255,255,255,.4)}
.hero__aka b{color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.hero__years{font-family:var(--serif);font-weight:600;letter-spacing:.3em;color:#fff;font-size:1.1rem;width:min(460px,86vw);padding:.35rem 0;margin-top:.4rem;background:linear-gradient(90deg,#9a6f08,#f6c21b 50%,#9a6f08);color:#1a1205;display:flex;justify-content:center;gap:1.2rem}
.hero__date{font-weight:700;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.8rem,2vw,1rem);margin-top:.5rem}
.scroll-cue{position:absolute;bottom:.9rem;left:50%;translate:-50% 0;width:22px;height:36px;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;z-index:3}
.scroll-cue span{position:absolute;top:7px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 2s ease}
.is-ready .dust{opacity:1}
main,.foot{position:relative;z-index:1}

/* ============ CELEBRATION OF LIFE ============ */
.life__grid{display:grid;justify-items:center;text-align:center;gap:1.4rem;margin-bottom:3rem}
.gold-ring{width:min(300px,70vw);aspect-ratio:1;border-radius:50%;padding:7px;background:linear-gradient(135deg,#8a5d05,#ffd966 40%,#a8720a 70%,#f0c14a);box-shadow:0 20px 60px rgba(120,80,10,.28)}
.gold-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:5px solid #fff}
.gold-ring.small{width:clamp(120px,22vw,190px);flex:none}
.life__title .cinzel{font-size:clamp(1.8rem,5vw,3.2rem);color:#111}
.life__title .orange-label{margin-top:.8rem}
.sun{font-size:.9rem;color:#555;margin-top:.4rem}
.arr{max-width:720px;margin-inline:auto}
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:5px;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(var(--orange),rgba(224,104,26,.15));transform:scaleY(0);transform-origin:top;transition:transform 2s var(--ease-io) .3s}
.arr.is-in .timeline::before{transform:scaleY(1)}
.timeline li{position:relative;padding-bottom:1.5rem}
.timeline li::before{content:"";position:absolute;left:-2rem;top:.4rem;width:12px;height:12px;background:var(--orange);transform:rotate(45deg) scale(0);transition:transform .6s var(--ease) calc(.4s + var(--k,0)*.25s)}
.arr.is-in .timeline li::before{transform:rotate(45deg) scale(1)}
.timeline li:nth-child(2){--k:1}.timeline li:nth-child(3){--k:2}.timeline li:nth-child(4){--k:3}.timeline li:nth-child(5){--k:4}
.timeline b{color:var(--burnt);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;display:block}
.timeline p{margin:.1rem 0 0;color:#3a342e}

/* ============ BIOGRAPHY / OBIT ============ */
.cols{columns:2 320px;column-gap:2.5rem;text-align:justify;hyphens:auto}
.cols p{break-inside:avoid-column}
.cols>div{break-inside:auto}
.bio .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 2.5rem;columns:auto}
.bio__head{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2rem}
.bio__head .aka{font-size:.85rem;margin-top:.8rem;color:#555}.bio__head .aka b{color:var(--burnt);text-transform:uppercase;letter-spacing:.1em}
.quote-bar{font-style:italic;font-weight:500;padding:.7rem 1.3rem;margin-bottom:2rem;background:linear-gradient(90deg,var(--burnt),#f4a340 75%,rgba(244,163,64,0));color:#1a0f08;max-width:560px}
.obit{padding-top:0}
.obit .cinzel{margin-bottom:1.2rem}
.obit__grid{display:grid;grid-template-columns:1fr minmax(200px,300px);gap:2.5rem;align-items:start;text-align:justify}
.frame{padding:5px;background:linear-gradient(135deg,#a8720a,#ffd966,#a8720a);box-shadow:0 18px 40px rgba(0,0,0,.25);transition:transform .8s var(--ease)}
.frame:hover{transform:rotate(-1.5deg) scale(1.02)}
.frame img{width:100%;height:auto}
.verse{margin-top:3.5rem;padding-top:2rem;border-top:1px solid #d8cfc0;text-align:center}
.verse p:first-child{font-style:italic;color:#444;font-size:1.05rem}
.verse b{color:var(--burnt)}
.invite{margin-top:1.6rem;font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--burnt)}

/* ============ TRIBUTES ============ */
.maroon{min-height:100svh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(90% 80% at 50% 40%,#8c1a15,var(--maroon-d));padding:5rem 1rem}
.tribute-intro__photo{position:absolute;inset:0;display:grid;place-items:center;opacity:.28;mix-blend-mode:screen}
.tribute-intro__photo img{height:100%;width:auto;max-width:none;filter:sepia(1) hue-rotate(-30deg) saturate(2.4);transform:scale(1.05);transition:transform 2s var(--ease)}
.q{position:absolute;font-family:var(--serif);font-size:clamp(5rem,14vw,9rem);color:var(--gold);line-height:1}
.q--open{top:4%;left:6%}.q--close{bottom:6%;right:6%}
.tribute-intro__box{position:relative;border:2px solid #fff;width:clamp(120px,22vw,190px);height:clamp(360px,64vh,520px);display:grid;place-items:center}
.tribute-intro__box h2{writing-mode:vertical-rl;rotate:180deg;font-weight:400;font-size:clamp(1.9rem,4.4vw,3.3rem);letter-spacing:.14em;color:#fff;white-space:nowrap}
.tribute-intro__by{position:absolute;left:calc(50% - clamp(120px,20vw,170px));bottom:calc(50% - clamp(180px,32vh,260px));writing-mode:vertical-rl;rotate:180deg;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}
.tribute-intro__by p:first-child{color:var(--gold);font-weight:500}
.tribute-intro__by b{color:#fff;letter-spacing:.34em}
.tribute .cols{text-align:justify;color:#e4dfd7}
.tribute .ribbon{margin-top:0}
.salute{color:var(--orange);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem}
.gold-quote{color:var(--gold);font-style:italic}
.tribute__more{margin-top:1.5rem}
.rest{font-style:italic;color:#cfc9bf;margin-top:2.4rem}
.ewe{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1.5rem;color:var(--orange);margin-top:.3rem}
.tribute .script{font-size:2.8rem;margin-top:.5rem}
.signed{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12)}
.signed .gold-label{margin-bottom:.6rem}

/* ============ MEMORIES ============ */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,2rem);max-width:860px;margin-inline:auto}
.polaroid{background:#fff;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:transform .7s var(--ease),box-shadow .7s}
.polaroid img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.polaroid.is-in:hover{transform:rotate(0) scale(1.04) translateY(-6px);box-shadow:0 30px 70px rgba(242,183,5,.18),0 20px 50px rgba(0,0,0,.7);z-index:2}
.caption{text-align:center;margin-top:2.4rem;font-style:italic;color:#9a948a;font-size:.85rem}

/* ============ FAMILY ============ */
.family__head{margin-bottom:2.4rem}
.family__head .cinzel{margin-bottom:1.2rem}
.big-label{margin:2.4rem 0 1rem;font-size:.95rem;letter-spacing:.24em}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-flow:row;gap:.5rem 2rem;font-size:.95rem}
.names li{padding-left:.9rem;position:relative;transition:transform .4s var(--ease),color .3s}
.names li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;background:var(--orange);transform:rotate(45deg)}
.names li:hover{transform:translateX(6px);color:var(--burnt)}

/* ============ MOURNERS ============ */
.mourner-list{display:grid;gap:1.3rem}
.mourner-list li{padding-left:1.1rem;border-left:3px solid var(--orange);font-size:.98rem;transition:border-color .4s,background .4s,padding .4s var(--ease)}
.mourner-list li:hover{border-color:var(--gold);padding-left:1.5rem;background:linear-gradient(90deg,rgba(242,183,5,.08),transparent)}
.mourner-list b{color:var(--orange)}

/* ============ APPRECIATION ============ */
.appreciation{overflow:hidden;padding-bottom:7rem}
.appreciation .adinkra{opacity:.9}
.appreciation__photo{width:min(340px,70vw);margin:0 auto 1.4rem;aspect-ratio:1/1.15;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.appreciation__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.appreciation h2{font-size:clamp(2rem,6vw,3.4rem);color:#fff}
.gold-rule{display:block;width:120px;height:3px;margin:1rem auto 1.8rem;background:var(--gold-grad)}
.appreciation__text{color:#ddd7cd;max-width:640px;margin:0 auto 2.6rem}
.appreciation .gold-label{margin-bottom:1.2rem}
.appreciation h3{font-size:clamp(1.4rem,4vw,2.1rem);color:#fff;margin-bottom:.8rem}
.gold-bar{display:inline-block;padding:.35rem 3rem;font-family:var(--serif);font-weight:700;letter-spacing:.24em;color:#1a1205;background:linear-gradient(90deg,#9a6f08,#f6c21b 50%,#9a6f08)}
.foot{background:#000;text-align:center;padding:2.4rem 1rem 3rem;border-top:1px solid rgba(255,255,255,.08)}
.foot .cinzel{letter-spacing:.22em;font-size:.85rem;color:#ddd}
.foot__aka{font-size:.6rem;letter-spacing:.34em;color:var(--gold);margin-top:.2rem}

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  .nav ul{display:none}
  .scroll-cue{display:none}
  .obit__grid{grid-template-columns:1fr}
  .obit__grid figure{max-width:280px;margin:0 auto;order:-1}
  .cols{text-align:left;hyphens:manual}
  .bio__head{flex-direction:column-reverse;align-items:flex-start}
  .tribute-intro__by{left:calc(50% - 110px)}
  .hero__photo{min-height:30svh}
}
@media (max-width:480px){.gallery{gap:.7rem}.polaroid{padding:4px}}

/* ============ REDUCED MOTION / NO JS ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{display:none!important}
  .js .reveal,.js .hero-in,.js .hero__photo,.js .adinkra{opacity:1!important;transform:none!important;transition:none!important}
  .js .polaroid.reveal{transform:rotate(var(--r))!important}
  .ribbon span{clip-path:none}.flourish path{stroke-dashoffset:0;transition:none}
  .timeline::before{transform:none;transition:none}.timeline li::before{transform:rotate(45deg);transition:none}
  .scroll-cue span{animation:none}.nav{transform:none}.dust{display:none}
}