/* Memorial page (memorial.html): the page a QR plaque opens. Needs tokens.css and base.css.
   Built phone-first, since most visitors arrive by scanning at the grave. */

[hidden]{display:none!important}

/* ---------- Sample banner + nav ---------- */
.sample-bar{position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center;
  padding:9px var(--gutter);font-size:13px;color:#1a1208;background:var(--gold);text-align:center}
.sample-bar a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.memorial .nav{position:relative}

/* ---------- Header: portrait, name, dates ---------- */
.mem-hero{text-align:center;padding:24px var(--gutter) 88px;
  background:radial-gradient(55% 60% at 50% 20%,var(--bg-glow),transparent 75%)}
.portrait{width:168px;height:168px;margin:0 auto 28px;border-radius:50%;padding:5px;
  background:conic-gradient(from 200deg,var(--gold),var(--gold-hi),var(--gold),#7a5a24,var(--gold));
  box-shadow:0 0 60px rgba(212,162,76,.25)}
.portrait>*{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#3a2c1a,#15110c);font-family:var(--serif);font-size:56px;color:var(--gold-hi);letter-spacing:.04em}
.mem-hero .eyebrow{margin-bottom:18px}
.mem-name{font-family:var(--serif);font-weight:500;font-size:clamp(44px,9vw,84px);line-height:1.02}
.mem-dates{margin-top:14px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mem-quote{margin:26px auto 0;max-width:520px;font-family:var(--serif);font-style:italic;font-size:clamp(21px,3vw,26px);line-height:1.4;color:var(--ink)}

.mem-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);
  font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:rgba(244,237,225,.03);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chip svg{width:16px;height:16px;fill:var(--gold)}
.chip:hover{border-color:var(--gold)}
.chip b{font-weight:600;font-size:12px;color:var(--muted);padding-left:8px;border-left:1px solid var(--line)}
.chip[aria-pressed="true"]{border-color:var(--gold);background:rgba(212,162,76,.14);color:var(--gold-hi)}
.chip[aria-pressed="true"] svg{animation:flicker 1.6s ease-in-out infinite}
.chip:focus-visible,.frame:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---------- Sections ---------- */
.mem-section{padding:96px var(--gutter);border-top:1px solid var(--line)}
.mem-inner{max-width:var(--maxw);margin:0 auto}
.mem-narrow{max-width:680px;text-align:center}
.mem-section .section__head{margin-bottom:44px}

/* Story + timeline */
.mem-story{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
.prose{margin-top:28px;display:grid;gap:18px;font-size:17px;line-height:1.75;color:var(--muted)}
.prose p:first-child::first-letter{float:left;font-family:var(--serif);font-size:64px;line-height:.85;padding:6px 10px 0 0;color:var(--gold)}
.timeline{list-style:none;position:relative;padding-left:28px;display:grid;gap:26px;margin-top:12px}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold),rgba(212,162,76,.1))}
.timeline li{position:relative;display:grid;gap:2px;font-size:15px;line-height:1.5;color:var(--muted)}
.timeline li::before{content:"";position:absolute;left:-28px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.timeline time{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);line-height:1}

/* Gallery: placeholder frames until the family's photos go in */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:16px}
.frame{position:relative;overflow:hidden;border-radius:14px;background:#1a1612;cursor:zoom-in}
.frame--tall{grid-row:span 2}
.frame--wide{grid-column:span 3}
.frame img,.frame__ph{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.frame:hover img,.frame:hover .frame__ph{transform:scale(1.04)}
.frame__ph{background:
  radial-gradient(120% 80% at 30% 20%,rgba(240,201,119,.22),transparent 60%),
  linear-gradient(160deg,#3b2f22,#1c1712 70%);position:relative}
.frame__ph::after{content:attr(data-year);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:44px;font-style:italic;color:rgba(240,201,119,.35)}
.frame figcaption{position:absolute;inset:auto 0 0;padding:28px 16px 14px;font-size:14px;color:var(--ink);
  background:linear-gradient(transparent,rgba(14,12,10,.85))}

/* Voice player */
.player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 22px 18px 18px;
  border:1px solid rgba(212,162,76,.4);border-radius:var(--radius-pill);background:linear-gradient(180deg,rgba(212,162,76,.10),rgba(212,162,76,.02));position:relative}
.player__btn{width:56px;height:56px;border-radius:50%;border:0;background:var(--gold);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.player__btn:hover{background:var(--gold-hi);transform:scale(1.05)}
.player__btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.player__btn svg{width:24px;height:24px;fill:#1a1208}
.player__btn .i-pause,.player.is-playing .i-play{display:none}
.player.is-playing .i-pause{display:block}
.player__wave{grid-column:2;grid-row:1;height:44px;display:flex;align-items:center;gap:3px;pointer-events:none}
.player__wave i{flex:1;border-radius:2px;background:rgba(244,237,225,.22);transition:background .2s}
.player__wave i.on{background:var(--gold)}
.player.is-playing .player__wave i.on{animation:pulse 1.2s ease-in-out infinite alternate}
.player__seek{grid-column:2;grid-row:1;width:100%;height:44px;opacity:0;cursor:pointer}
.player__time{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted);min-width:3.2em;text-align:right}
.note{margin-top:16px;font-size:13px;color:var(--muted)}

/* Grave location */
.mem-grave{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.place{margin-top:28px;display:grid;grid-template-columns:auto 1fr;gap:12px 24px;font-size:16px}
.place dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-top:3px}
.place dd{color:var(--ink)}
.mem-grave .lede{margin:22px 0 0}
.mem-grave .ctas{justify-content:flex-start;margin-top:28px}
.map{aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#1a1612}
.map iframe{width:100%;height:100%;border:0;display:block;filter:invert(.9) hue-rotate(180deg) sepia(.35) saturate(.8) brightness(.95)}

/* Shared memories */
.memories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.memory{padding:28px;border:1px solid var(--line);border-radius:20px;background:rgba(244,237,225,.025);display:flex;flex-direction:column;gap:18px}
.memory p{font-family:var(--serif);font-size:23px;line-height:1.35;flex:1}
.memory p::before{content:"“";display:block;font-size:48px;line-height:.6;color:var(--gold);margin-bottom:6px}
.memory cite{font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--muted)}
#memories .ctas{margin-top:36px}

/* Closing CTA */
.mem-foot{padding:104px var(--gutter);border-top:1px solid var(--line);
  background:radial-gradient(60% 70% at 50% 100%,var(--bg-glow),transparent 75%)}

/* Lightbox + toast */
.lightbox{margin:auto;max-width:min(92vw,900px);width:100%;padding:0;border:0;background:none;color:var(--ink);overflow:visible}
.lightbox::backdrop{background:rgba(8,7,6,.88);backdrop-filter:blur(6px)}
.lightbox figure{border-radius:16px;overflow:hidden;background:#1a1612}
.lightbox figure>img,.lightbox .frame__ph{width:100%;aspect-ratio:4/3;height:auto;max-height:78vh;object-fit:contain}
.lightbox figcaption{padding:14px 18px;font-size:15px;color:var(--muted)}
.lightbox__close{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(14,12,10,.6);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 16px;opacity:0;pointer-events:none;z-index:10;
  padding:12px 20px;border-radius:var(--radius-pill);background:var(--ink);color:#1a1208;font-size:14px;font-weight:500;
  transition:opacity .25s,translate .25s;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;translate:-50% 0}

@keyframes flicker{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12) translateY(-1px)}}
@keyframes pulse{to{opacity:.6}}

/* ---------- Tablet & phone ---------- */
@media (max-width:900px){
  .mem-story,.mem-grave{grid-template-columns:1fr;gap:44px}
  .memories{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .frame--wide{grid-column:span 2}
}
@media (max-width:520px){
  .mem-section{padding:72px var(--gutter)}
  .portrait{width:136px;height:136px}
  .gallery{gap:10px;grid-auto-rows:150px}
  .player{gap:12px;padding:12px 16px 12px 12px}
  .player__btn{width:48px;height:48px}
  .mem-actions .chip{flex:1 1 calc(50% - 10px);justify-content:center;white-space:nowrap;padding:11px 10px;font-size:13px}
}
button.btn{font:inherit;font-weight:600;font-size:15px;color:var(--ink);background:none;cursor:pointer}

/* While a database memorial loads, hide the sample text underneath */
.is-loading main,.is-loading .sample-bar{visibility:hidden}
.mem-missing{min-height:60vh;display:grid;place-content:center;gap:8px}
.chip[data-faith-audio] svg{fill:none;stroke:var(--gold)}
.chip[data-faith-audio][aria-pressed="true"] svg{animation:flicker 1.6s ease-in-out infinite}