/* =========================================================================
   ForeverAfter.life — public memorial page (+ private gate)
   Ported from templates/theme_dev/memorial.css; tokens remapped to --ff-*,
   trimmed to the sections this phase renders (hero, life story, service),
   with the deferred sections (timeline, gallery, candles, guestbook, family)
   and the editorial direction dropped. Loaded only on the memorial page.
   ========================================================================= */

/* ---- Reveal animation (visible by default; .pre hides for scroll-in) -- */
.reveal { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.pre { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.pre { transition: none; opacity: 1; transform: none; } }

/* mockup base class with no ff- analogue */
.serif { font-family: var(--ff-font-serif); }

/* quiet text button (topbar Share) — not in the global button set */
.btn-quiet {
  --bs-btn-color: var(--ff-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ff-accent-deep);
  --bs-btn-hover-bg: var(--ff-surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ff-accent-deep);
  --bs-btn-active-bg: var(--ff-surface-2);
  --bs-btn-active-border-color: transparent;
}

/* ---- Top bar ---------------------------------------------------------- */
.m-topbar { position: sticky; top: 0; z-index: 50; background: oklch(1 0 0 / 0.82); backdrop-filter: saturate(1.1) blur(14px); border-bottom: 1px solid var(--ff-line-soft); }
.m-topbar-in { max-width: var(--ff-shell-max); margin: 0 auto; padding: 13px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.m-topbar-mid { color: var(--ff-ink-2); font-size: 1.05rem; letter-spacing: -0.01em; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.m-topbar-mid.show { opacity: 1; }
.m-topbar-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .m-topbar-mid { display: none; } }

/* ---- Draft notice (owner preview) ------------------------------------ */
.m-draftbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; padding: 14px 24px; background: var(--ff-accent-soft); border-bottom: 1px solid var(--ff-line); color: var(--ff-accent-deep); }
.m-draftbar-text { font-size: 0.94rem; }
.m-draftbar-text strong { font-weight: 600; }
.m-draftbar form { margin: 0; }
.m-draftbar .btn { padding-block: 0.5rem; }

/* ---- Section scaffolding --------------------------------------------- */
.m-shell { max-width: var(--ff-shell-max); margin: 0 auto; }
.m-section { padding: 92px 32px; }
.m-section-head { max-width: 100%; margin: 0 auto 48px; text-align: center; }
.m-section-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin-top: 10px; font-weight: 500; }
.m-section-soft { background: var(--ff-surface-2); }


/* ---- Content width ----------------------------------------------------
   Every block above fills .m-shell (--ff-shell-max, the same width the site
   header uses) rather than sitting in its own narrower column. The page reads
   as one container instead of a ribbon down the middle of a wide screen.

   The one place that is not purely a win is the biography: prose at 1400px is
   a very long line to track back from. If it reads badly on a wide monitor,
   put a measure back on .m-story alone -- say 90ch -- and everything else
   stays full width.
   ---------------------------------------------------------------------- */

/* ---- Hero (portrait) -------------------------------------------------- */
.m-hero { text-align: center; }
.m-hero-portrait { max-width: var(--ff-shell-max); margin: 0 auto; padding: 80px 32px 64px; display: flex; flex-direction: column; align-items: center; }
.m-hero-eyebrow { margin-bottom: 26px; }
.m-portrait { width: 236px; height: 236px; border-radius: 50%; box-shadow: var(--ff-shadow-lg); }
/* The portrait is an <img> now, so the wrapper clips it into the circle and
   object-fit reproduces what background-size: cover used to do. Without the
   object-fit the image would stretch: the box is square, most photographs are
   not. The shadow is unaffected by overflow -- it paints outside the box. */
.m-portrait.has-image { overflow: hidden; }
.m-portrait.has-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.m-portrait.ff-ph { position: relative; inset: auto; }
.m-hero-name { font-size: clamp(2.9rem, 6.4vw, 4.8rem); line-height: 1.02; margin: 28px 0 10px; font-weight: 500; }
.m-hero-years { font-size: 1.35rem; color: var(--ff-accent-deep); font-weight: 500; }
.m-hero-meta { display: inline-flex; gap: 12px; align-items: center; white-space: nowrap; font-size: 1.18rem; }
.m-hero-dot { opacity: .5; }

/* Lifespan band: full dates flanking the computed age (when full ISO dates exist). */
.m-lifespan { display: flex; align-items: center; gap: 18px; max-width: 560px; margin: 0 auto; }
.m-lifespan-date { white-space: nowrap; font-size: 1.18rem; }
.m-lifespan-age { white-space: nowrap; font-weight: 600; color: var(--ff-ink); font-size: 1.05rem; }
.m-lifespan-rule { flex: 1; height: 1px; background: var(--ff-line); min-width: 24px; }
.m-hero-place { margin-top: 10px; font-size: 1.02rem; }

/* Pay respect — a once-per-day, one-way gesture. */
.m-respect { margin-top: 18px; text-align: center; }
.m-respect form { display: inline-flex; }
.m-respect-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; background: var(--ff-accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: filter .15s, transform .15s; box-shadow: 0 4px 12px oklch(0.6 0.1 234 / 0.26); }
.m-respect-btn svg { width: 16px; height: 16px; }
.m-respect-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.m-respect-btn:disabled { cursor: default; }
.m-respect-btn.is-paid { background: var(--ff-accent-soft); color: var(--ff-accent-deep); border-color: var(--ff-line); box-shadow: none; }
.m-respect-count { font-variant-numeric: tabular-nums; min-width: 1ch; }

/* "Pay respect" label, now a hover tooltip above the button. */
.m-respect-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--ff-ink); color: #fff; font-size: 0.8rem; font-weight: 500; padding: 5px 11px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.m-respect-btn:hover .m-respect-tip,
.m-respect-btn:focus-visible .m-respect-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.m-hero-role { margin: 8px 0 0; font-size: 1.02rem; }
.m-hero-epitaph { font-family: var(--ff-font-serif); font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-style: italic; color: var(--ff-ink-2); margin: 24px 0 0; max-width: 540px; line-height: 1.4; }
.m-hero-dust { margin: 30px 0; }
.m-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---- Life story ------------------------------------------------------- */
.m-story { max-width: 100%; margin: 0 auto; }
.m-story-p { font-size: 1.2rem; line-height: 1.78; color: var(--ff-ink); margin: 0 0 24px; }
.m-story-p:first-of-type::first-letter { font-family: var(--ff-font-serif); font-size: 3.4em; line-height: 0.82; float: left; padding: 8px 12px 0 0; color: var(--ff-accent-deep); font-weight: 500; }
.m-story-sign { display: flex; justify-content: center; margin-top: 16px; }

/* ---- Timeline --------------------------------------------------------- */
.m-timeline { position: relative; max-width: 100%; margin: 0 auto; padding-left: 8px; }
.m-tl-spine { position: absolute; left: 92px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--ff-line) 8%, var(--ff-line) 92%, transparent); }
.m-tl-item { display: grid; grid-template-columns: 76px 28px 1fr; align-items: start; padding: 16px 0; }
.m-tl-year { font-size: 1.18rem; color: var(--ff-accent-deep); text-align: right; padding-top: 1px; font-weight: 500; }
.m-tl-node { position: relative; justify-self: center; margin-top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--ff-surface); border: 2px solid var(--ff-accent); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
.m-section-soft .m-tl-node { background: var(--ff-surface-2); }
.m-tl-title { font-size: 1.12rem; font-weight: 600; margin-bottom: 3px; }
.m-tl-text { color: var(--ff-ink-2); margin: 0; }
@media (max-width: 600px) {
  .m-tl-item { grid-template-columns: 54px 22px 1fr; }
  .m-tl-year { font-size: 1.02rem; }
  .m-tl-spine { left: 65px; }
}

/* ---- Family ----------------------------------------------------------- */
.m-family { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 720px) { .m-family { grid-template-columns: repeat(2, 1fr); } }
.m-family-card { text-align: center; }
.m-family-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-family: var(--ff-font-sans); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ff-accent-deep); background: var(--ff-accent-soft); }
.m-family-rel { font-size: 11px; margin-bottom: 4px; }
.m-family-name { font-size: 1.3rem; font-weight: 500; line-height: 1.15; }
.m-family-note { font-size: 0.9rem; margin-top: 2px; font-style: italic; }

/* ---- Gallery (uniform square thumbnails) ------------------------------ */
.m-gallery { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.m-gallery-item { display: block; border-radius: var(--ff-radius-lg); overflow: hidden; box-shadow: var(--ff-shadow-sm); background: var(--ff-surface-2); cursor: pointer; }
.m-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s ease; }
.m-gallery-item:hover img, .m-gallery-item:focus-visible img { transform: scale(1.04); }
@media (max-width: 480px) { .m-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---- Lightbox --------------------------------------------------------- */
.m-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: oklch(0.18 0.02 250 / 0.92); backdrop-filter: blur(2px); }
.m-lightbox[hidden] { display: none; }
.m-lightbox-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 1100px); }
.m-lightbox-stage img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 70px oklch(0 0 0 / 0.5); }
.m-lightbox-cap { color: oklch(1 0 0 / 0.85); font-size: 0.95rem; line-height: 1.5; text-align: center; max-width: 70ch; }
.m-lightbox-cap[hidden] { display: none; }
.m-lightbox-x { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: oklch(1 0 0 / 0.1); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .18s; }
.m-lightbox-x:hover { background: oklch(1 0 0 / 0.22); }
.m-lightbox-nav { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: oklch(1 0 0 / 0.1); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .18s; }
.m-lightbox-nav:hover { background: oklch(1 0 0 / 0.22); }
@media (max-width: 560px) { .m-lightbox { padding: 14px; } .m-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); } .m-lightbox-nav.prev { left: 8px; } .m-lightbox-nav.next { right: 8px; } }

/* ---- Share popover (QR + link) ---------------------------------------- */
body.m-share-open { overflow: hidden; }
.m-share { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 24px; background: oklch(0.18 0.02 250 / 0.55); backdrop-filter: blur(3px); }
.m-share[hidden] { display: none; }
.m-share-card { position: relative; width: min(430px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-lg); padding: 34px 32px 28px; text-align: center; }
.m-share-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ff-ink-3); font-size: 22px; line-height: 1; cursor: pointer; transition: background .18s, color .18s; }
.m-share-x:hover { background: var(--ff-surface-2); color: var(--ff-ink); }
.m-share-title { margin: 6px 0 20px; font-size: 1.45rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ff-ink); }
.m-share-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--ff-line); border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm); }
.m-share-qr img { display: block; width: 212px; height: 212px; }
.m-share-hint { font-size: 0.85rem; line-height: 1.5; margin: 14px auto 18px; max-width: 300px; }
.m-share-link { display: flex; align-items: center; gap: 10px; background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: 12px; padding: 7px 7px 7px 14px; margin-bottom: 14px; }
.m-share-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; color: var(--ff-ink-2); text-align: left; }
.m-share-link .btn { flex: none; }
.m-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 560px) { .m-share { padding: 14px; } .m-share-card { padding: 28px 20px 22px; } }

/* ---- Service ---------------------------------------------------------- */
.m-service-card { max-width: 640px; margin: 0 auto; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 32px; }
.m-section-soft .m-service-card { background: var(--ff-surface); }
.m-service-when { display: flex; flex-direction: column; gap: 2px; padding-bottom: 20px; border-bottom: 1px solid var(--ff-line-soft); margin-bottom: 20px; }
.m-service-date { font-size: 1.7rem; font-weight: 500; }
.m-service-dl { margin: 0; }
.m-service-dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; }
.m-service-dl dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ff-ink-3); padding-top: 3px; }
.m-service-dl dd { margin: 0; color: var(--ff-ink); }

/* Embedded resting-place map, shown inside the service-style card. */
.m-resting-map { display: block; width: 100%; height: 320px; margin-top: 22px; border: 0; border-radius: 14px; }

/* ---- Form fields (shared by the private gate) ------------------------- */
.m-field { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; margin-bottom: 14px; }
.m-field > span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ff-ink-2); }
.m-field input { font: inherit; font-size: 0.98rem; color: var(--ff-ink); background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-sm); padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.m-field input:focus { outline: none; border-color: var(--ff-accent); background: var(--ff-surface); box-shadow: 0 0 0 4px var(--ff-accent-tint); }

/* ---- Sympathy messages ------------------------------------------------ */
.m-guestbook { max-width: 760px; margin: 0 auto; }
.m-gb-flash { padding: 12px 16px; border-radius: 12px; font-size: 0.92rem; margin-bottom: 18px; }
.m-gb-flash.is-ok { color: var(--ff-accent-deep); background: var(--ff-accent-soft); border: 1px solid var(--ff-accent-soft); }
.m-gb-flash.is-error { color: var(--ff-danger-deep); background: var(--ff-danger-soft); border: 1px solid var(--ff-danger-line); }

.m-gb-form-wrap { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 28px 28px 24px; margin-bottom: 40px; }
.m-gb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .m-gb-form-row { grid-template-columns: 1fr; } }
.m-field em { font-style: normal; font-weight: 400; color: var(--ff-ink-3); }
.m-field textarea { font: inherit; font-size: 0.98rem; color: var(--ff-ink); background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: 11px; padding: 12px 14px; resize: vertical; transition: border-color .2s, box-shadow .2s, background .2s; }
.m-field textarea:focus { outline: none; border-color: var(--ff-accent); background: var(--ff-surface); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
.m-gb-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.m-gb-hint { font-size: 0.84rem; }
.m-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.m-gb-empty { text-align: center; }
.m-gb-list { display: flex; flex-direction: column; gap: 16px; }
.m-gb-more { display: flex; justify-content: center; margin-top: 20px; }
.m-gb-more-btn[disabled] { opacity: 0.6; cursor: default; }
.m-tribute { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 22px 24px; }
.m-tribute-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.m-tribute-meta { min-width: 0; }
.m-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--ff-font-sans); font-size: 0.85rem; font-weight: 700; color: var(--ff-accent-deep); background: var(--ff-accent-soft); }
.m-tribute-name { font-weight: 600; }
.m-tribute-rel { font-size: 0.82rem; }
.m-tribute-body { margin: 0; color: var(--ff-ink); line-height: 1.62; }

/* Owner moderation */
.m-gb-pending { margin-bottom: 36px; }
.m-gb-pending-h { font-family: var(--ff-font-sans); font-size: 0.92rem; font-weight: 600; color: var(--ff-ink-2); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.m-tribute.is-pending { border-style: dashed; background: var(--ff-surface-2); }
.m-gb-badge { display: inline-grid; place-items: center; font-family: var(--ff-font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ff-accent-deep); background: var(--ff-accent-soft); border-radius: 999px; padding: 2px 9px; }
.m-tribute-head .m-gb-badge { margin-left: auto; }
.m-gb-mod { display: flex; gap: 8px; margin-top: 14px; }
.m-gb-mod form { margin: 0; }
.m-gb-mod-btn { font: inherit; font-size: 0.84rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ff-line); background: var(--ff-surface); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.m-gb-mod-btn.approve { color: #fff; background: var(--ff-accent); border-color: var(--ff-accent); }
.m-gb-mod-btn.approve:hover { filter: brightness(1.04); }
.m-gb-mod-btn.remove { color: var(--ff-ink-2); }
.m-gb-mod-btn.remove:hover { border-color: oklch(0.6 0.16 25); color: oklch(0.52 0.17 25); background: oklch(0.97 0.03 25); }

/* ---- Footer ----------------------------------------------------------- */
.m-footer { background: var(--ff-surface-2); border-top: 1px solid var(--ff-line-soft); padding: 72px 32px; }
.m-footer-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.m-footer-epitaph { font-size: clamp(1.5rem, 3vw, 2.1rem); font-style: italic; color: var(--ff-ink); max-width: 600px; margin: 6px 0; line-height: 1.4; }
.m-footer-meta { letter-spacing: 0.04em; font-size: 0.92rem; }
.m-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--ff-line); width: min(420px, 100%); }
.m-footer-note { font-size: 0.85rem; }
/* Licence credit for a portrait that came with terms (see PageBuilder).
   Deliberately quiet -- it has to be legible and present, not prominent. */
.m-footer-credit { margin: 0; max-width: 420px; font-size: 0.75rem; line-height: 1.5; }
.m-footer-credit a { color: inherit; text-decoration: underline; }

/* ---- Floating section nav (serene) ------------------------------------ */
.m-secnav { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: oklch(1 0 0 / 0.7); backdrop-filter: blur(10px); border: 1px solid var(--ff-line-soft); border-radius: 16px; box-shadow: var(--ff-shadow-sm); }
.m-secnav:empty { display: none; }
.m-secnav-link { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--ff-ink-3); font-size: 0.84rem; padding: 7px 0; transition: color .2s; text-align: left; width: 100%; cursor: pointer; }
.m-secnav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ff-line); transition: all .2s; flex: none; }
.m-secnav-link:hover { color: var(--ff-ink-2); }
.m-secnav-link.active { color: var(--ff-accent-deep); font-weight: 600; }
.m-secnav-link.active .m-secnav-dot { background: var(--ff-accent); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
@media (max-width: 1180px) { .m-secnav { display: none; } }

/* ---- Back to top ------------------------------------------------------ */
.m-totop { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ff-line); background: oklch(1 0 0 / 0.9); backdrop-filter: saturate(1.1) blur(8px); color: var(--ff-ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ff-shadow-sm); opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none; transition: opacity .25s, transform .25s, color .18s, border-color .18s; }
.m-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.m-totop:hover { color: var(--ff-accent-deep); border-color: var(--ff-accent); }
.m-totop svg { width: 19px; height: 19px; }
@media (max-width: 560px) { .m-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* ---- Private gate ----------------------------------------------------- */
.m-gate { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px; background: linear-gradient(168deg, var(--ff-accent-soft), oklch(0.99 0.006 234)); }
.m-gate-card { width: 100%; max-width: 420px; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 24px; box-shadow: var(--ff-shadow-lg); padding: 40px 36px 34px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.m-gate-card .ff-brand { margin-bottom: 18px; }
.m-gate-lock { width: 56px; height: 56px; border-radius: 50%; background: var(--ff-accent-soft); color: var(--ff-accent-deep); display: grid; place-items: center; margin-bottom: 16px; }
.m-gate-lock svg { width: 26px; height: 26px; }
.m-gate-name { font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.m-gate-lede { font-size: 0.98rem; line-height: 1.55; margin: 6px 0 20px; max-width: 320px; }
.m-gate-error { width: 100%; margin-bottom: 16px; padding: 11px 14px; font-size: 0.86rem; font-weight: 500; color: var(--ff-danger-deep); background: var(--ff-danger-soft); border: 1px solid var(--ff-danger-line); border-radius: 11px; }
.m-gate-form { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.m-gate-form .btn { width: 100%; margin-top: 6px; }

/* ---- Phone ------------------------------------------------------------ */
@media (max-width: 600px) {
  .m-topbar-in { padding: 12px 18px; }
  .m-topbar-actions .btn-quiet { display: none; }
  .m-section { padding: 64px 20px; }
  .m-section-head { margin-bottom: 36px; }
  .m-hero-portrait { padding: 52px 22px 48px; }
  .m-hero-meta { white-space: normal; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 1.05rem; }
  .m-lifespan { flex-direction: column; gap: 4px; }
  .m-lifespan-rule { display: none; }
  .m-portrait { width: 200px; height: 200px; }
  .m-service-card { padding: 26px 22px; }
  .m-resting-map { height: 240px; }
}

/* =========================================================================
   More memorials — the strip above the footer.
   The directory links down to each memorial; this links them across, which is
   what turns one inbound link per page into a mesh. Tokens come from the page
   root this file already establishes.
   ========================================================================= */
.m-more {
  padding: var(--ff-space-12) var(--ff-space-5) 0;
  background: var(--ff-surface-2);
}
.m-more-in {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: var(--ff-space-12);
}
.m-more-title {
  margin: 0 0 var(--ff-space-6);
  font-family: var(--ff-font-serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ff-ink);
  text-align: center;
}
.m-more-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ff-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-more-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ff-space-2);
  padding: var(--ff-space-4) var(--ff-space-2);
  border-radius: var(--ff-radius);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: background .18s ease;
}
.m-more-list a:hover,
.m-more-list a:focus-visible { background: var(--ff-surface); }
.m-more-portrait {
  width: 72px;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 999px;
  background: var(--ff-surface) center / cover no-repeat;
  border: 1px solid var(--ff-line-soft);
}
/* See the note on .md-name in directory.css -- same card, same unbroken-name
   spill, and this strip's columns get narrower than the directory's. */
.m-more-name { font-family: var(--ff-font-serif); font-size: 1rem; color: var(--ff-ink); overflow-wrap: anywhere; }
.m-more-years { font-size: 0.82rem; color: var(--ff-ink-3); }
.m-more-all {
  display: block;
  margin-top: var(--ff-space-6);
  color: var(--ff-ink-2);
  font-size: 0.9rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .m-more-list a { transition: none; }
}