/* ============================================================
   LOTUS — Poetic & Reflective / Quiet & Dignified
   Adult & elder. Buddhist, Hindu, Taoism, Shinto.
   Warm washi-paper white, deep moss green, a single vermillion note.
   Noto Serif + Noto Sans. Sumi-e lotus watermark; ink-brush divider.
   ============================================================ */

/* Self-hosted fonts (was a Google Fonts @import) — same families, served locally so the page renders offline/deterministically. */
@import url('/templates/lotus/fonts/fonts.css');

:root {
    --washi:   #F8F6F1;
    --surface: #FFFFFF;
    --moss:    #2D5016;
    --vermillion: #C0392B;
    --ink:     #1A1A1A;
    --muted:   #6F6349;
    --line:    #CBBFA8;

    --m-bg:        var(--washi);
    --m-surface:   var(--surface);
    --m-text:      var(--ink);
    --m-muted:     var(--muted);
    --m-accent:    var(--moss);
    --m-accent-contrast: #FFFFFF;
    --m-border:    var(--line);
    --m-radius:    0;
    --m-font-head: 'Noto Serif', Georgia, serif;
    --m-font-body: 'Noto Sans', system-ui, sans-serif;
}

/* ---------- Main memorial page ---------- */
.memorial-page {
    position: relative;
    background: var(--washi);
    color: var(--ink);
    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.85;
    min-height: 100vh;
    overflow-x: clip;   /* contain the watermark's right bleed; no h-scroll */
}

/* No overflow clip here, so a short hero lets the watermark flow on down into
   the contributions (it sits behind the cards, showing in the margins). */
.memorial-hero {
    position: relative;
    text-align: center;
    padding: 4.5rem 1.5rem 3rem;
    background: var(--washi);
}
/* Sumi-e lotus, settling faintly in the lower-right. */
.memorial-hero::after {
    content: '';
    position: absolute;
    top: 150px; right: -20px;
    width: 384px; height: 384px;
    background: url('/templates/lotus/lotus.png') no-repeat center;
    background-size: contain;
    opacity: 0.16;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
.memorial-hero > * { position: relative; z-index: 1; }
.memorial-hero--no-photo { padding-top: 5rem; }

.memorial-photo { margin: 0 auto 1.75rem; width: 180px; }
.memorial-photo img {
    width: 180px; height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(26,26,26,0.08);
}

.memorial-header { max-width: 600px; margin: 0 auto; }
.memorial-label {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    color: var(--vermillion);
    margin-bottom: 0.8rem;
}
.memorial-name {
    font-family: 'Noto Serif', serif;
    font-weight: 600;
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    color: var(--ink);
    line-height: 1.15;
    margin: 0 0 0.6rem;
}
.memorial-dates { color: var(--muted); font-size: 1rem; letter-spacing: 0.04em; }
.memorial-dates-secondary { color: var(--moss); }
.memorial-obituary { max-width: 580px; margin: 1.75rem auto 0; color: var(--ink); }
.memorial-obituary p { margin: 0 0 1rem; }

/* ---------- Cards — minimal, a single ink hairline ---------- */
.memorial-card { background: var(--surface); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 1.4rem 0.25rem; }
article.memorial-card:hover { box-shadow: none; transform: none; border-bottom-color: var(--moss); }
.memorial-card-title { font-family: 'Noto Serif', serif; font-weight: 600; }
.memorial-card-meta { border-top-color: var(--line); }

/* ---------- Filters / chips ---------- */
.memorial-filter, .memorial-chip { border-radius: 0; }
.memorial-filter--active, .memorial-chip.is-active { background: var(--moss); border-color: var(--moss); color: #FFFFFF; }
.memorial-type.is-selected .memorial-card { outline-color: var(--moss); }
.memorial-input, .memorial-textarea, .memorial-dropzone { border-radius: 0; }

/* ---------- Sub-page header ---------- */
.memorial-subhero-title { font-family: 'Noto Serif', serif; font-weight: 600; }

/* ---------- Footer graphic — ink brushstroke ---------- */
.memorial-footer { position: relative; }
.memorial-footer::after {
    content: '';
    display: block;
    width: 360px; max-width: 70%;
    aspect-ratio: 1000 / 89;
    margin: 1.5rem auto 0;
    background: url('/templates/lotus/divider.png') no-repeat center;
    background-size: contain;
    opacity: 0.75;
    mix-blend-mode: multiply;
}

/* ---------- Confirmation icon ---------- */
.memorial-confirm-icon { background: rgba(45,80,22,0.10); color: var(--moss); }