:root{
  --ink:#160a0d; --maroon:#4a0e1a; --maroon-2:#5b1220;
  --gold:#c9a24b; --gold-lt:#e6c877; --gold-dim:#9c7c38;
  --ivory:#f3e7d6; --muted:#c0a691; --line:rgba(201,162,75,.28);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ivory);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--maroon-2) 0%, var(--maroon) 34%, var(--ink) 78%) fixed;
  min-height:100dvh;line-height:1.55;font-weight:300;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}

/* ── Hero ── */
.hero{text-align:center;padding:calc(env(safe-area-inset-top) + 3.2rem) 1.5rem 2.4rem;position:relative}
.hero__seal{width:78px;height:78px;margin:0 auto 1.4rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.hero__seal svg{width:100%;height:100%}
.hero__seal circle{stroke:var(--gold);stroke-width:1.5}
.hero__seal text{font-family:var(--serif);font-style:italic;font-size:44px;fill:var(--gold-lt)}
.hero__eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.hero__names{font-size:clamp(2.6rem,10vw,4rem);line-height:1.02;letter-spacing:.01em;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-dim));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__date{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ivory);margin:.5rem 0 .2rem}
.hero__tag{font-size:.8rem;letter-spacing:.18em;color:var(--muted);margin:.2rem 0 0}
.hero__lead{max-width:30rem;margin:1.5rem auto 0;color:var(--muted);font-size:1rem}

.wrap{max-width:640px;margin:0 auto;padding:0 1.1rem 3rem}

/* ── Action cards ── */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.4rem}
.card{
  appearance:none;cursor:pointer;text-align:center;color:var(--ivory);
  background:linear-gradient(160deg,rgba(91,18,32,.75),rgba(22,10,13,.9));
  border:1px solid var(--line);border-radius:18px;padding:1.5rem 1rem;
  display:flex;flex-direction:column;gap:.35rem;align-items:center;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
.card__icon{font-size:1.9rem;line-height:1}
.card__title{font-family:var(--serif);font-size:1.5rem}
.card__sub{font-size:.78rem;color:var(--muted);letter-spacing:.03em}

/* ── Gallery ── */
.gallery{margin-top:2.8rem}
.gallery__head{display:flex;align-items:center;gap:1rem;justify-content:center;margin-bottom:1.4rem}
.gallery__head h2{font-size:1.7rem;color:var(--gold-lt);font-style:italic;white-space:nowrap}
.rule{height:1px;flex:1;max-width:80px;background:linear-gradient(90deg,transparent,var(--gold))}
.gallery__head .rule:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

.feed{columns:2;column-gap:.7rem}
@media(min-width:560px){.feed{columns:3}}
.feed__empty{columns:1;color:var(--muted);text-align:center;font-style:italic;padding:2rem 0}
.item{break-inside:avoid;margin-bottom:.7rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(22,10,13,.6);animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.item img{width:100%;display:block;cursor:zoom-in}
.item__meta{padding:.5rem .65rem;font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between;gap:.4rem}
.item__name{color:var(--gold-lt);font-family:var(--serif);font-size:.95rem;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item--voice{padding:1rem .8rem}
.item--voice .vlabel{display:flex;align-items:center;gap:.5rem;color:var(--gold-lt);font-family:var(--serif);font-style:italic;font-size:1.05rem;margin-bottom:.6rem}
.item--voice audio{width:100%;height:38px}

/* ── Sheets / modal ── */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,4,5,.72);backdrop-filter:blur(3px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet__panel{width:100%;max-width:520px;background:linear-gradient(180deg,var(--maroon),var(--ink));
  border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;padding:1.6rem 1.3rem calc(env(safe-area-inset-bottom) + 1.6rem);
  position:relative;box-shadow:var(--shadow);animation:up .28s cubic-bezier(.2,.8,.2,1)}
@media(min-width:560px){.sheet{align-items:center}.sheet__panel{border-radius:22px;border-bottom:1px solid var(--line)}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet__panel h3{font-size:1.9rem;color:var(--gold-lt);margin-bottom:1.1rem;font-style:italic}
.sheet__close{position:absolute;top:.7rem;right:.9rem;background:none;border:0;color:var(--muted);font-size:2rem;line-height:1;cursor:pointer}
.sheet__close:hover{color:var(--gold-lt)}

.field{display:block;font-size:.8rem;color:var(--muted);letter-spacing:.05em;margin-bottom:1.1rem}
.field span{opacity:.6}
.field input{width:100%;margin-top:.4rem;padding:.75rem .9rem;border-radius:11px;border:1px solid var(--line);
  background:rgba(0,0,0,.28);color:var(--ivory);font-family:var(--sans);font-size:1rem}
.field input:focus{outline:2px solid var(--gold);outline-offset:1px}

.pick{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
.btn{appearance:none;cursor:pointer;border:0;font-family:var(--sans);font-size:1rem;border-radius:12px;
  padding:.85rem 1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:filter .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn--ghost{background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--ivory)}
.btn--ghost:hover{border-color:var(--gold)}
.btn--gold{width:100%;font-weight:500;letter-spacing:.04em;color:#2a0a10;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 60%,var(--gold-dim))}
.btn--gold:hover{filter:brightness(1.06)}
.btn--gold:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}

.preview{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1rem}
.preview img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.hint{font-size:.8rem;color:var(--muted);margin:.7rem 0 0;text-align:center;min-height:1.1em}
.hint.err{color:#f0a0a0}
.hint.ok{color:var(--gold-lt)}

/* ── Recorder ── */
.recorder{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.rec{flex:1;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem;border-radius:12px;
  border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--ivory);font-size:1rem;cursor:pointer}
.rec__dot{width:13px;height:13px;border-radius:50%;background:var(--gold)}
.rec.is-rec{border-color:#c0392b}
.rec.is-rec .rec__dot{background:#e74c3c;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.rec__time{font-variant-numeric:tabular-nums;font-size:1.15rem;color:var(--gold-lt);min-width:56px;text-align:center}
.rec__audio{width:100%;margin-bottom:1rem}

/* ── Lightbox ── */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(8,4,5,.94);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:var(--shadow)}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 1.4rem);transform:translateX(-50%);z-index:80;
  background:var(--ink);border:1px solid var(--gold);color:var(--gold-lt);padding:.75rem 1.3rem;border-radius:999px;
  font-size:.9rem;box-shadow:var(--shadow);animation:up .25s ease}

.foot{text-align:center;color:var(--gold-dim);font-family:var(--serif);font-style:italic;font-size:.9rem;padding:2rem 1rem calc(env(safe-area-inset-bottom) + 2rem)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}