/* =============================================================================
   Global Sindhu — Frontend Stylesheet
   Premium Ivory & Gold Luxury Theme
   Tokens: Ivory #F8F5EF | Gold #C8A96B | Charcoal #1A1510
   Fonts: Cormorant Garamond (display) | Inter (UI)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ----------------------------------------------------------------------------- */
:root {
  --ivory:        #F8F5EF;
  --ivory-dark:   #EDE6D6;
  --surface:      #FFFFFF;
  --gold:         #C8A96B;
  --gold-dark:    #9F7B3F;
  --gold-light:   #E8D5A8;
  --charcoal:     #1A1510;
  --charcoal-mid: #2B2620;
  --text:         #2B2620;
  --text-muted:   #4A4034;
  --text-on-dark: #F2EBD9;
  --border:       #E9DFCF;
  --border-mid:   #C8B898;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  --container-max:    1200px;
  --container-narrow: 720px;
  --container-pad:    clamp(1rem, 4vw, 2rem);

  --topbar-h:     38px;
  --header-h:     80px;
  --section-pad:  clamp(4rem, 8vw, 7rem);

  --radius:       2px;
  --radius-md:    4px;
  --shadow:       0 2px 16px rgba(26,21,16,.06);
  --shadow-md:    0 8px 32px rgba(26,21,16,.10);
  --shadow-lg:    0 20px 56px rgba(26,21,16,.14);

  --transition:   200ms ease;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family:      var(--font-ui);
  color:            var(--text);
  background-color: var(--ivory);
  line-height:      1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY SCALE
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family:  var(--font-display);
  line-height:  1.18;
  font-weight:  600;
  color:        var(--charcoal);
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); }

p { margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }

address { font-style: normal; }

/* -----------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   ----------------------------------------------------------------------------- */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--section-pad) 0;
}

.section--ivory    { background-color: var(--ivory); }
.section--charcoal {
  background-color: var(--charcoal);
  color:            var(--text-on-dark);
}
.section--charcoal h1,
.section--charcoal h2,
.section--charcoal h3 {
  color: var(--text-on-dark);
}

/* -----------------------------------------------------------------------------
   5. SHARED SECTION TYPOGRAPHY
   ----------------------------------------------------------------------------- */
.section-label {
  display:        inline-block;
  font-family:    var(--font-ui);
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .75rem;
  padding-bottom: .45rem;
  position:       relative;
}
.section-label::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      20px;
  height:     1px;
  background: var(--gold);
}

.section-title {
  font-family:    var(--font-display);
  font-size:      clamp(1.75rem, 4vw, 2.8rem);
  color:          var(--charcoal);
  margin-bottom:  1.5rem;
  font-weight:    600;
  letter-spacing: -.01em;
}
.section--charcoal .section-title { color: var(--text-on-dark); }

.section-action {
  margin-top: 3rem;
  text-align: center;
}

.no-data {
  color:      var(--text-muted);
  font-style: italic;
  padding:    2.5rem 0;
  text-align: center;
  font-size:  .95rem;
}

/* -----------------------------------------------------------------------------
   6. BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         .7rem 2.25rem;
  font-family:     var(--font-ui);
  font-size:       .72rem;
  font-weight:     600;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  border-radius:   var(--radius);
  transition:      background var(--transition), color var(--transition),
                   border-color var(--transition), box-shadow var(--transition),
                   transform var(--transition);
  white-space:     nowrap;
  cursor:          pointer;
  text-decoration: none;
}

.btn--gold {
  background:  var(--gold);
  color:       var(--charcoal);
  border:      1.5px solid var(--gold);
}
.btn--gold:hover, .btn--gold:focus-visible {
  background:   var(--gold-dark);
  border-color: var(--gold-dark);
  color:        #fff;
  box-shadow:   0 4px 18px rgba(159,123,63,.35);
  transform:    translateY(-1px);
}

.btn--outline {
  background:  transparent;
  color:       var(--charcoal);
  border:      1.5px solid var(--charcoal);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--charcoal);
  color:      var(--ivory);
  transform:  translateY(-1px);
}

.section--charcoal .btn--outline {
  color:        var(--text-on-dark);
  border-color: rgba(242,235,217,.45);
}
.section--charcoal .btn--outline:hover,
.section--charcoal .btn--outline:focus-visible {
  background:   var(--text-on-dark);
  color:        var(--charcoal);
  border-color: var(--text-on-dark);
}

/* -----------------------------------------------------------------------------
   7. HEADER & NAV
   ----------------------------------------------------------------------------- */

/* ── Sticky wrapper (topbar + main header scroll together) ── */
.site-header-wrap {
  position: sticky;
  top:      0;
  z-index:  100;
}

/* ── Top utility bar ─────────────────────────────────────── */
.site-topbar {
  background-color: var(--charcoal-mid);
  border-bottom:    1px solid rgba(200,169,107,.12);
  height:           var(--topbar-h);
  overflow:         hidden;
}

.site-topbar__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
}

.site-topbar__contact {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.site-topbar__item {
  display:         flex;
  align-items:     center;
  gap:             .4rem;
  font-size:       .68rem;
  color:           rgba(242,235,217,.48);
  letter-spacing:  .03em;
  text-decoration: none;
  transition:      color var(--transition);
  white-space:     nowrap;
}

.site-topbar__item:hover { color: var(--gold); }

.site-topbar__icon { flex-shrink: 0; }

.site-topbar__social {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}

.site-topbar__social-link {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            26px;
  height:           26px;
  border:           1px solid rgba(200,169,107,.2);
  border-radius:    var(--radius);
  color:            rgba(242,235,217,.4);
  text-decoration:  none;
  transition:       color var(--transition), border-color var(--transition),
                    background var(--transition);
}

.site-topbar__social-link:hover {
  color:        var(--charcoal);
  background:   var(--gold);
  border-color: var(--gold);
}

@media (max-width: 860px) {
  .site-topbar { display: none; }
}

/* ── Main header ─────────────────────────────────────────── */
.site-header {
  position:         relative;
  background-color: var(--surface);
  border-bottom:    1px solid var(--border);
  height:           var(--header-h);
}

/* Gold gradient accent at header base */
.site-header::after {
  content:        '';
  position:       absolute;
  bottom:         -1px;
  left:           0;
  right:          0;
  height:         2px;
  background:     linear-gradient(90deg, transparent 0%, var(--gold) 35%, var(--gold) 65%, transparent 100%);
  opacity:        .28;
  pointer-events: none;
  z-index:        1;
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  gap:             1rem;
}

/* ── Logo ────────────────────────────────────────────────── */
.site-header__logo {
  text-decoration: none;
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  overflow:        hidden;
  height:          calc(var(--header-h) - 14px);
}

.site-header__logo-img {
  width:       110px;
  height:      auto;
  max-height:  none;
  display:     block;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .site-header__logo-img { width: 90px; }
}

@media (max-width: 480px) {
  .site-header__logo-img { width: 76px; }
}

.site-header__logo-text {
  font-family:    var(--font-display);
  font-size:      1.65rem;
  font-weight:    700;
  color:          var(--charcoal);
  letter-spacing: .01em;
  line-height:    1;
}

/* ── Nav links ───────────────────────────────────────────── */
.nav__list {
  display:     flex;
  align-items: center;
  gap:         0;
}

.nav__link {
  display:        block;
  padding:        .5rem .82rem;
  font-size:      .67rem;
  font-weight:    500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color:          var(--text-muted);
  position:       relative;
  transition:     color var(--transition);
  white-space:    nowrap;
}

.nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             .82rem;
  right:            .82rem;
  height:           1.5px;
  background:       var(--gold);
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform var(--transition);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--charcoal); }

.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

.nav__link--active {
  color:       var(--charcoal);
  font-weight: 600;
}
.nav__link--active::after { transform: scaleX(1); }

/* ── Desktop header CTA ──────────────────────────────────── */
.site-header__actions {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  gap:         .75rem;
}

.btn--sm {
  padding:        .48rem 1.35rem;
  font-size:      .64rem;
  letter-spacing: .12em;
}

/* ── Mobile toggle ───────────────────────────────────────── */
.nav__toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           40px;
  height:          40px;
  padding:         8px;
  border-radius:   var(--radius);
  cursor:          pointer;
  background:      none;
  border:          none;
  flex-shrink:     0;
}

.nav__toggle-bar {
  display:          block;
  width:            100%;
  height:           1.5px;
  background-color: var(--charcoal);
  border-radius:    1px;
  transition:       transform var(--transition), opacity var(--transition);
}

/* ── Mobile CTA inside nav list ──────────────────────────── */
.nav__mobile-cta { display: none; }

/* ── Responsive nav ──────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__toggle         { display: flex; }
  .site-header__actions { display: none; }

  .nav {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    right:         0;
    background:    var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow:    var(--shadow-md);
    z-index:       99;
    padding:       .25rem var(--container-pad) 1.25rem;
  }

  .nav.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
  }

  .nav__link {
    padding:       .85rem 0;
    font-size:     .76rem;
    border-bottom: 1px solid var(--border);
  }

  .nav__link::after { display: none; }

  .nav__item:last-child .nav__link { border-bottom: none; }

  .nav__mobile-cta {
    display:    block;
    padding:    .9rem 0 .25rem;
    border-top: none !important;
  }

  .nav__mobile-cta .btn {
    width:           100%;
    justify-content: center;
    padding-top:     .65rem;
    padding-bottom:  .65rem;
    font-size:       .7rem;
  }
}

/* -----------------------------------------------------------------------------
   8. FLASH MESSAGES
   ----------------------------------------------------------------------------- */
.flash {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         .85rem 1.5rem;
  border-left:     3px solid transparent;
  font-size:       .875rem;
}

.flash--success { border-color: #4a8c5c; background: #f3faf6; color: #255234; }
.flash--error   { border-color: #b83232; background: #fdf2f2; color: #7b1c1c; }
.flash--info    { border-color: var(--gold); background: var(--ivory); color: var(--text); }
.flash--warning { border-color: #c9940a; background: #fefaf0; color: #7a5500; }

.flash__message { flex: 1; }

.flash__close {
  background:  none;
  border:      none;
  font-size:   1.2rem;
  line-height: 1;
  cursor:      pointer;
  opacity:     .45;
  padding:     0 .25rem;
  flex-shrink: 0;
  color:       inherit;
}
.flash__close:hover { opacity: 1; }

/* -----------------------------------------------------------------------------
   9. HERO / SLIDER
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  height:   clamp(540px, 88vh, 960px);
  overflow: hidden;
}

/* Both slider and static fallback fill the hero area */
.hero__slider,
.hero__static {
  position: absolute;
  inset:    0;
}

/* Slides stack; crossfade via opacity */
.hero__slide {
  position:       absolute;
  inset:          0;
  opacity:        0;
  transition:     opacity 1.15s ease;
  pointer-events: none;
  z-index:        0;
}

.hero__slide--active {
  opacity:        1;
  pointer-events: auto;
  z-index:        1;
}

/* Background image layer */
.hero__slide-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover !important;
  background-position: center;
  background-repeat:   no-repeat;
  transform:           scale(1);
}

/* Ken Burns: slow zoom-in while the slide is active */
.hero__slide--active .hero__slide-bg {
  transform:  scale(1.07);
  transition: transform 8s ease-out;
}

/* Layered overlay: left-side depth + full vignette */
.hero__slide-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
}

/* Static fallback (no sliders in DB) */
.hero__static {
  background-color: var(--charcoal);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(200,169,107,.05) 0px, rgba(200,169,107,.05) 1px,
    transparent 1px, transparent 60px
  );
}

/* Slide content — flex-centred vertically inside the slide */
.hero__slide-content {
  position:        relative;
  z-index:         2;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding-bottom:  4rem; /* bias content slightly upward */
}

/* Gold accent bar above title */
.hero__slide-content::before {
  content:       '';
  display:       block;
  width:         40px;
  height:        2px;
  background:    var(--gold);
  margin-bottom: 1.75rem;
  opacity:       .82;
}

/* Eyebrow label (optional) */
.hero__eyebrow {
  font-family:    var(--font-ui);
  font-size:      .62rem;
  font-weight:    600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--gold-light);
  margin-bottom:  .85rem;
  opacity:        .88;
  display:        block;
}

.hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 6vw, 4.8rem);
  font-weight:    700;
  color:          #fff;
  line-height:    1.06;
  margin-bottom:  1rem;
  letter-spacing: -.01em;
  max-width:      700px;
}

.hero__subtitle {
  font-size:     clamp(.9rem, 1.7vw, 1.15rem);
  color:         rgba(242,235,217,.76);
  margin-bottom: 2.5rem;
  max-width:     490px;
  line-height:   1.72;
  font-weight:   300;
}

/* CTA row */
.hero__actions {
  display:     flex;
  gap:         .9rem;
  flex-wrap:   wrap;
  align-items: center;
}

/* Ghost / ivory button for use on dark hero backgrounds */
.btn--hero-outline {
  background:      transparent;
  color:           rgba(242,235,217,.88);
  border:          1.5px solid rgba(242,235,217,.38);
  backdrop-filter: blur(4px);
}
.btn--hero-outline:hover,
.btn--hero-outline:focus-visible {
  background:   rgba(242,235,217,.1);
  border-color: rgba(242,235,217,.7);
  color:        #fff;
  transform:    translateY(-1px);
}

/* Arrow controls */
.hero__prev,
.hero__next {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  width:           54px;
  height:          54px;
  border-radius:   0;
  background:      rgba(18,13,8,.42);
  color:           rgba(242,235,217,.82);
  font-size:       1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid rgba(200,169,107,.24);
  transition:      background var(--transition), border-color var(--transition),
                   color var(--transition);
  backdrop-filter: blur(6px);
}

.hero__prev { left: 1.75rem; }
.hero__next { right: 1.75rem; }

.hero__prev:hover,
.hero__next:hover {
  background:   rgba(200,169,107,.2);
  border-color: rgba(200,169,107,.52);
  color:        var(--gold-light);
}

/* Dot indicators */
.hero__dots {
  position:    absolute;
  bottom:      2.25rem;
  left:        50%;
  transform:   translateX(-50%);
  z-index:     10;
  display:     flex;
  gap:         .6rem;
  align-items: center;
}

.hero__dot {
  width:         8px;
  height:        8px;
  border-radius: 0;
  background:    rgba(242,235,217,.28);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background var(--transition), width 300ms ease;
}

.hero__dot--active {
  background: var(--gold);
  width:      26px;
}

/* Autoplay progress bar — thin gold line along the bottom */
.hero__progress {
  position:  absolute;
  bottom:    0;
  left:      0;
  width:     100%;
  height:    2px;
  z-index:   10;
  background: rgba(200,169,107,.18);
}

.hero__progress-bar {
  height:  100%;
  width:   0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
        height: 230px;
        aspect-ratio: 16 / 9; /* try 3 / 1 if your banner is very wide */
        min-height: 220px;
        max-height: 320px;
    }

    .hero__slide-bg {
        background-size: contain !important;
        background-position: center center;
    }
  .hero__prev { left: .75rem; }
  .hero__next { right: .75rem; }
  .hero__prev,
  .hero__next { width: 42px; height: 42px; font-size: .9rem; }
  .hero__dots  { bottom: 1.5rem; }
}

@media (max-width: 480px) {
  .hero__actions { gap: .65rem; }
  .hero__actions .btn { font-size: .67rem; padding: .65rem 1.5rem; }
}

/* -----------------------------------------------------------------------------
   10. PAGE HERO (interior pages)
   ----------------------------------------------------------------------------- */
.page-hero {
  padding:       clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background:    var(--ivory);
  border-bottom: 1px solid var(--border);
}

/* Gold rule above interior page titles */
.page-hero .container::before {
  content:    '';
  display:    block;
  width:      36px;
  height:     2px;
  background: var(--gold);
  margin-bottom: 1.25rem;
  opacity: .8;
}

.page-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.6rem, 6vw, 4rem);
  color:          var(--charcoal);
  letter-spacing: -.015em;
  line-height:    1.1;
}

.page-hero__sub {
  margin-top:  .85rem;
  font-size:   clamp(.95rem, 1.6vw, 1.1rem);
  color:       var(--text-muted);
  font-weight: 300;
  max-width:   640px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   11. ABOUT PREVIEW
   ----------------------------------------------------------------------------- */
.about-preview__inner {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   4.5rem;
  align-items:           center;
}

@media (max-width: 900px) {
  .about-preview__inner {
    grid-template-columns: 1fr;
    gap:                   2.5rem;
  }
}

.about-preview__text { margin-bottom: 2rem; }

.about-preview__img-wrap {
  overflow:     hidden;
  aspect-ratio: 4 / 3;
  border:       1px solid var(--border);
}

.about-preview__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .6s ease;
}

.about-preview__img-wrap:hover .about-preview__img { transform: scale(1.04); }

/* -----------------------------------------------------------------------------
   12. EVENT CARDS (home preview grid)
   ----------------------------------------------------------------------------- */
.events-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   1.5rem;
  margin-top:            2rem;
}

.event-card {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-top:  2px solid var(--gold);
  border-radius: 0;
  padding:     1.75rem;
  box-shadow:  var(--shadow);
  transition:  box-shadow var(--transition), transform var(--transition);
}

.event-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

.event-card__date {
  display:        block;
  font-family:    var(--font-ui);
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .65rem;
}

.event-card__title {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  margin-bottom: .4rem;
  color:         var(--charcoal);
}

.event-card__location {
  font-size:      .8rem;
  color:          var(--text-muted);
  margin-bottom:  .6rem;
  letter-spacing: .03em;
}

.event-card__desc {
  font-size:   .88rem;
  color:       var(--text-muted);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   13. EVENT LIST (agenda page)
   ----------------------------------------------------------------------------- */
.events-list {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  margin-top:     2rem;
}

.event-item {
  display:       grid;
  grid-template-columns: 72px 1fr auto;
  gap:           2rem;
  align-items:   start;
  padding:       2rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   3px solid var(--gold);
  border-radius: 0;
  box-shadow:    var(--shadow);
  transition:    box-shadow var(--transition);
}

.event-item:hover { box-shadow: var(--shadow-md); }

@media (max-width: 600px) {
  .event-item { grid-template-columns: 1fr; }
  .event-item__img-col { order: -1; }
}

.event-item__date-col { text-align: center; }

.event-item__date {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
}

.event-item__date--tba {
  font-family: var(--font-display);
  font-size:   1rem;
  color:       var(--text-muted);
  font-style:  italic;
}

.event-item__day {
  font-family: var(--font-display);
  font-size:   2.4rem;
  font-weight: 600;
  color:       var(--gold-dark);
  line-height: 1;
}

.event-item__month {
  font-size:      .62rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color:          var(--text-muted);
  margin-top:     .2rem;
}

.event-item__year {
  font-size:  .68rem;
  color:      var(--text-muted);
  margin-top: .1rem;
  opacity:    .65;
}

.event-item__title {
  font-family:    var(--font-display);
  font-size:      1.5rem;
  margin-bottom:  .4rem;
  letter-spacing: -.01em;
}

.event-item__meta {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .75rem;
  margin-bottom: .6rem;
}

.event-item__time,
.event-item__location {
  font-size:      .8rem;
  color:          var(--text-muted);
  letter-spacing: .02em;
}

.event-item__img {
  width:      160px;
  height:     108px;
  object-fit: cover;
}

@media (max-width: 600px) {
  .event-item__img { width: 100%; height: 180px; }
}

/* -----------------------------------------------------------------------------
   14. HERITAGE GRID & CARDS
   ----------------------------------------------------------------------------- */
.heritage-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:                   2.5rem;
  margin-top:            2.5rem;
}

@media (max-width: 680px) {
  .heritage-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.heritage-card {
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  0;
  overflow:       hidden;
  box-shadow:     0 2px 12px rgba(26,21,16,.07);
  display:        flex;
  flex-direction: column;
  transition:     box-shadow 300ms ease, transform 300ms ease;
}

.heritage-card:hover {
  box-shadow: 0 12px 40px rgba(26,21,16,.13);
  transform:  translateY(-4px);
}

.heritage-card__img-wrap {
  aspect-ratio: 3 / 2;
  overflow:     hidden;
  position:     relative;
}

/* Gradient scrim at card image bottom */
.heritage-card__img-wrap::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  height:         45%;
  background:     linear-gradient(to top, rgba(26,21,16,.38), transparent);
  pointer-events: none;
}

.heritage-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .65s ease;
  display:    block;
}

.heritage-card:hover .heritage-card__img { transform: scale(1.06); }

.heritage-card__body {
  padding:        2rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
  border-top:     2px solid var(--gold);
}

.heritage-card__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.3rem, 2vw, 1.6rem);
  font-weight:    600;
  margin-bottom:  .5rem;
  letter-spacing: -.01em;
  line-height:    1.2;
  color:          var(--charcoal);
}

.heritage-card__location {
  font-size:      .65rem;
  color:          var(--gold);
  font-weight:    600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom:  .75rem;
}

.heritage-card__desc {
  font-size:     .9rem;
  color:         var(--text-muted);
  flex:          1;
  margin-bottom: 1.5rem;
  line-height:   1.68;
}

.heritage-card__link {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  transition:     gap var(--transition), color var(--transition);
  margin-top:     auto;
}

.heritage-card__link::after { content: '→'; }
.heritage-card__link:hover  { gap: .65rem; color: var(--charcoal); }

/* -----------------------------------------------------------------------------
   15. HERITAGE DETAIL
   ----------------------------------------------------------------------------- */
.heritage-hero__inner {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   4rem;
  align-items:           center;
}

@media (max-width: 900px) {
  .heritage-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.heritage-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.2rem, 5.5vw, 3.5rem);
  margin-bottom:  .65rem;
  letter-spacing: -.01em;
}

.heritage-hero__location {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  1rem;
}

.heritage-hero__desc {
  font-size:   1.05rem;
  color:       var(--text-muted);
  line-height: 1.72;
}

.heritage-hero__img-wrap {
  border:       1px solid var(--border);
  overflow:     hidden;
  aspect-ratio: 4/3;
}

.heritage-hero__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Gallery */
.gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   1rem;
  margin-top:            1.5rem;
}

.gallery__item {
  overflow: hidden;
  position: relative;
}

.gallery__link { display: block; }

.gallery__img {
  width:        100%;
  aspect-ratio: 4/3;
  object-fit:   cover;
  border:       1px solid var(--border);
  transition:   transform .4s ease;
}

.gallery__link:hover .gallery__img { transform: scale(1.05); }

.gallery__caption {
  font-size:      .76rem;
  color:          var(--text-muted);
  padding:        .45rem 0;
  text-align:     center;
  letter-spacing: .02em;
}

/* -----------------------------------------------------------------------------
   16. CTA SECTION (home — charcoal bg)
   ----------------------------------------------------------------------------- */
.cta-section__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         4rem;
  align-items: center;
}

@media (max-width: 680px) {
  .cta-section__inner { grid-template-columns: 1fr; gap: 3rem; }
}

.cta-section__donate {
  padding-right: 2rem;
  border-right:  1px solid rgba(200,169,107,.2);
}

@media (max-width: 680px) {
  .cta-section__donate {
    padding-right: 0;
    border-right:  none;
    padding-bottom: 2.5rem;
    border-bottom:  1px solid rgba(200,169,107,.2);
  }
}

.cta-section__title    { margin-bottom: .65rem; font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.cta-section__text     { margin-bottom: 1.25rem; opacity: .78; font-size: .93rem; line-height: 1.7; }
.cta-section__upi      { margin-bottom: 1.5rem; font-size: .88rem; opacity: .82; }
.cta-section__upi strong { color: var(--gold); font-size: .95rem; }
.cta-section__contact-title { margin-bottom: .9rem; font-size: 1.45rem; }
.cta-section__contact p  { font-size: .9rem; margin-bottom: .5rem; opacity: .78; line-height: 1.6; }
.cta-section__contact a  { color: var(--gold); transition: color var(--transition); }
.cta-section__contact a:hover { text-decoration: underline; color: var(--gold-light); }

/* -----------------------------------------------------------------------------
   17. DONATE DETAILS
   ----------------------------------------------------------------------------- */
.donate-details__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         2.5rem;
  margin-top:  2rem;
}

@media (max-width: 600px) {
  .donate-details__inner { grid-template-columns: 1fr; }
}

.donate-details__subtitle {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  margin-bottom: 1rem;
  color:         var(--charcoal);
}

.donate-details__label {
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  margin-right:   .3rem;
}

.donate-details__qr {
  margin-top:    1.25rem;
  max-width:     160px;
  border:        1px solid var(--border);
}

/* -----------------------------------------------------------------------------
   18. CONTACT
   ----------------------------------------------------------------------------- */
.contact__inner {
  display:               grid;
  grid-template-columns: 1fr 1.4fr;
  gap:                   4rem;
  align-items:           start;
}

@media (max-width: 768px) {
  .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.contact__info-title,
.contact__form-title {
  margin-bottom: 1.75rem;
}

.contact__detail {
  display:        flex;
  flex-direction: column;
  gap:            .2rem;
  margin-bottom:  1.25rem;
  padding-bottom: 1.25rem;
  border-bottom:  1px solid var(--border);
}
.contact__detail:last-of-type { border-bottom: none; }

.contact__detail-label {
  font-size:      .62rem;
  font-weight:    600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gold);
}

.contact__detail-value {
  font-size: .95rem;
  color:     var(--text);
}

.contact__detail-value a { color: var(--text); }
.contact__detail-value a:hover { color: var(--gold-dark); }

.contact__map {
  margin-top: 2rem;
  border:     1px solid var(--border);
  overflow:   hidden;
}

.contact__map iframe { display: block; width: 100%; border: none; }

/* -----------------------------------------------------------------------------
   19. PROSE (rich text)
   ----------------------------------------------------------------------------- */
.prose {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--text);
}

.prose p    { margin-bottom: 1.1rem; }
.prose h2   { margin: 2.5rem 0 .85rem; }
.prose h3   { margin: 1.75rem 0 .5rem; }
.prose ul, .prose ol {
  padding-left:  1.5rem;
  margin-bottom: 1rem;
  list-style:    revert;
}
.prose li { margin-bottom: .4rem; }
.prose a  { color: var(--gold-dark); text-decoration: underline; }
.prose img { margin: 1.25rem 0; }
.prose blockquote {
  border-left: 2px solid var(--gold);
  padding:     .75rem 0 .75rem 1.25rem;
  color:       var(--text-muted);
  font-style:  italic;
  margin:      1.5rem 0;
  font-family: var(--font-display);
  font-size:   1.1rem;
  line-height: 1.65;
}

/* -----------------------------------------------------------------------------
   20. FORMS
   ----------------------------------------------------------------------------- */
.form__group {
  margin-bottom: 1.5rem;
}

.form__label {
  display:        block;
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom:  .45rem;
  color:          var(--text-muted);
}

.form__required { color: #b83232; margin-left: .1rem; }

.form__input,
.form__textarea,
.form__select {
  width:         100%;
  padding:       .8rem 1rem;
  font-family:   var(--font-ui);
  font-size:     .95rem;
  color:         var(--text);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 0;
  transition:    border-color var(--transition), box-shadow var(--transition);
  outline:       none;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(200,169,107,.12);
}

.form__select {
  appearance:         none;
  -webkit-appearance: none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a4034' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right 1rem center;
  padding-right:      2.5rem;
  cursor:             pointer;
}

.form__textarea { resize: vertical; min-height: 110px; }

.form__group--error .form__input,
.form__group--error .form__textarea,
.form__group--error .form__select {
  border-color: #b83232;
}
.form__group--error .form__input:focus,
.form__group--error .form__textarea:focus,
.form__group--error .form__select:focus {
  box-shadow: 0 0 0 3px rgba(184,50,50,.1);
}

.form__error {
  margin-top:     .3rem;
  font-size:      .76rem;
  color:          #b83232;
  font-weight:    500;
  letter-spacing: .02em;
}

.form__hint {
  margin-top:  .3rem;
  font-size:   .78rem;
  color:       var(--text-muted);
  line-height: 1.5;
}

.form__actions {
  margin-top:  2rem;
  display:     flex;
  gap:         1rem;
  flex-wrap:   wrap;
  align-items: center;
}

.form-errors {
  border-left:   3px solid #b83232;
  background:    #fdf2f2;
  padding:       1.1rem 1.5rem;
  margin-bottom: 2rem;
}

.form-errors__heading {
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          #7b1c1c;
  margin-bottom:  .5rem;
}

.form-errors__list {
  padding-left: 1.25rem;
  list-style:   disc;
}

.form-errors__list li {
  font-size:     .875rem;
  color:         #7b1c1c;
  margin-bottom: .25rem;
}

/* -----------------------------------------------------------------------------
   21. FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--charcoal);
  color:            var(--text-on-dark);
}

/* Top gold accent line */
.site-footer::before {
  content:    '';
  display:    block;
  height:     2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 35%, var(--gold) 65%, transparent 100%);
  opacity:    .4;
}

/* ── Main content area ───────────────────────────────────── */
.site-footer__main {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* ── 4-column grid ───────────────────────────────────────── */
.site-footer__grid {
  display:               grid;
  grid-template-columns: 1.9fr 1.1fr 1.4fr 1fr;
  gap:                   2.5rem 3rem;
  align-items:           start;
}

@media (max-width: 920px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   2.5rem 2rem;
  }
}

@media (max-width: 520px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap:                   2rem;
  }
}

/* ── Brand column ────────────────────────────────────────── */
.site-footer__logo {
  font-family:     var(--font-display);
  font-size:       1.7rem;
  font-weight:     700;
  color:           var(--text-on-dark);
  display:         block;
  text-decoration: none;
  letter-spacing:  .01em;
  margin-bottom:   .6rem;
}

.site-footer__tagline {
  font-size:   .8rem;
  color:       rgba(242,235,217,.4);
  line-height: 1.7;
  max-width:   240px;
  margin:      0 0 1.1rem;
}

.site-footer__divider {
  width:        28px;
  height:       1px;
  background:   var(--gold);
  opacity:      .5;
  margin-bottom: 1rem;
}

.site-footer__cta-link {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--gold);
  text-decoration: none;
  transition:     color var(--transition), letter-spacing var(--transition);
  display:        inline-block;
}

.site-footer__cta-link:hover {
  color:          var(--gold-light);
  letter-spacing: .16em;
}

/* ── Column headings ─────────────────────────────────────── */
.site-footer__col-title {
  font-family:    var(--font-ui);
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  1.1rem;
  padding-bottom: .6rem;
  border-bottom:  1px solid rgba(200,169,107,.18);
}

/* ── Quick links ─────────────────────────────────────────── */
.site-footer__nav-list {
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
}

.site-footer__nav-link {
  font-size:       .8rem;
  color:           rgba(242,235,217,.46);
  text-decoration: none;
  transition:      color var(--transition), padding-left var(--transition);
  padding-left:    0;
  display:         block;
}

.site-footer__nav-link:hover {
  color:        var(--gold);
  padding-left: .35rem;
}

/* ── Contact column ──────────────────────────────────────── */
.site-footer__address { font-style: normal; }

.site-footer__contact-row {
  display:         flex;
  align-items:     flex-start;
  gap:             .6rem;
  color:           rgba(242,235,217,.45);
  font-size:       .82rem;
  line-height:     1.58;
  margin-bottom:   .85rem;
  text-decoration: none;
}

.site-footer__contact-row:last-child { margin-bottom: 0; }

.site-footer__contact-row--link {
  transition: color var(--transition);
  cursor:     pointer;
}

.site-footer__contact-row--link:hover { color: var(--gold); }

.site-footer__contact-icon {
  min-width:  14px;
  margin-top: .2rem;
  color:      var(--gold);
  opacity:    .75;
  flex-shrink: 0;
}

/* ── Social column ───────────────────────────────────────── */
.site-footer__social-list {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}

.site-footer__social-link {
  display:         flex;
  align-items:     center;
  gap:             .7rem;
  color:           rgba(242,235,217,.45);
  font-size:       .8rem;
  text-decoration: none;
  transition:      color var(--transition);
}

.site-footer__social-link:hover { color: var(--gold); }

.site-footer__social-icon {
  width:           28px;
  height:          28px;
  border:          1px solid rgba(200,169,107,.2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background var(--transition), border-color var(--transition),
                   color var(--transition);
}

.site-footer__social-link:hover .site-footer__social-icon {
  background:   var(--gold);
  border-color: var(--gold);
  color:        var(--charcoal);
}

/* No-social fallback */
.site-footer__connect-text {
  font-size:   .8rem;
  color:       rgba(242,235,217,.38);
  line-height: 1.68;
  margin:      0 0 1.1rem;
}

.site-footer__connect-btn {
  display:         inline-block;
  font-size:       .65rem;
  font-weight:     600;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  color:           rgba(200,169,107,.65);
  border:          1px solid rgba(200,169,107,.28);
  padding:         .5rem 1.1rem;
  text-decoration: none;
  transition:      color var(--transition), border-color var(--transition),
                   background var(--transition);
}

.site-footer__connect-btn:hover {
  color:        var(--charcoal);
  background:   var(--gold);
  border-color: var(--gold);
}

/* ── Bottom bar ──────────────────────────────────────────── */
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding:    1.1rem 0;
}

.site-footer__bottom-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  flex-wrap:       wrap;
}

.site-footer__copy {
  font-size:      .64rem;
  color:          rgba(242,235,217,.26);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin:         0;
}

.site-footer__bottom-nav {
  display: flex;
  gap:     1.25rem;
}

.site-footer__bottom-link {
  font-size:       .64rem;
  color:           rgba(242,235,217,.26);
  letter-spacing:  .07em;
  text-transform:  uppercase;
  text-decoration: none;
  transition:      color var(--transition);
}

.site-footer__bottom-link:hover { color: var(--gold); }

@media (max-width: 480px) {
  .site-footer__bottom-inner {
    flex-direction: column;
    text-align:     center;
    gap:            .5rem;
  }
}

/* -----------------------------------------------------------------------------
   22. ERROR PAGES (standalone — no layout)
   ----------------------------------------------------------------------------- */
body:has(.error-page) {
  background-color: var(--ivory);
  display:          flex;
  align-items:      center;
  min-height:       100vh;
}

.error-page {
  width:   100%;
  padding: 4rem 0;
}

.error-page__inner {
  max-width:  560px;
  text-align: center;
}

.error-page__code {
  font-family:    var(--font-display);
  font-size:      clamp(5rem, 15vw, 9rem);
  font-weight:    700;
  color:          var(--gold);
  line-height:    1;
  margin-bottom:  .25rem;
  letter-spacing: -.02em;
}

.error-page__title {
  font-size:     clamp(1.5rem, 4vw, 2.4rem);
  margin-bottom: .75rem;
}

.error-page__text {
  color:         var(--text-muted);
  margin-bottom: 2rem;
  font-size:     1.05rem;
}

.error-page__debug {
  background:    #fdf2f2;
  border-left:   3px solid #b83232;
  padding:       .75rem 1rem;
  font-family:   monospace;
  font-size:     .82rem;
  color:         #7b1c1c;
  text-align:    left;
  margin-bottom: 1.5rem;
  word-break:    break-all;
}

/* -----------------------------------------------------------------------------
   23. ACCESSIBILITY & FOCUS
   ----------------------------------------------------------------------------- */
:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}

.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}

#main-content:focus { outline: 2px solid var(--gold); }

/* -----------------------------------------------------------------------------
   23b. FORM UTILITIES
   ----------------------------------------------------------------------------- */

/* Two-column form row — used on membership and similar forms */
.form__row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

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

.form__optional {
  font-size:      .72em;
  color:          var(--text-muted);
  font-weight:    400;
  letter-spacing: 0;
  text-transform: none;
  margin-left:    .2rem;
}

/* -----------------------------------------------------------------------------
   25. MEMBERSHIP PAGE — legacy panel classes (kept for CSS cache safety)
   ----------------------------------------------------------------------------- */

/* Split panel */
.membership-panel {
  display:               grid;
  grid-template-columns: 400px 1fr;
  gap:                   5rem;
  align-items:           start;
}

@media (max-width: 980px) {
  .membership-panel {
    grid-template-columns: 1fr;
    gap:                   3rem;
    max-width:             640px;
    margin:                0 auto;
  }
}

/* ── Left info column ── */
.membership-panel__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.9rem, 4vw, 2.8rem);
  color:          var(--charcoal);
  line-height:    1.12;
  margin-bottom:  .9rem;
  letter-spacing: -.015em;
}

.membership-panel__subtitle {
  font-size:     .95rem;
  color:         var(--text-muted);
  line-height:   1.75;
  margin-bottom: 2.25rem;
  max-width:     380px;
}

/* Benefits list */
.membership-benefits {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  margin-bottom:  2.25rem;
}

.membership-benefit {
  display:     flex;
  align-items: flex-start;
  gap:         .8rem;
}

.membership-benefit__icon {
  width:            20px;
  height:           20px;
  min-width:        20px;
  border-radius:    50%;
  background:       var(--gold);
  color:            var(--charcoal);
  font-size:        .6rem;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  margin-top:       .12rem;
}

.membership-benefit__text {
  font-size:   .88rem;
  color:       var(--text-muted);
  line-height: 1.58;
}

/* Quote */
.membership-panel__quote {
  border-left:   2px solid var(--gold);
  padding:       .85rem 0 .85rem 1.25rem;
  margin:        0 0 1.75rem;
  font-style:    normal;
}

.membership-panel__quote-text {
  display:        block;
  font-family:    var(--font-display);
  font-size:      1.3rem;
  font-weight:    600;
  color:          var(--charcoal);
  letter-spacing: .02em;
}

.membership-panel__quote-sub {
  display:     block;
  font-size:   .78rem;
  color:       var(--text-muted);
  margin-top:  .3rem;
  font-style:  italic;
}

.membership-panel__contact-note {
  font-size:  .82rem;
  color:      var(--text-muted);
  margin-top: .25rem;
}

.membership-panel__contact-note a {
  color:       var(--gold-dark);
  font-weight: 500;
}

.membership-panel__contact-note a:hover { text-decoration: underline; }

/* ── Right form column ── */

/* Step indicator */
.membership-steps {
  display:         flex;
  align-items:     center;
  margin-bottom:   1.75rem;
}

.membership-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .35rem;
}

.membership-step__num {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      transparent;
  color:           var(--text-muted);
  font-size:       .75rem;
  font-weight:     600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1.5px solid var(--border-mid);
  transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.membership-step--active .membership-step__num {
  background:   var(--gold);
  color:        var(--charcoal);
  border-color: var(--gold);
  box-shadow:   0 2px 10px rgba(200,169,107,.35);
}

.membership-step__label {
  font-size:      .58rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--text-muted);
  white-space:    nowrap;
}

.membership-step--active .membership-step__label {
  color: var(--gold-dark);
}

.membership-steps__line {
  flex:         1;
  height:       1px;
  background:   var(--border);
  margin-bottom: 1.45rem; /* vertically aligns with circle centres */
  margin-left:  .5rem;
  margin-right: .5rem;
}

/* Form card */
.membership-card {
  background: var(--surface);
  border:     1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding:    clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 8px 40px rgba(26,21,16,.08);
}

.membership-card__header {
  margin-bottom:  1.75rem;
  padding-bottom: 1.5rem;
  border-bottom:  1px solid var(--border);
}

.membership-card__heading {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 2.5vw, 1.75rem);
  color:          var(--charcoal);
  margin-bottom:  .3rem;
  letter-spacing: -.01em;
  line-height:    1.2;
}

.membership-card__subheading {
  font-size:   .88rem;
  color:       var(--text-muted);
  margin:      0;
  line-height: 1.55;
}

/* Submit button — full width inside card */
.membership-form__actions {
  margin-top: .25rem;
}

.membership-form__btn {
  width:       100%;
  padding-top: .9rem;
  padding-bottom: .9rem;
  font-size:   .75rem;
  letter-spacing: .16em;
  justify-content: center;
}

/* Privacy note */
.membership-card__note {
  font-size:    .74rem;
  color:        rgba(74,64,52,.52);
  text-align:   center;
  line-height:  1.6;
  margin-top:   1.25rem;
  margin-bottom: 0;
  padding-top:  1.25rem;
  border-top:   1px solid var(--border);
}

@media (max-width: 480px) {
  .membership-card { padding: 1.5rem; }
  .membership-steps { margin-bottom: 1.25rem; }
  .membership-step__num { width: 28px; height: 28px; font-size: .7rem; }
}

/* -----------------------------------------------------------------------------
   26. MEMBERSHIP PAGE — multi-section form (replaces old membership-panel CSS)
   ----------------------------------------------------------------------------- */

/* Page wrapper */
.membership-page {
  background-color: var(--ivory);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 6rem);
  min-height: calc(100vh - var(--header-h) - 1px);
}

/* Page header */
.membership-page__header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto 2.5rem;
}

.membership-page__title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5vw, 3rem);
  color:          var(--charcoal);
  line-height:    1.12;
  margin-bottom:  .75rem;
  letter-spacing: -.015em;
}

.membership-page__subtitle {
  font-size:   .95rem;
  color:       var(--text-muted);
  line-height: 1.72;
}

/* ── Section tab nav ───────────────────────────────────────────────── */
.msec-nav {
  display:         flex;
  gap:             .35rem;
  margin-bottom:   1.5rem;
  overflow-x:      auto;
  padding-bottom:  .25rem;
  scrollbar-width: none;
}

.msec-nav::-webkit-scrollbar { display: none; }

.msec-nav__btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .3rem;
  flex:           1;
  min-width:      90px;
  padding:        .7rem .5rem;
  background:     var(--surface);
  border:         1px solid var(--border);
  border-bottom:  2px solid var(--border);
  cursor:         pointer;
  transition:     border-color var(--transition), color var(--transition);
  text-align:     center;
}

.msec-nav__btn:hover {
  border-color:  var(--gold);
  border-bottom-color: var(--gold);
}

.msec-nav__btn--active {
  border-bottom:  2px solid var(--gold);
  background:     #fff;
}

.msec-nav__num {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--border);
  color:           var(--text-muted);
  font-size:       .7rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), color var(--transition);
}

.msec-nav__btn--active .msec-nav__num {
  background: var(--gold);
  color:      var(--charcoal);
}

.msec-nav__label {
  font-size:      .62rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-muted);
  line-height:    1.3;
}

.msec-nav__btn--active .msec-nav__label {
  color: var(--gold-dark);
}

/* ── Section panels ────────────────────────────────────────────────── */
.msec {
  /* All panels visible when JS not loaded (progressive enhancement).
     JS adds .msec--hidden to inactive panels. */
}

.msec--hidden {
  display: none;
}

.msec__card {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-top:  3px solid var(--gold);
  padding:     clamp(1.75rem, 4vw, 2.75rem);
  box-shadow:  0 6px 30px rgba(26,21,16,.07);
  margin-bottom: 2rem;
}

/* Section sub-label (inline divider heading) */
.msec__head {
  margin-bottom:  2rem;
  padding-bottom: 1.25rem;
  border-bottom:  1px solid var(--border);
}

.msec__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.3rem, 2.5vw, 1.65rem);
  color:          var(--charcoal);
  margin-bottom:  .3rem;
  letter-spacing: -.01em;
  line-height:    1.2;
}

.msec__desc {
  font-size:   .88rem;
  color:       var(--text-muted);
  margin:      0;
  line-height: 1.55;
}

.msec__section-label {
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color:          var(--gold-dark);
  border-bottom:  1px solid var(--border);
  padding-bottom: .5rem;
  margin:         1.75rem 0 1.25rem;
}

/* Section footer nav */
.msec__foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      2rem;
  padding-top:     1.5rem;
  border-top:      1px solid var(--border);
  gap:             1rem;
}

/* Submit button */
.membership-submit-btn {
  min-width:       200px;
  justify-content: center;
  padding-top:     .9rem;
  padding-bottom:  .9rem;
  font-size:       .75rem;
  letter-spacing:  .16em;
}

/* Privacy note */
.msec__privacy-note {
  font-size:    .74rem;
  color:        rgba(74,64,52,.5);
  text-align:   center;
  line-height:  1.65;
  margin-top:   1.25rem;
  margin-bottom: 0;
}

/* ── Photo upload ──────────────────────────────────────────────────── */
.msec__photo-group {
  margin-bottom: 2rem;
}

.msec__photo-upload {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.msec__photo-preview {
  width:           90px;
  height:          90px;
  border-radius:   50%;
  border:          2px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  flex-shrink:     0;
  background:      var(--ivory);
}

.msec__photo-preview img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.msec__photo-placeholder {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--text-muted);
  opacity: .5;
}

.msec__photo-btn {
  display: inline-block;
}

.msec__photo-hint {
  font-size:   .75rem;
  color:       var(--text-muted);
  margin-top:  .4rem;
  line-height: 1.5;
}

/* ── File upload (ID proof) ────────────────────────────────────────── */
.msec__file-upload {
  position: relative;
}

.msec__file-input {
  position: absolute;
  opacity:  0;
  width:    0.1px;
  height:   0.1px;
  overflow: hidden;
}

.msec__file-label {
  display:         flex;
  align-items:     center;
  gap:             .75rem;
  padding:         1rem 1.25rem;
  border:          1.5px dashed var(--border-mid);
  background:      var(--ivory);
  cursor:          pointer;
  transition:      border-color var(--transition), background var(--transition);
  font-size:       .88rem;
  color:           var(--text-muted);
}

.msec__file-label:hover {
  border-color: var(--gold);
  background:   rgba(200,169,107,.05);
}

.msec__file-input:focus + .msec__file-label {
  border-color: var(--gold);
  outline:      2px solid var(--gold);
  outline-offset: 2px;
}

.msec__file-icon {
  font-size: 1.4rem;
}

.msec__hint {
  font-size:  .74rem;
  color:      var(--text-muted);
  margin-top: .4rem;
}

/* ── Checkbox (community section) ──────────────────────────────────── */
.msec__check-label {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  cursor:      pointer;
  font-size:   .9rem;
  color:       var(--charcoal);
}

.msec__checkbox {
  width:        18px;
  height:       18px;
  accent-color: var(--gold-dark);
  cursor:       pointer;
  flex-shrink:  0;
}

/* ── 3-column form row ─────────────────────────────────────────────── */
.form__row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
  .form__row--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .form__row--3 { grid-template-columns: 1fr; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .msec__card { padding: 1.5rem; }
  .msec__photo-upload { flex-direction: column; align-items: flex-start; }
  .msec__foot { flex-direction: column-reverse; }
  .msec__foot .btn { width: 100%; justify-content: center; text-align: center; }
  .membership-submit-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   27. ADMIN — Membership view styles
   ════════════════════════════════════════════════════════════════════ */

/* Pending badge */
.status-badge--pending {
  background:    rgba(200,169,107,.15);
  color:         #7a6017;
  border-color:  rgba(200,169,107,.4);
}

/* Unread dot */
.admin-unread-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--gold-dark);
  vertical-align: middle;
  margin-left:   .4rem;
}

/* Member name + avatar in list */
.admin-member-name {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  font-weight: 500;
}

.admin-member-avatar {
  width:        34px;
  height:       34px;
  border-radius: 50%;
  object-fit:   cover;
  flex-shrink:  0;
}

.admin-member-avatar--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--gold);
  color:           var(--charcoal);
  font-size:       .75rem;
  font-weight:     700;
}

.admin-table__sub {
  font-size: .78rem;
  color:     var(--text-muted);
  margin-top: .15rem;
}

/* ── Member view (mview) ────────────────────────────────────────────── */
.mview__topbar {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1.5rem;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-top:      3px solid var(--gold);
  padding:         1.75rem 2rem;
  margin-bottom:   1.5rem;
  flex-wrap:       wrap;
}

.mview__topbar-info {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.mview__avatar {
  width:        64px;
  height:       64px;
  border-radius: 50%;
  object-fit:   cover;
  flex-shrink:  0;
  border:       2px solid var(--border);
}

.mview__avatar--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--gold);
  color:           var(--charcoal);
  font-size:       1.4rem;
  font-weight:     700;
  border:          none;
}

.mview__name {
  font-family:    var(--font-display);
  font-size:      1.4rem;
  color:          var(--charcoal);
  margin-bottom:  .25rem;
  letter-spacing: -.01em;
}

.mview__meta {
  font-size:  .82rem;
  color:      var(--text-muted);
  margin:     0;
  line-height: 1.6;
}

.mview__status-form {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
}

.mview__status-select {
  min-width: 140px;
  padding:   .55rem .85rem;
}

/* Notes form */
.mview__notes-form {
  background:    var(--ivory);
  border:        1px solid var(--border);
  padding:       1.5rem 2rem;
  margin-bottom: 1.5rem;
}

/* Sections */
.mview__sections {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  margin-bottom:  2rem;
}

.mview__section {
  background: var(--surface);
  border:     1px solid var(--border);
  padding:    1.5rem 2rem;
}

.mview__section-title {
  font-family:    var(--font-display);
  font-size:      1rem;
  color:          var(--charcoal);
  margin-bottom:  1rem;
  padding-bottom: .6rem;
  border-bottom:  1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size:      .78rem;
}

.mview__fields {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   .85rem 2rem;
  margin:                0;
}

.mview__field {
  display: contents;
}

.mview__label {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-muted);
  margin:         0;
}

.mview__value {
  font-size:   .9rem;
  color:       var(--charcoal);
  margin:      0;
  font-weight: 500;
}

.mview__doc-preview {
  margin-top: 1rem;
}

.mview__doc-img {
  max-width:  220px;
  max-height: 160px;
  border:     1px solid var(--border);
  object-fit: contain;
}

.mview__message {
  font-size:   .9rem;
  color:       var(--charcoal);
  line-height: 1.68;
  margin:      0;
}

.mview__delete-bar {
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .mview__topbar     { flex-direction: column; }
  .mview__section    { padding: 1.25rem; }
  .mview__notes-form { padding: 1.25rem; }
  .mview__fields     { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   24. PRINT
   ----------------------------------------------------------------------------- */
@media print {
  .site-header-wrap,
  .site-footer,
  .nav__toggle,
  .flash,
  .hero__prev,
  .hero__next { display: none !important; }

  body { color: #000; font-size: 12pt; background: #fff; }
  .container { max-width: 100%; padding: 0; }
}

/* =============================================================================
   28. FRONTEND REDESIGN
   ============================================================================= */

/* ── Enhanced interior page hero ─────────────────────────────────────────── */
.page-hero {
  padding:    clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position:   relative;
  overflow:   hidden;
}

/* Diagonal grain */
.page-hero::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 40px,
    rgba(200,169,107,.03) 40px, rgba(200,169,107,.03) 41px
  );
  pointer-events: none;
}

/* Top gold stripe */
.page-hero::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity:    .35;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero__eyebrow {
  display:        block;
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  1rem;
}

.page-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 6vw, 4rem);
  color:          var(--charcoal);
  letter-spacing: -.015em;
  line-height:    1.08;
}

.page-hero__sub {
  margin-top:  .9rem;
  font-size:   clamp(.95rem, 1.6vw, 1.1rem);
  color:       var(--text-muted);
  font-weight: 300;
  max-width:   580px;
  line-height: 1.72;
}

/* ── Visually hidden ─────────────────────────────────────────────────────── */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ── Home section header with inline link ────────────────────────────────── */
.home-section-head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             1rem;
  margin-bottom:   2.5rem;
  flex-wrap:       wrap;
}

.home-section-head .section-title { margin-bottom: 0; }

.home-section-head__link {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  text-decoration: none;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     color var(--transition);
  padding-bottom: .15rem;
  border-bottom:  1px solid rgba(159,123,63,.3);
}

.home-section-head__link:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

/* ── About preview — dual CTA ────────────────────────────────────────────── */
.about-preview__actions {
  display:     flex;
  gap:         .75rem;
  flex-wrap:   wrap;
  align-items: center;
  margin-top:  2rem;
}

/* ── Event card — image support ──────────────────────────────────────────── */
.event-card__img-wrap {
  margin:        -1.75rem -1.75rem 1.5rem;
  aspect-ratio:  16/9;
  overflow:      hidden;
  border-bottom: 2px solid var(--gold);
}

.event-card__inner { /* semantic wrapper */ }

.event-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .5s ease;
  display:    block;
}

.event-card:hover .event-card__img { transform: scale(1.05); }

/* ── Event list meta icons ───────────────────────────────────────────────── */
.event-item__meta-item {
  display:     flex;
  align-items: center;
  gap:         .35rem;
}

.event-item__meta-icon {
  width:       14px;
  height:      14px;
  min-width:   14px;
  color:       var(--gold);
  opacity:     .85;
  flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  padding:    3rem 0;
  text-align: center;
}

.empty-state__text {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  color:         var(--charcoal);
  margin-bottom: .5rem;
}

.empty-state__hint {
  font-size:   .9rem;
  color:       var(--text-muted);
  margin:      0;
  line-height: 1.65;
}

/* ── Heritage list item count ────────────────────────────────────────────── */
.heritage-list__count {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  1.75rem;
}

/* ── Heritage breadcrumb bar ─────────────────────────────────────────────── */
.heritage-breadcrumb {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  padding:       .75rem 0;
}

.heritage-breadcrumb__inner {
  display:     flex;
  align-items: center;
  gap:         .45rem;
  font-size:   .7rem;
  color:       var(--text-muted);
  flex-wrap:   wrap;
}

.heritage-breadcrumb__link {
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--transition);
}
.heritage-breadcrumb__link:hover { color: var(--gold); }

.heritage-breadcrumb__sep { opacity: .4; }

.heritage-breadcrumb__current {
  color:       var(--charcoal);
  font-weight: 500;
}

/* ── Heritage callout (historical note — dark bg) ────────────────────────── */
.heritage-callout {
  background:  var(--charcoal-mid);
  position:    relative;
}

.heritage-callout::before {
  content:    '';
  display:    block;
  height:     2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity:    .35;
}

.heritage-callout__inner {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.heritage-callout__label {
  display:        block;
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  1rem;
}

.heritage-callout__text {
  font-family:   var(--font-display);
  font-size:     clamp(1.1rem, 2.2vw, 1.45rem);
  color:         rgba(242,235,217,.72);
  line-height:   1.72;
  max-width:     720px;
  font-style:    italic;
  margin:        0;
  border:        none;
  padding:       0;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.back-link {
  display:         inline-flex;
  align-items:     center;
  gap:             .45rem;
  font-size:       .68rem;
  font-weight:     600;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--transition), gap var(--transition);
}
.back-link::before { content: '←'; }
.back-link:hover { color: var(--gold-dark); gap: .65rem; }

/* ── About page cover image ──────────────────────────────────────────────── */
.about-cover {
  background: var(--surface);
}

.about-cover__wrap {
  max-height:    540px;
  overflow:      hidden;
  border:        1px solid var(--border);
  border-top:    none;
}

.about-cover__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── About documents section ─────────────────────────────────────────────── */
.about-docs__head {
  margin-bottom: 2rem;
}

.about-docs__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, 2rem);
  color:          var(--charcoal);
  margin-bottom:  .5rem;
  letter-spacing: -.01em;
}

.about-docs__sub {
  font-size:   .9rem;
  color:       var(--text-muted);
  margin:      0;
  line-height: 1.65;
}

.about-docs__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

@media (max-width: 580px) {
  .about-docs__grid { grid-template-columns: 1fr; }
}

.about-doc-card {
  display:         flex;
  align-items:     center;
  gap:             1.25rem;
  padding:         1.5rem;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-left:     3px solid var(--gold);
  text-decoration: none;
  color:           inherit;
  transition:      box-shadow var(--transition), border-left-color var(--transition),
                   transform var(--transition);
  box-shadow:      var(--shadow);
}

.about-doc-card:hover {
  box-shadow:       var(--shadow-md);
  border-left-color: var(--gold-dark);
  transform:        translateY(-2px);
}

.about-doc-card__icon {
  width:     44px;
  height:    44px;
  min-width: 44px;
  border:    1px solid var(--border-mid);
  display:   flex;
  align-items: center;
  justify-content: center;
  color:     var(--gold-dark);
  flex-shrink: 0;
}

.about-doc-card__body { flex: 1; }

.about-doc-card__tag {
  display:        block;
  font-size:      .58rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  margin-bottom:  .25rem;
}

.about-doc-card__title {
  font-family:    var(--font-display);
  font-size:      1.05rem;
  color:          var(--charcoal);
  margin-bottom:  .25rem;
  letter-spacing: -.01em;
  line-height:    1.2;
}

.about-doc-card__desc {
  font-size:   .8rem;
  color:       var(--text-muted);
  margin:      0;
  line-height: 1.5;
}

.about-doc-card__dl {
  font-size:  1rem;
  color:      var(--gold);
  flex-shrink: 0;
  opacity:    .7;
  transition: opacity var(--transition);
}

.about-doc-card:hover .about-doc-card__dl { opacity: 1; }

/* ── About page CTA ──────────────────────────────────────────────────────── */
.about-cta {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   2rem 4rem;
  align-items:           center;
}

@media (max-width: 680px) {
  .about-cta { grid-template-columns: 1fr; gap: 2rem; }
}

.about-cta__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.6rem, 3.5vw, 2.4rem);
  color:          var(--text-on-dark);
  margin-bottom:  .6rem;
  letter-spacing: -.01em;
}

.about-cta__sub {
  font-size:   .92rem;
  color:       rgba(242,235,217,.62);
  line-height: 1.7;
  margin:      0;
}

.about-cta__actions {
  display:    flex;
  gap:        .75rem;
  flex-wrap:  wrap;
  flex-shrink: 0;
}

/* ── Donate method cards ─────────────────────────────────────────────────── */
.donate-methods {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
  margin-top:            2.25rem;
}

@media (max-width: 620px) {
  .donate-methods { grid-template-columns: 1fr; }
}

.donate-method-card {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-top:  3px solid var(--gold);
  padding:     2rem;
  box-shadow:  var(--shadow);
}

.donate-method-card__icon {
  width:        40px;
  height:       40px;
  border:       1px solid var(--border-mid);
  display:      flex;
  align-items:  center;
  justify-content: center;
  margin-bottom: 1.1rem;
  color:        var(--gold-dark);
}

.donate-method-card__title {
  font-family:    var(--font-display);
  font-size:      1.3rem;
  color:          var(--charcoal);
  margin-bottom:  1rem;
  padding-bottom: .75rem;
  border-bottom:  1px solid var(--border);
  letter-spacing: -.01em;
}

.donate-method-card__row {
  margin-bottom: .75rem;
}
.donate-method-card__row:last-child { margin-bottom: 0; }

.donate-method-card__label {
  display:        block;
  font-size:      .6rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  margin-bottom:  .2rem;
}

.donate-method-card__value {
  font-size:   .92rem;
  color:       var(--charcoal);
  font-weight: 500;
}

.donate-method-card__qr {
  max-width: 140px;
  border:    1px solid var(--border);
  margin-top: .75rem;
}

.donate-note {
  margin-top:  1.75rem;
  font-size:   .82rem;
  color:       var(--text-muted);
  font-style:  italic;
  line-height: 1.65;
}

/* ── Donate form card ────────────────────────────────────────────────────── */
.donate-form-card {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-top:  3px solid var(--gold);
  padding:     clamp(1.75rem, 4vw, 2.75rem);
  box-shadow:  var(--shadow-md);
}

.donate-form-card__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, 2rem);
  color:          var(--charcoal);
  margin-bottom:  .4rem;
  letter-spacing: -.01em;
}

.donate-form-card__sub {
  font-size:     .88rem;
  color:         var(--text-muted);
  margin-bottom: 1.75rem;
  line-height:   1.6;
  padding-bottom: 1.5rem;
  border-bottom:  1px solid var(--border);
}

/* ── Contact info card ───────────────────────────────────────────────────── */
.contact-info-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-top:    3px solid var(--gold);
  padding:       2rem;
  box-shadow:    var(--shadow);
  margin-bottom: 1.5rem;
}

.contact-info-card__title {
  font-family:    var(--font-display);
  font-size:      1.5rem;
  color:          var(--charcoal);
  margin-bottom:  1.5rem;
  padding-bottom: 1rem;
  border-bottom:  1px solid var(--border);
  letter-spacing: -.01em;
}

.contact-detail-item {
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  padding:       1rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-detail-item:last-child { border-bottom: none; }

.contact-detail-icon {
  width:        38px;
  height:       38px;
  min-width:    38px;
  background:   rgba(200,169,107,.07);
  border:       1px solid rgba(200,169,107,.2);
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
  color:        var(--gold-dark);
  margin-top:   .05rem;
}

.contact-detail-body { flex: 1; }

.contact-detail-label {
  display:        block;
  font-size:      .6rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gold-dark);
  margin-bottom:  .22rem;
}

.contact-detail-value {
  font-size:   .92rem;
  color:       var(--charcoal);
  line-height: 1.55;
  font-style:  normal;
}

.contact-detail-value a {
  color:           var(--charcoal);
  text-decoration: none;
  transition:      color var(--transition);
}
.contact-detail-value a:hover { color: var(--gold-dark); }

/* ── Contact form card ───────────────────────────────────────────────────── */
.contact-form-card {
  background: var(--surface);
  border:     1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding:    clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-md);
}

.contact-form-card__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, 2rem);
  color:          var(--charcoal);
  margin-bottom:  1.75rem;
  padding-bottom: 1.25rem;
  border-bottom:  1px solid var(--border);
  letter-spacing: -.01em;
}

/* ── CTA section vertical divider ───────────────────────────────────────── */
.cta-section__divider {
  display: none;
}

@media (min-width: 680px) {
  .cta-section__divider {
    display:    block;
    width:      1px;
    background: rgba(200,169,107,.18);
    align-self: stretch;
    min-height: 100px;
  }
}

/* ── About prose extra spacing ───────────────────────────────────────────── */
.about-prose p:first-child {
  font-size:   1.08rem;
  line-height: 1.82;
}

/* ── CTA section — 3-col grid (donate | divider | contact) ──────────────── */
@media (min-width: 680px) {
  .cta-section__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
  }
  .cta-section__donate {
    padding-right: 0;
    border-right:  none;
  }
}

/* ── Contact section grid alignment ─────────────────────────────────────── */
.contact__inner {
  display:               grid;
  grid-template-columns: 1fr 1.5fr;
  gap:                   3rem;
  align-items:           start;
}

@media (max-width: 768px) {
  .contact__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Gallery grid improvement ────────────────────────────────────────────── */
.gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   1.25rem;
  margin-top:            2rem;
}

.gallery__img {
  aspect-ratio: 4/3;
  transition: transform .4s ease, opacity .2s ease;
}

.gallery__link:hover .gallery__img {
  transform: scale(1.04);
  opacity:   .92;
}

/* ── Heritage hero improvement ───────────────────────────────────────────── */
.heritage-hero__img-wrap {
  border:       1px solid var(--border);
  overflow:     hidden;
  aspect-ratio: 4/3;
  box-shadow:   var(--shadow-md);
}

.heritage-hero__img {
  transition: transform .6s ease;
}

.heritage-hero__img-wrap:hover .heritage-hero__img { transform: scale(1.03); }

/* =============================================================================
   MEMBER PORTAL — Mobile-first entry, status, family
   ============================================================================= */

/* member gate */
.member-gate { max-width: 480px; margin: 0 auto 3rem; }
.member-gate__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2.5rem 2rem; text-align: center; box-shadow: var(--shadow); }
.member-gate__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--ivory-dark); border: 1px solid var(--border); border-radius: 50%; margin: 0 auto 1.25rem; color: var(--gold); }
.member-gate__heading { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--charcoal); margin-bottom: .5rem; }
.member-gate__sub { color: var(--text-muted); font-size: .9rem; line-height: 1.65; margin-bottom: 1.75rem; }
.member-gate__form { text-align: left; }
.member-gate__phone-wrap { display: flex; align-items: stretch; border: 1px solid var(--border-mid); border-radius: var(--radius); overflow: hidden; }
.member-gate__phone-prefix { display: flex; align-items: center; padding: 0 .85rem; background: var(--ivory-dark); font-size: .88rem; color: var(--text-muted); border-right: 1px solid var(--border-mid); white-space: nowrap; user-select: none; }
.member-gate__phone-input { border: none !important; border-radius: 0 !important; flex: 1; }
.member-gate__phone-input:focus { outline: none; box-shadow: none; }
.member-gate__phone-wrap:focus-within { outline: 2px solid var(--gold); outline-offset: 0; }
.member-gate__submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.btn--full { width: 100%; }
.member-gate__note { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; text-align: center; justify-content: center; font-size: .8rem; color: var(--text-muted); }

/* member portal status page */
.member-portal { padding: 3rem 0 4rem; }
.member-portal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.member-portal__welcome { display: flex; align-items: center; gap: 1rem; }
.member-portal__avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-mid); }
.member-portal__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--charcoal); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.member-portal__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin-bottom: .1rem; }
.member-portal__phone { display: flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--text-muted); }

.member-portal__status-card { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-mid); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 2rem; box-shadow: var(--shadow); }
.member-portal__status-card--approved { border-left-color: #4caf50; }
.member-portal__status-card--pending  { border-left-color: var(--gold); }
.member-portal__status-card--rejected { border-left-color: #e53935; }
.member-portal__status-icon { font-size: 1.5rem; line-height: 1; margin-top: .1rem; flex-shrink: 0; }
.member-portal__status-heading { font-family: var(--font-display); font-size: 1.3rem; margin: .5rem 0 .5rem; }
.member-portal__status-text { font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: .4rem; }

.member-portal__section { margin-bottom: 2rem; }
.member-portal__section-title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.member-portal__family-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.member-portal__family-item { display: flex; align-items: center; gap: .75rem; background: var(--ivory-dark); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem 1rem; }
.member-portal__family-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--charcoal); flex-shrink: 0; }
.member-portal__family-info { display: flex; flex-direction: column; gap: .1rem; }
.member-portal__family-rel { font-size: .78rem; color: var(--text-muted); }
.member-portal__family-contact { font-size: .8rem; color: var(--text-muted); }
.member-portal__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.member-portal__actions .btn { display: flex; align-items: center; gap: .4rem; }
.member-portal__meta { font-size: .8rem; color: var(--text-muted); }

/* family member repeater */
.family-list { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1rem; }
.family-member-row { background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; }
.family-member-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.btn-remove { font-size: .8rem; color: #c0392b; cursor: pointer; border: 1px solid #c0392b; border-radius: var(--radius); padding: .2rem .6rem; background: transparent; transition: var(--transition); }
.btn-remove:hover { background: #c0392b; color: #fff; }
.family-list__actions { padding-top: .5rem; }

/* donate gate */
.donate-gate { text-align: center; padding: 1.5rem 0; }
.donate-gate__icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--ivory-dark); border: 1px solid var(--border); border-radius: 50%; margin: 0 auto 1.25rem; color: var(--gold); }
.donate-gate__heading { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin-bottom: .75rem; }
.donate-gate__text { color: var(--text-muted); max-width: 480px; margin: 0 auto .75rem; line-height: 1.7; font-size: .93rem; }
.donate-gate__text--note { font-style: italic; }
.donate-gate .btn { margin-top: 1.25rem; }
.donate-gate__already { margin-top: .75rem; font-size: .85rem; color: var(--text-muted); }
.donate-gate__already a { color: var(--gold-dark); text-decoration: underline; }

/* readonly input */
.form__input--readonly { background: var(--ivory-dark); color: var(--text-muted); cursor: not-allowed; }