:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-soft: #eef1f4;
  --ink: #222b33;
  --muted: #66707a;
  --border: rgba(34, 43, 51, 0.12);
  --dark: #242c34;
  --dark-2: #1b2127;
  --brand: #a32035;
  --brand-dark: #861b2c;
  --brand-soft: #f6e7ea;
  --shadow: 0 18px 40px rgba(18, 24, 30, 0.08);
  --radius: 0.9rem;
  --radius-lg: 1.2rem;
  /* Page max-width and gutter — matched to the original v10 design:
     the original used `width: min(1600px, calc(100% - 1.25rem))` on
     .site-nav, .hero-home, .page-hero-inner, .section-inner, and
     .site-footer-inner. That meant ~1600px content with a *total*
     gutter of only 1.25rem (roughly 0.625rem each side) — a tight
     edge-to-edge feel on mobile and a noticeable inset on FHD
     (~83% of viewport) growing to a small island on 2K/4K (42% on 4K,
     which is what the user originally complained about as "tiny on
     high-res").

     The values below replicate the original proportions at the FHD
     baseline (1rem≈18.1px → 88rem ≈ 1600px) but, being rem-based,
     scale with the fluid root so the cap grows on 2K/4K instead of
     leaving a tiny island.

     Behaviour by viewport (page-width / % of viewport):
        ≤1366px : viewport-bound (page fills available width)
         1920px : ~1593 / 83% — matches original FHD inset
         2560px : ~1874 / 73% — original would be 1600/63%
         3840px : ~2438 / 63% — original would be 1600/42% (the bug) */
  --page-max-width: 88rem;
  --page-gutter: 0.625rem;
  --festival-emblem-width: clamp(216px, 20.3vw, 270px);
  --hero-box-gradient:
    linear-gradient(180deg, rgba(9, 34, 67, 0.24), rgba(9, 34, 67, 0.72)),
    linear-gradient(135deg, #9fcffa, #4f8ccd 54%, #1e4b89);
  --hero-box-gradient-alt:
    linear-gradient(180deg, rgba(8, 30, 59, 0.22), rgba(8, 30, 59, 0.68)),
    linear-gradient(135deg, #91c3f1, #3f78b6 54%, #173f76);
  --panel-box-gradient:
    linear-gradient(180deg, rgba(12, 44, 82, 0.06), rgba(12, 44, 82, 0.18)),
    linear-gradient(135deg, #f0f7ff, #d9ebff 56%, #c2dcf6);
  --panel-box-gradient-alt:
    linear-gradient(180deg, rgba(11, 41, 77, 0.08), rgba(11, 41, 77, 0.22)),
    linear-gradient(135deg, #ebf5ff, #d1e6fc 56%, #b7d4f2);
  --media-box-gradient:
    linear-gradient(180deg, rgba(9, 30, 58, 0.2), rgba(9, 30, 58, 0.56)),
    linear-gradient(135deg, #97c8f2, #4c89c8 54%, #1b4987);
  --dropdown-box-gradient:
    linear-gradient(180deg, rgba(11, 41, 77, 0.1), rgba(11, 41, 77, 0.24)),
    linear-gradient(135deg, #e8f4ff, #cfe5fb 56%, #b7d4f2);
  --dropdown-active-bg: rgba(41, 111, 185, 0.18);
  --dropdown-active-ink: #184c87;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Fluid root font-size — the keystone of the proportional-scaling system.
     The entire visual identity scales off this value (every rem unit in
     the file inherits it), so we want strong, smooth scaling across the
     whole desktop range without compounding too hard on common laptops.

     Behaviour by viewport (CSS pixels, before browser zoom):
       ≤1300px (phones, tablets, small laptops): floored at 15px
        1366px (common laptop)                 : ~15.3px
        1600px (typical large laptop)          : ~16.5px
        1920px (Full HD)                       : ~18.1px
        2560px (1440p)                         : ~21.3px
        3840px (4K)                            : capped at 28px

     A 16→19px clamp was tried previously and produced the "everything
     looks tiny on 4K" complaint — only 18.7% growth. This formula gives
     ~75% growth on 4K, smoothly, while keeping common laptop widths within
     1px of the original 16px baseline so they look the same as before.

     Browser zoom interacts naturally: zooming changes the CSS viewport,
     which moves the clamp evaluation, which scales rem-based sizing — so
     no element gets "stuck" while others reflow. */
  font-size: clamp(15px, 0.5vw + 8.5px, 28px);
  overflow-x: hidden;
}

body {
  position: relative;
  margin: 0;
  font-family: "Avenir Next LT Pro", "Avenir Next LT", "Avenir Next", Avenir, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  min-width: 320px;
  overflow-x: hidden;
}

iframe,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {

  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: 0.45rem;
  background: var(--brand);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 1rem;
}

img {
  display: block;
  max-width: 100%;
}

img,
svg,
video,
canvas {
  max-inline-size: 100%;
  block-size: auto;
}

iframe {
  max-inline-size: 100%;
}

main,
section,
article,
aside,
header,
footer,
nav {
  min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, li, a, span, button, label, small) {
  overflow-wrap: break-word;
}

.brand-text,
.nav-links a,
.dropdown-toggle,
.subdropdown-toggle,
.dropdown-menu a,
.subdropdown-menu a {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.nav-links > a,
.dropdown-toggle,
.subdropdown-toggle {
  white-space: nowrap;
}

:where(.site-nav, .hero-home, .page-hero-inner, .section-inner, .section-shell, .split-layout, .three-column, .two-column, .values-grid, .stats-layout, .stats-layout-wide, .stats-grid, .cta-grid, .contact-layout, .contact-form-layout, .site-footer-inner, .gallery-grid, .cta-row, .events-year-layout, .events-month-layout, .events-ledger-layout) > * {
  min-width: 0;
}

.hero-home,
.page-hero-inner,
.section-inner,
.site-footer-inner {
  width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
}

.site-nav {
  width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
}
.nav-links a:hover,
.footer-links a:hover,
.text-link:hover {
  color: var(--brand);
}

.masthead,
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 249, 0.98)),
    radial-gradient(circle at top right, rgba(163, 32, 53, 0.08), transparent 30%);
  border-bottom: 1px solid var(--border);
}

.site-nav {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.5rem);
  padding: 0.8rem 0 0.35rem;
}

.brand,
h1,
h2,
h3,
h4 {
  font-family: "Avenir Next LT Pro", "Avenir Next LT", "Avenir Next", Avenir, sans-serif;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.brand-title {
  position: relative;
  z-index: 220;
  justify-self: start;
  padding-left: 1.2rem;
}

.brand-mark {
  justify-self: center;
  align-self: start;
  position: relative;
  z-index: 0;
  /* `top` lifts the logo into the nav row; `margin-bottom` pulls the next
     sibling (.page-hero-inner) up so the hero overlaps the lower portion
     of the crest. Both use rem, which now scales with viewport via the
     fluid root font-size at the top of this file — so the visual overlap
     stays in proportion across viewport widths automatically, no clamp
     needed here. Only applies to the desktop 3-column nav; the burger
     layout (≤980 media block) resets both to 0. */
  top: -0.65rem;
  margin-bottom: -3rem;
}

.brand-logo {
  /* Rem-based so the crest scales with the fluid root in lock-step with
     all the surrounding layout (gaps, paddings, nav text). The previous
     px-cap version stayed at 220px on 4K while the rest of the page grew,
     making the logo look proportionally tiny — and at narrow zoom levels
     it stayed too big while neighbouring rem-based gaps shrank, creating
     the "logo in the wrong place" effect.

     Caps:
       lower (5.5rem) — floor on small screens (~83-88px)
       vw (12vw)      — drives typical desktop widths
       upper (13rem)  — ceiling on 4K (≈360px at 28px root) */
  width: clamp(5.5rem, 12vw, 13rem);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-text {
  /* Rem-based with a modest vw modulation. Scales with the fluid root so
     the lodge title stays in visual balance with the logo and nav links
     across viewport sizes, instead of staying frozen at 18px while the
     surrounding chrome scales. */
  font-size: clamp(0.95rem, 0.92vw, 1.2rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: left;
}

.nav-block {
  position: relative;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 1.4rem;
  padding-right: 1.2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 0.95vw, 1.25rem);
  flex-wrap: nowrap;
  /* Rem-based with a vw modulation. Scales with the fluid root in
     proportion with the rest of the chrome, eliminating the old failure
     mode where px-capped nav links sat at 17px on 4K while body text
     scaled up around them — and the related zoom failure where nav
     stayed px-frozen while rem-based grid gaps shrank, pushing items
     off their column. */
  font-size: clamp(0.88rem, 0.88vw, 1.15rem);
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
}

.nav-links a.current {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown::after {
  content: none;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.dropdown-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.28rem solid transparent;
  border-right: 0.28rem solid transparent;
  border-top: 0.34rem solid currentColor;
  opacity: 0.72;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: -0.5rem;
  min-width: 13.2rem;
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--dropdown-box-gradient);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.1rem);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 10000;
}

.dropdown-menu a {
  padding: 0.45rem 0.6rem;
  border-bottom: 0;
  border-radius: 0.32rem;
}

.dropdown-menu a:hover {
  background: rgba(45, 121, 201, 0.12);
}

.dropdown-menu a.current {
  border-bottom: 0;
  color: var(--dropdown-active-ink);
  background: var(--dropdown-active-bg);
}

.nav-subdropdown {
  position: relative;
}

.subdropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-bottom: 0;
  border-radius: 0.32rem;
}

.subdropdown-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.28rem solid transparent;
  border-bottom: 0.28rem solid transparent;
  border-left: 0.34rem solid currentColor;
  opacity: 0.72;
}

.subdropdown-toggle.current {
  border-bottom: 0;
  color: var(--dropdown-active-ink);
  background: var(--dropdown-active-bg);
}

.subdropdown-menu {
  position: absolute;
  top: -0.45rem;
  left: calc(100% - 0.05rem);
  min-width: 12rem;
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--dropdown-box-gradient);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.15rem);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 10001;
}

.subdropdown-menu a {
  padding: 0.45rem 0.6rem;
  border-bottom: 0;
  border-radius: 0.32rem;
}

.subdropdown-menu a:hover {
  background: rgba(45, 121, 201, 0.12);
}

.subdropdown-menu a.current {
  border-bottom: 0;
  color: var(--dropdown-active-ink);
  background: var(--dropdown-active-bg);
}

.nav-subdropdown:hover .subdropdown-menu,
.nav-subdropdown:focus-within .subdropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.button {
  display: inline-block;
  padding: 0.88rem 1.35rem;
  border-radius: 0.45rem;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.button.primary {
  background: var(--brand);
  color: #ffffff;
}

.button.primary:hover {
  background: var(--brand-dark);
}

.button.secondary {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--border);
}

.button.secondary:hover {
  border-color: rgba(34, 43, 51, 0.24);
}

.button.ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.button-small {
  padding: 0.38rem 0.72rem;
  font-size: 0.86rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--brand);
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  width: 100%;
}

.hero-home {
  position: relative;
  z-index: 100;
  width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
}

.hero-grid {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  align-self: start;
}

.ensign-emblem,
.ensign-emblem-link {
  display: block;
  width: 100%;
}

.hero-emblems-left {
  position: absolute;
  top: 1.5rem;
  left: clamp(1.9rem, 2.6vw, 3rem);
  width: clamp(160px, 15vw, 250px);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.ensign-emblem img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.festival-emblem {
  position: static;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.festival-emblem-right {
  position: absolute;
  top: 1.5rem;
  right: clamp(1.9rem, 2.6vw, 3rem);
  width: clamp(160px, 15vw, 250px);
}

.festival-emblem img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.festival-emblem-link {
  display: block;
  width: 100%;
}

.festival-caption {
  margin: 0;
  text-align: center;
  font-family: "Avenir Next LT Pro", "Avenir Next LT", "Avenir Next", Avenir, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.festival-caption-title,
.festival-caption-subtitle {
  display: block;
  text-align: center;
  line-height: 1.2;
}

.festival-caption-title {
  color: var(--brand);
  font-weight: 700;
}

.festival-caption-subtitle {
  margin-top: 0.08rem;
  color: #184c87;
  font-weight: 700;
}

.hero-feature {
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  background: var(--hero-box-gradient);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: var(--shadow);
}

.hero-feature h1 {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: clamp(2.65rem, 4.35vw, 4.7rem);
  line-height: 0.98;
  text-wrap: pretty;
}

.hero-feature .hero-title-logo-wrap {
  display: block;
  margin: 0 0 1rem;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.hero-feature .hero-subtitle {
  margin: 0 0 1rem;
  width: 100%;
  max-width: none;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

.hero-title-logo {
  width: min(440px, 82%);
  height: auto;
  display: block;
}

.hero-feature p {
  width: 100%;
  max-width: none;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

.hero-side {
  display: grid;
  gap: 1.25rem;
}

.feature-card {
  min-height: 14.8rem;
  padding: 1.7rem;
  border-radius: var(--radius-lg);
  background: var(--hero-box-gradient-alt);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow);
}

.feature-card h3,
.feature-card p,
.hero-feature h1,
.hero-feature p,
.map-panel h3,
.map-panel p {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.feature-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.feature-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  line-height: 1.15;
}

.feature-card p {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.feature-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.values-strip {
  /* Lift the strip up so it overlaps the parallax banner and meets the
     bottom of the hero panel. The values use px units so the pull
     tracks the parallax-banner's own px-based height clamp (220-420px),
     keeping the visual overlap consistent regardless of root font-size. */
  margin-top: calc(-1 * clamp(220px, 42vw, 535px));
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.values-grid {
  width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 1rem;
}

.values-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.values-intro {
  margin: 0 0 1.75rem;
  line-height: 1.7;
  color: var(--muted);
}

.value-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--panel-box-gradient);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.value-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.15rem;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.value-card-inline-logo {
  float: left;
  width: 4.8rem;
  height: auto;
  margin: 0.1rem 0.75rem 0.35rem 0;
  object-fit: contain;
}

.detail-card-inline-logo {
  float: left;
  width: 4.8rem;
  height: auto;
  margin: 0.1rem 0.75rem 0.35rem 0;
  object-fit: contain;
}

.about-page #about-overview .detail-card-inline-logo {
  display: block;
  float: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  filter: brightness(1.24) contrast(1.06) saturate(1.05);
  margin: 0 0 0.9rem;
  border-radius: calc(var(--radius) - 0.25rem);
  box-shadow: 0 8px 18px rgba(8, 20, 38, 0.14);
}

.freemasonry-showcase-grid {
  gap: 1rem;
}

.freemasonry-showcase-card {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  min-height: 18rem;
  padding: 0.95rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.freemasonry-showcase-media {
  flex: 0 0 clamp(240px, 40%, 360px);
  max-width: 40%;
  min-width: 240px;
  border-radius: calc(var(--radius) - 0.2rem);
  overflow: hidden;
  min-height: 15rem;
  aspect-ratio: 16 / 10;
  box-shadow:
    0 12px 24px rgba(8, 20, 38, 0.2),
    inset 0 0 0 1px rgba(24, 76, 135, 0.18);
}

.freemasonry-showcase-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.34) contrast(1.08) saturate(1.1);
}

.freemasonry-showcase-media img[src$="freemasonry-ceremonial.jpg"] {
  transform: scale(1.045);
  transform-origin: center center;
}

.freemasonry-showcase-copy {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.75rem;
  padding-right: 0.15rem;
}

.freemasonry-showcase-copy h3 {
  margin: 0;
}

.freemasonry-showcase-copy p {
  margin: 0;
}

@media (max-width: 980px) {
  .freemasonry-showcase-card {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .freemasonry-showcase-media {
    max-width: 100%;
    min-width: 0;
    min-height: 13rem;
    aspect-ratio: 16 / 10;
  }

  .freemasonry-showcase-copy {
    padding-right: 0;
  }
}

.about-page #about-overview .detail-card-inline-logo[src$="Modern_Lodge_logo.png"] {
  width: 6rem;
  height: auto;
  object-fit: contain;
}

.about-page #about-overview .detail-card-inline-logo[src$="Joinus_logo.png"] {
  width: 6.2rem;
  height: auto;
  object-fit: contain;
}

.chapter-grid {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}

.chapter-grid .detail-card {
  height: 100%;
}

.chapter-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.15rem;
}

.chapter-inline-logo {
  width: clamp(8.7rem, 13.5vw, 13.2rem);
  height: auto;
  object-fit: contain;
}

@media (max-width: 980px) {
  .chapter-grid {
    grid-template-columns: 1fr;
  }

  .chapter-inline-logo {
    width: clamp(7.8rem, 27vw, 11.4rem);
  }
}

.section {
  padding: 2.75rem 0;
}

.anchor-target {
  scroll-margin-top: 9rem;
}

.parallax-banner {
  position: relative;
  min-height: clamp(240px, 36vw, 420px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(18, 25, 32, 0.22), rgba(18, 25, 32, 0.45)),
    url("../images/Franklin_Rooms.webp") center / cover no-repeat fixed;
}

.parallax-banner-contact {
  background:
    linear-gradient(180deg, rgba(18, 25, 32, 0.25), rgba(18, 25, 32, 0.48)),
    url("../images/ensign-logo.gif") center / cover no-repeat fixed;
}

.parallax-banner-about {
  background:
    linear-gradient(180deg, rgba(10, 24, 44, 0.28), rgba(10, 24, 44, 0.56)),
    radial-gradient(circle at center, rgba(20, 57, 102, 0.42), rgba(7, 20, 37, 0.52)),
    url("../images/white_ensign_gillingham_4180-transparent.webp") center / contain no-repeat fixed;
}

.parallax-banner-freemasonry {
  background:
    linear-gradient(180deg, rgba(18, 25, 32, 0.22), rgba(18, 25, 32, 0.45)),
    url("../images/dsc_0032.jpg") center / cover no-repeat fixed;
}

.parallax-banner-join {
  background:
    linear-gradient(180deg, rgba(14, 24, 40, 0.2), rgba(14, 24, 40, 0.42)),
    url("../images/WE_FM.png") center / cover no-repeat fixed;
}

.parallax-banner-officers {
  width: 100%;
  margin: 0;
  min-height: clamp(280px, 44vw, 620px);
  background:
    linear-gradient(180deg, rgba(18, 25, 32, 0.18), rgba(18, 25, 32, 0.38)),
    url("../images/DSC_0010.JPG") center 46% / cover no-repeat fixed;
  background-color: #1a2230;
}

.parallax-band {
  /* Local cap (~47.5rem) keeps the band readable. Inner term uses the
     shared --page-gutter so it stays aligned with every other layout
     container — previously the hard-coded `2rem` made this band misalign
     visibly from the rest of the page at certain widths. */
  width: min(47.5rem, calc(100% - (var(--page-gutter) * 2)));
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(20, 27, 35, 0.56);
  color: #ffffff;
  text-align: center;
  box-shadow: var(--shadow);
}

.parallax-band .eyebrow {
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.82);
}

.parallax-band h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
}

.parallax-band p {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
}

body.mobile-parallax-faux {
  position: relative;
  z-index: 0;
}

body.mobile-parallax-faux::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Dynamic-viewport unit ladder. Browsers pick the latest one they
     understand. 100dvh tracks the actual visible viewport (no jump when
     iOS toolbars hide/show); 100svh/lvh are static fallbacks; 100vh is
     the oldest fallback for browsers that support none of the above. */
  height: 100vh;
  height: 100svh;
  height: 100lvh;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  background-image: var(--mobile-parallax-image, var(--hero-box-gradient));
  background-position: var(--mobile-parallax-position, center center);
  background-size: var(--mobile-parallax-size, cover);
  background-repeat: var(--mobile-parallax-repeat, no-repeat);
  background-attachment: scroll;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

body.mobile-parallax-faux .parallax-banner {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

body.mobile-parallax-faux .parallax-banner.is-empty-parallax {
  min-height: clamp(220px, 36vw, 420px);
}

body.mobile-parallax-faux .parallax-banner.is-empty-parallax.is-secondary-parallax {
  min-height: 0;
  height: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
}

body.mobile-parallax-faux .values-strip {
  margin-top: 0;
}

.section.alt {
  background: var(--surface-soft);
}

.section-shell {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-box-gradient-alt);
  box-shadow: var(--shadow);
}

/* Links page: use a denser card layout (smaller cards, less whitespace). */
.links-page .section {
  padding: 1.8rem 0;
}

.links-page .section-shell {
  padding: 1rem;
}

.links-page .section-shell .section-heading {
  margin-bottom: 0.7rem;
}

.links-page .grid {
  gap: 0.8rem;
}

.links-page .detail-card {
  padding: 1rem 1.05rem;
}

.links-page .detail-card h3 {
  margin-bottom: 0.4rem;
  font-size: 1.08rem;
}

.links-page .detail-card p {
  margin: 0.3rem 0;
  line-height: 1.55;
}

/* Links page text colour: non-link copy is black; links keep link styling. */
.links-page .page-hero-feature,
.links-page .section-heading h2,
.links-page .section-heading .eyebrow,
.links-page .detail-card h3,
.links-page .detail-card p,
.links-page .footer-bottom p,
.links-page .footer-bottom-home p {
  color: #000;
  text-shadow: none;
}

.links-page .page-hero-feature .eyebrow,
.links-page .page-hero-copy h1,
.links-page .page-hero-copy p {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.join-page .page-hero-copy h1,
.join-page .page-hero-copy h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#about-overview.section.alt {
  background: transparent !important;
}

#about-overview .section-shell {
  background: var(--panel-box-gradient-alt) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.about-page :is(h1, h2, h3, h4, h5, h6) {
  text-align: center !important;
}

.about-page .section-heading,
.about-page .section-heading > div {
  text-align: center !important;
}

.about-page .section-heading > div {
  margin-inline: auto;
}

.about-page .eyebrow {
  text-align: center !important;
}

.about-page .charity-support-summary h3 {
  text-align: center !important;
  color: #000000 !important;
}

.about-page #chapter .section-shell {
  background:
    linear-gradient(180deg, rgba(104, 24, 42, 0.08), rgba(104, 24, 42, 0.2)),
    linear-gradient(135deg, #f8ecef, #ebd2d9 56%, #dab3be) !important;
  border-color: rgba(122, 26, 49, 0.28) !important;
}

.about-page #chapter .detail-card {
  background:
    linear-gradient(180deg, rgba(104, 24, 42, 0.05), rgba(104, 24, 42, 0.16)),
    linear-gradient(135deg, #fbf2f4, #f1dde2 56%, #e1bec7) !important;
  border-color: rgba(122, 26, 49, 0.24) !important;
}

.about-page #chapter .eyebrow {
  color: #8a2037 !important;
}

.section-shell .section-heading {
  margin-bottom: 1rem;
}

.section-shell .panel,
.section-shell .story-card,
.section-shell .cta-card,
.section-shell .detail-card,
.section-shell .contact-card,
.section-shell .faq-card,
.section-shell .value-card,
.section-shell .leader-portrait {
  background: var(--panel-box-gradient);
}

.section.dark {
  background: linear-gradient(180deg, #2a323b, #20272f);
  color: #f7f8fa;
}

.section.dark .eyebrow {
  color: var(--brand-soft);
}

.section.dark h2 {
  color: #ffffff;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.section-heading h2,
.split-copy h2,
.stats-copy h2,
.page-hero-copy h1 {
  margin: 0;
  line-height: 1.06;
}

.faq-title-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.faq-title-image {
  display: block;
  width: min(168px, 100%);
  height: auto;
  margin: 0 auto 0.75rem;
}

.section-heading h2,
.split-copy h2,
.stats-copy h2 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.section-heading-wide {
  display: block;
}

.section-heading-wide h2 {
  max-width: none;
}

.section-heading-subtle {
  margin-bottom: 1rem;
}

.section-heading-subtle-centered {
  justify-content: center;
  text-align: center;
}

.section-heading-subtle-second {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
}

.section-actions {
  margin: 1.25rem 0 0;
}

.section-subtle {
  padding-bottom: 1.5rem;
}

.section-heading-subtle h2 {
  font-family: "Avenir Next LT Pro", "Avenir Next LT", "Avenir Next", Avenir, sans-serif;
  font-size: clamp(1.35rem, 2.15vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  color: #1f3550;
}

.story-grid-compact {
  gap: 0.9rem;
}

.events-gallery-page .page-hero {
  padding-bottom: 0.9rem;
  overflow: visible;
  z-index: 300;
}

.events-gallery-page .site-nav {
  z-index: 12000;
}

.events-gallery-page main > .section:first-of-type {
  padding-top: 1.2rem;
}

.events-gallery-page [data-events-gallery] .section-heading {
  margin-bottom: 1rem;
}

.text-link {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.split-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 1.5rem;
}

.split-copy p,
.page-hero-copy p,
.story-card p,
.panel p,
.cta-card p,
.detail-card p,
.contact-card p,
.stat-caption,
.info-list li,
.value-list li,
.feature-list li {
  color: var(--muted);
  line-height: 1.72;
}

.charity-support-grid {
  margin-top: 1.35rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.detail-card.charity-support-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.charity-support-card[open] {
  box-shadow: var(--shadow);
}

.charity-support-summary {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.75rem;
  cursor: pointer;
  list-style: none;
  min-height: 3.8rem;
}

.charity-support-summary::-webkit-details-marker {
  display: none;
}

.charity-support-summary::after {
  content: "+";
  margin-left: auto;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(163, 32, 53, 0.36);
  background: rgba(163, 32, 53, 0.12);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--brand-dark);
  font-weight: 700;
}

.charity-support-card[open] .charity-support-summary::after {
  content: "−";
}

.charity-support-summary h3 {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.2;
}

.charity-support-body {
  padding: 0 0.75rem 0.75rem;
}

.charity-support-link {
  margin: 0.45rem 0 0;
}

.about-values-heading {
  margin-top: 1.25rem;
}

.charity-support-logo-wrap {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.75rem 1rem;
  border-radius: calc(var(--radius) - 0.25rem);
}

.charity-support-logo-wrap-dark {
  background: #223243;
}

.charity-support-logo {
  width: 100%;
  max-width: 5.95rem;
  height: 2.45rem;
  object-fit: contain;
  justify-self: start;
  align-self: center;
}

.charity-support-logo-inverse {
  max-width: 5.45rem;
}

.charity-support-logo-wrap {
  width: 100%;
  max-width: 5.95rem;
  min-height: 2.45rem;
  padding: 0.35rem 0.45rem;
  justify-content: center;
  align-items: center;
}

@media (max-width: 900px) {
  .links-page .section {
    padding: 1.45rem 0;
  }

  .links-page .section-shell {
    padding: 0.9rem;
  }

  .links-page .grid {
    gap: 0.7rem;
  }

  .charity-support-grid {
    grid-template-columns: 1fr;
  }

  .charity-support-summary {
    grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  }
}

.panel,
.story-card,
.cta-card,
.detail-card,
.contact-card,
.faq-card {
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.about-faq-card {
  padding: 0;
  overflow: hidden;
}

.about-faq-card[open] {
  box-shadow: var(--shadow);
}

.about-faq-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  min-height: 4.2rem;
}

.about-faq-summary::-webkit-details-marker {
  display: none;
}

.about-faq-summary::after {
  content: "+";
  margin-left: auto;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(163, 32, 53, 0.36);
  background: rgba(163, 32, 53, 0.12);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--brand-dark);
  font-weight: 700;
}

.about-faq-card[open] .about-faq-summary::after {
  content: "−";
}

.about-faq-summary h3 {
  margin: 0;
}

.about-faq-card-static .about-faq-summary {
  cursor: default;
}

.about-faq-card-static .about-faq-summary::after {
  content: none;
}

.about-faq-body {
  padding: 0 1.2rem 1.15rem;
}

.about-faq-body p {
  margin: 0;
}

.panel.dark-panel,
.faq-card.dark-panel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.panel.dark-panel p,
.faq-card.dark-panel p,
.faq-card.dark-panel li {
  color: rgba(255, 255, 255, 0.82);
}

.leader-panel {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.leader-portrait {
  padding: 1.8rem;
  border-radius: var(--radius);
  background: var(--panel-box-gradient);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
}

.leader-portrait img {
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.leader-portrait h3,
.story-card h3,
.cta-card h3,
.detail-card h3,
.contact-card h3,
.faq-card h3,
.page-hero-panel h3,
.map-panel h3 {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.92);
}

.story-card-compact {
  padding: 1rem 1.05rem;
}

.story-card-compact h3 {
  margin: 0;
}

.story-card-subtle {
  padding: 0.8rem 0.95rem;
}

.story-card-subtle h3 {
  margin: 0;
  font-family: "Avenir Next LT Pro", "Avenir Next LT", "Avenir Next", Avenir, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.22;
}

.story-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story-card-link:hover {
  color: var(--brand);
}

.leader-portrait p {
  margin: 0.3rem 0;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 1.25rem;
}

.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-media,
.cta-media {
  height: 11rem;
  margin: -1.6rem -1.6rem 1.2rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--media-box-gradient);
}

.story-meta {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--brand);
  letter-spacing: 0.08em;
  font-weight: 700;
}

.stats-band {
  padding: 4rem 0;
  background: linear-gradient(180deg, #f7f7f6, #eceff2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stats-layout {
  /* Local cap (~73.75rem) sized for the stats panel content. Inner term
     uses --page-gutter so this aligns with every other layout container. */
  width: min(73.75rem, calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.stats-layout-wide {
  grid-template-columns: minmax(0, 1fr);
}

.stats-layout-wide .stats-copy h2,
.stats-layout-wide .stats-copy p {
  max-width: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.stat-card {
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--panel-box-gradient);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.stat-number {
  margin: 0;
  color: var(--brand);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
}

.stat-caption {
  margin: 0.55rem 0 0;
  font-size: 0.98rem;
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.cta-card {
  display: flex;
  flex-direction: column;
}

.cta-grid-compact {
  gap: 0.9rem;
}

.cta-card-compact {
  padding: 1rem 1.05rem;
}

.cta-card-compact h3 {
  margin-bottom: 0.45rem;
}

.cta-card-compact p {
  margin: 0 0 0.8rem;
}

.cta-card .button,
.story-card .text-link {
  margin-top: auto;
}

.gallery-page .photo-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.55rem;
}

.events-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.events-gallery-filters .button {
  cursor: pointer;
}

.events-gallery-status {
  margin: 1rem 0 0;
  color: var(--muted);
  font-weight: 600;
}

.gallery-events-support {
  margin-top: 1.5rem;
}

.gallery-page-event-grid {
  margin-top: 1rem;
}

.gallery-page .photo-card {
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.gallery-page .photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.gallery-page .photo-card figcaption {
  margin-top: 0.25rem;
  font-size: 0.68rem;
}

.gallery-page .section-heading,
.gallery-page .section-heading > div {
  text-align: center !important;
}

.gallery-page .section-heading > div {
  margin-inline: auto;
}

.gallery-page .section-heading .eyebrow {
  text-align: center !important;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  cursor: zoom-in;
}

.photo-card figcaption {
  margin: 0.75rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 14, 25, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20050;
  padding: 1rem;
}

.gallery-lightbox.open {
  display: flex;
}

.gallery-lightbox-panel {
  width: min(92vw, 980px);
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(148, 176, 214, 0.4);
  background: linear-gradient(165deg, rgba(237, 244, 252, 0.98), rgba(226, 238, 250, 0.98));
  box-shadow: 0 20px 55px rgba(7, 25, 43, 0.45);
  padding: 1rem;
}

.return-to-top {
  position: fixed;
  right: 0.35rem;
  bottom: 1.1rem;
  z-index: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(117, 147, 188, 0.48);
  background: rgba(241, 247, 253, 0.96);
  color: #173b66;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(7, 35, 68, 0.12);
  backdrop-filter: blur(6px);
}

.return-to-top:hover {
  background: rgba(230, 240, 250, 0.98);
  color: #0f2e54;
}

.return-to-top:focus-visible {
  outline: 3px solid rgba(31, 143, 219, 0.45);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .return-to-top {
    bottom: 1rem;
    right: 0.5rem;
    min-width: 6rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
  }
}

.gallery-lightbox-close {
  display: block;
  margin: 0 0 0.75rem auto;
  border: 1px solid rgba(13, 52, 91, 0.32);
  border-radius: 0.4rem;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-weight: 700;
  color: #0d345b;
  background: rgba(13, 52, 91, 0.12);
  cursor: pointer;
}

.gallery-lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
}

.gallery-lightbox-caption {
  margin: 0.8rem 0 0;
  color: #1b3854;
  font-weight: 600;
}

.card-photo-zoom {
  cursor: zoom-in;
}

.card-photo-zoom:focus-visible {
  outline: 3px solid rgba(31, 143, 219, 0.45);
  outline-offset: 3px;
}

.card-photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 14, 25, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20060;
  padding: 1rem;
}

.card-photo-lightbox.open {
  display: flex;
}

.card-photo-lightbox-panel {
  width: min(92vw, 980px);
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(148, 176, 214, 0.4);
  background: linear-gradient(165deg, rgba(237, 244, 252, 0.98), rgba(226, 238, 250, 0.98));
  box-shadow: 0 20px 55px rgba(7, 25, 43, 0.45);
  padding: 1rem;
}

.card-photo-lightbox-close {
  display: block;
  margin: 0 0 0.75rem auto;
  border: 1px solid rgba(13, 52, 91, 0.32);
  border-radius: 0.4rem;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-weight: 700;
  color: #0d345b;
  background: rgba(13, 52, 91, 0.12);
  cursor: pointer;
}

.card-photo-lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
}

.card-photo-lightbox-caption {
  margin: 0.8rem 0 0;
  color: #1b3854;
  font-weight: 600;
}

body.lightbox-open {
  overflow: hidden;
}

.members-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.rank-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.rank-card h3 {
  margin: 0 0 0.85rem;
  font-size: 1.2rem;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.rank-list li {
  display: grid;
  gap: 0.2rem;
}

.rank-list span {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-weight: 700;
}

.rank-list strong {
  font-size: 1rem;
}

.members-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.members-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.members-table thead th {
  text-align: left;
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.members-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.members-table tbody tr:last-child td {
  border-bottom: 0;
}

.years-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.84rem;
  font-weight: 700;
}

.members-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.service-card {
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.service-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.member-note {
  margin: 1.2rem 0 0;
  color: var(--muted);
  line-height: 1.72;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1rem;
}

.events-calendar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.events-heading-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.events-heading-meta .eyebrow {
  margin: 0;
}

.events-view-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-right: 0.35rem;
}

.events-view-toggle {
  appearance: none;
  border: 1px solid rgba(24, 76, 135, 0.16);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.48rem 0.9rem;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.events-view-toggle:hover,
.events-view-toggle:focus-visible {
  border-color: rgba(24, 76, 135, 0.32);
  background: rgba(193, 223, 250, 0.5);
  outline: none;
}

.events-view-toggle.is-active {
  background: linear-gradient(180deg, rgba(88, 146, 209, 0.2), rgba(24, 76, 135, 0.12));
  border-color: rgba(24, 76, 135, 0.28);
  color: #184c87;
}

.calendar-picker-label {
  color: var(--ink);
  font-weight: 700;
}

.calendar-picker {
  min-height: 2.55rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(24, 76, 135, 0.26);
  background: var(--panel-box-gradient);
  color: var(--ink);
  font: inherit;
}

.calendar-picker::-webkit-calendar-picker-indicator {
  filter: none;
  cursor: pointer;
}

.calendar-nav-btn {
  min-height: 2.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(24, 76, 135, 0.26);
  background: var(--panel-box-gradient);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.calendar-nav-btn:hover {
  background: var(--panel-box-gradient-alt);
  color: var(--brand);
  transform: translateY(-1px);
}

.events-calendar-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.events-agenda-wrap {
  display: grid;
  gap: 0.9rem;
}

.events-year-wrap {
  display: grid;
  gap: 1rem;
}

.events-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.events-year-month {
  border-radius: var(--radius);
  border: 1px solid rgba(24, 76, 135, 0.14);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.events-year-month.is-current-month {
  border-color: rgba(88, 146, 209, 0.34);
}

.events-year-month-header {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(24, 76, 135, 0.1);
  background: linear-gradient(180deg, rgba(193, 223, 250, 0.4), rgba(255, 255, 255, 0.6));
}

.events-year-month-header h3 {
  margin: 0;
  color: var(--ink);
}

.events-year-month-body {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.events-year-day {
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(24, 76, 135, 0.1);
}

.events-year-day:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.events-year-day.is-today {
  padding: 0.7rem 0.75rem;
  margin: -0.2rem -0.25rem 0;
  border-radius: 0.8rem;
  background: rgba(88, 146, 209, 0.14);
  border-bottom-color: transparent;
}

.events-year-date {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}

.events-year-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.events-year-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}

.events-year-time {
  display: inline-flex;
  align-items: center;
  min-width: 4.25rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: rgba(163, 32, 53, 0.1);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  justify-content: center;
}

.events-year-time-empty {
  background: rgba(24, 76, 135, 0.08);
  color: var(--muted);
}

.events-year-title {
  color: var(--ink);
  line-height: 1.45;
}

.events-year-empty {
  margin: 0;
  color: var(--muted);
}

.events-month-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.events-month-summary {
  border-radius: var(--radius);
  border: 1px solid rgba(24, 76, 135, 0.12);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.events-month-summary.has-events {
  background: var(--panel-box-gradient);
}

.events-month-summary.is-current-month,
.events-month-list-card.is-current-month {
  border-color: rgba(88, 146, 209, 0.34);
}

.events-month-summary-header,
.events-month-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.events-month-summary-header h3,
.events-month-list-header h3 {
  margin: 0;
  color: var(--ink);
}

.events-month-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.9rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(24, 76, 135, 0.08);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.events-month-summary-list,
.events-month-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.events-month-summary-list li {
  display: grid;
  gap: 0.18rem;
  color: var(--ink);
  line-height: 1.42;
}

.events-month-summary-day {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand);
}

.events-month-summary-empty,
.events-month-list-empty {
  color: var(--muted);
}

.events-month-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.events-month-list-card {
  border-top: 1px solid rgba(24, 76, 135, 0.14);
  background: transparent;
  box-shadow: none;
  padding: 0.9rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.events-month-list-item {
  padding: 0.8rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(24, 76, 135, 0.1);
  display: grid;
  gap: 0.45rem;
}

.events-month-list-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.events-month-list-date {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.events-month-list-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.8rem;
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
  background: rgba(163, 32, 53, 0.1);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 700;
}

.events-month-list-title {
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
}

.events-month-list-row {
  display: grid;
  grid-template-columns: minmax(145px, 180px) 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(24, 76, 135, 0.08);
}

.events-month-list-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.events-month-list-copy {
  display: grid;
  gap: 0.2rem;
}

.events-month-list-empty {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(24, 76, 135, 0.2);
  background: rgba(255, 255, 255, 0.75);
}

.events-ledger {
  display: grid;
  gap: 1rem;
}

.events-ledger-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.events-ledger-column {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.events-ledger-month {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.events-ledger-month.is-current-month {
  border-color: rgba(88, 146, 209, 0.34);
}

.events-ledger-month-header {
  padding: 0.65rem 0.85rem 0.6rem;
  border-bottom: 1px solid rgba(24, 76, 135, 0.1);
  background: linear-gradient(180deg, rgba(193, 223, 250, 0.34), rgba(255, 255, 255, 0.55));
}

.events-ledger-month-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.events-ledger-month-body {
  display: grid;
}

.events-ledger-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  min-height: 0;
}

.events-ledger-row + .events-ledger-row {
  border-top: 1px solid rgba(24, 76, 135, 0.1);
}

.events-ledger-date {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.08rem;
  padding: 0.55rem 0.55rem 0.5rem;
  border-right: 1px solid rgba(24, 76, 135, 0.1);
  background: linear-gradient(180deg, rgba(193, 223, 250, 0.28), rgba(255, 255, 255, 0.5));
  color: var(--ink);
}

.events-ledger-weekday {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.05;
}

.events-ledger-day {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.events-ledger-copy {
  display: grid;
  align-content: start;
  gap: 0.12rem;
  padding: 0.55rem 0.8rem 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.2);
}

.events-ledger-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.18;
}

.events-ledger-meta,
.events-ledger-location {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.2;
}

.events-ledger-location {
  color: rgba(33, 41, 52, 0.84);
}

.events-ledger-empty {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
  color: var(--muted);
}

.events-agenda-list {
  display: grid;
  gap: 0.9rem;
}

.events-agenda-entry {
  display: grid;
  grid-template-columns: minmax(170px, 220px) 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid rgba(24, 76, 135, 0.14);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.events-agenda-entry.is-today {
  border-color: rgba(88, 146, 209, 0.34);
  background: linear-gradient(
      180deg,
      rgba(88, 146, 209, 0.08) 0%,
      rgba(88, 146, 209, 0.02) 100%
    ),
    var(--panel-box-gradient);
}

.events-agenda-date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.events-agenda-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.events-agenda-item {
  padding: 0.8rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(24, 76, 135, 0.12);
}

.events-agenda-time {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.events-agenda-title {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.events-agenda-empty {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(24, 76, 135, 0.2);
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted);
}

.events-calendar-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.events-calendar-table thead th {
  text-align: left;
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #184c87;
  border-bottom: 1px solid rgba(24, 76, 135, 0.2);
  background: rgba(255, 255, 255, 0.45);
}

.events-calendar-table td {
  vertical-align: top;
  padding: 0.7rem 0.75rem;
  color: var(--ink);
  border-bottom: 1px solid rgba(24, 76, 135, 0.14);
  border-right: 1px solid rgba(24, 76, 135, 0.1);
  background: rgba(255, 255, 255, 0.66);
  min-width: 125px;
  height: 120px;
}

.events-calendar-table tbody tr:last-child td {
  border-bottom: 0;
}

.events-calendar-table td:last-child {
  border-right: 0;
}

.calendar-cell {
  position: relative;
  display: grid;
  gap: 0.45rem;
  min-height: 100%;
}

.calendar-day-number {
  display: block;
  margin-bottom: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.calendar-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.calendar-event-item {
  display: grid;
  gap: 0.18rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(24, 76, 135, 0.08);
}

.calendar-event-time {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
}

.calendar-event-title {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.32;
}

.events-calendar-table td.is-outside-month {
  background: rgba(24, 76, 135, 0.03);
}

.events-calendar-table td.is-outside-month .calendar-day-number {
  color: rgba(24, 76, 135, 0.38);
}

.calendar-badge {
  margin: 0 0.35rem 0.35rem 0;
}

.calendar-empty {
  background: rgba(22, 59, 104, 0.06);
}

.events-calendar-table td.is-today {
  background: rgba(88, 146, 209, 0.26);
}

.events-calendar-table td.has-events {
  background: linear-gradient(
    180deg,
    rgba(193, 223, 250, 0.62) 0%,
    rgba(234, 244, 255, 0.92) 100%
  );
}

.page-hero {
  padding: 0 0 3rem;
}

.page-hero-inner {
  position: relative;
  z-index: 100;
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.page-hero-feature {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--hero-box-gradient);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: var(--shadow);
}

.page-hero-feature .eyebrow {
  color: rgba(255, 255, 255, 0.86);
}

.page-hero-feature h1,
.page-hero-feature p {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.page-hero-copy h1 {
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.page-hero-copy p {
  width: 100%;
  max-width: none;
  margin: 1rem 0 0;
  font-size: 1.08rem;
  text-wrap: pretty;
}

.page-hero-feature p {
  color: rgba(255, 255, 255, 0.92);
}

.page-hero-panel {
  display: none;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--hero-box-gradient-alt);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow);
  max-width: 28rem;
  color: #ffffff;
}

.page-hero-panel h3,
.page-hero-panel p,
.page-hero-panel li {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.page-hero-panel .info-list li {
  color: rgba(255, 255, 255, 0.92);
}

.admin-hero .page-hero-inner {
  grid-template-columns: 1fr;
}

.admin-page .page-hero {
  padding-bottom: 1.4rem;
}

.admin-page .section {
  padding-top: 1.6rem;
}

.admin-hero .page-hero-feature {
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.admin-hero .page-hero-copy h1,
.admin-hero .page-hero-copy p {
  max-width: none;
}

.admin-hero .page-hero-copy h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.admin-hero .page-hero-copy p {
  margin-top: 0.45rem;
}

.admin-hero-checklist {
  margin-top: 0.55rem;
}

.admin-hero-checklist li {
  color: rgba(255, 255, 255, 0.92);
}

.info-list,
.value-list,
.feature-list {
  margin: 0;
  padding-left: 1.2rem;
}

.info-list li,
.value-list li,
.feature-list li {
  margin-bottom: 0.7rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.25rem;
}

.contact-card a {
  color: var(--brand);
  text-decoration: none;
}

.map-panel {
  min-height: 100%;
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--hero-box-gradient-alt);
  box-shadow: var(--shadow);
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.map-panel p {
  color: rgba(255, 255, 255, 0.92);
}

.contact-map-embed {
  width: 100%;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 22px rgba(3, 12, 22, 0.28);
}

.contact-map-embed iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

.contact-form-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.92fr;
  gap: 1.25rem;
}

.contact-form-stack {
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.contact-form-intro h3 {
  margin: 0 0 0.5rem;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.contact-form-field {
  display: grid;
  gap: 0.35rem;
}

.contact-form-field label {
  font-weight: 700;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.65rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
}

.contact-form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form-field-wide {
  grid-column: 1 / -1;
}

.contact-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.contact-form-consent input {
  margin-top: 0.2rem;
}

.contact-form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact-form-status {
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  font-weight: 700;
}

.contact-form-status.info {
  background: rgba(39, 100, 168, 0.14);
  color: #1c4e87;
}

.contact-form-status.success {
  background: rgba(24, 119, 74, 0.14);
  color: #0d5f39;
}

.contact-form-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.contact-form-status.error {
  background: rgba(163, 32, 53, 0.16);
  color: #7f1527;
}

.contact-form .is-invalid {
  border-color: #b81f38 !important;
  box-shadow: 0 0 0 2px rgba(184, 31, 56, 0.18);
}

.contact-field-error {
  margin: 0.45rem 0 0;
  color: #7f1527;
  font-size: 0.88rem;
  font-weight: 600;
}

.contact-field-error[hidden] {
  display: none;
}

.field-invalid-flash {
  animation: field-invalid-flash 0.55s ease;
}

@keyframes field-invalid-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(184, 31, 56, 0);
  }
  35% {
    box-shadow: 0 0 0 4px rgba(184, 31, 56, 0.26);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(184, 31, 56, 0.18);
  }
}

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--panel-box-gradient-alt);
  color: rgba(24, 51, 82, 0.9);
  margin-top: 4rem;
  border-top: 1px solid rgba(24, 76, 135, 0.22);
}

.site-footer .brand {
  color: #173f76;
}

.site-footer .brand-logo {
  width: 7.8rem;
  height: 7.8rem;
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  padding: 2.2rem 0 3rem;
}

.footer-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-brand {
  max-width: none;
}

.footer-brand p {
  margin: 0.7rem 0 0;
  line-height: 1.7;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.footer-links a {
  color: #184c87;
  text-decoration: none;
  font-weight: 700;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(24, 76, 135, 0.18);
}

.footer-bottom-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.35rem 1rem;
  padding-top: 0.7rem;
}

.footer-bottom-home p {
  margin: 0;
}

.footer-bottom-home p[data-content-key="footer_line_1"] {
  white-space: normal;
}

.footer-bottom-home p[data-content-key="footer_line_2"] {
  text-align: right;
}

.footer-bottom-home p[data-content-key="footer_blurb"] {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.45;
}

.footer-bottom p[data-content-key="footer_line_1"]::before {
  content: "\00A9  ";
}

.site-footer .brand-text,
.footer-bottom p[data-content-key="footer_line_1"] {
  font-weight: 700;
}

.site-footer .footer-brand .brand-text {
  white-space: normal;
}

.admin-layout {
  display: grid;
  gap: 1.25rem;
}

.admin-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-box-gradient);
  box-shadow: var(--shadow);
}

.admin-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
}

.admin-card h3 {
  margin: 1rem 0 0.45rem;
}

.admin-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.admin-user {
  color: var(--muted);
}

.admin-form {
  display: grid;
  gap: 0.85rem;
}

.admin-section-nav {
  position: sticky;
  top: 0.75rem;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 18px rgba(7, 38, 73, 0.08);
  backdrop-filter: blur(5px);
}

.admin-section-nav-link {
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.93rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.7);
}

.admin-section-nav-link:hover {
  color: var(--ink);
  border-color: rgba(24, 76, 135, 0.2);
}

.admin-section-nav-link.current {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand-dark);
}

.admin-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.admin-edit-section {
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.42);
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.admin-accordion-summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 2.7rem 0.95rem 1rem;
  background: linear-gradient(180deg, rgba(9, 50, 92, 0.11), rgba(9, 50, 92, 0.04));
}

.admin-accordion-summary::-webkit-details-marker {
  display: none;
}

.admin-accordion-summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  transform: translateY(-50%);
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 52, 91, 0.24);
  background: rgba(255, 255, 255, 0.8);
  color: #0d345b;
  display: grid;
  place-items: center;
  font-weight: 700;
  line-height: 1;
}

.admin-accordion[open] .admin-accordion-summary::after {
  content: "−";
}

.admin-accordion-title {
  margin: 0;
  color: var(--ink);
  font-family: "Avenir Next LT Pro", "Avenir Next LT", "Avenir Next", Avenir, sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
}

.admin-accordion-description {
  color: var(--muted);
  font-size: 0.93rem;
}

.admin-accordion-body {
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid rgba(13, 52, 91, 0.13);
}

.admin-edit-section-wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.admin-form label {
  margin-top: 0.4rem;
  font-weight: 700;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.65rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
}

.admin-form textarea {
  resize: vertical;
  min-height: 5rem;
}

.admin-actions {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.admin-actions-sticky {
  position: sticky;
  bottom: 0.75rem;
  z-index: 35;
  margin-top: 0.2rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 20px rgba(7, 38, 73, 0.08);
}

.admin-status {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 0.45rem;
  font-weight: 700;
  border: 1px solid var(--border);
}

.admin-status.info {
  background: rgba(39, 100, 168, 0.14);
  color: #1c4e87;
}

.admin-status.success {
  background: rgba(24, 119, 74, 0.14);
  color: #0d5f39;
}

.admin-status.error {
  background: rgba(163, 32, 53, 0.16);
  color: #7f1527;
}

.admin-help {
  margin: 0.8rem 0 0;
  color: var(--muted);
}

.admin-calendar-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
  align-items: end;
}

.admin-subsection-title {
  margin: 0.2rem 0 0.25rem;
  font-size: 1.08rem;
}

.admin-subsection-divider {
  border: 0;
  border-top: 1px solid rgba(13, 52, 91, 0.18);
  margin: 1rem 0 0.95rem;
}

.admin-media-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  align-items: end;
}

.admin-media-filter {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 0.65rem;
  align-items: end;
}

.admin-media-filter .admin-help {
  margin: 0;
}

.admin-media-upload {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.admin-file-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  align-items: end;
}

.admin-file-guidance {
  border: 1px solid rgba(13, 52, 91, 0.16);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.58);
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.45rem;
}

.admin-file-guidance .admin-help {
  margin: 0;
}

.admin-media-category-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.admin-calendar-field {
  display: grid;
  gap: 0.35rem;
}

.admin-calendar-field label {
  margin-top: 0;
}

.admin-calendar-field input:disabled,
.admin-calendar-field select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.admin-calendar-field input[type="checkbox"] {
  width: auto;
  justify-self: start;
  margin-top: 0.25rem;
}

.admin-calendar-action {
  align-items: end;
}

.admin-calendar-table-wrap {
  overflow: auto;
  max-height: 29rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
}

.admin-media-table-wrap {
  overflow: auto;
  max-height: 29rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
}

.admin-calendar-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.admin-media-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.admin-calendar-table th,
.admin-calendar-table td {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-media-table th,
.admin-media-table td {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-calendar-table th:first-child,
.admin-calendar-table td:first-child {
  white-space: nowrap;
}

.admin-media-table th:first-child,
.admin-media-table td:first-child {
  white-space: nowrap;
}

.admin-calendar-table th {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-media-table th {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-calendar-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-media-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-calendar-remove {
  border: 1px solid rgba(163, 32, 53, 0.35);
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-weight: 700;
  color: #7f1527;
  background: rgba(163, 32, 53, 0.1);
  cursor: pointer;
}

.admin-calendar-remove:hover {
  background: rgba(163, 32, 53, 0.16);
}

.admin-action-button {
  border: 1px solid rgba(13, 52, 91, 0.3);
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-weight: 700;
  color: #0d345b;
  background: rgba(13, 52, 91, 0.1);
  cursor: pointer;
  margin-right: 0.4rem;
}

.admin-action-button:hover {
  background: rgba(13, 52, 91, 0.16);
}

@media (max-width: 1280px) {
  .site-nav {
    width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
    gap: 1rem;
  }

  .brand {
    flex: 0 1 auto;
  }

  .brand-text {
    /* Rem-based, slightly tighter than the base rule. Scales with the
       fluid root so the lodge title shrinks in lock-step with the rest
       of the chrome as the viewport narrows. */
    font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  }

  .nav-block {
    flex: 1 1 auto;
    justify-content: flex-end;
    /* .nav-block has a single child (.nav-links), so wrap is irrelevant
       here. Kept as nowrap for clarity. */
    flex-wrap: nowrap;
    row-gap: 0;
    min-width: 0;
  }

  .nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
    /* Wrap is intentional — at this viewport range (980-1280px) the five
       nav items can collectively exceed the right grid column width
       (especially with the long "White Ensign Gillingham Lodge"
       dropdown label). Letting them wrap is preferable to nowrap +
       overflow-x: hidden, which silently clips "Contact" off the right
       edge. With the new fluid root the per-item widths scale down on
       narrower viewports, so wrap rarely produces more than 2 rows —
       and the crest's bbox (~84px after the negative margin-bottom)
       stays at least as tall as that wrap, so the grid row height is
       still driven by the crest and the hero-panel overlap is
       preserved. */
    flex-wrap: wrap;
    gap: clamp(0.55rem, 0.85vw, 1rem);
    row-gap: 0.5rem;
    min-width: 0;
  }

  .page-hero-inner,
  .split-layout,
  .stats-layout,
  .contact-grid,
  .contact-form-layout {
    grid-template-columns: 1fr;
  }

  .values-grid,
  .stats-grid,
  .cta-grid,
  .gallery-page .photo-grid,
  .members-rank-grid,
  .members-service-grid,
  .three-column {
    /* Rem-based minmax so the column floor shrinks with the fluid root on
       narrower viewports/zoom levels — the previous `minmax(290px, 1fr)`
       didn't scale, so on a 1366 laptop at 110-125% zoom the columns
       dropped from 4-in-a-row to 3 or 2. With 15rem (~225px on narrow
       viewports, ~270px on FHD), the cards stay 4-in-a-row down to
       ~960px viewport before auto-fit drops to 3 columns. */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .gallery-page .photo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .brand-title .brand-text,
  .nav-links > a,
  .dropdown-toggle,
  .subdropdown-toggle {
    white-space: normal;
  }

  .events-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-month-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-month-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-grid {
    max-width: none;
  }

  .page-hero-panel {
    max-width: none;
  }

  /* Parallax fixed-attachment intentionally kept on at viewports >900px.
     Removing the previous `background-attachment: scroll` here was the fix
     for "parallax stops working past 110-125% zoom on a 1366 laptop" — at
     those zoom levels the CSS viewport drops below 1280 but stays above
     900, and the page is still on a desktop pointer device. The 900-px
     media block below disables fixed-attachment for the burger-nav range
     (which also matches where the mobile-parallax-faux JS layer takes
     over), and prefers-reduced-motion overrides everything regardless. */
}

@media (max-width: 1120px) {
  .hero-home {
    width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
  }

  .hero-grid {
    max-width: none;
  }
}

@media (max-width: 1100px) {
  .two-column {
    grid-template-columns: 1fr;
  }

  .footer-bottom-home {
    grid-template-columns: 1fr;
  }

  .footer-bottom-home p[data-content-key="footer_line_2"] {
    text-align: left;
  }
}

@media (max-width: 900px) {
  .hero-home {
    width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
    padding: 1.5rem 0 3rem;
  }

  .hero-grid {
    width: 100%;
    max-width: 820px;
  }

  .hero-grid,
  .split-layout,
  .stats-layout,
  .page-hero-inner,
  .contact-grid,
  .contact-form-layout {
    grid-template-columns: 1fr;
  }

  .values-grid,
  .stats-grid,
  .cta-grid,
  .three-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-grid,
  .members-rank-grid,
  .members-service-grid,
  .contact-form-grid,
  .two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .events-calendar-controls {
    justify-content: flex-start;
    margin-top: 0.85rem;
  }

  .events-heading-meta {
    flex-wrap: wrap;
    align-items: center;
  }

  .events-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-month-summary-grid,
  .events-month-list-grid {
    grid-template-columns: 1fr;
  }

  .events-month-list-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .events-ledger-row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .events-ledger-columns {
    grid-template-columns: 1fr;
  }

  .events-ledger-date {
    padding-inline: 0.5rem;
  }

  .events-ledger-day {
    font-size: 1.2rem;
  }

  .events-ledger-copy {
    padding-inline: 0.65rem;
  }

  .events-agenda-entry {
    grid-template-columns: 1fr;
  }

  .admin-calendar-controls {
    grid-template-columns: 1fr;
  }

  .admin-media-controls {
    grid-template-columns: 1fr;
  }

  .admin-media-filter {
    grid-template-columns: 1fr;
  }

  .admin-media-upload {
    grid-template-columns: 1fr;
  }

  .admin-file-controls {
    grid-template-columns: 1fr;
  }

  .admin-media-category-labels {
    grid-template-columns: 1fr;
  }

  .admin-section-nav {
    top: 0.4rem;
    padding: 0.5rem;
  }

  .admin-section-nav-link {
    flex: 1 1 calc(50% - 0.45rem);
    text-align: center;
  }

  .admin-edit-grid {
    grid-template-columns: 1fr;
  }

  .admin-edit-section {
    min-height: 0;
  }

  .nav-links {
    gap: 0.9rem;
    flex-wrap: wrap;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown::after {
    content: none;
  }

  .dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 0.3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
  }

  .dropdown-menu a {
    padding: 0;
    border-radius: 0;
  }

  .dropdown-menu a.current {
    background: transparent;
    border-bottom: 2px solid var(--brand);
  }

  .nav-subdropdown {
    width: 100%;
  }

  .subdropdown-toggle {
    padding: 0;
    border-radius: 0;
  }

  .subdropdown-menu {
    position: static;
    min-width: 0;
    margin-left: 0.8rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
  }

  .subdropdown-menu a {
    padding: 0;
    border-radius: 0;
  }

  .subdropdown-menu a.current,
  .subdropdown-toggle.current {
    background: transparent;
    border-bottom: 2px solid var(--brand);
    color: var(--brand);
  }

  /* `.site-nav` / `.brand-mark` rules previously here were dead — the
     ≤980 burger-nav block later in the file overrides them entirely.
     Removed for clarity. */
  .brand-title .brand-text {
    text-align: left;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    align-items: flex-start;
  }

  .parallax-banner {
    background-attachment: scroll;
  }

}

@media (max-width: 620px) {
  /* `.site-nav { display: flex... }` previously here was dead — overridden
     by the ≤980 burger-nav block. Removed. */
  .section-heading,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .values-grid,
  .stats-grid,
  .cta-grid,
  .three-column {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .photo-grid,
  .members-rank-grid,
  .members-service-grid,
  .contact-form-grid,
  .two-column {
    grid-template-columns: 1fr;
  }

  .brand-text {
    font-size: 1rem;
  }

  .hero-feature {
    padding: 1.25rem;
  }

  .hero-feature h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .hero-feature .hero-subtitle {
    font-size: clamp(1rem, 5.2vw, 1.3rem);
  }

  .hero-feature p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .section-shell,
  .panel,
  .story-card,
  .cta-card,
  .detail-card,
  .contact-card,
  .faq-card,
  .leader-portrait {
    padding: 1.05rem;
  }

  .section-heading h2,
  .split-copy h2,
  .stats-copy h2 {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .gallery-page .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-row > .button,
  .cta-row > button {
    flex: 1 1 100%;
    justify-content: center;
  }

  .members-table-wrap,
  .events-calendar-wrap,
  .admin-calendar-table-wrap,
  .admin-media-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .contact-map-embed iframe {
    height: 220px;
  }

  .hero-title-logo {
    width: min(320px, 86%);
  }

  .page-hero-feature {
    min-height: 16rem;
    padding: 1.5rem;
  }

  .events-year-grid {
    grid-template-columns: 1fr;
  }

  .events-view-switcher {
    width: 100%;
    margin-right: 0;
  }

  .events-view-toggle {
    flex: 1 1 auto;
    justify-content: center;
  }

  .events-year-item {
    grid-template-columns: 1fr;
  }

  .events-year-time {
    width: fit-content;
  }

  .events-ledger-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .events-ledger-date {
    border-right: 0;
    border-bottom: 1px solid rgba(24, 76, 135, 0.1);
    background: linear-gradient(180deg, rgba(193, 223, 250, 0.3), rgba(255, 255, 255, 0.52));
    flex-direction: row;
    align-items: baseline;
    gap: 0.55rem;
  }

  .events-ledger-copy {
    padding-top: 0.8rem;
  }

  .feature-card {
    min-height: 12rem;
  }

  .section-shell {
    padding: 1.2rem;
  }

  .parallax-band {
    padding: 1.1rem 1rem;
  }
}

.nav-toggle,
.nav-dropdown-action,
.nav-subdropdown-action {
  display: none;
  appearance: none;
  border: 1px solid rgba(24, 76, 135, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  border-radius: 0.7rem;
  cursor: pointer;
}

.nav-toggle {
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.65rem 1rem;
  box-shadow: 0 10px 24px rgba(18, 24, 30, 0.08);
}

.nav-dropdown-action,
.nav-subdropdown-action {
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  min-height: 2.85rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.nav-toggle:hover,
.nav-dropdown-action:hover,
.nav-subdropdown-action:hover,
.nav-toggle[aria-expanded="true"],
.nav-dropdown-action[aria-expanded="true"],
.nav-subdropdown-action[aria-expanded="true"] {
  color: var(--brand);
  border-color: rgba(163, 32, 53, 0.28);
  background: rgba(163, 32, 53, 0.08);
}

/* Burger / mobile-nav layout. Previously triggered at max-width: 1280px,
   which meant any zoom ≥150% on a 1920p monitor (or 110% on a 1366p one)
   flipped the desktop layout into the hamburger menu. Moved to 980px so
   the desktop 3-column nav stays intact for ordinary zoom levels on
   common monitors. The viewport-collapse rules higher up (also @media
   max-width: 1280px) still adapt content widths in the 980-1280 band. */
@media (max-width: 980px) {
  .site-nav {
    width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "title logo toggle"
      "nav nav nav";
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0 0.5rem;
  }

  .brand-title {
    grid-area: title;
    padding-left: 0;
    max-width: 100%;
  }

  .brand-mark {
    grid-area: logo;
    top: 0;
    margin-bottom: 0;
    justify-self: center;
    align-self: center;
  }

  .brand-text {
    font-size: clamp(0.95rem, 1.6vw, 1.08rem);
    line-height: 1.12;
  }

  .nav-toggle {
    display: inline-flex;
    grid-area: toggle;
    justify-self: end;
  }

  .nav-block {
    grid-area: nav;
    width: 100%;
    display: none;
    justify-self: stretch;
    padding-right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav.nav-open .nav-block {
    display: flex;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 0.35rem;
  }

  .nav-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.25rem 0 0.1rem;
  }

  .nav-links a {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .nav-links > a,
  .dropdown-toggle,
  .subdropdown-toggle {
    width: 100%;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
  }

  .nav-links > a.current,
  .dropdown-toggle.current,
  .subdropdown-toggle.current {
    color: var(--brand);
    border-color: rgba(163, 32, 53, 0.28);
    background: rgba(163, 32, 53, 0.08);
  }

  .nav-dropdown,
  .nav-subdropdown {
    width: 100%;
  }

  .nav-dropdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem;
  }

  .nav-subdropdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem;
  }

  .nav-dropdown-action,
  .nav-subdropdown-action {
    display: inline-flex;
  }

  .dropdown-toggle::after,
  .subdropdown-toggle::after {
    display: none;
  }

  .dropdown-menu,
  .subdropdown-menu {
    position: static;
    min-width: 0;
    margin: 0.1rem 0 0.15rem;
    padding: 0.15rem 0 0.05rem 0.85rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    gap: 0.45rem;
  }

  .nav-dropdown.is-open > .dropdown-menu,
  .nav-subdropdown.is-open > .subdropdown-menu {
    display: grid;
  }

  .dropdown-menu a,
  .subdropdown-menu a {
    padding: 0.65rem 0.8rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.72);
  }

  .dropdown-menu a.current,
  .subdropdown-menu a.current {
    border-bottom: 0;
    color: var(--brand);
    background: rgba(163, 32, 53, 0.08);
  }

  .subdropdown-menu {
    padding-left: 1.1rem;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .hero-actions .button {
    flex: 1 1 100%;
    justify-content: center;
  }

  .values-strip {
    margin-top: 0;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .events-gallery-filters .button,
  .events-view-toggle,
  .calendar-nav-btn {
    width: 100%;
    justify-content: center;
  }

  .events-calendar-controls {
    gap: 0.45rem;
  }

  .events-calendar-controls .calendar-picker-label {
    width: 100%;
    font-size: 0.86rem;
    margin-top: 0.2rem;
  }

  .events-calendar-controls .calendar-picker {
    width: 100%;
    min-height: 2.7rem;
  }

  .events-view-switcher {
    width: 100%;
    margin-right: 0;
  }

  .events-view-switcher .events-view-toggle {
    min-height: 2.7rem;
  }

  .about-faq-summary {
    padding: 0.82rem 0.9rem;
    min-height: 0;
  }

  .about-faq-body {
    padding: 0 0.9rem 0.9rem;
  }

  .charity-support-summary {
    padding: 0.55rem 0.6rem;
    min-height: 0;
  }

  .charity-support-body {
    padding: 0 0.6rem 0.7rem;
  }

  .site-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title toggle"
      "logo logo"
      "nav nav";
  }

  .brand-mark {
    justify-self: center;
  }

  .events-calendar-table {
    min-width: 580px;
  }

  .events-calendar-table td {
    min-width: 92px;
    height: 106px;
    padding: 0.58rem 0.55rem;
  }
}

@media (max-width: 520px) {
  .site-nav {
    width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
    gap: 0.65rem;
  }

  .brand-text {
    font-size: 0.92rem;
    letter-spacing: 0.025em;
  }

  .nav-toggle {
    width: 100%;
    max-width: 8rem;
    padding-inline: 0.85rem;
  }

  .dropdown-menu,
  .subdropdown-menu {
    padding-left: 0.55rem;
  }

  .site-nav.nav-open .nav-block {
    max-height: min(68vh, 30rem);
  }

  .gallery-page .photo-grid {
    grid-template-columns: 1fr;
  }

  .events-calendar-table {
    min-width: 520px;
  }

  .events-calendar-table td {
    min-width: 84px;
    height: 98px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .parallax-banner {
    background-attachment: scroll;
  }

  /* The static-mode seam-correction on the homepage's secondary parallax
     banner is now driven by JS (`alignSecondaryStaticBanners` in
     a11y-enhancements.js) so the y-offset can track the real layout gap
     between banner tops rather than a hardcoded value that drifts with
     viewport width and cards reflow. */
}

/* About page: force Chapter CTA section to lighter chapter reds (no blue fallback). */
.about-page #chapter.about-chapter-cta {
  --panel-box-gradient:
    linear-gradient(180deg, rgba(104, 24, 42, 0.05), rgba(104, 24, 42, 0.16)),
    linear-gradient(135deg, #fbf2f4, #f1dde2 56%, #e1bec7);
  --panel-box-gradient-alt:
    linear-gradient(180deg, rgba(104, 24, 42, 0.08), rgba(104, 24, 42, 0.2)),
    linear-gradient(135deg, #f8ecef, #ebd2d9 56%, #dab3be);
}

.about-page #chapter.about-chapter-cta .section-shell {
  background: var(--panel-box-gradient-alt) !important;
  border-color: rgba(122, 26, 49, 0.28) !important;
}

.about-page #chapter.about-chapter-cta .detail-card {
  background: var(--panel-box-gradient) !important;
  border-color: rgba(122, 26, 49, 0.24) !important;
}

.lodge-life-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.25rem);
  margin: 0 0 0.9rem;
  box-shadow: 0 8px 18px rgba(8, 20, 38, 0.14);
}

.integrity-focus {
  object-position: center 12%;
}

.contact-page .page-hero-copy h1,
.contact-page .page-hero-copy p {
  text-align: center;
  margin-inline: auto;
}

.contact-page .eyebrow {
  text-align: center !important;
}

.contact-page .map-panel p[data-content-key="contact_find_us_body"] {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 600;
}

.contact-page #contact-more-info .cta-card h3 {
  color: #000000;
}

.join-faq-grid {
  align-items: start;
}