/* 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; }

/* ---------- Masthead ---------- */
.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;
}
.mh-mark {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
}
.mh-seal-img {
  width: 52px; height: 52px; display: block; flex: 0 0 auto;
}
.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;
}
.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;
}
.mh-nav button:hover { color: var(--mss-marian-600); }
.mh-nav button.active { color: var(--mss-marian-700); }
.mh-nav button.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--mss-gold-400);
}
.mh-cta {
  margin-left: 14px;
}

/* ---------- Tricolor bar ---------- */
.tricolor {
  height: 3px;
  background: linear-gradient(to right,
    var(--mss-green-500) 0 33.33%,
    var(--mss-cream-100) 33.33% 66.66%,
    var(--mss-coral-400) 66.66% 100%);
}

/* ---------- 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;
}
.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; }

.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;
}
.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-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: 140px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 28px;
  border-bottom: 1px solid var(--mss-line);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-day {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mss-marian-600);
}
.schedule-day .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 36px; letter-spacing: 0; color: var(--mss-gold-500);
  display: block; margin-bottom: 2px;
}
.schedule-event {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.25; 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;
}

/* ---------- 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: 64px 32px 32px;
}
.footer-inner { max-width: 1180px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 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; }
.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 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; }
.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: 880px) {
  .feast-hero { grid-template-columns: 1fr; }
  .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);
}
.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);
}
.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%,
    var(--mss-cream-100) 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%,
    var(--mss-cream-200) 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: var(--mss-cream-200); 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;
}
.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. */
.event-row:has(.event-thumb) { grid-template-columns: 120px 80px 1fr auto; gap: 24px; }
.event-row:hover { border-color: var(--mss-gold-400); box-shadow: var(--shadow-sm); }
.event-thumb {
  width: 80px;
  height: 60px;
  flex: 0 0 80px;
  border: 1px solid var(--mss-line);
  background-color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.event-date {
  text-align: center;
  border-right: 1px solid var(--mss-line);
  padding-right: 24px;
}
.event-date .month {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-coral-400);
  margin-bottom: 4px;
}
.event-date .day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--mss-marian-700);
  letter-spacing: -0.01em;
}
.event-date .year {
  font: 400 11px var(--font-mono);
  color: var(--fg-3);
  margin-top: 4px;
}
.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;
}
.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);
  padding: 28px;
  text-align: center;
}
.profile-avatar .roundel {
  width: 120px; height: 120px;
  border-radius: 999px;
  background: var(--mss-marian-500);
  color: var(--mss-cream-50);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  border: 2px solid var(--mss-gold-400);
}
.profile-avatar h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  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: 42px; height: 42px; }
  .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: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 18px;
    padding: 18px;
  }
  .schedule-time { grid-column: 1 / -1; text-align: left; padding-left: 98px; }
  .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; }

  .portal { grid-template-columns: 1fr; min-height: auto; }
  .portal-side {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 18px 18px 14px;
  }
  .portal-side nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    -webkit-overflow-scrolling: touch;
  }
  .portal-side nav button {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    padding: 8px 14px;
  }
  .portal-side nav button.active {
    border-left: none;
    border-bottom-color: var(--mss-gold-400);
  }
  .portal-side .group, .portal-side-mark, .portal-side .signout { display: none; }
  .portal-main { padding: 28px 22px 56px; }

  /* ---------- 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-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .footer { padding: 48px 22px 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  .social-grid { grid-template-columns: 1fr; }

  /* 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); }

/* ---- 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; }
}

/* ---- Donate modal cards ---- */
.donate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 6px;
}
.donate-card {
  background: var(--mss-cream-100);
  border: 1px solid var(--mss-line);
  padding: 16px 18px;
  text-align: left;
}
.donate-card-eyebrow {
  font: 600 10px var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mss-gold-500);
  margin-bottom: 8px;
}
.donate-card-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.modal-fineprint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.55;
  margin: 14px 0 0;
}
@media (max-width: 560px) {
  .donate-grid { grid-template-columns: 1fr; }
}

/* ---- 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;
  gap: 22px;
  align-items: flex-start;
}
.footer-brand-seal {
  width: 130px; height: 130px;
  flex: 0 0 130px;
  object-fit: contain;
  display: block;
}
.footer-brand-text { min-width: 0; }
@media (max-width: 640px) {
  .footer-brand { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer-brand-seal { width: 110px; height: 110px; flex-basis: 110px; }
  .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;
}
.join-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(6,24,36,0.78) 0%,
    rgba(6,24,36,0.62) 50%,
    rgba(6,24,36,0.86) 100%);
}
.join-hero-inner { position: relative; max-width: 760px; }
.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;
}
.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: var(--fg-3);
  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: var(--mss-marian-700);
  background: rgba(0,0,0,0.04);
}
.lang-switcher button.active {
  color: var(--mss-marian-700);
  border-color: var(--mss-gold-400);
  background: rgba(168, 128, 48, 0.08);
}
.lang-flag {
  width: 16px; height: 11px;
  display: block; flex: 0 0 16px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.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-cream-100);
  border-bottom: 1px solid var(--mss-line);
  padding: 5px 20px 5px 0;
}
.mh-utility-inner {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 640px) {
  .mh-utility { padding: 4px 12px 4px 0; }
  .lang-switcher button { padding: 3px 6px; }
  .lang-label { font-size: 10px; }
}

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