/* ═══════════ In Memory of Lucky — felt & gold ═══════════ */

:root{
  --felt:#1e5b39;
  --felt-deep:#123a24;
  --felt-card:#1a5132;
  --felt-line:#2e7048;
  --gold:#e9cd3f;
  --gold-dim:#c9ad2e;
  --gold-pale:#f4e37a;
  --red:#a93a2c;
  --red-deep:#822a1f;
  --chalk:#eef3ea;
  --chalk-dim:#c9d8c6;
  --slab:'Alfa Slab One', serif;
  --body:'Quicksand', sans-serif;
  --quote:'Playfair Display', serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--body);
  color:var(--chalk);
  background-color:var(--felt);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 20%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse 140% 120% at 50% 55%, transparent 40%, rgba(0,0,0,.38) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment:fixed;
  line-height:1.7;
  overflow-x:hidden;
}

::selection{background:var(--gold); color:var(--felt-deep)}

/* ── printed gold frame ── */
.frame{
  position:fixed; inset:10px; pointer-events:none; z-index:60;
  border:1px solid rgba(233,205,63,.75);
  outline:2px solid rgba(233,205,63,.45);
  outline-offset:5px;
}
.frame::before,.frame::after{
  content:"◆"; position:absolute; color:var(--gold);
  font-size:11px; opacity:.8; line-height:1;
}
.frame::before{top:8px; left:10px; transform:scaleX(-1)}
.frame::after{top:8px; right:10px}
@media (max-width:640px){ .frame{inset:6px} .frame::before,.frame::after{display:none} }

/* ── hero ── */
.hero{
  min-height:96vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:9vh 20px 6vh; position:relative;
}

.rays{
  width:min(680px, 94vw); height:auto; margin-bottom:calc(min(680px,94vw) * -0.24);
  overflow:visible;
}
.rays line{stroke:var(--gold); stroke-width:1.6; opacity:.85}
.rays circle{fill:var(--gold)}

.clover-hero{
  width:min(300px, 58vw); height:auto; position:relative; z-index:2;
  filter:drop-shadow(0 0 24px rgba(233,205,63,.28));
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 0 18px rgba(233,205,63,.22))}
  50%{filter:drop-shadow(0 0 34px rgba(233,205,63,.42))}
}
@media (prefers-reduced-motion: reduce){ .clover-hero{animation:none} }
.clover-hero g{fill:var(--gold)}

/* red plaque */
.plaque{
  margin-top:34px; position:relative; z-index:3;
  background:linear-gradient(180deg, #b23f30, var(--red) 45%, var(--red-deep));
  border-radius:60px;
  padding:14px 42px 12px;
  display:flex; align-items:center; gap:26px;
  box-shadow:
    0 0 0 3px var(--red-deep),
    0 0 0 5px var(--gold),
    0 10px 30px rgba(0,0,0,.45);
}
.plaque h1{
  font-family:var(--slab);
  font-size:clamp(2.6rem, 9vw, 4.6rem);
  letter-spacing:.06em;
  color:var(--chalk);
  text-shadow:0 3px 0 rgba(0,0,0,.25);
  font-weight:400;
}
.plaque-clover{width:clamp(26px,4.5vw,40px); height:auto; opacity:.9}
.plaque-clover g{fill:var(--chalk)}
@media (max-width:520px){ .plaque{gap:14px; padding:12px 26px 10px} }

/* yellow ribbon */
.ribbon{margin-top:26px; display:flex; align-items:center; position:relative; z-index:2}
.ribbon-body{
  background:var(--gold);
  color:#134a2c;
  font-family:var(--slab); font-weight:400;
  font-size:clamp(.8rem, 2.6vw, 1.15rem);
  letter-spacing:.14em;
  padding:9px 26px 7px;
  border-top:2px solid var(--red); border-bottom:2px solid var(--red);
}
.ribbon-end{width:30px; align-self:stretch; margin-top:7px; margin-bottom:-7px; background:var(--gold-dim); position:relative}
.ribbon-end.left{clip-path:polygon(100% 0, 100% 100%, 0 100%, 34% 50%, 0 0)}
.ribbon-end.right{clip-path:polygon(0 0, 0 100%, 100% 100%, 66% 50%, 100% 0)}

.dates{
  margin-top:30px; font-size:clamp(1rem, 3vw, 1.25rem); letter-spacing:.22em;
  color:var(--gold-pale); font-weight:700;
}
.epitaph{
  margin-top:10px; color:var(--chalk-dim); font-size:clamp(.98rem, 2.6vw, 1.12rem);
  letter-spacing:.04em;
}

.hero-nav{
  margin-top:42px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  font-weight:700; letter-spacing:.12em; font-size:.85rem; text-transform:uppercase;
}
.hero-nav a{color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
.hero-nav a:hover{border-bottom-color:var(--gold)}
.hero-nav span{color:var(--gold-dim); font-size:.7rem; align-self:center}

.scroll-cue{
  margin-top:40px; color:var(--gold); font-size:1.5rem; text-decoration:none; opacity:.75;
  animation:drift 2.6s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion: reduce){ .scroll-cue{animation:none} }

/* corner starbursts (fireworks) */
.burst{position:absolute; width:130px; height:130px; opacity:.5; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 120 120'%3E%3Cg stroke='%23e9cd3f' stroke-width='2'%3E%3Cline x1='0' y1='-18' x2='0' y2='-56'/%3E%3Cline x1='0' y1='18' x2='0' y2='56'/%3E%3Cline x1='-18' y1='0' x2='-56' y2='0'/%3E%3Cline x1='18' y1='0' x2='56' y2='0'/%3E%3Cline x1='-13' y1='-13' x2='-38' y2='-38' stroke='%23a93a2c'/%3E%3Cline x1='13' y1='13' x2='38' y2='38' stroke='%23a93a2c'/%3E%3Cline x1='13' y1='-13' x2='38' y2='-38'/%3E%3Cline x1='-13' y1='13' x2='-38' y2='38'/%3E%3Cline x1='-6' y1='-16' x2='-16' y2='-46' stroke-width='1'/%3E%3Cline x1='6' y1='16' x2='16' y2='46' stroke-width='1'/%3E%3Cline x1='16' y1='-6' x2='46' y2='-16' stroke-width='1'/%3E%3Cline x1='-16' y1='6' x2='-46' y2='16' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
.burst-tl{top:6vh; left:5vw}
.burst-tr{top:9vh; right:6vw; transform:scale(.7) rotate(20deg)}
.burst-bl{bottom:12vh; left:8vw; transform:scale(.85) rotate(-15deg)}
.burst-br{bottom:8vh; right:5vw; transform:scale(.6) rotate(35deg)}
@media (max-width:760px){ .burst{width:80px;height:80px} .burst-bl,.burst-br{display:none} }

/* ── sections ── */
.section{max-width:1020px; margin:0 auto; padding:72px 24px}
.section.slim{max-width:720px}

.ornate{
  font-family:var(--slab); font-weight:400;
  font-size:clamp(1.7rem, 5vw, 2.5rem);
  letter-spacing:.08em; text-align:center; color:var(--chalk);
  display:flex; align-items:center; justify-content:center; gap:18px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
  margin-bottom:14px;
}
.ornate.small{font-size:clamp(1.25rem, 4vw, 1.7rem); margin-top:84px}
.orn{
  flex:0 1 150px; height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'%3E%3Cg fill='none' stroke='%23eef3ea' stroke-width='1.4'%3E%3Cline x1='0' y1='7' x2='118' y2='7'/%3E%3Crect x='121' y='2.4' width='9.2' height='9.2' transform='rotate(45 125.6 7)'/%3E%3Crect x='136' y='4' width='6' height='6' transform='rotate(45 139 7)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; background-position:right center;
  opacity:.9;
}
.orn.flip{transform:scaleX(-1)}

.section-sub{
  text-align:center; color:var(--chalk-dim); margin-bottom:40px; font-size:1.02rem;
  letter-spacing:.03em;
}

.prose{max-width:760px; margin:26px auto 0; font-size:1.09rem}
.prose p{margin-bottom:1.3em}
.prose strong{color:var(--gold-pale); font-weight:700}
.prose em{color:var(--chalk)}

.quote{
  max-width:680px; margin:46px auto 0; text-align:center; position:relative;
  padding:30px 28px 24px;
  border-top:1px solid var(--gold); border-bottom:1px solid var(--gold);
}
.quote::before,.quote::after{
  content:"◆"; position:absolute; left:50%; transform:translate(-50%,-50%);
  color:var(--gold); background:var(--felt); padding:0 12px; font-size:.7rem;
}
.quote::before{top:0}
.quote::after{top:100%}
.quote blockquote{
  font-family:var(--quote); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem, 3.2vw, 1.45rem);
  color:var(--gold); line-height:1.6;
}
.quote figcaption{margin-top:14px; color:var(--chalk-dim); letter-spacing:.08em; font-size:.9rem}

.divider{display:flex; align-items:center; gap:14px; max-width:520px; margin:10px auto; color:var(--gold); opacity:.75}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--gold)}
.divider span{font-size:.8rem}

.story-photo{max-width:460px; margin:46px auto 0; text-align:center}
.story-photo img{
  width:100%; display:block;
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(233,205,63,.35); outline-offset:5px;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.story-photo figcaption{
  margin-top:16px; color:var(--chalk-dim); font-style:italic; font-size:.95rem; letter-spacing:.04em;
}

/* ── gallery ── */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:20px;
}
@media (max-width:760px){ .grid{grid-template-columns:repeat(2, 1fr); gap:10px} }

.tile{
  position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer;
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(233,205,63,.35); outline-offset:4px;
  background:var(--felt-deep);
  padding:0;
}
.tile img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, opacity .4s ease}
.tile:hover img{transform:scale(1.045)}
.tile:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.tile .year{
  position:absolute; left:8px; bottom:8px;
  background:rgba(18,58,36,.85); color:var(--gold-pale);
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  padding:3px 9px 2px; border:1px solid var(--gold-dim);
}
.tile .play{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.tile .play span{
  width:58px; height:58px; border-radius:50%;
  background:rgba(18,58,36,.75); border:2px solid var(--gold);
  display:grid; place-items:center; color:var(--gold); font-size:1.4rem;
  padding-left:5px;
}

/* ── memory wall ── */
.memory-wall{columns:2 300px; column-gap:18px; max-width:920px; margin:0 auto}
.memory{
  break-inside:avoid; margin-bottom:18px;
  background:linear-gradient(180deg, var(--felt-card), #174929);
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(233,205,63,.25); outline-offset:3px;
  padding:22px 24px 18px; position:relative;
}
.memory .m-clover{width:18px; opacity:.85; margin-bottom:10px}
.memory .m-clover g{fill:var(--gold)}
.memory p{font-size:1.01rem; white-space:pre-line}
.memory .who{
  margin-top:14px; color:var(--gold-pale); font-weight:700; letter-spacing:.1em;
  font-size:.82rem; text-transform:uppercase;
}
.memory .when{color:var(--chalk-dim); font-size:.78rem; letter-spacing:.06em; margin-top:2px}

.wall-empty{
  text-align:center; color:var(--chalk-dim); font-style:italic; padding:34px 20px;
  border:1px dashed var(--gold-dim); max-width:560px; margin:0 auto;
}

/* ── forms ── */
.card-form{
  max-width:640px; margin:0 auto;
  background:linear-gradient(180deg, var(--felt-card), #174929);
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(233,205,63,.25); outline-offset:4px;
  padding:34px 34px 28px;
}
@media (max-width:560px){ .card-form{padding:24px 18px} }

.card-form label{
  display:block; font-family:var(--slab); font-weight:400; font-size:.85rem;
  letter-spacing:.14em; color:var(--gold); margin:18px 0 8px;
}
.card-form label:first-child{margin-top:0}
.card-form .opt{font-family:var(--body); color:var(--chalk-dim); letter-spacing:.03em; text-transform:none; font-size:.8rem}
.card-form input[type=text], .card-form input[type=email], .card-form textarea{
  width:100%; background:rgba(10,32,19,.55); color:var(--chalk);
  border:1px solid var(--felt-line); padding:12px 14px; font-family:var(--body);
  font-size:1rem; resize:vertical; border-radius:2px;
}
.card-form input:focus, .card-form textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}

.btn{
  margin-top:24px; display:inline-flex; align-items:center; gap:12px;
  background:linear-gradient(180deg, #b23f30, var(--red) 45%, var(--red-deep));
  color:var(--chalk); border:none; cursor:pointer;
  font-family:var(--slab); font-weight:400; font-size:1rem; letter-spacing:.1em;
  padding:14px 30px 12px; border-radius:40px;
  box-shadow:0 0 0 2px var(--red-deep), 0 0 0 4px var(--gold), 0 6px 18px rgba(0,0,0,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 0 0 2px var(--red-deep), 0 0 0 4px var(--gold-pale), 0 9px 22px rgba(0,0,0,.45)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6; cursor:default; transform:none}
.btn-clover{width:20px; height:20px}
.btn-clover g{fill:var(--chalk)}

.fineprint{margin-top:16px; color:var(--chalk-dim); font-size:.82rem; font-style:italic}

.form-done{
  text-align:center; padding:30px 10px;
}
.form-done .big{color:var(--gold); font-family:var(--quote); font-style:italic; font-size:1.3rem; margin-bottom:8px}
.form-done p{color:var(--chalk-dim)}
.form-error{margin-top:14px; color:#f0b9ae; font-size:.9rem}

/* ── footer ── */
footer{
  text-align:center; padding:70px 20px 90px; margin-top:40px;
  border-top:1px solid rgba(233,205,63,.4);
}
.foot-clover{width:44px; opacity:.9}
.foot-clover g{fill:var(--gold)}
.foot-line{
  margin-top:14px; font-family:var(--quote); font-style:italic; font-size:1.25rem; color:var(--gold-pale);
}
.foot-small{margin-top:10px; color:var(--chalk-dim); font-size:.85rem; letter-spacing:.08em}

/* ── lightbox ── */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(7,22,13,.94);
  display:flex; align-items:center; justify-content:center;
}
.lightbox[hidden]{display:none}
.lb-stage{max-width:min(92vw, 1100px); max-height:86vh; display:flex; align-items:center; justify-content:center}
.lb-stage img, .lb-stage video{
  max-width:100%; max-height:86vh; object-fit:contain;
  border:1px solid var(--gold-dim); outline:1px solid rgba(233,205,63,.3); outline-offset:5px;
  background:var(--felt-deep);
}
.lb-close,.lb-prev,.lb-next{
  position:fixed; background:none; border:none; color:var(--gold); cursor:pointer;
  font-size:2.2rem; line-height:1; padding:14px; z-index:101; font-family:var(--body);
}
.lb-close{top:18px; right:22px}
.lb-prev{left:6px; top:50%; transform:translateY(-50%); font-size:3.4rem}
.lb-next{right:6px; top:50%; transform:translateY(-50%); font-size:3.4rem}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:var(--gold-pale)}

/* reveal on scroll */
body.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
body.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }