/* Page-level styles, on top of ../../colors_and_type.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* =====================================================================
   NEW HEADER (2026-07-27) — letterpress plate + wax-pressed seal
   Cormorant Garamond wordmark/nav, Italianno script line, Source Sans 3
   utility strip. Sticky util + plate stacked so Member Login + language
   switcher stay reachable while scrolling. Seal overhangs the plate top
   at rest and seats flush when scrolled. Old .mh-* block below is now
   unreferenced dead code — cleanup in a follow-up.
   ===================================================================== */
@property --nh-bar  { syntax: "<length>"; inherits: true; initial-value: 96px }
@property --nh-seal { syntax: "<length>"; inherits: true; initial-value: 150px }

:root {
  --nh-bar: 96px;
  --nh-seal: 150px;
  --nh-marian-700: #0E2F47;
  --nh-marian-900: #071926;
  --nh-gold-200: #E1C97A;
  --nh-gold-300: #CFAE52;
  --nh-gold-500: #9A6F2A;
  --nh-coral-500: #A11923;
  --nh-cream: #F6EEDA;
  --nh-cream-2: #EFE4C9;
  --nh-fd: "Cormorant Garamond", Garamond, serif;
  --nh-fs: "Italianno", cursive;
  --nh-fn: "Source Sans 3", system-ui, sans-serif;
}

/* Utility strip */
.util { position: sticky; top: 0; z-index: 40; background: var(--nh-marian-900); height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 26px; padding: 0 34px; border-bottom: 1px solid rgba(184,137,58,.3); font-family: var(--nh-fn); color: var(--nh-cream); }
.util a, .util button { font-family: var(--nh-fn); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nh-gold-200); background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: color .2s; text-decoration: none; }
.util a:hover, .util button:hover { color: #fff; }
.util .ico { display: flex; gap: 16px; align-items: center; }
.util .ico a { padding: 2px; }
.util svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; stroke-width: 1.5; }
.util .brand { width: 20px; height: 20px; display: block; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--u) center/contain no-repeat; mask: var(--u) center/contain no-repeat; }
.util .brand.fb { --u: url('https://cdn.jsdelivr.net/npm/simple-icons@13/icons/facebook.svg'); }
.util .brand.ig { --u: url('https://cdn.jsdelivr.net/npm/simple-icons@13/icons/instagram.svg'); }
.util .u-divider { width: 1px; height: 15px; background: rgba(184,137,58,.35); flex: 0 0 auto; }
.util .langs { display: flex; align-items: center; gap: 0; border: 1px solid rgba(184,137,58,.4); border-radius: 2px; overflow: hidden; }
.util .langs button { padding: 5px 11px; font-size: 10.5px; letter-spacing: .14em; border-right: 1px solid rgba(184,137,58,.3); display: flex; align-items: center; gap: 6px; }
.util .langs button:last-child { border-right: 0; }
.util .langs button.on { background: rgba(184,137,58,.22); color: #fff; }
.util .langs .lang-flag { width: 16px; height: 11px; display: block; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.18); border-radius: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.35); opacity: .95; }
.util .langs button.on .lang-flag { opacity: 1; }

/* Plate */
.plate { position: sticky; top: 38px; z-index: 50; height: var(--nh-bar); background: linear-gradient(180deg, #FAF4E6 0%, var(--nh-cream) 55%, var(--nh-cream-2) 100%); border-bottom: 1px solid rgba(122,85,32,.35); box-shadow: 0 10px 30px -18px rgba(7,25,38,.7); transition: height .32s cubic-bezier(.4,0,.2,1), box-shadow .32s; font-family: var(--nh-fn); }
.plate::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; display: flex; background: linear-gradient(90deg, var(--nh-gold-500), var(--nh-gold-300) 50%, var(--nh-gold-500)); opacity: .55; }
.plate .grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-radial-gradient(circle at 12% 30%, rgba(122,85,32,.05) 0 1px, transparent 1px 7px), repeating-radial-gradient(circle at 88% 70%, rgba(27,77,110,.04) 0 1px, transparent 1px 8px); }
.plate .inner { position: relative; height: 100%; max-width: 1420px; margin: 0 auto; padding: 0 34px; display: flex; align-items: center; gap: 26px; }
.plate a { color: var(--nh-marian-700); text-decoration: none; }
.plate a:hover { color: var(--nh-coral-500); }

/* z-index 2 lifts the seal above the plate's ::after (the gold gradient
   hairline at bottom), which otherwise paints on top of the overhanging
   crest because ::after is the last-painted pseudo-element on .plate. */
.plate .mark { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; height: 100%; cursor: pointer; }
.plate .mark .crest { width: var(--nh-seal); height: var(--nh-seal); background: url('/assets/seal-primary.png') center/contain no-repeat; filter: drop-shadow(0 10px 18px rgba(7,25,38,.45)); transform: translateY(20px); transition: width .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1); }
.plate .mark .wm { display: flex; flex-direction: column; justify-content: center; transition: opacity .25s; }
.plate .mark .wm .en { font-family: var(--nh-fd); font-weight: 600; font-size: 23px; letter-spacing: .14em; text-transform: uppercase; color: var(--nh-marian-700); line-height: 1; white-space: nowrap; }
.plate .mark .wm .it { font-family: var(--nh-fs); font-size: 23px; color: var(--nh-coral-500); line-height: .75; margin-top: 6px; white-space: nowrap; }

.plate nav.main { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.plate nav.main button { font-family: var(--nh-fd); font-weight: 600; font-size: 17.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--nh-marian-700); padding: 8px 0; position: relative; white-space: nowrap; transition: color .2s; background: none; border: 0; cursor: pointer; }
.plate nav.main button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--nh-gold-500); transform: scaleX(0); transform-origin: center; transition: transform .24s cubic-bezier(.4,0,.2,1); }
.plate nav.main button:hover { color: var(--nh-coral-500); }
.plate nav.main button:hover::after, .plate nav.main button.on::after { transform: scaleX(1); }
.plate .join { margin-left: 8px; background: linear-gradient(180deg, var(--nh-gold-300), var(--nh-gold-500)) !important; color: #231703 !important; font-family: var(--nh-fn) !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: .16em !important; padding: 13px 24px !important; border-radius: 2px !important; box-shadow: 0 6px 16px -8px rgba(122,85,32,.9), inset 0 1px 0 rgba(255,255,255,.4) !important; transition: transform .18s, box-shadow .18s, filter .18s; text-transform: uppercase; }
.plate .join::after { display: none; }
.plate .join:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(122,85,32,.9), inset 0 1px 0 rgba(255,255,255,.5); }
.plate .burger { display: none; margin-left: auto; background: none; border: 1px solid rgba(122,85,32,.45); border-radius: 2px; padding: 12px; min-width: 46px; min-height: 46px; align-items: center; justify-content: center; cursor: pointer; color: var(--nh-marian-700); }
.plate .burger svg { width: 22px; height: 22px; display: block; stroke-width: 1.5; }

/* Compressed on scroll */
body.nh-scrolled { --nh-bar: 64px; --nh-seal: 58px; }
body.nh-scrolled .plate { height: 64px; box-shadow: 0 14px 34px -20px rgba(7,25,38,.9); }
body.nh-scrolled .plate .mark .crest { width: 58px; height: 58px; transform: translateY(0); }
body.nh-scrolled .plate .mark .wm .en { font-size: 17px; }
body.nh-scrolled .plate .mark .wm .it { font-size: 17px; margin-top: 3px; }
body.nh-scrolled .plate nav.main button { font-size: 15.5px; }
body.nh-scrolled .plate .join { padding: 10px 19px !important; font-size: 11.5px !important; }
.plate .mark .wm .en, .plate .mark .wm .it, .plate nav.main button, .plate .join { transition: font-size .32s cubic-bezier(.4,0,.2,1), padding .32s cubic-bezier(.4,0,.2,1), margin .32s, color .2s; }

/* Mobile drawer */
.nh-drawer { position: fixed; inset: 0; z-index: 70; background: rgba(7,25,38,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .28s; }
.nh-drawer.open { opacity: 1; pointer-events: auto; }
.nh-drawer button { font-family: var(--nh-fd); font-weight: 600; font-size: 28px; letter-spacing: .14em; text-transform: uppercase; color: var(--nh-cream); padding: 12px 0; background: none; border: 0; cursor: pointer; }
.nh-drawer button:hover { color: var(--nh-gold-200); }
.nh-drawer .close { position: absolute; top: 22px; right: 26px; background: none; border: 0; color: var(--nh-gold-200); cursor: pointer; padding: 8px; }
.nh-drawer .close svg { width: 26px; height: 26px; stroke-width: 1.5; }
/* Drawer auth actions — subtle top divider so "My Portal" (signed-out)
   or "Log out" (signed-in) sit apart from the site nav above them.
   Log out gets a coral tint so it reads as the destructive action. */
.nh-drawer .mh-drawer-auth {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(184,137,58,.25);
  font-size: 22px;
  letter-spacing: .12em;
}
.nh-drawer .mh-drawer-logout { color: var(--nh-coral-400, #d9756a); }
.nh-drawer .mh-drawer-logout:hover { color: #fff; }

@media (max-width: 1180px) { .plate nav.main { gap: 22px; } .plate nav.main button { font-size: 15.5px; } .plate .mark .wm { display: none; } }
@media (max-width: 860px) {
  /* Seal was 100px but the plate bar is only 74px on tablet/phone,
     so translateY(0) cropped it top/bottom. Shrink the seal so it
     fits inside the bar with 7px of breathing room top and bottom
     — no overhang, no crop. */
  :root { --nh-bar: 74px; --nh-seal: 60px; }
  body.nh-scrolled { --nh-bar: 58px; --nh-seal: 46px; }
  body.nh-scrolled .plate { height: 58px; }
  body.nh-scrolled .plate .mark .crest { width: 46px; height: 46px; transform: translateY(0); }
  .plate nav.main { display: none; } .plate .burger { display: flex; }
  .util { gap: 14px; padding: 0 14px; height: 48px; } .util .label { display: none; }
  .util a { min-width: 44px; min-height: 44px; justify-content: center; }
  .util .ico { gap: 6px; } .util .ico a { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .util .langs button { padding: 14px 12px; min-height: 44px; }
  .plate { top: 48px; } .plate .inner { padding: 0 18px; }
  /* Crest sits fully inside the plate on phones — no vertical overhang
     into the hero underneath. Desktop keeps the elegant 20px overlap
     via the base rule. */
  .plate .mark .crest { transform: none; }
}

/* ---------- OLD Masthead (dead code — .mh-* not rendered by any component post-2026-07-27; retained temporarily for rollback) ---------- */
.mh {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-page);
  border-bottom: 1px solid var(--mss-line);
}
.mh-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 36px;
}
/* Brand mark sits at the left of the masthead. align-items:center on
   the inner flex container keeps the seal vertically centered in the
   masthead row, and align-items:center on the mark itself keeps the
   text labels vertically centered against the seal's middle. */
.mh-mark {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
}
.mh-seal-img {
  width: 110px; height: 110px; display: block; flex: 0 0 auto;
  margin-bottom: 0;
}
.mh-wm-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--mss-marian-700);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.mh-wm-2 {
  font-family: var(--font-script);
  font-size: 19px;
  color: var(--mss-coral-400);
  line-height: 1;
  margin-top: 4px;
  white-space: nowrap;
  /* Italianno ships single-weight and iOS Safari refuses to synthesize
     bold for cursive faces, so font-weight:700 is a no-op. Draw a thin
     currentColor stroke instead — the perceived weight comes from the
     ink thickening around each glyph. */
  -webkit-text-stroke: 0.6px currentColor;
          text-stroke: 0.6px currentColor;
}
.mh-nav {
  margin-left: auto;
  display: flex; gap: 4px; align-items: center;
}
.mh-nav button {
  border: none; background: transparent;
  font: 600 13px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}
/* Single ::after does double duty:
     - Active: 2px gold bar, always visible full width.
     - Hover:  1px hairline that expands from center out.
   The bar is anchored at bottom:4px so both states share the same
   baseline. Reduced-motion just fades opacity, no lateral slide. */
.mh-nav button::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px;
  height: 2px; background: var(--mss-gold-400);
  opacity: 0;
  transition: left 220ms ease, right 220ms ease, height 180ms ease, opacity 180ms ease;
  pointer-events: none;
}
.mh-nav button:hover           { color: var(--mss-marian-700); background: rgba(31,52,92,0.04); }
.mh-nav button:hover::after    { left: 14px; right: 14px; height: 1px; opacity: 1; }
.mh-nav button:focus-visible   { outline: 2px solid var(--mss-gold-400); outline-offset: 2px; }
.mh-nav button.active          { color: var(--mss-marian-700); }
.mh-nav button.active::after   { left: 14px; right: 14px; height: 2px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mh-nav button, .mh-nav button::after { transition: opacity 120ms ease; }
  .mh-nav button:hover::after { left: 14px; right: 14px; }
}
.mh-cta {
  margin-left: 14px;
}

/* ---------- Tricolor bar ---------- */
/* Middle band is pure #fff (Italian flag reference). The earlier
   var(--mss-cream-100) matched the site's cream body background and
   made the middle segment disappear on-page. */
.tricolor {
  height: 3px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--mss-coral-400) 66.66% 100%);
}

/* ---------- Paired flagbar (Sicilian over Italian) ---------- */
/* Reusable dual-flag ribbon used under hero-script and other headings
   where we want both heritages visible. Sicilian is bicolor (yellow /
   red), Italian is tricolor (green / white / red). Yellow and red on
   the Sicilian row are flag-specific literals; the Italian row uses
   the site's tokens so it stays in sync with the tricolor bar. */
.flagbar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 96px;
}
/* Centered variant for use inside SectionHead — sits above the sub */
.flagbar-center {
  margin: 14px auto 16px;
}
.flagbar .tri {
  display: flex;
  height: 4px;
  width: 100%;
  overflow: hidden;
  border-radius: 1px;
}
.flagbar .tri i { flex: 1; }
.flagbar .tri i:nth-child(1) { background: var(--mss-green-500); }
.flagbar .tri i:nth-child(2) { background: #ffffff; }
.flagbar .tri i:nth-child(3) { background: var(--mss-coral-400); }
.flagbar .tri.sic i:nth-child(1) { background: #EAB308; }
.flagbar .tri.sic i:nth-child(2) { background: #D42D2A; }

/* ---------- Buttons ---------- */
.btn {
  font: 600 14px var(--font-sans);
  letter-spacing: 0.02em;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform 80ms var(--ease-out);
  text-decoration: none;
}
.btn:active { transform: scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--mss-gold-400); outline-offset: 2px; }
.btn-primary { background: var(--mss-marian-500); color: var(--mss-cream-50); }
.btn-primary:hover { background: var(--mss-marian-600); }
.btn-secondary { background: transparent; color: var(--mss-marian-600); border-color: var(--mss-marian-500); }
.btn-secondary:hover { background: var(--mss-marian-50); }
.btn-ghost { background: transparent; color: var(--mss-stone-600); border-color: var(--mss-line-strong); }
.btn-ghost:hover { background: var(--mss-cream-100); color: var(--mss-stone-800); }
.btn-ghost-on-dark {
  background: transparent;
  color: var(--mss-cream-100);
  border-color: rgba(255,255,255,0.45);
}
.btn-ghost-on-dark:hover {
  background: rgba(255,255,255,0.10);
  color: var(--mss-cream-50);
  border-color: rgba(255,255,255,0.65);
}
.btn-coral { background: var(--mss-coral-400); color: var(--mss-cream-50); }
.btn-coral:hover { background: var(--mss-coral-500); }
.btn-link {
  background: transparent; border: none; padding: 0;
  color: var(--mss-coral-400);
  font: 600 14px var(--font-sans);
  letter-spacing: 0.02em;
}
.btn-link:hover { color: var(--mss-coral-500); }
.btn-on-dark { background: var(--mss-gold-400); color: var(--mss-stone-900); }
.btn-on-dark:hover { background: var(--mss-gold-300); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  color: var(--mss-cream-50);
  background-size: cover;
  background-position: center 35%;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(6, 24, 36, 0.94) 0%,
    rgba(6, 24, 36, 0.78) 30%,
    rgba(6, 24, 36, 0.48) 60%,
    rgba(6, 24, 36, 0.28) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 32px 64px 32px;
  width: 100%;
}
.hero-kicker {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.28em;
  color: var(--mss-gold-200);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.hero-kicker .dia {
  width: 6px; height: 6px; background: var(--mss-gold-300); transform: rotate(45deg);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 12px 0;
  max-width: 14ch;
  text-wrap: balance;
}
/* Per-segment spans set by pages.jsx. Default: each on its own line
   (matches the pre-split behaviour we had via whiteSpace:pre-line). */
.hero-title-line { display: block; }
/* Mobile only — join segments 1 and 2 inline so the English 3-line
   title reads as two lines ("One hundred" / "twenty-two years.").
   Line 0 stays block, so it forces the visual break. The ::before
   space sits between the two joined segments. IT / SCN have only
   two segments; hero-title-line-2 doesn't exist for them, so those
   languages render unchanged. */
@media (max-width: 640px) {
  .hero-title-line-1 { display: inline; }
  .hero-title-line-2 { display: inline; }
  .hero-title-line-2::before { content: " "; }
}
.hero-script {
  font-family: var(--font-script);
  font-size: clamp(36px, 4vw, 56px);
  color: var(--mss-gold-200);
  line-height: 1;
  margin-bottom: 28px;
}
.hero-lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 540px;
  margin: 0 0 32px 0;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Section ---------- */
.section { padding: 96px 32px; }
.section-tight { padding: 64px 32px; }
.section-inner { max-width: 1180px; margin: 0 auto; }
.section-prose { max-width: 680px; margin: 0 auto; }

/* ---------- Homepage "Our Purpose / Faith, Family and Tradition" ----------
   A pencil-sketch elevation of the Basilica di Sciacca sits behind the
   section content as an atmospheric ghost image, echoing the mother
   church without competing with the tricolor heading or the three
   cards below it. Positioned bottom-center so the building appears
   to "hold up" the copy; opacity kept low (~13%) so it reads as
   watermark, not artwork. isolation: isolate scopes the negative
   z-index of the pseudo-element so it can't slide under the section
   above or below. */
.purpose-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.purpose-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  /* --pp-y is set by the parallax effect in HomePage. Falls back to 0 so
     reduced-motion users + non-JS renders still center correctly. */
  transform: translate(-50%, var(--pp-y, 0));
  will-change: transform;
  width: min(1200px, 96%);
  aspect-ratio: 1672 / 941;
  background: url("/assets/basilica-sciacca.jpg") no-repeat center top / contain;
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .purpose-section::before { transform: translateX(-50%); will-change: auto; }
}

/* ---------- History page: ambient emigration-sketch background ----------
   A wide horizontal pencil sketch — Sicilian emigrants departing for New
   York, Statue of Liberty in the distance — sits fixed behind the page
   content as an atmospheric watermark. Faint (~14%) so text stays legible;
   the parallax translate (--emig-y set by HistoryTimelinePage useEffect)
   drifts it as the reader scrolls. isolation: isolate scopes the -1
   z-index so the sketch can't bleed into the header or footer. */
.history-page {
  position: relative;
  isolation: isolate;
}
.history-page::before {
  content: "";
  position: fixed;
  inset: 0;                       /* fill the viewport top-to-bottom */
  transform: translateY(var(--emig-y, 0));
  background: url("/assets/history-emigration.jpg") no-repeat center center / cover;
  opacity: 0.14;
  filter: sepia(0.4) saturate(0.55);
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
@media (max-width: 760px) {
  .history-page::before { opacity: 0.10; }
}
@media (prefers-reduced-motion: reduce) {
  .history-page::before { transform: none; will-change: auto; }
}

/* ---------- Feast page: ambient shrine-sketch background ----------
   Pencil sketch of the ornate shrine + statue of Maria SS. del Soccorso
   fixed behind the feast content. Same watermark pattern as the
   history emigration sketch — faint (~13%), sepia-desaturated, drifts
   via --shrine-y set by FeastPage useEffect. Portrait-oriented so it
   sits taller than wide in the frame. */
.feast-page {
  position: relative;
  isolation: isolate;
}
/* Full-viewport shrine watermark. background-size: contain (with a
   height ceiling of 100vh) keeps the whole shrine visible regardless
   of viewport aspect — she stays framed floor-to-ceiling, centered.
   Parallax translateY via --shrine-y for the gentle scroll drift. */
.feast-page::before {
  content: "";
  position: fixed;
  inset: 0;
  transform: translateY(var(--shrine-y, 0));
  background: url("/assets/feast-shrine.jpg") no-repeat center center / contain;
  opacity: 0.14;
  filter: sepia(0.35) saturate(0.55);
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
@media (max-width: 760px) {
  .feast-page::before { opacity: 0.10; }
}
@media (prefers-reduced-motion: reduce) {
  .feast-page::before { transform: none; will-change: auto; }
}
/* Narrow screens: widen the sketch beyond viewport so the building's
   silhouette still reads at phone width, and pull the opacity down a
   touch since text sits closer to it in the tighter layout. */
@media (max-width: 760px) {
  .purpose-section::before {
    width: 130%;
    top: 12px;
    opacity: 0.17;
  }
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
  /* Force eyebrow / title / sub to stack — both .section-eyebrow and the
     .section-title with .h-tricolor-under are inline-level, so without
     this they collapse onto a single row in wide viewports. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Sicilian-majolica watercolor damask, marian-blue on white. Opt-in
   via <SectionHead ornament />. Sits centered above the eyebrow as
   an illuminated-manuscript flourish. Kept modest (~56px tall) so it
   reads as decoration rather than artwork; the eyebrow is what the
   reader latches onto for meaning. */
.section-ornament {
  display: block;
  width: auto;
  height: 56px;
  margin: 0 auto 18px;
  opacity: 0.9;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 640px) {
  .section-ornament { height: 46px; margin-bottom: 14px; }
}
.section-eyebrow {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: ""; width: 36px; height: 1px; background: var(--mss-gold-300);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 auto 16px;
  max-width: 22ch;
  text-wrap: balance;
}
.section-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 auto;
  text-wrap: pretty;
}

.section-dark { background: var(--mss-marian-800); color: var(--mss-cream-50); }
.section-dark .section-title { color: var(--mss-cream-50); }
.section-dark .section-sub { color: rgba(255,255,255,0.78); }
.section-dark .section-eyebrow { color: var(--mss-gold-300); }
.section-dark .section-eyebrow::before,
.section-dark .section-eyebrow::after { background: var(--mss-gold-500); }

/* Section variant: the marian-navy 1979-history quote gets the Society
   CORPORATE seal (black-and-white line-art, transparent PNG) as a
   centered watermark behind the italic quote text. filter: invert(1)
   flips the black rope border + Madonna line-art to cream so it reads
   against the dark ground; transparent stays transparent, so the
   watermark stays a clean silhouette. Low opacity keeps the quote
   itself the focal point; isolation: isolate scopes the negative
   z-index so the seal can't leak into the adjacent sections above
   or below. */
.quote-section-with-seal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.quote-section-with-seal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 84%);
  aspect-ratio: 1 / 1;
  background: url("/assets/seal-corporate.png") no-repeat center / contain;
  filter: invert(1);
  opacity: 0.20;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 640px) {
  .quote-section-with-seal::before {
    width: 92%;
    opacity: 0.15;
  }
}
.section-dark .quote-text { color: var(--mss-cream-50); }
.section-dark .quote-cite { color: var(--mss-gold-300); }
.section-dark .quote-mark { color: var(--mss-gold-300); }
.section-dark .prose p,
.section-dark .prose h2,
.section-dark .prose h3 { color: var(--mss-cream-50); }
.section-dark .prose blockquote { color: var(--mss-cream-100); border-color: var(--mss-gold-300); }

.section-cream { background: var(--mss-cream-100); }

/* ---------- Card ---------- */
.card {
  background: #fff;
  border: 1px solid var(--mss-line);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Fill the grid cell so a row of cards is always the same height. */
  height: 100%;
}
.card-eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  display: flex; align-items: center; gap: 10px;
}
.card-eyebrow .dia { width: 6px; height: 6px; background: var(--mss-gold-400); transform: rotate(45deg); }
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--mss-cream-100);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--mss-line);
}
.card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.1; color: var(--fg-1); margin: 0;
}
.card-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--fg-2); margin: 0; font-style: italic;
  /* Grow to fill remaining height so the footer link sits at the bottom
     of every card regardless of how long the body copy runs. */
  flex-grow: 1;
}

/* ---------- Divider with diamond ---------- */
.divider {
  position: relative; height: 1px; background: var(--mss-line);
  margin: 32px auto; max-width: 560px;
}
.divider::after {
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px; background: var(--mss-gold-400);
  transform:translate(-50%,-50%) rotate(45deg);
}
.divider-dark { background: rgba(255,255,255,0.18); }
.divider-dark::after { background: var(--mss-gold-300); }

/* ---------- Schedule (feast page) ---------- */
.schedule {
  display: flex; flex-direction: column; gap: 0;
  background: #fff;
  border: 1px solid var(--mss-line);
  box-shadow: var(--shadow-sm);
}
.schedule-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 28px;
  align-items: start;
  padding: 24px 28px;
  border-bottom: 1px solid var(--mss-line);
}
.schedule-row:last-child { border-bottom: none; }
/* Rows tied to a real event row become clickable — hover + keyboard-
   focus states signal that tapping them opens the details modal. */
.schedule-row.clickable {
  cursor: pointer;
  transition: background 120ms ease;
}
.schedule-row.clickable:hover,
.schedule-row.clickable:focus-visible {
  background: var(--mss-cream-100);
}
.schedule-row.clickable:focus-visible {
  outline: 2px solid var(--mss-gold-500);
  outline-offset: -2px;
}
/* Calendar-tear-off tile — same visual pattern as .event-date on
   the events page. Blue header carries the month; cream body holds
   the big day number; the weekday (Fri, Sat, ...) drops below the
   tile as a small monoline. Uses .mo / .num / .dow because the feast
   schedule was already keyed that way; the tile shape matches
   .event-date so both surfaces read consistently. */
.schedule-day {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; line-height: 1;
  min-width: 68px;
}
.schedule-day .mo,
.schedule-day .num {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.schedule-day .mo {
  background: var(--mss-marian-500);
  color: #fff;
  font: 700 11px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--mss-line-strong);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.schedule-day .num {
  background: var(--mss-cream-100, #f5efe0);
  color: var(--fg-1);
  font-family: var(--font-display); font-weight: 600;
  font-size: 32px; line-height: 1;
  text-align: center;
  padding: 8px 6px 10px;
  border: 1px solid var(--mss-line-strong);
  border-top: none;
  border-radius: 0 0 4px 4px;
  letter-spacing: -0.01em;
}
.schedule-day .dow {
  font-family: var(--font-mono); font-weight: 500; font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 2px;
}
.schedule-event {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.3; color: var(--fg-1);
}
.schedule-event .where {
  display: block;
  font: 400 14px var(--font-body); font-style: italic;
  color: var(--fg-3); margin-top: 4px;
}
.schedule-time {
  font-family: var(--font-mono); font-size: 13px; color: var(--mss-stone-600);
  letter-spacing: 0.04em;
  padding-top: 8px; /* nudge the time to sit near the title's cap-height */
  white-space: nowrap;
}

/* ---------- In Memoriam strip ---------- */
.honor {
  background: var(--mss-cream-100);
  border-top: 1px solid var(--mss-line);
  border-bottom: 1px solid var(--mss-line);
  padding: 56px 32px;
  text-align: center;
}
.honor-eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mss-stone-500);
  margin-bottom: 14px;
}
.honor-names {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-1);
  line-height: 1.7;
  max-width: 900px; margin: 0 auto;
}
.honor-names .cross {
  color: var(--mss-coral-400);
  font-style: normal;
  font-weight: 700;
  margin: 0 6px;
}

/* ---------- Quote ---------- */
.quote-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mss-gold-400);
  font-size: 120px;
  line-height: 0.5;
  margin-bottom: 24px;
  user-select: none;
}
.quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 22px;
  text-wrap: balance;
}
.quote-cite {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-stone-500);
}

/* ---------- Photo strip / gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
.gallery .ph {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--mss-line);
}
.gallery .ph.tall { aspect-ratio: 3 / 4; }
.gallery .ph.wide { aspect-ratio: 16 / 9; }

/* ---------- Photo rail (horizontal scrollable gallery, snap-aligned) ---------- */
.photo-rail-wrap { position: relative; overflow: hidden; }
.photo-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Left-anchored rail. The first slide hugs the left edge so the
     gallery reads as "starts here, scroll right for more" instead of
     drifting to the center on wide screens. scroll-padding-left makes
     snap targets land 16px from the left, matching the container's
     own padding-left so the first slide rests perfectly on snap. */
  padding: 4px 16px 18px;
  scroll-padding-left: 16px;
  margin: 0;
  /* Hide native scrollbar across all browsers — navigation is via the
     overlay arrows and dots beneath. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.photo-rail::-webkit-scrollbar { display: none; }

.photo-rail .slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--mss-line);
  width: min(640px, 78vw);
  aspect-ratio: 4 / 3;
  position: relative;
}
.photo-rail .slide .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px 16px;
  background: linear-gradient(to top, rgba(6,24,36,0.88), rgba(6,24,36,0));
  color: var(--mss-cream-50);
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.photo-rail .slide.portrait { aspect-ratio: 3 / 4; }

/* Overlay arrow buttons — vertically centered on the rail itself so
   they're visible without scrolling. Previously sat under the dots
   below the rail; users were missing them. */
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(6, 24, 36, 0.62);
  color: var(--mss-cream-50, #f6efde);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font: 700 22px/1 var(--font-display, Georgia, serif);
  cursor: pointer;
  padding: 0;
  transition: background 180ms ease, transform 180ms ease;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.rail-arrow:hover  { background: rgba(6, 24, 36, 0.88); }
.rail-arrow:active { transform: translateY(-50%) scale(0.95); }
.rail-arrow:focus-visible {
  outline: 2px solid var(--mss-gold-400, #d6ad53);
  outline-offset: 2px;
}
.rail-arrow-prev { left: 12px; }
.rail-arrow-next { right: 12px; }
@media (max-width: 720px) {
  .rail-arrow { width: 40px; height: 40px; font-size: 18px; }
  .rail-arrow-prev { left: 6px; }
  .rail-arrow-next { right: 6px; }
}

/* Half-size variant used by the dedication slideshow on /history
   and the past-feasts slideshow on /feast. Shrinks slide width and
   keeps the same left-anchored padding model as the base rail. */
.photo-rail-compact .photo-rail {
  padding: 4px 16px 14px;
  scroll-padding-left: 16px;
  gap: 12px;
}
.photo-rail-compact .photo-rail .slide { width: min(320px, 40vw); }
.photo-rail-compact .photo-rail .slide .cap {
  padding: 12px 14px 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.photo-rail-compact .rail-arrow { width: 40px; height: 40px; font-size: 18px; }
.photo-rail-compact .rail-arrow-prev { left: 8px; }
.photo-rail-compact .rail-arrow-next { right: 8px; }

/* ---------- Photo lightbox (tap-to-enlarge for PhotoRail slides) ----------
   Uses dynamic viewport units (dvh) for height so iOS Safari sizes the
   container to the CURRENTLY visible viewport, not the larger "address
   bar hidden" viewport that vh refers to. Without this, the figure
   inside is centered within an artificially tall box and appears
   offset upward on mobile. vh kept as a fallback for ancient browsers. */
.photo-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 9000;
  background: rgba(8, 18, 28, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: photo-lightbox-in 180ms ease-out;
}
@keyframes photo-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.photo-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.photo-lightbox-figure img {
  max-width: 100%;
  /* dvh = dynamic viewport height (the actually-visible chunk on iOS
     Safari with whatever toolbars are currently showing). vh fallback
     stays for browsers that don't support dvh yet. */
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Slight cream border so portraits don't blend into the dark bg edge. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.photo-lightbox-figure figcaption {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mss-cream-100, #f0e6cf);
  text-align: center;
  max-width: 640px;
}
.photo-lightbox-close,
.photo-lightbox-arrow {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: var(--mss-cream-50, #f6efde);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background 180ms ease, transform 180ms ease;
}
.photo-lightbox-close:hover,
.photo-lightbox-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.photo-lightbox-close:active,
.photo-lightbox-arrow:active { transform: scale(0.95); }
.photo-lightbox-close:focus-visible,
.photo-lightbox-arrow:focus-visible {
  outline: 2px solid var(--mss-gold-400, #d6ad53);
  outline-offset: 2px;
}
.photo-lightbox-close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font: 400 28px/1 system-ui, sans-serif;
}
.photo-lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font: 700 24px/1 var(--font-display, Georgia, serif);
}
.photo-lightbox-arrow-prev { left: 18px; }
.photo-lightbox-arrow-next { right: 18px; }
.photo-lightbox-arrow:active { transform: translateY(-50%) scale(0.95); }

/* Counter pill ("3 / 6") — top center on desktop; visible always when
   there's more than one slide. Helps users keep their place. */
.photo-lightbox-counter {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--mss-cream-100, #f0e6cf);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
}

@media (max-width: 720px) {
  /* Phone layout: drop side padding entirely so the image owns the
     full screen width; vertical padding kept symmetric so the
     centered figure sits in the optical center of the viewport. The
     close button and counter pill float in the top padding without
     taking layout space, so a balanced top/bottom works. */
  .photo-lightbox { padding: 56px 4px 56px; }
  .photo-lightbox-figure { gap: 12px; }
  .photo-lightbox-figure img {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    /* Allow native pinch-zoom on the actual photo. */
    touch-action: pinch-zoom;
  }
  .photo-lightbox-figure figcaption { padding: 0 14px; }
  .photo-lightbox-close { width: 40px; height: 40px; font-size: 24px; top: 10px; right: 10px; }
  .photo-lightbox-counter { top: 18px; padding: 5px 12px; font-size: 10px; }
  /* Hide the side arrows on phones — swipe left/right is the primary
     gesture, and the buttons just eat horizontal image space at this
     size. Desktop/tablet still get them. */
  .photo-lightbox-arrow { display: none; }
}
.photo-rail .slide { cursor: zoom-in; }

.rail-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  gap: 16px;
}
.rail-nav .dots {
  display: flex; gap: 8px;
  flex: 1; justify-content: center;
}
.rail-nav .dots button {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  background: var(--mss-cream-200);
  cursor: pointer;
  padding: 0;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.rail-nav .dots button.active {
  background: var(--mss-gold-400);
  transform: scale(1.4);
}
.rail-nav .arrows { display: flex; gap: 8px; }
.rail-nav .arrows button {
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--mss-line-strong);
  border-radius: 999px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--mss-marian-700);
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.rail-nav .arrows button:hover {
  background: var(--mss-cream-100);
  border-color: var(--mss-gold-400);
}
.rail-nav .arrows button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .photo-rail .slide { width: 86vw; }
  .rail-nav .arrows { display: none; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--mss-marian-900);
  color: rgba(255,255,255,0.78);
  padding: 0 0 32px;
}
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* Newsletter callout — top of the footer. Matches the header
   Masthead treatment (dark on Marian navy, gold accents) and sits
   right above the tricolor divider. */
.footer-newsletter { padding: 72px 32px 56px; text-align: center; }
.footer-newsletter-inner { max-width: 640px; margin: 0 auto; }
.footer-newsletter-eyebrow {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mss-gold-300, #d5b774);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.footer-newsletter-eyebrow::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 1px;
  background: var(--mss-gold-300, #d5b774);
  opacity: 0.7;
}
.footer-newsletter-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.25;
  color: var(--mss-cream-50, #f6f0e2);
  margin: 0 0 20px;
}
.footer-newsletter-title-name {
  font-family: var(--font-script, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--mss-gold-300, #d5b774);
  font-size: 40px;
}
.footer-newsletter-sub {
  font-family: var(--font-body, Georgia, serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  margin: 0 auto 30px;
  max-width: 46ch;
}
.footer-newsletter-cta {
  display: inline-block;
  width: 100%;
  max-width: 480px;
  padding: 18px 28px;
  background: var(--mss-gold-400, #c19d47);
  color: var(--mss-marian-900, #0f1f45);
  border: none;
  border-radius: 2px;
  font: 600 13px var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.footer-newsletter-cta:hover { background: var(--mss-gold-300, #d5b774); }
.footer-newsletter-cta:active { transform: translateY(1px); }
.footer-newsletter-cta:focus-visible { outline: 2px solid var(--mss-cream-50); outline-offset: 3px; }

/* Seal centered below the tricolor divider. Small so it reads as a
   crest, not a mark logo. */
.footer-seal { display: flex; justify-content: center; padding: 40px 32px 4px; }
.footer-seal img { width: 172px; height: 172px; display: block; }

@media (max-width: 640px) {
  .footer-newsletter { padding: 48px 24px 36px; }
  .footer-newsletter-title { font-size: 26px; }
  .footer-newsletter-title-name { font-size: 32px; }
  .footer-newsletter-cta { letter-spacing: 0.16em; padding: 16px 20px; }
  .footer-seal { padding: 28px 24px 2px; }
  .footer-seal img { width: 144px; height: 144px; }
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding: 16px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--mss-cream-50);
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.footer-script {
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--mss-gold-200);
  line-height: 1;
  margin-bottom: 16px;
}
.footer-body { font-family: var(--font-body); font-size: 14px; line-height: 1.7; max-width: 32ch; font-style: italic; }
.footer-col-head {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-300);
  margin: 0 0 16px 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  text-decoration: none;
  color: rgba(255,255,255,0.78);
  font: 400 14px var(--font-body);
}
.footer-col a:hover { color: var(--mss-cream-50); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font: 400 12px var(--font-sans);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
.footer-credit {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-credit a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  font: 400 11px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.footer-credit a:hover { opacity: 1; }
.footer-credit .credit-text { white-space: nowrap; }
.footer-credit img { height: 22px; width: auto; display: block; }
@media (max-width: 640px) {
  .footer-credit a { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---------- Members page ---------- */
.member-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--mss-line); box-shadow: var(--shadow-sm);
}
.member-table thead th {
  background: var(--mss-cream-100);
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mss-stone-600);
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--mss-line);
}
.member-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mss-line);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-1);
}
.member-table tbody tr:last-child td { border-bottom: none; }
.member-table tbody tr:hover { background: var(--mss-cream-50); }

.badge {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.b-good { background: var(--mss-green-500); color: #fff; }
.b-due  { background: var(--mss-gold-100); color: var(--mss-gold-700); border: 1px solid var(--mss-gold-300); }
.b-life { background: var(--mss-marian-500); color: var(--mss-cream-50); }
.b-mem  { background: var(--mss-cream-100); color: var(--mss-stone-700); border: 1px solid var(--mss-line-strong); }

/* ---------- Login card ---------- */
.login {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--mss-line);
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
}
.login h2 { font-family: var(--font-display); font-weight: 500; font-size: 32px; margin: 0 0 8px; color: var(--fg-1); }
.login .sub { font-family: var(--font-body); font-style: italic; color: var(--fg-3); font-size: 14px; margin-bottom: 24px; }

/* Signup card — used by the /signup + /claim flow. scroll-margin-top
   leaves breathing room below the sticky masthead when we scroll the
   card into view on step change (SignupPage's useEffect on [step]).
   Desktop masthead ≈ 96 + 38 = 134px; mobile is ~48 + 74 = 122px. Use
   140/130 to give a little air. */
.signup-card { scroll-margin-top: 140px; }
@media (max-width: 640px) {
  .signup-card { scroll-margin-top: 130px; }
}

/* Mobile: pull the login card up so the fields sit above the fold on
   phones. On a 375-wide viewport the .section's 96px top padding + the
   full "Welcome to the M.S.S. Society…" subhead pushed everything below
   the fold (fields didn't appear until scroll). Rules are scoped to
   the login section via :has() so no other page's SectionHead / margin
   is affected. */
@media (max-width: 640px) {
  .section-inner:has(> .login) {
    /* Kill the intro paragraph — the eyebrow ("Members") + title
       ("Sign in") + card heading ("Welcome back.") already frame the
       page; the paragraph is redundant on a phone screen. */
    .section-sub { display: none; }
    /* Tighten the SectionHead so eyebrow + title stack takes less
       vertical room. */
    .section-head { margin-bottom: 20px; }
    .section-eyebrow { margin-bottom: 8px; font-size: 11px; }
    .section-title { font-size: 34px; margin: 4px 0; }
  }
  /* Tighten the outer section padding on this route so the card sits
     closer to the masthead. */
  .section:has(> .section-inner > .login) { padding: 32px 18px 48px; }
  /* Card itself: smaller heading + inner padding on a phone. */
  .login { padding: 24px 20px; }
  .login h2 { font-size: 26px; margin-bottom: 6px; }
}
.field { margin-bottom: 18px; }
.field label { display: block; font: 600 12px var(--font-sans); letter-spacing: 0.04em; color: var(--fg-2); margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box;
  background: var(--mss-cream-100);
  border: 1px solid var(--mss-line-strong);
  border-radius: 2px;
  padding: 12px 14px;
  font: 400 15px var(--font-body);
  color: var(--fg-1);
  box-shadow: var(--shadow-inset);
}
.field input:focus { outline: 2px solid var(--mss-gold-400); outline-offset: 2px; border-color: var(--mss-marian-500); }

/* ---------- History prose ---------- */
.prose { max-width: 680px; margin: 0 auto; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-1); }
.prose p { margin: 0 0 18px; text-wrap: pretty; }
.prose p.lede { font-style: italic; font-size: 20px; color: var(--fg-2); margin-bottom: 32px; }
.prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.1; margin: 48px 0 16px; color: var(--fg-1); }
.prose h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 32px 0 12px; }
.prose blockquote {
  margin: 28px 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--mss-gold-400);
  font-style: italic;
  color: var(--fg-1);
  font-size: 20px;
  line-height: 1.5;
}
.prose figure { margin: 32px 0; }
.prose figure img { width: 100%; height: auto; border: 1px solid var(--mss-line); }
.prose figcaption { font: 400 13px var(--font-sans); color: var(--fg-3); letter-spacing: 0.02em; margin-top: 8px; font-style: italic; text-align: center; }

/* ---------- Feast countdown ----------
   Sits above the feast hero. Marian-blue band with gold accents. */
.feast-countdown {
  background: var(--mss-marian-900);
  color: var(--mss-cream-50);
  padding: 22px 32px 24px;
  text-align: center;
  border-bottom: 1px solid var(--mss-marian-700);
}
.feast-countdown-inner {
  max-width: 720px;
  margin: 0 auto;
}
.feast-countdown-eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  color: var(--mss-gold-300);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.feast-countdown-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}
.fc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}
.fc-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  color: var(--mss-cream-50);
  letter-spacing: -0.01em;
  /* Tabular figures keep ticking digits from horizontally shifting. */
  font-variant-numeric: tabular-nums;
}
.fc-lbl {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mss-gold-200);
  margin-top: 6px;
}
.fc-sep {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--mss-gold-300);
  line-height: 1;
  padding-top: 6px;
}
.feast-countdown-now-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--mss-cream-50);
  letter-spacing: -0.01em;
}
.feast-countdown-now .feast-countdown-inner::before {
  content: "✦";
  display: block;
  color: var(--mss-gold-300);
  font-size: 18px;
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  .feast-countdown { padding: 18px 16px 20px; }
  .fc-num { font-size: 36px; }
  .fc-sep { font-size: 26px; padding-top: 4px; }
  .fc-unit { min-width: 42px; }
  .feast-countdown-clock { gap: 8px; }
  .feast-countdown-now-text { font-size: 22px; }
}

/* ---------- Feast hero (smaller, asymmetric) ---------- */
.feast-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  min-height: 480px;
}
.feast-hero-photo { background-size: cover; background-position: center; }
.feast-hero-text {
  padding: 80px 56px;
  background: var(--mss-marian-800);
  color: var(--mss-cream-50);
  display: flex; flex-direction: column; justify-content: center;
}
.feast-date-block {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 500;
  line-height: 0.9;
  color: var(--mss-gold-300);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.feast-date-sub {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mss-cream-100);
  margin-bottom: 28px;
}
.feast-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--mss-cream-50);
}
.feast-h1-script {
  font-family: var(--font-script);
  font-size: 36px;
  color: var(--mss-gold-200);
  margin-bottom: 24px;
}
.feast-lede { font-family: var(--font-body); font-style: italic; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 40ch; margin: 0; }

/* ---------- Three-up cards ---------- */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
/* Force each grid item to fill its row so the inner .card heights match. */
.three-up > .reveal { display: flex; flex-direction: column; }
.three-up > .reveal > .card { flex: 1; }

/* ---------- Photo with caption ---------- */
.photo-block { position: relative; overflow: hidden; border: 1px solid var(--mss-line); }
.photo-block img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-block figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(6,24,36,0.92), rgba(6,24,36,0));
  color: var(--mss-cream-50);
  padding: 16px 18px 14px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Two-column with image ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-photo { aspect-ratio: 4/5; background-size: cover; background-position: center; border: 1px solid var(--mss-line); }

/* ---------- Donate stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 56px 0; }
.stat { text-align: center; }
/* Hand-drawn line-art SVG above each stat number (torch / three figures /
   cross with rays). Colored via currentColor so all three inherit the
   same gold as the display number below them. Fixed height keeps the
   three icons visually aligned regardless of individual viewBox. */
.stat-icon {
  color: var(--mss-gold-500);
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}
.stat-icon svg { display: block; height: 100%; width: auto; }
.stat-num { font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: 1; color: var(--mss-gold-400); margin-bottom: 8px; letter-spacing: -0.02em; }
.stat-label { font: 600 12px var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 640px) {
  .stat-icon { height: 28px; margin-bottom: 10px; }
}

@media (max-width: 880px) {
  .feast-hero { grid-template-columns: 1fr; min-height: 0; }
  /* When the hero collapses to a single column, the photo cell has no
     content and no explicit height — it renders 0px tall and the
     background-image never shows. Give it a sensible landscape ratio
     so the procession shot reads above the text block. */
  .feast-hero-photo { aspect-ratio: 4 / 3; width: 100%; }
  .feast-hero-text { padding: 40px 24px; }
  .three-up { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: 28px; }
  .gallery { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   ADDITIONS — newsletter, motion, social, events, admin, member portal,
   mobile masthead. Layered on top of the foundations above.
   =========================================================================== */

/* ---------- Mobile masthead / hamburger ---------- */
.mh-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--mss-line-strong);
  border-radius: 2px;
  padding: 8px 10px;
  cursor: pointer;
  margin-left: auto;
}
.mh-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--mss-marian-700);
  margin: 4px 0;
  transition: transform 200ms var(--ease-out), opacity 200ms;
}
.mh-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mh-burger.open span:nth-child(2) { opacity: 0; }
.mh-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mh-mobile-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-page);
  padding: 84px 32px 32px;
  transform: translateX(100%);
  transition: transform 300ms var(--ease-out);
  z-index: 60;
  overflow-y: auto;
}
.mh-mobile-panel.open { transform: translateX(0); }
.mh-mobile-panel nav {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--mss-line);
}
.mh-mobile-panel nav button {
  background: transparent; border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--mss-marian-700);
  padding: 16px 4px;
  border-bottom: 1px solid var(--mss-line);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.mh-mobile-panel nav button::after {
  content: "→";
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--mss-gold-500);
}
.mh-mobile-panel nav button.active { color: var(--mss-coral-400); }
.mh-mobile-panel .mh-mobile-cta {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.mh-mobile-panel .mh-mobile-cta .btn { justify-content: center; padding: 14px 20px; }

/* ---------- Newsletter modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 35, 53, 0.78);
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
  /* Allow the overlay itself to scroll on viewports too short for
     the modal (small phones with the keyboard up, etc). */
  overflow-y: auto;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--mss-cream-50);
  border: 1px solid var(--mss-gold-300);
  max-width: 480px;
  width: 100%;
  padding: 40px 40px 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: translateY(12px);
  transition: transform 320ms var(--ease-out);
}

/* Mobile: tighten the modal so it fits a narrow viewport without
   clipping above or extending past the screen, and shrink the giant
   display + script type so "M.S.S. Society" reads as one wrapped
   phrase instead of three. */
@media (max-width: 640px) {
  .modal-overlay { padding: 16px 12px; align-items: flex-start; }
  .modal { padding: 28px 22px 24px; max-width: 100%; }
  .modal-seal { width: 48px; height: 48px; margin-bottom: 12px; }
  .modal-eyebrow { font-size: 10px; letter-spacing: 0.20em; margin-bottom: 8px; }
  .modal h3 { font-size: 24px; line-height: 1.15; }
  .modal h3 .script { font-size: 26px; }
  .modal .modal-sub { font-size: 14px; margin-bottom: 18px; }
  .modal .tabs button { padding: 9px 6px; font-size: 11px; letter-spacing: 0.12em; }
  .modal-close { top: 8px; right: 8px; }
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: none; cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  font-size: 22px;
  line-height: 1;
}
.modal-close:hover { color: var(--fg-1); }
.modal-seal { width: 56px; height: 56px; margin: 0 auto 16px; display: block; }
.modal-eyebrow {
  text-align: center;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin-bottom: 10px;
}
.modal h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.modal h3 .script {
  font-family: var(--font-script);
  color: var(--mss-coral-400);
  font-size: 36px;
  letter-spacing: 0;
}
.modal .modal-sub {
  text-align: center;
  font-style: italic;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.modal .tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--mss-line);
}
.modal .tabs button {
  background: transparent; border: none;
  padding: 10px 8px;
  font: 600 12px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.modal .tabs button.active {
  color: var(--mss-marian-700);
  border-bottom-color: var(--mss-gold-400);
}
.modal .modal-tricolor {
  height: 3px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--mss-coral-400) 66.66% 100%);
  margin: 16px 0 0;
}
.modal-success {
  text-align: center;
  padding: 12px 0 0;
}
.modal-success .checkmark {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--mss-green-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 28px;
}

/* Floating "Stay connected" CTA */
.float-cta {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 40;
  background: var(--mss-marian-500);
  color: var(--mss-cream-50);
  border: none;
  padding: 14px 20px;
  font: 600 12px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  transition: background 200ms var(--ease-out);
}
.float-cta:hover { background: var(--mss-marian-600); }
.float-cta .flag-it {
  display: inline-block;
  width: 18px;
  height: 12px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    var(--mss-cream-50) 33.33% 66.66%,
    var(--mss-coral-500) 66.66% 100%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 1px;
  vertical-align: middle;
}

/* ---------- Tricolor heading underline ---------- */
.h-tricolor-under {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.h-tricolor-under::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 96px; height: 3px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--mss-coral-400) 66.66% 100%);
}
.section-head .h-tricolor-under::after { left: 50%; transform: translateX(-50%); }

/* Tricolor dot triplet (heading prefix) */
.tricolor-dots {
  display: inline-flex; gap: 4px; align-items: center;
  margin-right: 10px;
  vertical-align: middle;
}
.tricolor-dots span {
  width: 7px; height: 7px;
  display: block;
}
.tricolor-dots span:nth-child(1) { background: var(--mss-green-500); }
.tricolor-dots span:nth-child(2) { background: #ffffff; border: 1px solid var(--mss-line); }
.tricolor-dots span:nth-child(3) { background: var(--mss-coral-400); }

/* ---------- Motion: reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* Hero Ken Burns: slow zoom */
@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center bottom;
  animation: kenburns 28s var(--ease-in-out) both;
  will-change: transform;
}
/* Hero video — full-bleed, fills the section, sits below the gradient scrim */
.hero-video {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--mss-marian-900);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background-image: url("/assets/hero-procession-poster.jpg"); background-size: cover; background-position: center; }
}
.hero-bg::before { content: none; }

/* Animated counter highlight */
.counter-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------- Timeline (vertical, animated) ---------- */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 80px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0,
    var(--mss-gold-400) 60px,
    var(--mss-gold-400) calc(100% - 60px),
    transparent 100%);
}
.tl-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 28px 0;
  position: relative;
}
.tl-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  color: var(--mss-marian-700);
  line-height: 1;
  text-align: right;
  padding-right: 14px;
  letter-spacing: -0.01em;
}
.tl-dot {
  position: absolute;
  left: 76px;
  top: 36px;
  width: 12px; height: 12px;
  background: var(--mss-gold-400);
  border: 2px solid var(--mss-cream-50);
  box-shadow: 0 0 0 2px var(--mss-gold-400);
  transform: rotate(45deg);
}
.tl-body {
  padding-left: 28px;
}
.tl-body h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.tl-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.tl-body p em { color: var(--fg-1); font-style: italic; }

/* ---------- Social feed (Instagram + Facebook) ---------- */
.social-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

/* Send-test inline panel inside the newsletter composer. Sits above
   the footer button row when the admin clicks "Send test", giving them
   an inline place to type recipient addresses and see per-address
   results without leaving the composer or losing their draft. */
.nl-test-panel {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--mss-cream-100);
  border: 1px solid var(--mss-line);
  border-left: 3px solid var(--mss-gold-400);
}
.nl-test-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}
.nl-test-status {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-style: italic;
  border-radius: 2px;
}
.nl-test-status-busy { background: var(--mss-cream-50); border: 1px solid var(--mss-line); color: var(--fg-2); }
.nl-test-status-done { background: #e9f3eb; border: 1px solid var(--mss-green-500); color: #2c6a3a; font-style: normal; }
.nl-test-status-err  { background: #fdebe8; border: 1px solid var(--mss-coral-500, #b73e29); color: #7a2016; font-style: normal; }

/* Newsletter send-in-progress modal. Sits above every other overlay
   (z-index over admin modals) because it's non-dismissable while
   sending — accidentally closing the tab mid-loop kills the batch.
   Seal spins gently as an activity indicator (subtle rotation, not
   attention-grabbing) with a marian-blue ring behind it. */
.newsletter-send-shade {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 35, 53, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: newsletter-send-fade 200ms ease-out both;
}
@keyframes newsletter-send-fade { from { opacity: 0; } to { opacity: 1; } }
.newsletter-send-card {
  background: var(--mss-cream-50);
  border: 1px solid var(--mss-gold-300);
  box-shadow: var(--shadow-lg);
  padding: 36px 40px 32px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.newsletter-send-seal {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
}
.newsletter-send-seal img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}
.newsletter-send-spinner {
  position: absolute;
  inset: -8px;
  border: 3px solid transparent;
  border-top-color: var(--mss-marian-700);
  border-right-color: var(--mss-marian-700);
  border-radius: 50%;
  animation: newsletter-send-spin 1.1s linear infinite;
}
@keyframes newsletter-send-spin { to { transform: rotate(360deg); } }
.newsletter-send-check,
.newsletter-send-x {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  animation: newsletter-send-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.newsletter-send-check { background: var(--mss-green-500); }
.newsletter-send-x     { background: var(--mss-coral-500, #b73e29); }
@keyframes newsletter-send-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.newsletter-send-eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin-bottom: 8px;
}
.newsletter-send-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 12px;
  line-height: 1.2;
}
.newsletter-send-body {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Rich text editor — used by the newsletter composer. Hand-rolled on
   contentEditable + document.execCommand, so no CDN dependency. */
.rte {
  border: 1px solid var(--mss-line-strong);
  background: var(--mss-cream-100);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.rte-disabled { opacity: 0.7; }
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--mss-cream-50);
  border-bottom: 1px solid var(--mss-line);
}
.rte-tb-btn {
  font: 600 12px var(--font-sans);
  padding: 5px 10px;
  border: 1px solid var(--mss-line);
  background: #fff;
  color: var(--fg-2);
  cursor: pointer;
  border-radius: 2px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rte-tb-btn:hover:not(:disabled) {
  background: var(--mss-marian-900);
  color: var(--mss-cream-50);
  border-color: var(--mss-marian-900);
}
.rte-tb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rte-tb-sep {
  width: 1px;
  height: 20px;
  background: var(--mss-line);
  margin: 0 4px;
}
.rte-body {
  flex: 1;
  padding: 12px 14px;
  font: 400 14px/1.55 var(--font-body);
  color: var(--fg-1);
  overflow-y: auto;
  min-height: 260px;
  outline: none;
}
.rte-body:empty:before {
  content: attr(data-placeholder);
  color: var(--fg-3);
  font-style: italic;
  pointer-events: none;
}
.rte-body p:first-child { margin-top: 0; }
.rte-body p:last-child { margin-bottom: 0; }
.rte-body ul, .rte-body ol { padding-left: 24px; margin: 10px 0; }
.rte-body a { color: var(--mss-marian-700); text-decoration: underline; }
.rte-body img { max-width: 100%; height: auto; display: block; margin: 8px 0; }
/* Block-level styles inside the editor so admins see something close
   to the rendered result. The public NewsPage restyles these anyway,
   so keep the editor look neutral and readable. */
.rte-body h2 { font: 500 20px/1.25 var(--font-display, Georgia, serif); margin: 18px 0 8px; color: var(--fg-1); }
.rte-body h3 { font: 500 17px/1.3  var(--font-display, Georgia, serif); margin: 14px 0 6px; color: var(--fg-1); }
.rte-body h4 { font: 600 14px/1.3  var(--font-display, Georgia, serif); margin: 12px 0 6px; color: var(--fg-1); }
.rte-body blockquote {
  margin: 12px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--mss-gold-400, #c19d47);
  font-style: italic;
  color: var(--fg-2);
}
.rte-body hr {
  border: none;
  border-top: 1px solid var(--mss-line);
  margin: 16px 0;
}
/* Style dropdown in the toolbar — matches the same visual weight as
   .rte-tb-btn so the row reads as one strip. */
.rte-tb-select {
  font: 600 12px var(--font-sans);
  padding: 5px 8px;
  border: 1px solid var(--mss-line);
  background: #fff;
  color: var(--fg-2);
  cursor: pointer;
  border-radius: 2px;
}
.rte-tb-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* FRIENDS section — sister societies. Three-card grid on desktop,
   stacks to single column on mobile. Cards are anchor tags themselves
   so the entire surface is clickable; hover lifts subtly to suggest
   the link.
   Each card now opens with a 160px image strip — the source orgs'
   actual brand imagery (Boston banner logo, Holy Saviour clubhouse
   sign, Williamsburg Giglio in motion). object-fit:cover crops to a
   consistent aspect ratio so the three different source images sit
   on the same visual rhythm. */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
/* Reveal wraps each card in its own <div> — that div becomes the grid
   item and gets stretched to row height (CSS grid's default align-items).
   Without this, .friend-card inside Reveal's div stayed at content
   height and the VISIT-link margin-top:auto had nothing to push against.
   `height: 100%` on the Reveal wrapper + on the card chains the height
   all the way down so VISIT actually anchors to the card's bottom. */
.friends-grid > * { height: 100%; }
.friends-grid > * > .friend-card { height: 100%; }
.friend-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mss-line);
  border-top: 4px solid var(--mss-marian-700);
  text-decoration: none;
  color: var(--fg-1);
  overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.friend-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--mss-gold-300);
}
.friend-image-wrap {
  display: block;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: var(--mss-marian-800);
  border-bottom: 1px solid var(--mss-line);
}
.friend-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease-out);
}
.friend-card:hover .friend-image { transform: scale(1.03); }
.friend-body-wrap {
  padding: 22px 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.friend-city {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin-bottom: 10px;
}
.friend-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.friend-body {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.friend-link {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mss-coral-500);
  /* Stays anchored at the bottom of the card no matter how much body
     text the card has — cards stretch to a uniform grid height, this
     keeps all three VISIT links lined up. */
  margin-top: auto;
  padding-top: 14px;
}
.friend-card:hover .friend-link { color: var(--mss-coral-700); }
.ig-block { background: #fff; border: 1px solid var(--mss-line); padding: 24px; }
.ig-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mss-line);
}
.ig-head .left { display: flex; align-items: center; gap: 12px; }
.ig-head .left img { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--mss-gold-300); }
.ig-head .handle { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--fg-1); }
.ig-head .name { font: 400 12px var(--font-sans); color: var(--fg-3); font-style: italic; }
.ig-head a { font: 600 11px var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mss-coral-400); text-decoration: none; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.ig-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 50%);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.ig-tile:hover::after { opacity: 1; }
.ig-tile .meta {
  position: absolute; bottom: 8px; left: 10px;
  color: #fff;
  font: 600 10px var(--font-sans);
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 200ms;
  z-index: 1;
}
.ig-tile:hover .meta { opacity: 1; }

.fb-block { background: #fff; border: 1px solid var(--mss-line); padding: 24px; }
.fb-post { padding: 14px 0; border-bottom: 1px solid var(--mss-line); }
.fb-post:last-child { border-bottom: none; padding-bottom: 0; }
.fb-post:first-child { padding-top: 0; }
.fb-when { font: 400 11px var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; }
.fb-when .dot { display: inline-block; width: 4px; height: 4px; background: var(--mss-coral-400); border-radius: 999px; margin: 0 8px; vertical-align: middle; }
.fb-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.fb-text em { color: var(--fg-2); font-style: italic; }
.fb-engagement { font: 400 11px var(--font-sans); color: var(--fg-3); }
.fb-engagement strong { color: var(--mss-marian-600); font-weight: 600; }

/* ---------- Events list ---------- */
.events-hero {
  background: var(--mss-marian-800);
  color: var(--mss-cream-50);
  padding: 80px 32px 64px;
  text-align: center;
}
.events-hero .eyebrow {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mss-gold-300);
  margin-bottom: 14px;
}
.events-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--mss-cream-50);
  letter-spacing: -0.01em;
}
.events-hero .sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin: 0 auto;
}

.events-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
  align-items: center;
}
.events-filter .lbl {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 8px;
}
.events-filter button {
  background: transparent;
  border: 1px solid var(--mss-line-strong);
  font: 600 12px var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 999px;
}
.events-filter button.active {
  background: var(--mss-marian-500);
  color: var(--mss-cream-50);
  border-color: var(--mss-marian-500);
}
.events-filter button:hover:not(.active) { background: var(--mss-cream-100); }

.event-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--mss-line);
  margin-bottom: 12px;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
/* When an event has an image, fit the thumbnail column between date and info.
   Thumbnail column widens with the doubled desktop thumb size. Mobile
   overrides below make the image a full-bleed banner instead. */
.event-row:has(.event-thumb) { grid-template-columns: 120px 160px 1fr auto; gap: 24px; }
.event-row:hover { border-color: var(--mss-gold-400); box-shadow: var(--shadow-sm); }
.event-thumb {
  width: 160px;
  height: 120px;
  flex: 0 0 160px;
  border: 1px solid var(--mss-line);
  background-color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Calendar-tear-off date tile — matches the "JoinedCard" pattern used
   on the Member admin roster (portal.jsx). Gold header strip carries
   the month; cream body holds the big day number; the year renders
   below the tile as a small monoline. Mobile overrides further down
   collapse this to a horizontal eyebrow inside the card banner. */
.event-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: none;
  padding-right: 0;
  min-width: 68px;
}
.event-date .month,
.event-date .day {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.event-date .month {
  background: var(--mss-marian-500);
  color: #fff;
  font: 700 11px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 6px;
  margin: 0;
  border: 1px solid var(--mss-line-strong);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.event-date .day {
  background: var(--mss-cream-100, #f5efe0);
  color: var(--fg-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  text-align: center;
  padding: 8px 6px 10px;
  border: 1px solid var(--mss-line-strong);
  border-top: none;
  border-radius: 0 0 4px 4px;
  letter-spacing: -0.01em;
}
.event-date .year {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--fg-3);
  margin-top: 2px;
}
.event-info h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--fg-1);
}
.event-info .meta {
  font: 400 13px var(--font-body);
  font-style: italic;
  color: var(--fg-3);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.event-info .meta .sep { color: var(--mss-gold-500); }
.event-info .tag {
  display: inline-block;
  font: 600 10px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  margin-bottom: 8px;
}
.event-info .tag.t-mass { background: var(--mss-marian-100); color: var(--mss-marian-700); }
.event-info .tag.t-dinner { background: var(--mss-coral-300); color: #fff; }
.event-info .tag.t-meeting { background: var(--mss-cream-200); color: var(--mss-stone-700); border: 1px solid var(--mss-line-strong); }
.event-info .tag.t-feast { background: var(--mss-gold-100); color: var(--mss-gold-700); border: 1px solid var(--mss-gold-300); }
.event-info .tag.t-civic { background: var(--mss-green-300); color: var(--mss-cream-50); }

/* ---------- Portal layout (Members + Admin shared) ---------- */
.portal {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 200px);
  background: var(--mss-cream-50);
}
.portal-side {
  background: var(--mss-marian-900);
  color: rgba(255,255,255,0.78);
  padding: 32px 20px;
  border-right: 1px solid var(--mss-line);
}
.portal-side-mark {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 16px;
}
.portal-side-mark img { width: 36px; height: 36px; }
.portal-side-mark .t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--mss-cream-100);
  text-transform: uppercase;
}
.portal-side-mark .s {
  font: 400 10px var(--font-sans);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
}
.portal-side .group {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-300);
  padding: 18px 8px 8px;
}
.portal-side nav { display: flex; flex-direction: column; gap: 2px; }
.portal-side nav button {
  background: transparent; border: none; cursor: pointer;
  text-align: left;
  padding: 10px 12px;
  font: 500 14px var(--font-body);
  color: rgba(255,255,255,0.78);
  display: flex; align-items: center; gap: 10px;
  border-left: 2px solid transparent;
  border-radius: 2px;
}
.portal-side nav button:hover { background: rgba(255,255,255,0.04); color: var(--mss-cream-50); }
.portal-side nav button.active {
  background: var(--mss-marian-700);
  color: var(--mss-cream-50);
  border-left-color: var(--mss-gold-400);
}
.portal-side nav button .ic {
  width: 16px; height: 16px;
  display: inline-block;
  opacity: 0.85;
}
.portal-side .signout {
  margin-top: 28px;
  padding: 0 8px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mss-gold-300);
  cursor: pointer;
  background: transparent; border: none;
}
.portal-side .signout:hover { color: var(--mss-cream-50); }

.portal-main { padding: 40px 56px 64px; min-width: 0; }
.portal-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap; gap: 16px;
}
.portal-head .left { min-width: 280px; flex: 1; }
.portal-head h2 { white-space: normal; }
.portal-head .left .eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin-bottom: 6px;
}
.portal-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}
/* Tiny inline toggle next to the dashboard greeting: "(switch to
   sicilian)" or "(switch to italian)". Deliberately quiet — small,
   italic, muted color — so it sits beside the display-type greeting
   without competing with it. */
.greeting-flip {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  font: italic 14px/1 var(--font-body);
  color: var(--fg-3);
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.greeting-flip:hover,
.greeting-flip:focus-visible {
  color: var(--mss-marian-600);
  border-bottom-color: var(--mss-marian-600);
  outline: none;
}
.portal-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.portal-card {
  background: #fff;
  border: 1px solid var(--mss-line);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.portal-card .head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--mss-line);
  background: var(--mss-cream-50);
  display: flex; justify-content: space-between; align-items: center;
}
.portal-card .head h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  margin: 0;
  color: var(--fg-1);
}
.portal-card .body { padding: 24px; }

/* Admin/member stat tiles */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--mss-line);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.stat-tile::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
}
.stat-tile.green::before { background: var(--mss-green-500); }
.stat-tile.gold::before  { background: var(--mss-gold-400); }
.stat-tile.coral::before { background: var(--mss-coral-400); }
.stat-tile.marian::before{ background: var(--mss-marian-500); }
.stat-tile .lbl {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.stat-tile .val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--mss-marian-700);
  letter-spacing: -0.01em;
}
.stat-tile .delta {
  font: 600 11px var(--font-sans);
  margin-top: 6px;
  color: var(--mss-green-500);
}
.stat-tile .delta.down { color: var(--mss-coral-500); }

/* Member profile two-up */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}
.profile-avatar {
  background: var(--mss-cream-100);
  border: 1px solid var(--mss-line);
  /* Extra top padding gives the avatar breathing room under the
     site masthead. */
  padding: 48px 28px 32px;
  text-align: center;
}
.profile-avatar .roundel {
  width: 170px; height: 170px;
  border-radius: 999px;
  background: var(--mss-marian-500);
  color: var(--mss-cream-50);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 68px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  border: 2px solid var(--mss-gold-400);
}
.profile-avatar h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 4px;
}
.profile-avatar .sub {
  font: 400 12px var(--font-mono);
  color: var(--fg-3);
}

.kv-list { display: flex; flex-direction: column; gap: 0; }
.kv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mss-line);
}
.kv-row:last-child { border-bottom: none; }
.kv-row .k {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.kv-row .v { font-family: var(--font-body); font-size: 15px; color: var(--fg-1); }

/* Dues progress bar */
.dues-bar {
  height: 8px;
  background: var(--mss-cream-200);
  border-radius: 0;
  overflow: hidden;
  margin: 14px 0;
  position: relative;
}
.dues-bar .fill {
  height: 100%;
  background: linear-gradient(to right, var(--mss-green-500), var(--mss-gold-400));
  width: 0;
  transition: width 1200ms var(--ease-out);
}

/* ---------- Mobile masthead breakpoint ---------- */
@media (max-width: 760px) {
  .mh-nav { display: none; }
  .mh-burger { display: block; }
  .mh-wm-1 { font-size: 14px; letter-spacing: 0.10em; }
  .mh-wm-2 { font-size: 16px; }
  .mh-seal-img { width: 50px; height: 50px; margin-bottom: 0; }
  .mh-inner { padding: 10px 20px; }

  .hero { min-height: 460px; }
  .hero-inner { padding: 56px 22px 40px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .section { padding: 56px 22px; }
  .section-tight { padding: 40px 22px; }

  .schedule-row {
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 16px;
    padding: 18px;
  }
  .schedule-day .num { font-size: 36px; }
  .schedule-day .mo, .schedule-day .dow { font-size: 10px; letter-spacing: 0.16em; }
  .schedule-time { grid-column: 1 / -1; text-align: left; padding-left: 86px; padding-top: 4px; }
  .schedule-event { font-size: 18px; }

  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .kv-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }

  /* Hard cap on horizontal scroll — nothing inside the portal should
     push the viewport wider. The sidebar's own horizontal strip does
     its own overflow-x: auto; this catches any leaking child width.
     `overflow-x: clip` (not `hidden`) is important on html/body: iOS
     Safari treats `overflow: hidden` on the root as a scroll ancestor
     and silently disables `position: sticky` on the masthead, so the
     .util + .plate top nav scrolls away on phones. `clip` cuts the
     overflow without creating a scroll container, keeping sticky
     alive. Safari 16+ / Chrome 90+ support it; older iOS devices lose
     the horizontal cap gracefully (child rules keep widths in check). */
  html, body { overflow-x: clip; max-width: 100vw; }
  .portal {
    grid-template-columns: 1fr;
    min-height: auto;
    max-width: 100vw;
    overflow-x: clip;
  }
  .portal-side {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 14px 0 10px;
    position: relative;
    max-width: 100vw;
    overflow-x: clip;
  }
  /* .util is 48px on mobile (line 133) instead of 38px on desktop, so
     the plate's sticky top offset needs to grow to match. Without this
     the plate would slide 10px UNDER the util bar as you scroll. */
  .plate { top: 48px; }
  /* Right-edge fade — signals the nav scrolls horizontally when the
     items don't fit (which they usually don't in AdminPortal). */
  .portal-side::after {
    content: "";
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 28px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--mss-marian-900));
    z-index: 1;
  }
  .portal-side nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: 0 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .portal-side nav::-webkit-scrollbar { display: none; }
  .portal-side nav button {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
  }
  /* Shrink the SVG icons a touch so more nav items fit in the visible
     strip. Keeps the pattern but stops the "menu scrolls off to the
     right" feel that AdminPortal had with 14+ manage entries. */
  .portal-side nav button svg { width: 14px; height: 14px; }
  .portal-side nav button.active {
    border-left: none;
    border-bottom-color: var(--mss-gold-400);
  }
  /* Show the group labels inline as section chips so admins can tell
     Manage from My Account without vertical layout. */
  .portal-side .group {
    display: inline-flex; align-items: center;
    padding: 4px 12px 4px 14px;
    font: 600 9px var(--font-sans);
    letter-spacing: 0.20em;
    color: var(--mss-gold-300);
    margin: 0;
    white-space: nowrap;
  }
  .portal-side-mark, .portal-side .signout { display: none; }
  /* SidebarUserCard is redundant on mobile because the user's avatar
     now lives in the sticky top-bar (Masthead .util). Save the ~65px
     of vertical space for the actual navigation + content. */
  /* !important because SidebarUserCard has an inline style="display:flex"
     on its root, which specificity-wise beats a class selector. */
  .portal-side .sidebar-user-card { display: none !important; }
  /* Portal section tabs — visible on mobile as a two-button strip
     ("Manage" | "My account"). Whichever is active gets a gold
     underline; only the matching section's nav shows below. */
  .portal-side-tabs {
    display: flex !important;
    gap: 0;
    padding: 0 14px 4px;
    border-bottom: 1px solid rgba(184,137,58,.15);
  }
  .portal-side-tabs button {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.55);
    font: 600 12px var(--font-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 16px;
    cursor: pointer;
    flex: 1 1 auto;
    text-align: center;
  }
  .portal-side-tabs button.active {
    color: var(--mss-gold-300, #d9b872);
    border-bottom-color: var(--mss-gold-400, #b28a3b);
  }
  /* Rewrap sections as blocks so we can show/hide them cleanly. */
  .portal-side-section { display: block; }
  /* Hide the individual "MANAGE" / "MY ACCOUNT" group chips on mobile —
     the section tabs above already carry that label. */
  .portal-side-section .group { display: none; }
  /* Show only the section that matches the active tab. */
  .portal-side[data-active-section="manage"]    .portal-side-section[data-section="myaccount"] { display: none; }
  .portal-side[data-active-section="myaccount"] .portal-side-section[data-section="manage"]    { display: none; }

  /* Masthead layout swap for signed-in mobile viewers:
       - Hide the big crest/wordmark from the cream area (replaced by
         the compact identity strip: avatar + name).
       - Show the identity strip and align the burger to its right.
       - Trim the plate height so this all fits with less vertical
         real estate than the full crest layout used to demand. */
  .plate.plate-signed-in .mark { display: none !important; }
  .plate.plate-signed-in .mh-mobile-identity { display: flex; }
  .plate.plate-signed-in .inner { gap: 12px; padding: 0 14px; }
  .plate.plate-signed-in { height: 60px; }
  .plate.plate-signed-in .burger { margin-left: auto; padding: 8px; min-width: 42px; min-height: 42px; }

  /* Admin Members filter row — search stays always; the three dropdown
     selects (status/role/deceased) collapse behind the funnel-icon
     toggle by default so the roster table starts higher on the page.
     Tap the icon to reveal the selects as a stacked block below. */
  .admin-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--mss-cream-100);
    border: 1px solid var(--mss-line-strong);
    border-radius: 2px;
    padding: 10px 12px;
    font: 500 12px var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    cursor: pointer;
    flex: 0 0 auto;
    min-height: 40px;
  }
  .admin-filter-toggle-badge {
    background: var(--mss-marian-500);
    color: #fff;
    font: 700 10px var(--font-sans);
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0;
  }
  /* Hide the select group by default; reveal when the toggle flips
     data-filters-open="true" on the parent row. */
  .admin-filter-row[data-filters-open="false"] .admin-filter-selects {
    display: none !important;
  }
  .admin-filter-row[data-filters-open="true"] .admin-filter-selects {
    display: flex !important;
    flex-basis: 100%;
    flex-direction: column;
    gap: 10px !important;
  }
  .admin-filter-row[data-filters-open="true"] .admin-filter-selects select {
    width: 100%;
  }
  /* Admin dashboard's Upcoming events (2fr) + Needs attention (1fr)
     grid stacks on mobile. Inline style sets 2fr 1fr on the wrapper,
     so !important is required to force the single-column override. */
  .admin-dash-2col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Admin dashboard's "Recent posts" list — restack from a 3-column
     grid (title | views | status) to a two-row flex-wrap layout.
     Row 1: title + byline block, full width.
     Row 2: status pill on the left, views on the right, on the same
            baseline. Titles no longer get crushed into a narrow
            first column. */
  .admin-recent-post-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 14px 18px !important;
  }
  .admin-recent-post-row .arp-title-block { flex: 1 1 100%; }
  .admin-recent-post-row .arp-title { font-size: 15px !important; line-height: 1.3; }
  .admin-recent-post-row .arp-byline { font-size: 11px !important; }
  .admin-recent-post-row .arp-status { order: 1; flex: 0 0 auto; }
  .admin-recent-post-row .arp-views  { order: 2; margin-left: auto; }
  .portal-main {
    padding: 24px 18px 48px;
    /* Belt-and-braces: nothing inside the main pane should force a
       horizontal scrollbar on the viewport itself. The child text
       rules below wrap properly; this catches anything that slips. */
    overflow-x: hidden;
  }
  /* Portal head — big title stack rides h2 into ~26px on phones so
     admin dashboards don't overflow their own row. Every text child
     also gets overflow-wrap: anywhere so long strings (member-type
     breakdown parentheticals, admin greetings) always wrap. */
  .portal-head { gap: 12px; margin-bottom: 20px; }
  .portal-head h2 { font-size: 26px; overflow-wrap: anywhere; }
  .portal-head .left { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .portal-head .left > * { overflow-wrap: anywhere; word-break: break-word; }
  .portal-head .actions { width: 100%; }
  .portal-head .actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    /* Buttons in the dashboard actions row were clipping their labels
       ('Write a post' -> 'Write…') because .btn had no min-width. flex-
       basis 0 + min-width 0 lets both buttons share the row and grow
       to fit their labels. */
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
  }

  /* ---------- Event list cards: stack into a clean, full-width card ----------
     The desktop grid (date | thumb | info | button) collapses on phones. The
     base `.event-row:has(.event-thumb)` rule has higher specificity than a
     plain `.event-row` here, so we must override BOTH selectors or events with
     an image keep the 4-column desktop grid and crush the title to one word
     per line. Layout becomes: banner image → date eyebrow → title/meta →
     full-width Details button. */
  .event-row,
  .event-row:has(.event-thumb) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    overflow: hidden;
  }
  /* Image leads the card as a full-bleed banner. */
  .event-thumb {
    order: -1;
    width: auto;
    height: 172px;
    flex: none;
    border: none;
    border-bottom: 1px solid var(--mss-line);
    margin: 0;
  }
  /* Date, info and the button get inner padding; the banner stays full-bleed. */
  .event-date,
  .event-info,
  .event-row > div:last-child {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* Horizontal date eyebrow (AUG 16 2027) instead of the stacked badge. */
  .event-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    border-right: none;
    padding-top: 18px;
    padding-bottom: 0;
  }
  .event-row:has(.event-thumb) .event-date { padding-top: 4px; }
  .event-date .month { margin: 0; font-size: 12px; }
  .event-date .day { font-size: 30px; }
  .event-date .year { margin: 0; }
  .event-info h4 { font-size: 19px; line-height: 1.25; }
  /* Stack time over location so the "·" separator never orphans on its own line. */
  .event-info .meta { flex-direction: column; gap: 4px; }
  .event-info .meta .sep { display: none; }
  .event-row > div:last-child { padding-bottom: 18px; }
  .event-row > div:last-child .btn { display: block; width: 100%; }

  /* Footer on mobile: brand block spans full width across the top,
     then Visit + Members sit side-by-side, with Contact also
     full-width across the bottom. Beats one tall stack and keeps the
     two nav columns visually paired. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 36px; }
  .footer-top > .footer-brand,
  .footer-top > .footer-col:last-child { grid-column: 1 / -1; }
  .footer { padding: 48px 22px 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  .social-grid { grid-template-columns: 1fr; }
  .friends-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .friend-image-wrap { height: 140px; }
  .friend-body-wrap { padding: 20px 20px 20px; }
  .friend-name { font-size: 20px; }

  /* Mobile timeline: rail + diamond marker sit BETWEEN year and body,
     mirroring the desktop layout. Previously the rail was at left:22px
     inside the year column, causing the diamond to overlap the year's
     middle digit. */
  .timeline::before { left: 60px; }
  .tl-row { grid-template-columns: 56px 1fr; gap: 22px; padding: 22px 0; }
  .tl-year { font-size: 22px; padding-right: 0; }
  .tl-dot { left: 56px; top: 30px; width: 10px; height: 10px; box-shadow: 0 0 0 1px var(--mss-gold-400); }
  .tl-body { padding-left: 0; }
  .tl-body h4 { font-size: 19px; }

  .float-cta { bottom: 16px; right: 16px; padding: 12px 16px; font-size: 11px; }
}

/* ===================================================================
   EVENTS — view toggle, calendar grid, details modal
   =================================================================== */

.events-view-toggle {
  display: inline-flex;
  border: 1px solid var(--mss-line-strong);
  background: var(--mss-cream-100);
  margin-bottom: 28px;
}
.events-view-toggle button {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: none;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  /* Inline-flex aligns the leading SVG icon with the label baseline. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.events-view-toggle .evt-ico {
  flex: 0 0 auto;
  /* Pull the icon up half a pixel so its optical center lines up with
     the uppercase letterforms (which sit a touch above baseline). */
  margin-top: -1px;
}
.events-view-toggle button + button { border-left: 1px solid var(--mss-line-strong); }
.events-view-toggle button:hover { background: var(--mss-cream-200); color: var(--fg-1); }
.events-view-toggle button.active { background: var(--mss-marian-900); color: var(--mss-cream-50); }

/* Controls row above the list: tense tabs on the left, sort dropdown
   on the right. Wraps on narrow screens so the sort control drops
   under the tabs instead of overflowing. */
.events-list-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: -16px 0 20px;
  border-bottom: 1px solid var(--mss-line);
}
/* ↑↓ two-button toggle for public list sort direction. */
.events-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 8px;
}
.events-sort-toggle-lbl {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 6px;
}
.events-sort-toggle button {
  font: 600 15px var(--font-sans);
  line-height: 1;
  width: 32px;
  height: 30px;
  border: 1px solid var(--mss-line-strong);
  background: var(--mss-cream-100);
  color: var(--fg-3);
  cursor: pointer;
  border-radius: 2px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.events-sort-toggle button:hover { background: var(--mss-cream-200); color: var(--fg-1); }
.events-sort-toggle button.active {
  background: var(--mss-marian-900);
  color: var(--mss-cream-50);
  border-color: var(--mss-marian-900);
}

/* Past/Upcoming sub-tabs — smaller pills that sit inside the list view,
   below the primary List/Calendar toggle. Softer visual weight so they
   don't compete with the main view switcher. */
.events-tense-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.events-tense-tabs button {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.events-tense-tabs button:hover { color: var(--fg-1); }
.events-tense-tabs button.active {
  color: var(--mss-marian-900);
  border-bottom-color: var(--mss-marian-900);
}
.events-tense-count {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--mss-cream-200);
  color: var(--fg-2);
  border-radius: 8px;
  letter-spacing: 0;
}
.events-tense-tabs button.active .events-tense-count {
  background: var(--mss-marian-900);
  color: var(--mss-cream-50);
}

/* ---- Calendar grid ---- */
.ev-cal {
  background: var(--mss-cream-50);
  border: 1px solid var(--mss-line);
  box-shadow: var(--shadow-sm);
}
.ev-cal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mss-line);
}
.ev-cal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--fg-1);
  letter-spacing: 0.01em;
}
.ev-cal-nav { display: flex; gap: 6px; align-items: center; }
.ev-cal-nav .btn { padding: 6px 14px; font-size: 13px; }

.ev-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--mss-marian-900);
  color: var(--mss-cream-50);
}
.ev-cal-dow > div {
  padding: 10px 6px;
  text-align: center;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  color: var(--mss-gold-300);
}

.ev-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ev-cal-cell {
  border-top: 1px solid var(--mss-line);
  border-left: 1px solid var(--mss-line);
  background: #fff;
  min-height: 110px;
  padding: 6px 8px;
  position: relative;
  display: flex; flex-direction: column;
}
.ev-cal-cell:nth-child(7n) { border-right: 1px solid var(--mss-line); }
.ev-cal-cell.out { background: var(--mss-cream-100); }
.ev-cal-cell.out .ev-cal-daynum { color: var(--fg-3); }
.ev-cal-cell.today {
  background: linear-gradient(180deg, rgba(168, 128, 48, 0.06), #fff);
  box-shadow: inset 0 0 0 2px var(--mss-gold-400, var(--mss-gold-500));
}

.ev-cal-daynum {
  font: 500 13px var(--font-mono);
  color: var(--fg-2);
  margin-bottom: 4px;
}
.ev-cal-cell.today .ev-cal-daynum {
  color: var(--mss-gold-700, var(--mss-gold-500));
  font-weight: 700;
}

.ev-cal-events { display: flex; flex-direction: column; gap: 3px; }
.ev-cal-evbtn {
  background: var(--mss-marian-500);
  color: var(--mss-cream-50);
  border: none;
  padding: 4px 6px;
  font: 500 11px/1.25 var(--font-body);
  text-align: left;
  cursor: pointer;
  /* Wrap long titles across multiple lines instead of truncating. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  border-radius: 2px;
  transition: background 140ms ease;
}
.ev-cal-evbtn:hover { background: var(--mss-marian-700, var(--mss-marian-500)); }
.ev-cal-more {
  background: transparent;
  border: none;
  font: 600 10px var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--mss-coral-400);
  padding: 2px 4px;
  text-align: left;
  cursor: pointer;
}
.ev-cal-more:hover { text-decoration: underline; }

/* ---- Event details modal ---- */
.ev-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 18, 16, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: evFadeIn 180ms var(--ease-out);
}
@keyframes evFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ev-hover-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ev-modal {
  background: var(--mss-cream-50);
  border: 1px solid var(--mss-line-strong);
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.ev-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: none;
  font-size: 18px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 6px 10px;
}
.ev-modal-close:hover { color: var(--fg-1); }
.ev-modal-head { padding: 36px 36px 18px; border-bottom: 1px solid var(--mss-line); }
.ev-modal-eyebrow {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin-bottom: 8px;
}
.ev-modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  color: var(--fg-1);
}
.ev-modal-body { padding: 24px 36px; }
.ev-modal-kv {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mss-line);
}
.ev-modal-kv:last-child { border-bottom: none; }
.ev-modal-kv .k {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  padding-top: 2px;
}
.ev-modal-kv .v {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-1);
}
.ev-modal-foot {
  padding: 18px 36px 28px;
  border-top: 1px solid var(--mss-line);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .ev-cal-cell { min-height: 70px; padding: 4px 5px; }
  .ev-cal-evbtn { font-size: 10px; padding: 2px 4px; }
  .ev-cal-dow > div { padding: 8px 2px; font-size: 9px; letter-spacing: 0.12em; }
  .ev-cal-head { flex-direction: column; gap: 10px; align-items: flex-start; }
  .ev-modal-head { padding: 28px 22px 14px; }
  .ev-modal-body { padding: 18px 22px; }
  .ev-modal-foot { padding: 14px 22px 22px; }
  .ev-modal-title { font-size: 24px; }
  .ev-modal-kv { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
}

/* ---- Masthead "Member Login" pill ---- */
.mh-login {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .mh-login { display: none; }
}

/* ---- Footer brand block (seal + title + boilerplate) ---- */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.footer-brand-seal {
  width: 140px; height: 140px;
  object-fit: contain;
  display: block;
}
.footer-brand-text { min-width: 0; }
@media (min-width: 641px) {
  /* Desktop: seal lives in the brand column above the M.S.S. Society
     heading. The centered .footer-seal below the tricolor is only
     meant for the mobile layout, so hide it here. */
  .footer-seal { display: none; }
}
@media (max-width: 640px) {
  /* Mobile: seal is centered below the tricolor via .footer-seal, so
     drop the in-column one to avoid rendering the seal twice. */
  .footer-brand-seal { display: none; }
  .footer-brand { align-items: center; text-align: center; gap: 16px; }
  .footer-brand-text .footer-body { max-width: none; }
}

/* ===========================================================================
   JOIN / BECOME A MEMBER page
   =========================================================================== */

/* Hero — full-bleed photo, centered invitation */
.join-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--mss-cream-50);
  overflow: hidden;
  padding: 80px 32px;
}
.join-hero .join-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  animation: kenburns 28s var(--ease-in-out) both;
  /* Explicit z-index puts the photo BEHIND the ::before overlay. Without
     this, the photo paints on top of the overlay (because real children
     paint after pseudo-elements) and every darkening pass on ::before
     was invisible. Tip from the screenshot-driven debug. */
  z-index: 0;
}
.join-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  /* Tasteful vignette: deeper at the edges to anchor the text, lighter
     in the middle so the procession photo reads as a backdrop rather
     than a darkroom. Earlier values were cranked to near-opaque while
     I was chasing a stacking-context bug — once the z-index fix landed
     those numbers became wildly over-the-top. */
  background: linear-gradient(to bottom,
    rgba(6,24,36,0.65) 0%,
    rgba(6,24,36,0.45) 50%,
    rgba(6,24,36,0.80) 100%);
}
.join-hero-inner { position: relative; max-width: 760px; z-index: 2; }
.join-hero .kicker {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mss-gold-200);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.join-hero .kicker .dia { width: 7px; height: 7px; background: var(--mss-gold-300); transform: rotate(45deg); }
.join-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.join-hero .script {
  font-family: var(--font-script);
  font-size: clamp(34px, 4vw, 52px);
  color: var(--mss-gold-200);
  line-height: 1;
  margin-bottom: 26px;
}
.join-hero .lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  max-width: 600px;
  margin: 0 auto 32px;
}
.join-hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Benefits grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mss-line);
  border: 1px solid var(--mss-line);
}
/* Each grid cell is a <Reveal> wrapping a .benefit card. By default
   <Reveal> only takes the height of its inner card, so cells in a row
   whose card is shorter than the tallest sibling left their unused
   space showing the grid background (the wide beige bands we used to
   see between rows). Stretch the Reveal and let the card flex to fill,
   so the white card extends to the full row height. */
.benefits-grid > .reveal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.benefits-grid > .reveal > .benefit { flex: 1; }
.benefit {
  background: #fff;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Image slot at the top of each benefit card. 3:2 aspect ratio, edge-to-edge.
   If the specific image (b1..b6) isn't in /assets/join/ yet, onError hides the
   <img> and the pseudo-element beneath shows the "Photo forthcoming" caption
   over a subtle cream/gold placeholder — visually holds the space until the
   real asset is dropped in. */
.benefit .b-image {
  position: relative;
  width: calc(100% + 64px);
  aspect-ratio: 3 / 2;
  margin: -36px -32px 8px;
  background:
    linear-gradient(135deg, rgba(168,128,48,.06) 0%, rgba(168,128,48,0) 40%, rgba(14,47,71,.05) 100%),
    var(--mss-cream-100);
  border-bottom: 1px solid var(--mss-line);
  overflow: hidden;
}
.benefit .b-image::before {
  content: "Photo forthcoming";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mss-gold-500);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .04em;
  z-index: 0;
}
.benefit .b-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.benefit .b-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--mss-gold-400);
  line-height: 1;
  letter-spacing: -0.01em;
}
.benefit h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.15;
  margin: 0;
  color: var(--fg-1);
}
.benefit p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.benefit .b-rule {
  width: 40px; height: 2px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    var(--mss-cream-200) 33.33% 66.66%,
    var(--mss-coral-400) 66.66% 100%);
}

/* Eligibility / requirements strip */
.eligibility {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.elig-item { text-align: center; padding: 8px; }
.elig-item .ic {
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1.5px solid var(--mss-gold-400);
  background: var(--mss-cream-100);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
  color: var(--mss-marian-600);
}
.elig-item h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--fg-1);
}
.elig-item p {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0;
}

/* Sponsor explainer callout */
.sponsor-note {
  background: var(--mss-cream-100);
  border: 1px solid var(--mss-gold-200);
  border-left: 3px solid var(--mss-gold-400);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.sponsor-note .badge-ic {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--mss-marian-500);
  color: var(--mss-cream-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex: 0 0 auto;
}
.sponsor-note h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.sponsor-note p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 8px;
}
.sponsor-note p:last-child { margin-bottom: 0; }
.sponsor-note em { color: var(--fg-1); font-style: italic; }
.sponsor-note a { color: var(--mss-coral-400); text-decoration: underline; text-underline-offset: 3px; }

/* Join form */
.join-form {
  background: #fff;
  border: 1px solid var(--mss-line);
  box-shadow: var(--shadow-sm);
  max-width: 760px;
  margin: 0 auto;
}
.join-form .form-section {
  padding: 32px 36px;
  border-bottom: 1px solid var(--mss-line);
}
.join-form .form-section:last-of-type { border-bottom: none; }
.join-form .form-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 22px;
}
.join-form .form-section-head .step {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mss-cream-50);
  background: var(--mss-marian-500);
  width: 26px; height: 26px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.join-form .form-section-head h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0;
  color: var(--fg-1);
}
.join-form .form-section-head .hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-3);
  margin-left: auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.form-grid .field.full { grid-column: 1 / -1; }
.join-form .field label {
  display: block;
  font: 600 12px var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.join-form .field label .req { color: var(--mss-coral-400); margin-left: 2px; }
.join-form .field input,
.join-form .field select,
.join-form .field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--mss-cream-100);
  border: 1px solid var(--mss-line-strong);
  border-radius: 2px;
  padding: 11px 13px;
  font: 400 15px var(--font-body);
  color: var(--fg-1);
  box-shadow: var(--shadow-inset);
}
.join-form .field textarea { resize: vertical; min-height: 80px; }
.join-form .field input:focus,
.join-form .field select:focus,
.join-form .field textarea:focus {
  outline: 2px solid var(--mss-gold-400);
  outline-offset: 2px;
  border-color: var(--mss-marian-500);
}
.join-form .field .help {
  font: 400 12px var(--font-body);
  font-style: italic;
  color: var(--fg-3);
  margin-top: 5px;
}
.join-form .sponsor-section { background: var(--mss-cream-50); }
.join-form .form-actions {
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--mss-cream-100);
}
.join-form .form-actions .note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-3);
  max-width: 42ch;
}
.checkbox-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 4px 0;
}
.checkbox-row input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; box-shadow: none; }
.checkbox-row label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* Join success */
.join-success {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--mss-gold-200);
  box-shadow: var(--shadow-md);
  padding: 56px 48px;
}
.join-success .seal-mark { width: 84px; height: 84px; margin: 0 auto 20px; display: block; }
.join-success h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.join-success h2 .script { font-family: var(--font-script); color: var(--mss-coral-400); font-size: 52px; }
.join-success p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 auto 16px;
  max-width: 46ch;
}
.join-success .next-steps {
  text-align: left;
  background: var(--mss-cream-50);
  border: 1px solid var(--mss-line);
  padding: 22px 26px;
  margin: 24px 0;
}
.join-success .next-steps h5 {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin: 0 0 14px;
}
.join-success .next-steps ol {
  margin: 0; padding-left: 20px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-1);
}
.join-success .next-steps ol li { margin-bottom: 8px; }

@media (max-width: 760px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .eligibility { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .sponsor-note { grid-template-columns: 1fr; gap: 16px; }
  .join-form .form-section { padding: 24px 22px; }
  .join-form .form-actions { padding: 22px; flex-direction: column; align-items: stretch; }
  .join-form .form-actions .btn { width: 100%; justify-content: center; }
  .join-success { padding: 40px 24px; }
}


/* ===================================================================
   LANGUAGE SWITCHER (masthead + mobile drawer)
   =================================================================== */

.lang-switcher {
  display: inline-flex;
  gap: 2px;
  background: transparent;
  border-radius: 2px;
  padding: 0;
}
.lang-switcher button {
  background: transparent;
  border: 1px solid transparent;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.72);
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.lang-switcher button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.lang-switcher button.active {
  color: #fff;
  border-color: var(--mss-gold-400);
  background: rgba(168, 128, 48, 0.18);
}
.lang-flag {
  width: 16px; height: 11px;
  display: block; flex: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}
.lang-label { display: inline-block; }

/* Utility strip — very top of the page, above the tricolor + masthead.
   Language switcher pinned to the right edge of the viewport. */
.mh-utility {
  background: var(--mss-marian-900);
  border-bottom: 0;
  padding: 5px 20px 5px 0;
}
.mh-utility-inner {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
/* Member login button in the utility strip (top-right, before the
   language switcher). Compact + uppercase to fit the utility row.
   Now sits on marian-900 (matching the footer), so text is light,
   hover just brightens to full white with a soft translucent wash. */
.mh-utility-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease;
}
.mh-utility-login:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.mh-utility-login:focus-visible { outline: 2px solid var(--mss-gold-400); outline-offset: 2px; }
.mh-utility-login svg { flex: 0 0 auto; margin-top: -1px; }

/* FB / IG glyph links in the utility bar. Same visual weight as the
   Member Login button, just no label. */
.mh-utility-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-radius: 2px;
  transition: color 140ms ease, background 140ms ease;
}
.mh-utility-social:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.mh-utility-social:focus-visible { outline: 2px solid var(--mss-gold-400); outline-offset: 2px; }

@media (max-width: 640px) {
  .mh-utility { padding: 4px 12px 4px 0; }
  .lang-switcher button { padding: 3px 6px; }
  .lang-label { font-size: 10px; }
  .mh-utility-inner { gap: 8px; }
  .mh-utility-login { padding: 3px 6px; font-size: 10px; letter-spacing: 0.08em; }
  .mh-utility-login svg { width: 11px; height: 11px; }
  .mh-utility-social { width: 22px; height: 22px; }
  .mh-utility-social svg { width: 12px; height: 12px; }
}

/* Footer contact column — small FB/IG glyphs sitting on their own row
   below the mailto link. Same monochrome treatment as the header. */
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: inherit;
  border: 1px solid var(--mss-line-strong, rgba(0,0,0,0.12));
  border-radius: 50%;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.footer-social a:hover {
  color: var(--mss-gold-500, #b48a2e);
  border-color: var(--mss-gold-500, #b48a2e);
}

/* "What we're up to" section — two follow-us cards replacing the old
   feed widgets (LightWidget wouldn't render on HTTPS free tier and
   the FB Page Plugin looked unbalanced on its own). */
.social-follow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}
.social-follow-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--mss-line);
  text-decoration: none;
  color: var(--fg-1);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.social-follow-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.08));
  border-color: var(--mss-marian-500, #4a6ea8);
}
.social-follow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  color: var(--mss-marian-600, #35507a);
  background: var(--mss-cream-100, #f4efe3);
}
.social-follow-body { min-width: 0; }
.social-follow-handle {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-1);
  line-height: 1.15;
  margin-bottom: 4px;
}
.social-follow-cta {
  font: 600 11px/1.2 var(--font-sans, system-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mss-marian-600, #35507a);
}
@media (max-width: 640px) {
  .social-follow-grid { grid-template-columns: 1fr; gap: 14px; }
  .social-follow-card { padding: 18px 20px; }
  .social-follow-icon { width: 44px; height: 44px; flex-basis: 44px; }
}

.mh-mobile-panel .lang-switcher {
  align-self: center;
  margin: 0 0 12px;
}

/* ---------- News cards + detail ---------- */
.news-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 24px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mss-line);
  text-decoration: none;
  color: var(--fg-1);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  height: 100%;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(60, 40, 10, 0.10);
  border-color: var(--mss-marian-500, #4a6ea8);
}
.news-card-thumb {
  aspect-ratio: 16 / 10;
  background: var(--mss-cream-100, #f4efe3);
  background-size: cover;
  background-position: center;
  position: relative;
}
.news-card-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.18em;
  color: var(--mss-gold-500, #b48a2e);
}
/* Play-button badge on news-card thumbnails whose post carries a
   YouTube video_url. Centered marian-blue disc with a right-pointing
   triangle icon — reads unambiguously as "video" without needing a
   text label. Sits above the thumbnail's fallback letters (M.S.S.)
   when both are present. */
.news-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(53, 80, 122, 0.92); /* marian-600 at 92% */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  z-index: 2;
  pointer-events: none;
  transition: transform 160ms ease, background 160ms ease;
}
.news-card-play svg {
  margin-left: 3px; /* optical-center the triangle inside the circle */
}
.news-card:hover .news-card-play,
.news-card:focus-visible .news-card-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(53, 80, 122, 1);
}
/* External-article badge on news-card thumbnails whose post carries
   an external_url (article on a third-party site). Small chip in
   the top-right corner — the click still opens the whole card, but
   the badge tells the visitor a click will leave msssociety.com
   before they make it. Not shown when the card is ALSO a video —
   the play button takes precedence. */
.news-card-external {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px 4px 6px;
  border-radius: 3px;
  background: rgba(53, 80, 122, 0.92);
  color: #fff;
  font: 600 10px/1 var(--font-sans, system-ui, sans-serif);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  z-index: 2;
  pointer-events: none;
}
.news-card-external::after { content: "Article"; }
/* Newsletter badge on cards representing a Ciao issue in the mixed
   /news feed. Uses society-brass instead of the external-article
   marian-blue so the two chips read at a glance as "our publication"
   vs "third-party article". Same corner geometry so the two are
   substitutable in the same card slot. */
.news-card-newsletter {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(168, 128, 48, 0.94);
  color: #fff;
  font: 600 10px/1 var(--font-sans, system-ui, sans-serif);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  z-index: 2;
  pointer-events: none;
}
.news-card-newsletter::after { content: "Newsletter"; }
/* Two-tab segment control above the /news card grid — switches the
   feed scope between All and Newsletters. Both tabs are real anchors
   so middle-click / cmd-click open in a new tab correctly; onClick
   handles the SPA route swap for a plain click. */
.news-filter {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 20px;
  border-bottom: 1px solid var(--mss-line, #E5D9C0);
}
.news-filter-tab {
  padding: 10px 22px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.news-filter-tab:hover { color: var(--mss-marian-600, #35507a); }
.news-filter-tab.is-active {
  color: var(--fg-1);
  border-bottom-color: var(--mss-brass, #A88030);
}
.news-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card-date {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500, #b48a2e);
  margin-bottom: 6px;
}
.news-card-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.news-card-excerpt {
  font-family: var(--font-body, Georgia, serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 14px;
  flex: 1;
}
.news-card-cta {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mss-marian-600, #35507a);
  margin-top: auto;
}
.news-card:hover .news-card-cta { color: var(--mss-marian-900, #0f1f45); }

.news-back {
  margin-bottom: 18px;
}
.news-back a {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mss-marian-600, #35507a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.news-back a:hover { border-bottom-color: var(--mss-marian-600, #35507a); }

@media (max-width: 640px) {
  .news-card-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-card-body { padding: 16px 18px 18px; }
  .news-card-title { font-size: 20px; }
}

/* ---------- History page slide-out drawers ---------- */
/* Tabs pinned to the viewport edges, vertical Cormorant labels.
   Sit above regular content but below any modal (z-index 900 vs
   the tricolor divider's default). Marian-blue ground with the
   gold text keeps them consistent with the sticky footer seal. */
.history-drawer-tab {
  position: fixed;
  top: 45vh;
  z-index: 900;
  background: var(--mss-marian-900);
  color: var(--mss-gold-300);
  border: 1px solid var(--mss-gold-500);
  cursor: pointer;
  padding: 16px 8px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
  user-select: none;
}
.history-drawer-tab.left  { left: 0;  border-left: none;  border-radius: 0 3px 3px 0; }
.history-drawer-tab.right { right: 0; border-right: none; border-radius: 3px 0 0 3px; transform: rotate(180deg); }
.history-drawer-tab:hover {
  background: var(--mss-marian-700);
  color: var(--mss-cream-50);
}
.history-drawer-tab.right:hover { transform: rotate(180deg) translateY(-1px); }
.history-drawer-tab.left:hover  { transform: translateY(-1px); }
.history-drawer-tab:focus-visible {
  outline: 2px solid var(--mss-gold-300);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .history-drawer-tab { top: 40vh; padding: 12px 6px; font-size: 10px; letter-spacing: 0.2em; }
}

/* Backdrop — fades in when either drawer is open. */
.history-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 15, 10, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 1000;
}
.history-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer panel — slides in from its anchored edge. Cream body,
   marian header, gold divider between them. Max width 380px so
   the timeline body copy has room to breathe. */
.history-drawer {
  position: fixed;
  top: 0; bottom: 0;
  width: min(90vw, 380px);
  background: var(--mss-cream-100);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(20,15,10,0.22);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.history-drawer.left  { left: 0;  transform: translateX(-100%); }
.history-drawer.right { right: 0; transform: translateX(100%); }
.history-drawer.left.open,
.history-drawer.right.open { transform: translateX(0); }

.history-drawer-head {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  background: var(--mss-marian-900);
  color: var(--mss-cream-50);
  border-bottom: 2px solid var(--mss-gold-500);
}
.history-drawer-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px; letter-spacing: 0.04em;
}
.history-drawer-close {
  background: transparent;
  color: var(--mss-cream-100);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  transition: background 160ms ease, border-color 160ms ease;
}
.history-drawer-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--mss-gold-300);
}
.history-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px 24px;
}

/* Timeline inside the left drawer — compact version of .timeline. */
.timeline-drawer .tl-row {
  padding: 12px 0;
  border-bottom: 1px dotted var(--mss-line-strong);
}
.timeline-drawer .tl-row:last-child { border-bottom: none; }
.timeline-drawer .tl-year {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.16em;
  color: var(--mss-gold-500);
  margin-bottom: 4px;
}
.timeline-drawer h4 {
  font: 500 15px/1.25 var(--font-display);
  color: var(--fg-1);
  margin: 2px 0 6px;
}
.timeline-drawer p {
  font: italic 13.5px/1.55 var(--font-body);
  color: var(--fg-2);
  margin: 0 0 6px;
}
.timeline-drawer .tl-jump {
  font: italic 12px Georgia, serif;
  color: var(--mss-coral-500);
  text-decoration: none;
  border-bottom: 1px solid var(--mss-line);
}
.timeline-drawer .tl-jump:hover { color: var(--mss-coral-700); }

/* TOC inside the right drawer. Section-level entries (Part One /
   Part Two) render bolder as visual dividers. */
.drawer-toc {
  list-style: none; margin: 0; padding: 0;
}
.drawer-toc li {
  padding: 5px 0;
  font: 400 14px/1.4 var(--font-body);
}
.drawer-toc li.in {
  padding-left: 14px;
  font-size: 13px; color: var(--fg-2);
}
.drawer-toc li.sec {
  font: 600 13.5px/1.35 var(--font-body);
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--mss-line-strong);
  color: var(--mss-marian-800);
}
.drawer-toc li.sec:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.drawer-toc a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease, color 140ms ease;
}
.drawer-toc a:hover {
  color: var(--mss-marian-900);
  border-bottom-color: var(--mss-gold-400);
}
@media (max-width: 640px) {
  .history-drawer-title { font-size: 16px; }
  .history-drawer-body  { padding: 14px 18px 20px; }
}

/* Masthead avatar — replaces the login-arrow icon in .util when the
   viewer is signed in. Circular so it reads instantly as "you"; sized
   to match the login SVG it stands in for. Kept for desktop as an
   affordance; on mobile the cream masthead carries a larger version
   (see .plate .mh-mobile-identity below). */
.util .mh-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(184,137,58,.6);
  display: block;
  flex: 0 0 auto;
}
.util .mh-avatar-initials {
  background: var(--nh-gold-200, #d9b872);
  color: var(--nh-marian-900, #071926);
  font: 700 10px/24px var(--nh-fn);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

/* Portal sidebar section tabs — mobile-only affordance so admins can
   swap between the two nav groups (Manage / My account) without both
   scroll strips eating vertical space. Hidden on desktop; both nav
   groups remain visible there via the default portal-side layout. */
.portal-side-tabs { display: none; }
/* Section wrappers — desktop shows both. Mobile CSS below toggles
   which one is visible based on portal-side[data-active-section]. */
.portal-side-section { display: contents; }

/* Mobile identity strip in the cream masthead — replaces the seal/
   crest when the viewer is signed in. Hidden on desktop; on mobile
   we hide the .plate .mark and show this instead. Avatar + name +
   tap-to-portal in the space the seal used to occupy so the top of
   the page is more compact for logged-in users. */
.plate .mh-mobile-identity {
  display: none; /* revealed by mobile media query */
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  padding-right: 8px;
}
.plate .mh-mid-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--mss-line-strong, rgba(122,85,32,.5));
  flex: 0 0 34px;
}
.plate .mh-mid-initials {
  background: var(--mss-gold-100, #eadfc4);
  color: var(--mss-marian-700, #35507a);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.plate .mh-mid-name {
  font-family: var(--nh-fd, Georgia, serif);
  font-weight: 500; font-size: 15px;
  color: var(--nh-marian-700, #35507a);
  letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* Signed-in "seal in the util bar" swap — mobile only. When signed in,
   the login/avatar area in .util renders a tiny M.S.S. seal (like a
   watermark) since the actual user avatar has moved into the cream
   masthead below. Desktop keeps the small avatar. */
.util .mh-util-seal {
  width: 22px; height: 22px;
  background: url('/assets/seal-primary.png') center/contain no-repeat;
  display: none;
  flex: 0 0 auto;
}

/* Admin filter toggle is mobile-only. Selects show inline on desktop. */
.admin-filter-toggle { display: none; }
.admin-filter-selects { display: flex; }

/* =====================================================================
   COMPREHENSIVE MOBILE PASS
   Global optimizations that apply to every page: form inputs sized to
   prevent iOS auto-zoom, modal / overlay scaling, table wrapping,
   generous tap targets, and horizontal-overflow guards. Kept at the
   end of the file so they win the cascade over any earlier legacy
   mobile fragments without needing !important.
   ===================================================================== */
@media (max-width: 760px) {
  /* iOS Safari auto-zooms in on inputs whose font is < 16px. Break out
     of that behavior everywhere so typing feels calm. Applies to every
     form element regardless of context (portal, join form, signup, etc.). */
  input, textarea, select {
    font-size: 16px !important;
  }
  /* Restore visual size for elements that were intentionally styled small
     by wrapping the raw <input> in a container — only apply this to raw
     bare inputs, keep custom-sized ones alone via .compact-input opt-out. */
  .compact-input input, .compact-input select, .compact-input textarea {
    font-size: 14px !important;
  }

  /* Give any anchor or button acting as a primary action enough vertical
     touch height (Apple HIG minimum ~44px). Not applied to .btn-link so
     inline text links stay quiet. */
  .btn, button.btn, a.btn { min-height: 44px; }

  /* Modal / dialog behavior. Every fixed full-screen overlay we render
     (message modal, application modal, avatar cropper, event details,
     etc.) uses a pattern of `position: fixed; inset: 0` with padding.
     Ensure the inner white card is not wider than the viewport and can
     scroll vertically when its content overflows. */
  .portal .portal-card,
  .portal .portal-card * { min-width: 0; }

  /* Public site + admin content wrappers — never let any child spill
     beyond the visible column. */
  .section, .section-inner, .plate {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Long unbroken tokens (emails, URLs, member card numbers) can't
     overflow the viewport. */
  a, code, .mono, .kv-row .v, .member-table td { overflow-wrap: anywhere; }

  /* Filter chip rows (member type, RSVP filters, dues status buckets,
     etc.) currently overflow when there are 4+ pills. Let them wrap. */
  .actions, .events-filter, .filter-row {
    flex-wrap: wrap !important;
  }

  /* Data tables — wrap in an auto-scroll container. Applies to admin
     roster + member directory + RSVP feed etc. Keep column widths
     from collapsing so the table doesn't turn into an unreadable
     narrow stack; instead we scroll horizontally with a visible cue. */
  .member-table, .members-table, .signups-table, .dues-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .member-table td, .member-table th {
    white-space: nowrap;
    min-width: 100px;
  }
  /* The tap targets inside those tables still stay finger-sized. */
  .member-table button.btn { min-height: 40px; }

  /* Portal cards — reduce internal padding on very tight screens so the
     content isn't crushed. */
  .portal-card { margin-bottom: 16px; }
  .portal-card .head { padding: 14px 16px; flex-wrap: wrap; gap: 6px; }
  .portal-card .head h4 { font-size: 15px; }
  .portal-card .body { padding: 16px; }

  /* Stat tile row on mobile — 2×2 grid is already set; make sure the
     numbers scale nicely and the labels don't clip. */
  .stat-tiles { gap: 10px; }
  .stat-tile { padding: 14px 12px; }
  .stat-tile .lbl { font-size: 9px; letter-spacing: 0.18em; }
  .stat-tile .val { font-size: 30px; line-height: 1; }
  .stat-tile .delta { font-size: 11px; }

  /* Portal profile grid: profile card + details card stack cleanly. */
  .profile-avatar { padding: 32px 22px 26px; }
  .profile-avatar .roundel { width: 120px; height: 120px; font-size: 48px; }
  .profile-avatar h3 { font-size: 22px; }
}

/* Very narrow phones (older iPhone SE, 320-360px logical width). */
@media (max-width: 400px) {
  .portal-head h2 { font-size: 22px; }
  .portal-side nav button { padding: 8px 10px; font-size: 12px; }
  .portal-side nav button svg { width: 13px; height: 13px; margin-right: 6px; }
  .portal-side .group { padding: 4px 10px; letter-spacing: 0.14em; }
  .portal-main { padding: 20px 14px 40px; }
  .stat-tile .val { font-size: 26px; }
}

/* ---------- Tricolor loading indicators (design system handoff) ----
   Four states — determinate, indeterminate sweep, page-top bar,
   inline dots. Green/White/Red matches the flagbar motif used site-
   wide. Class prefix is `mss-` to avoid collision with any other
   utility. Ported from handoff-loading/mss-loading.css; the original
   ships a :root token block which is stripped here — the tokens the
   site already declares resolve globally, and the three that don't
   (--mss-cream-200, --mss-marian-100, --mss-stone-500) fall back to
   the hex literals inline via var(name, #hex). */

/* The flag itself — pure white centre band matches the on-site stripe. */
.mss-tri{
  background:linear-gradient(to right,
    var(--mss-green-500) 0 33.333%,
    #FFFFFF 33.333% 66.666%,
    var(--mss-coral-400) 66.666% 100%);
}

.mss-track{
  position:relative;
  height:8px;
  border-radius:99px;
  background:var(--mss-cream-200, #E8DCC1);
  overflow:hidden;
}

/* Determinate: flag revealed via clip-path from the right so you always
   see a whole flag, not a growing green bar. Set --p on the track. */
.mss-fill{
  position:absolute;
  inset:0;
  border-radius:99px;
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0 round 99px);
  transition:clip-path .4s cubic-bezier(.4,0,.2,1);
}

/* Indeterminate sweep — for unknown-duration waits. */
.mss-sweep{
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  border-radius:99px;
  animation:mss-sweep 1.5s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes mss-sweep{ 0%{left:-40%} 100%{left:102%} }

/* 4px page-top bar — under masthead or fixed to viewport top. */
.mss-pagetop{
  position:relative;
  height:4px;
  background:var(--mss-marian-100, #D9E2E9);
  overflow:hidden;
}
.mss-pagetop > .mss-bar{
  position:absolute;
  inset:0 auto 0 0;
  width:44%;
  animation:mss-grow 2.4s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes mss-grow{ 0%{width:8%} 70%{width:82%} 100%{width:96%;opacity:.35} }
.mss-pagetop.is-fixed{ position:fixed; top:0; left:0; right:0; z-index:9999 }

/* Inline tricolor dots — buttons, small waits. */
.mss-dots{ display:inline-flex; gap:10px; align-items:center }
.mss-dots i{
  width:11px;
  height:11px;
  border-radius:50%;
  animation:mss-pulse 1.2s ease-in-out infinite;
  display:inline-block;
}
.mss-dots i:nth-child(1){ background:var(--mss-green-500) }
.mss-dots i:nth-child(2){ background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--mss-line); animation-delay:.16s }
.mss-dots i:nth-child(3){ background:var(--mss-coral-400); animation-delay:.32s }
@keyframes mss-pulse{ 0%,100%{opacity:.28;transform:scale(.82)} 45%{opacity:1;transform:scale(1)} }
.mss-dots .mss-dots-label{ font:500 13px var(--font-body, system-ui, sans-serif); color:var(--mss-stone-500, #6E5A44); letter-spacing:.02em; margin-left:4px }
.mss-dots.is-sm i{ width:7px; height:7px }
.mss-dots.is-sm{ gap:6px }

/* Reduced-motion: hold a static frame instead of animating. */
@media (prefers-reduced-motion: reduce){
  .mss-fill{ transition:none }
  .mss-sweep{ animation:none; left:0; width:100% }
  .mss-pagetop > .mss-bar{ animation:none; width:60% }
  .mss-dots i{ animation:none; opacity:.7 }
}

/* ---------- Global placeholder styling ---------------------------------
   Default browser placeholder color is nearly as dark as real input
   text, which makes empty fields look pre-filled (bit us on the
   Stay Connected modal — "you@email.com" looked like a real value).
   Lighten to a muted stone tone, and clear entirely on focus so the
   user isn't distracted by hint text while typing.
   Applies to every text-y input + textarea site-wide. */
input::placeholder,
textarea::placeholder{
  color: rgba(110,90,68,.42);      /* stone-tinted, ~42% alpha */
  opacity: 1;                       /* Firefox drops opacity by default */
  font-style: italic;
}
input:focus::placeholder,
textarea:focus::placeholder{
  color: transparent;               /* disappear the moment the field takes focus */
}

/* ---------- Site search — util-bar trigger + full-screen overlay ----
   Trigger sits in the .util .ico row next to Facebook + Instagram.
   Overlay is a full-viewport backdrop with a centered panel; input
   auto-focuses; results are grouped by type. Keyboard-driven — up /
   down navigate, enter opens, esc closes, cmd+K from anywhere. */
.util .util-search {
  background: transparent;
  border: 0;
  color: var(--nh-gold-200);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: color .18s;
}
.util .util-search:hover,
.util .util-search:focus-visible { color: #fff; }
.util .util-search svg { display: block; }

/* --- overlay + panel --- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(7, 25, 38, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 20px 40px;
  animation: search-fade .16s ease-out;
}
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
.search-panel {
  width: 100%;
  max-width: 680px;
  background: var(--mss-cream-50, #FBF7EC);
  border: 1px solid var(--mss-line-strong, #D4C29B);
  box-shadow: 0 22px 60px -18px rgba(7, 25, 38, .75);
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  overflow: hidden;
  border-radius: 2px;
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 18px;
  border-bottom: 1px solid var(--mss-line);
  background: #fff;
}
.search-input-row .search-icon { color: var(--fg-3); flex: 0 0 auto; }
.search-input-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--fg-1);
  padding: 4px 0;
}
.search-input-row input::placeholder { color: var(--fg-3); opacity: 1; font-style: italic; }
.search-close {
  border: 0; background: transparent; color: var(--fg-3);
  font: 400 26px/1 var(--font-display); cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.search-close:hover { color: var(--mss-coral-500, #d97965); }

.search-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.search-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
}
.search-group + .search-group { border-top: 1px solid var(--mss-line); margin-top: 4px; padding-top: 4px; }
.search-group-head {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mss-gold-700, #7a5520);
  padding: 12px 20px 6px;
}
.search-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.search-row:hover, .search-row.is-active {
  background: var(--mss-cream-100);
  border-left-color: var(--mss-coral-400, #d97965);
}
.search-thumb {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--mss-cream-100);
  border: 1px solid var(--mss-line);
  border-radius: 2px;
}
/* Icon-only thumb for static Pages results — file icon on cream. */
.search-thumb.search-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mss-gold-700, #7a5520);
}
/* Initials fallback for Officers with no photo. Same shape as the
   avatar circle used elsewhere on the site. */
.search-thumb.search-thumb-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mss-gold-100);
  color: var(--mss-gold-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}
.search-body-col { flex: 1; min-width: 0; }
.search-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-snippet {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.search-chip {
  font: 600 9px var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mss-marian-700);
  background: var(--mss-marian-100, #e6ebf5);
  padding: 2px 6px;
  border-radius: 2px;
}

.search-footer {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--mss-line);
  background: var(--mss-cream-100);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
}
.search-footer kbd {
  display: inline-block;
  padding: 1px 6px;
  background: #fff;
  border: 1px solid var(--mss-line-strong);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  margin-right: 2px;
}
.search-footer-tip { margin-left: auto; }

/* Mobile refinements — panel goes edge-to-edge, keyboard footer hides. */
@media (max-width: 640px) {
  .search-overlay { padding: 0; align-items: stretch; }
  .search-panel { max-width: none; max-height: 100vh; border-radius: 0; border: 0; }
  .search-input-row { padding: 12px 12px 12px 16px; }
  .search-input-row input { font-size: 18px; }
  .search-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search-overlay { animation: none; }
}