/* =========================================================
   KOSA '07 — Karshi Old Students Association 2007 Set
   Premium alumni website — design system
   ========================================================= */

:root {
  /* KOSA '07 — Brand palette */
  --navy: #0B1F8A;          /* Primary Royal Blue */
  --navy-deep: #07145C;     /* Deep Association Blue */
  --navy-soft: #1230AD;     /* lighter royal accent */
  --gold: #D4A017;          /* Bright Heritage Gold */
  --gold-light: #F2C94C;    /* Soft Gold Accent */
  --gold-deep: #A57E0E;     /* darker gold for text contrast */
  --cream: #F5F7FA;         /* Light Background Gray */
  --cream-soft: #ECEFF4;    /* slightly darker gray */
  --white: #FFFFFF;
  --red: #B11226;           /* Ribbon Red */
  --red-deep: #7E0C18;
  --ink: #1C1C1C;           /* Dark Text */
  --muted: #5F6675;         /* Muted Text */
  --line: rgba(11, 31, 138, 0.10);
  --shadow-sm: 0 2px 12px rgba(11, 31, 138, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 31, 138, 0.10);
  --shadow-lg: 0 24px 60px rgba(7, 20, 92, 0.18);
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1200px;
  --display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --ui: 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  /* Defensive: keep the page from ever scrolling horizontally on mobile if a
     single wide element (image, iframe, long unbreakable string) leaks past
     the viewport. `overflow-x: clip` avoids the vertical-scroll side-effect
     that `overflow-x: hidden` would cause when combined with `position: sticky`
     on .navbar. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1em; color: var(--ink); }

/* Display type — heritage Roman caps for the biggest moments */
.hero__title,
.page-header h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.hero__title em,
.page-header h1 em {
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--cream { background: var(--cream); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--red);
}
.section--navy .eyebrow { color: var(--gold-light); }
.section--navy .eyebrow::before { background: var(--gold-light); }

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 640px;
}
.section--navy .lead { color: rgba(250, 246, 236, 0.78); }

/* Buttons — Royal Blue primary, Ribbon Red secondary, Gold for featured highlights */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
  border: 1.5px solid transparent;
  cursor: pointer;
}
/* Primary — royal blue */
.btn--navy { background: var(--navy); color: var(--white); box-shadow: 0 4px 14px rgba(11,31,138,.25); }
.btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,31,138,.35); }
/* Secondary — ribbon red */
.btn--red { background: var(--red); color: var(--white); box-shadow: 0 4px 14px rgba(177,18,38,.25); }
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(177,18,38,.35); }
/* Featured highlight — gold */
.btn--gold { background: var(--gold); color: var(--navy); box-shadow: 0 4px 14px rgba(212,160,23,.3); }
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(212,160,23,.4); }
/* Outline — royal blue border */
.btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
/* Ghost — for dark backgrounds */
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--white); color: var(--white); }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.navbar.is-scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(10,31,68,.05);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(201,162,39,.15), var(--shadow-sm);
  transition: transform .25s var(--ease);
}
.brand__logo img, .brand__logo svg { width: 100%; height: 100%; display: block; }
.brand:hover .brand__logo { transform: rotate(-4deg) scale(1.04); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--ui);
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 4px;
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  padding: 10px 14px;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy);
  border-radius: 8px;
  position: relative;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--red); }
.nav-links a.active { color: var(--navy); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 10px 18px; font-size: .85rem; }

/* Dropdown */
.nav-links li.has-drop { position: relative; }
.nav-links li.has-drop > a::after {
  content: "▾";
  font-size: .65rem;
  margin-left: 4px;
  color: var(--muted);
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  list-style: none;
  margin: 6px 0 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .2s var(--ease);
}
.nav-links li.has-drop:hover .dropdown,
.nav-links li.has-drop:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 12px;
  font-size: .9rem;
  border-radius: 8px;
}
.dropdown a:hover { background: var(--cream); color: var(--navy); }
.dropdown a.active { background: var(--cream); color: var(--gold-deep); font-weight: 600; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover { background: var(--cream); border-color: var(--line); }
.nav-toggle__bars {
  display: block;
  width: 22px; height: 2px;
  background: var(--navy);
  position: relative;
  transition: background .18s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0;
  width: 22px; height: 2px;
  background: var(--navy);
  transition: transform .22s var(--ease), top .22s var(--ease);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top:  7px; }
/* Burger → X when the menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% 0%, rgba(242,201,76,.12), transparent 65%),
    radial-gradient(900px 600px at 0% 100%, rgba(177,18,38,.18), transparent 60%),
    linear-gradient(170deg, var(--navy-deep) 0%, var(--navy) 60%, #0A1B7D 100%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
/* School photo overlay — drop assets/school.jpg to activate */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../assets/school.jpg'), url('../assets/pattern.svg');
  background-size: cover, 200px;
  background-position: center, center;
  background-blend-mode: luminosity, normal;
  opacity: .18;
  mix-blend-mode: screen;
  z-index: -1;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,22,58,.3) 0%, rgba(6,22,58,.6) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  padding: 120px 24px 130px;
  max-width: var(--container);
  margin: 0 auto;
}
.hero__title {
  color: var(--white);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  margin-bottom: 24px;
}
.hero__title em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 500;
}
.hero__sub {
  font-size: 1.15rem;
  color: rgba(250,246,236,.82);
  max-width: 540px;
  margin-bottom: 36px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__crest {
  display: grid; place-items: center;
  position: relative;
}
.hero__crest::before {
  content: "";
  position: absolute;
  width: 110%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(201,162,39,.3);
  animation: slow-spin 60s linear infinite;
}
.hero__crest::after {
  content: "";
  position: absolute;
  width: 130%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.12);
  animation: slow-spin 90s linear infinite reverse;
}
@keyframes slow-spin { to { transform: rotate(360deg); } }

.hero__logo {
  width: min(380px, 80vw);
  height: auto;
  position: relative;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
  animation: rise 1.2s var(--ease) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero__strip {
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(201,162,39,.18);
}
.hero__strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 24px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.stat__num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold-light);
  font-weight: 600;
}
.stat__label {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250,246,236,.7);
}

/* =========================================================
   ABOUT PREVIEW
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-art {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  background-image:
    linear-gradient(135deg, rgba(10,31,68,.55), rgba(10,31,68,.15)),
    url('../assets/school.jpg'),
    url('../assets/pattern.svg');
  background-size: cover, cover, 200px;
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, multiply;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.about-art__caption {
  position: absolute;
  bottom: 20px; left: 22px; right: 22px;
  color: var(--cream);
  font-family: var(--serif);
}
.about-art__caption-eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 6px;
  display: block;
}
.about-art__caption h3 { color: var(--white); font-size: 1.4rem; margin: 0; }
/* Prior versions rendered a decorative "EST. 2007" pseudo-element at the same
   bottom-left corner as .about-art__caption, physically overlapping the caption
   text on every viewport. The .about-art__seal in the top-right already
   carries that identity, so the pseudo has been removed. */
.about-art__seal {
  position: absolute; top: 22px; right: 22px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  border: 2px solid var(--gold);
}

/* =========================================================
   FEATURES GRID
   ========================================================= */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(201,162,39,.4);
}
.feature__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.feature h3 { margin-bottom: 8px; font-size: 1.2rem; }
.feature p { color: var(--muted); margin: 0; font-size: .95rem; }
.feature__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--gold-deep);
}
.feature__link:hover { color: var(--navy); }

/* =========================================================
   EVENTS / CARDS
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  position: relative;
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.6rem;
}
.card__media--cream { background: linear-gradient(135deg, var(--cream-soft), var(--cream)); color: var(--navy); }
.card__media--gold  { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); }
.card__date {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255,255,255,.95);
  color: var(--navy);
  font-family: var(--serif);
  text-align: center;
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.card__date span { display: block; font-size: 1.4rem; font-weight: 700; }
.card__date small { font-size: .65rem; letter-spacing: .18em; color: var(--gold-deep); text-transform: uppercase; }
.card__body { padding: 22px 24px 26px; }
.card__tag {
  display: inline-block;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
  margin-bottom: 8px;
}
.card__title { font-size: 1.2rem; margin-bottom: 8px; }
.card__meta { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.card__link { font-weight: 600; color: var(--navy); font-size: .9rem; }
.card__link:hover { color: var(--gold-deep); }

/* =========================================================
   BIRTHDAYS
   ========================================================= */
.birthdays {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bday {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  transition: transform .2s var(--ease);
}
.bday:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.bday__avatar {
  width: 78px; height: 78px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 700;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold);
}
.bday__name { font-family: var(--serif); color: var(--navy); font-size: 1.05rem; font-weight: 600; }
.bday__date { font-size: .8rem; color: var(--gold-deep); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }

/* =========================================================
   DONATE BANNER
   ========================================================= */
.banner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  background:
    radial-gradient(800px 400px at 90% -20%, rgba(201,162,39,.25), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.2);
}
.banner::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px dashed rgba(201,162,39,.3);
}
.banner h2 { color: var(--white); margin-bottom: 14px; }
.banner p { color: rgba(250,246,236,.8); margin-bottom: 24px; }
.banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.banner__amount {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,162,39,.3);
  border-radius: var(--radius);
  padding: 24px;
}
.banner__amount h4 { color: var(--gold-light); font-family: var(--sans); letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; margin-bottom: 14px; }
.amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.amounts button {
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.25);
  font-weight: 600;
  font-size: .85rem;
}
.amounts button:hover, .amounts button.is-active { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* =========================================================
   BLOG
   ========================================================= */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post__media { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--cream-soft), #e6dcc1); position: relative; }
.post__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(201,162,39,.4), transparent 60%);
}
.post__body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
.post__meta { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.post__title { font-size: 1.15rem; margin-bottom: 10px; }
.post__excerpt { color: var(--muted); font-size: .92rem; flex: 1; }
.post__link { margin-top: 14px; font-weight: 600; color: var(--navy); font-size: .9rem; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input {
  flex: 1; min-width: 220px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: .95rem;
  background: var(--white);
  outline: none;
  transition: border-color .2s;
}
.newsletter input:focus { border-color: var(--gold); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.72);
  padding: 80px 0 30px;
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--navy) 0%, var(--navy) 33%,
    var(--red) 33%, var(--red) 66%,
    var(--gold) 66%, var(--gold) 100%);
}
.footer h4 {
  font-family: var(--ui);
  color: var(--gold-light);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 700;
}
.footer a:hover { color: var(--gold-light); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.footer h4 {
  font-family: var(--sans);
  color: var(--gold-light);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 700;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a { font-size: .92rem; }
.footer a:hover { color: var(--gold-light); }
.footer .brand__name { color: var(--white); }
.footer .brand__sub  { color: var(--gold-light); }

.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9rem;
  color: var(--cream);
}
.socials a:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-size: .82rem;
  flex-wrap: wrap;
}

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-header {
  background:
    radial-gradient(800px 300px at 80% 0%, rgba(201,162,39,.15), transparent 60%),
    linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: var(--cream);
  padding: 90px 0 80px;
  text-align: center;
}
.page-header h1 { color: var(--white); margin-bottom: 12px; }
.page-header .lead { margin: 0 auto; color: rgba(250,246,236,.8); }
.page-header .breadcrumb {
  display: inline-flex; gap: 8px; font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 14px;
}

/* Marketing popup */
.popup {
  position: fixed; inset: 0;
  background: rgba(6,22,58,.65);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.popup.is-open { display: flex; }
.popup__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 460px; width: 100%;
  padding: 36px;
  position: relative;
  text-align: center;
  border: 1px solid rgba(201,162,39,.4);
  box-shadow: var(--shadow-lg);
}
.popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cream);
  font-size: 1rem; color: var(--navy);
}
.popup__seal {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--navy); color: var(--gold);
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border: 2px solid var(--gold);
  font-family: var(--serif); font-size: 1.2rem;
}
.popup h3 { margin-bottom: 8px; }
.popup p { color: var(--muted); margin-bottom: 20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 50px; padding: 90px 24px 90px; text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .features, .cards, .posts { grid-template-columns: repeat(2, 1fr); }
  .birthdays { grid-template-columns: repeat(3, 1fr); }
  .banner { grid-template-columns: 1fr; padding: 48px 36px; }
  .newsletter { grid-template-columns: 1fr; padding: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* --- Nav collapse breakpoint (matches admin drawer at 900px) --- */
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn--text { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-inner { height: 64px; padding: 0 16px; gap: 8px; }
  .nav-cta { gap: 6px; }
  /* Everything in the header row must stay on one line */
  .nav-cta__signin,
  .nav-cta .btn { white-space: nowrap; }
  .nav-cta .btn { padding: 8px 14px; font-size: .8rem; }
  .brand { gap: 10px; min-width: 0; }
  .brand__logo { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(201,162,39,.15), var(--shadow-sm); }
  .brand__name { font-size: .95rem; letter-spacing: .06em; white-space: nowrap; }
  .brand__sub  { font-size: .55rem; letter-spacing: .2em; margin-top: 3px; }
}

@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .features, .cards, .posts { grid-template-columns: 1fr; }
  .birthdays { grid-template-columns: repeat(2, 1fr); }
  .hero__strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .banner { padding: 36px 24px; }
  .newsletter { padding: 28px; }
  h1 { font-size: 2.1rem; }
  /* Tighten the hero on phones — the sticky navbar already claims 64px */
  .hero__inner { padding: 40px 20px 56px; gap: 32px; }
  .hero__logo { width: min(220px, 60vw); }
}

/* Small-phone header: hide the secondary brand line, keep everything on one row */
@media (max-width: 430px) {
  .brand__sub { display: none; }
  .brand__name { font-size: .85rem; }
  .nav-cta__signin { font-size: .78rem; }
  .nav-cta .btn { padding: 7px 12px; font-size: .75rem; }
}
@media (max-width: 360px) {
  /* At the smallest phones, keep Donate + burger only; hide the plain Sign-in link
     (the same action lives in the drawer's CTA area, so nothing is lost) */
  .nav-cta__signin { display: none; }
  .nav-inner { padding: 0 12px; }
}

/* =========================================================
   MOBILE DRAWER — full-width panel + scrim
   ========================================================= */
.mobile-menu-scrim {
  position: fixed; inset: 0;
  background: rgba(6, 22, 58, .55);
  z-index: 190;                    /* above wa-float (90), below menu */
  opacity: 0;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}
.mobile-menu-scrim.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: 64px;                        /* directly under the mobile header */
  left: 0; right: 0;
  max-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 40px rgba(6, 22, 58, .22);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 200;                     /* above scrim + everything else */
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));

  /* Closed state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .28s var(--ease),
              transform .28s var(--ease),
              visibility 0s linear .28s;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s var(--ease),
              transform .3s var(--ease),
              visibility 0s linear 0s;
}
.mobile-menu[hidden] {                 /* keep it in the a11y tree once JS reveals it */
  display: none;
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu__link,
.mobile-menu__group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;                /* ≥ 44 for touch */
  padding: 10px 14px;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mobile-menu__link:hover,
.mobile-menu__group-btn:hover { background: var(--cream); }
.mobile-menu__link.is-active,
.mobile-menu__group-btn.is-active { color: var(--red); }
.mobile-menu__link + .mobile-menu__group,
.mobile-menu__group + .mobile-menu__group,
.mobile-menu__group + .mobile-menu__link {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 2px;
}
.mobile-menu__chev {
  display: inline-block;
  font-size: .8rem;
  color: var(--muted);
  transition: transform .22s var(--ease);
}
.mobile-menu__group.is-open .mobile-menu__chev,
.mobile-menu__group-btn[aria-expanded="true"] .mobile-menu__chev {
  transform: rotate(180deg);
  color: var(--red);
}
.mobile-menu__sub {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px 12px;
  border-left: 2px solid var(--gold);
  margin-left: 14px;
  /* Smooth expand: JS toggles [hidden]; when visible we fade the panel */
  animation: mmSubFade .22s var(--ease);
}
@keyframes mmSubFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu__sublink {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--navy);
  border-radius: 8px;
}
.mobile-menu__sublink:hover { background: var(--cream); }
.mobile-menu__sublink.is-active { color: var(--red); background: var(--cream); font-weight: 600; }
.mobile-menu__cta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.mobile-menu__cta-btn { width: 100%; }
.mobile-menu__signout {
  text-align: center;
  padding: 12px;
  color: var(--red);
  font-weight: 600;
  font-size: .9rem;
}

/* Body-scroll lock — JS adds this class */
body.mobile-menu-open { overflow: hidden; touch-action: none; }

/* Users who prefer reduced motion get instant transitions */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu-scrim, .mobile-menu__chev,
  .mobile-menu__sub, .nav-toggle__bars,
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   PHASE 1 — extras
   ========================================================= */

/* Chips / filter pills */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 600;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.chip.is-active { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }

/* Gallery */
.gallery-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}
.gallery__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer;
  grid-column: span 3;
  grid-row: span 1;
  display: flex; flex-direction: column;
}
.gallery__item--tall  { grid-row: span 2; }
.gallery__item--wide  { grid-column: span 6; }
.gallery__item--feature { grid-column: span 6; grid-row: span 2; }
.gallery__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery__item:hover .gallery__img { transform: scale(1.04); }
.gallery__img {
  flex: 1;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  transition: transform .8s var(--ease);
  background-size: cover; background-position: center;
}
.gallery__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,22,58,.5));
}
.gallery__seal {
  font-family: var(--serif);
  color: rgba(255,255,255,.85);
  font-size: 1.2rem;
  letter-spacing: .15em;
  position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.4);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.gallery__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,22,58,.85));
}
.gallery__item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 18px 18px;
  z-index: 2;
  color: var(--white);
  pointer-events: none;
}
.gallery__item figcaption strong { font-family: var(--serif); font-size: 1.05rem; color: var(--white); display: block; }
.gallery__item figcaption small {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 4px;
  display: block;
  font-weight: 600;
}
.gallery__item { position: relative; }

@media (max-width: 1024px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; }
  .gallery__item--feature { grid-column: span 6; grid-row: span 2; }
  .gallery__item--wide { grid-column: span 6; }
}
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery__item, .gallery__item--wide, .gallery__item--feature { grid-column: span 2; grid-row: span 1; }
  .gallery__item--tall, .gallery__item--feature { grid-row: span 2; }
}

/* Featured event */
.featured-event {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.featured-event__media {
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,162,39,.3), transparent 60%),
    linear-gradient(135deg, var(--navy), var(--navy-deep));
  display: grid; place-items: center;
  min-height: 420px;
}
.featured-event__date {
  position: absolute;
  top: 24px; left: 24px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--serif);
  text-align: center;
  border-radius: 12px;
  padding: 14px 20px;
  line-height: 1;
  box-shadow: var(--shadow-md);
}
.featured-event__date span { display: block; font-size: 2.4rem; font-weight: 700; }
.featured-event__date small { font-size: .7rem; letter-spacing: .2em; color: var(--gold-deep); }
.featured-event__seal {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 3.4rem;
  letter-spacing: .1em;
  border: 2px solid var(--gold);
  border-radius: 50%;
  width: 200px; height: 200px;
  display: grid; place-items: center;
}
.featured-event__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.event-meta { list-style: none; padding: 0; margin: 0 0 24px; }
.event-meta li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.event-meta li:last-child { border-bottom: 0; }
.event-meta strong { color: var(--gold-deep); margin-right: 8px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

/* Progress bar */
.progress {
  height: 8px;
  background: var(--cream-soft);
  border-radius: 99px;
  overflow: hidden;
  margin: 12px 0 8px;
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 99px;
}

/* Donate form */
.donate-form {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,162,39,.3);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--cream);
}
.donate-form h4 { color: var(--gold-light); font-family: var(--sans); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; margin: 0 0 18px; }
.donate-form label {
  display: block;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 16px 0 8px;
  font-weight: 600;
}
.donate-form input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  font-family: inherit; font-size: .95rem;
  outline: none;
  transition: border-color .2s;
}
.donate-form input::placeholder { color: rgba(250,246,236,.4); }
.donate-form input:focus { border-color: var(--gold); }

/* Impact */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.impact {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  border-top: 4px solid var(--gold);
  transition: transform .25s var(--ease);
}
.impact:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.impact__amount {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.impact__what { color: var(--muted); font-size: .9rem; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; }
.contact-list li {
  display: flex; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-list li > div { display: flex; flex-direction: column; }
.contact-list strong {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 4px;
  font-weight: 700;
}
.contact-list a { color: var(--navy); font-weight: 500; }
.contact-list a:hover { color: var(--gold-deep); }

.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.contact-form h3 { margin: 0 0 24px; }
.contact-form label {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 14px 0 6px;
  font-weight: 700;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.15);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { width: 100%; margin-top: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 24px;
  margin-bottom: 12px;
  transition: border-color .2s;
}
.faq__item[open] { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.faq__item summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--gold-deep);
  transition: transform .2s;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p { color: var(--muted); margin: 0 0 18px; }

/* Responsive overrides for Phase 1 sections */
@media (max-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .featured-event { grid-template-columns: 1fr; }
  .featured-event__media { min-height: 280px; }
  .featured-event__body { padding: 36px; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px; }
  .featured-event__body { padding: 28px; }
  .featured-event__seal { width: 140px; height: 140px; font-size: 2.2rem; }
}

/* =========================================================
   PHASE 2 — premium refinements
   ========================================================= */

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed { transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__logo, .hero__crest::before, .hero__crest::after { animation: none; }
}

/* Page loader */
.page-loader {
  position: fixed; inset: 0;
  background: var(--navy-deep);
  display: grid; place-items: center;
  z-index: 1000;
  transition: opacity .6s var(--ease), visibility .6s;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__logo {
  width: 120px; height: 120px;
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(.92); opacity: .7; }
}

/* Image card placeholder (works with or without real image) */
.img-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  isolation: isolate;
}
.img-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,31,68,.4), rgba(201,162,39,.3));
  z-index: 0;
}
.img-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,22,58,.75) 100%);
  z-index: 1;
}
.img-card__content { position: relative; z-index: 2; }

/* =========================================================
   ALUMNI BUSINESSES
   ========================================================= */
.biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.biz {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.biz::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.biz:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(201,162,39,.4); }
.biz:hover::before { transform: scaleX(1); }
.biz__monogram {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-weight: 700; font-size: 1.05rem;
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.biz__name { font-family: var(--serif); color: var(--navy); font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.biz__owner { font-size: .8rem; color: var(--gold-deep); letter-spacing: .15em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.biz__tagline { color: var(--muted); font-size: .9rem; margin: 0 0 14px; min-height: 2.6em; }
.biz__meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--muted);
}
.biz__meta strong { color: var(--navy); }

/* =========================================================
   JOBS BOARD
   ========================================================= */
.jobs { display: grid; gap: 14px; }
.job {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.job:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.job__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.4rem;
  border: 1px solid rgba(201,162,39,.3);
}
.job__title { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); font-weight: 600; margin: 0 0 4px; }
.job__meta { font-size: .85rem; color: var(--muted); }
.job__meta strong { color: var(--navy); font-weight: 600; }
.job__type {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--cream);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   MEMBER SPOTLIGHT
   ========================================================= */
.spotlight {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,162,39,.2);
}
.spotlight__media {
  background-color: var(--navy);
  background-image:
    linear-gradient(135deg, rgba(10,31,68,.4), rgba(201,162,39,.25)),
    url('../assets/members/hauwa.jpg'),
    url('../assets/pattern.svg');
  background-size: cover, cover, 200px;
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, multiply;
  min-height: 460px;
  position: relative;
}
.spotlight__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,22,58,.75));
}
.spotlight__quote-mark {
  position: absolute;
  top: 32px; left: 36px;
  font-family: var(--serif);
  font-size: 6rem;
  color: var(--gold);
  line-height: 1;
  opacity: .85;
}
.spotlight__body { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.spotlight__quote {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--navy);
  font-style: italic;
  margin: 0 0 28px;
}
.spotlight__person { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.spotlight__avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold);
}
.spotlight__person-name { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 1.05rem; }
.spotlight__person-role { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }

/* =========================================================
   CAMPAIGNS (active fundraising)
   ========================================================= */
.campaign {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.campaign:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(201,162,39,.35); }
.campaign__media {
  aspect-ratio: 16/9;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  position: relative;
}
.campaign__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,22,58,.65));
}
.campaign__badge {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--gold);
  color: var(--navy);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.campaign__body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.campaign__title { font-size: 1.2rem; margin-bottom: 8px; }
.campaign__desc { color: var(--muted); font-size: .9rem; flex: 1; margin-bottom: 14px; }
.campaign__stats { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.campaign__raised { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); font-weight: 700; }
.campaign__goal { font-size: .82rem; color: var(--muted); }
.campaign__percent {
  font-family: var(--serif);
  color: var(--gold-deep);
  font-size: 1.4rem;
  font-weight: 700;
}

/* =========================================================
   OTHER SETS — tasteful, not the focus
   ========================================================= */
.other-sets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.set-tile {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 18px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.set-tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-sm); }
.set-tile__year {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.set-tile__year sup { font-size: .7em; color: var(--gold-deep); margin-right: 2px; }
.set-tile__label { font-size: .82rem; color: var(--muted); margin-top: 8px; }
.set-tile__hr { width: 30px; height: 2px; background: var(--gold); margin: 12px auto; border-radius: 2px; opacity: .5; }
.other-sets-note {
  text-align: center;
  margin-top: 36px;
  font-size: .9rem;
  color: var(--muted);
  font-style: italic;
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */
.wa-float {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 16px;
  background: #25D366;
  color: var(--white);
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 12px 30px rgba(37,211,102,.4), 0 0 0 6px rgba(37,211,102,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .35s var(--ease);
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { background: #1ebc59; transform: translateY(-3px); }
.wa-float__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--white);
  color: #25D366;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: .95rem;
}

/* =========================================================
   FOOTER NEWSLETTER + WHATSAPP CTA
   ========================================================= */
.footer-newsletter { display: flex; gap: 8px; margin-top: 14px; }
.footer-newsletter input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  color: var(--cream);
  font-family: inherit; font-size: .9rem;
  outline: none;
}
.footer-newsletter input::placeholder { color: rgba(250,246,236,.4); }
.footer-newsletter input:focus { border-color: var(--gold); }
.footer-newsletter button {
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  cursor: pointer;
}
.footer-newsletter button:hover { background: var(--gold-light); }
.footer-newsletter.is-success input::placeholder { color: var(--gold-light); }
.footer-newsletter.is-success button { background: var(--gold-light); }

.wa-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.4);
  color: #45e07e;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s;
}
.wa-link:hover { background: rgba(37,211,102,.2); color: #6fea96; }

/* =========================================================
   EMPTY STATES
   ========================================================= */
.empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--cream);
  border: 1px dashed rgba(201,162,39,.4);
  border-radius: var(--radius-lg);
  color: var(--muted);
}
.empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  font-family: var(--serif);
  color: var(--gold-deep);
  font-size: 1.6rem;
  border: 1px solid var(--line);
}
.empty h3 { color: var(--navy); margin-bottom: 6px; font-size: 1.15rem; }
.empty p { margin: 0 0 16px; }

/* =========================================================
   NOSTALGIC QUOTE STRIP
   ========================================================= */
.quote-strip {
  text-align: center;
  padding: 84px 24px;
  position: relative;
  background-color: var(--cream);
  background-image: url('../assets/pattern.svg');
  background-size: 200px;
  background-blend-mode: multiply;
}
.quote-strip__mark {
  font-family: var(--serif);
  font-size: 5rem;
  color: var(--gold);
  line-height: 1; margin-bottom: 8px;
}
.quote-strip blockquote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-style: italic;
  color: var(--navy);
  max-width: 760px;
  margin: 0 auto 18px;
  line-height: 1.4;
}
.quote-strip cite {
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}

/* Responsive — Phase 2 additions */
@media (max-width: 1024px) {
  .biz-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__media { min-height: 280px; }
  .spotlight__body { padding: 40px; }
  .other-sets { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .biz-grid { grid-template-columns: 1fr; }
  .other-sets { grid-template-columns: repeat(2, 1fr); }
  .job { grid-template-columns: 48px 1fr; }
  .job__type { grid-column: 2; justify-self: start; }
  .wa-float { bottom: 16px; right: 16px; padding: 12px 16px 12px 12px; }
  .wa-float span:last-child { display: none; }
  .spotlight__body { padding: 28px; }
  .spotlight__quote { font-size: 1.2rem; }
}

/* =========================================================
   PHASE 3 — extended pages
   ========================================================= */

/* Member directory cards */
.members-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(201,162,39,.4); }
.member__avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 700;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm);
  position: relative;
}
.member__verified {
  position: absolute;
  bottom: 2px; right: 50%;
  margin-right: -34px;
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7rem;
  font-weight: 700;
  border: 2px solid var(--white);
}
.member__name { font-family: var(--serif); color: var(--navy); font-size: 1.1rem; font-weight: 600; margin: 0 0 2px; }
.member__role { font-size: .82rem; color: var(--gold-deep); letter-spacing: .04em; margin-bottom: 12px; }
.member__city { font-size: .78rem; color: var(--muted); letter-spacing: .15em; text-transform: uppercase; }
.member__house {
  display: inline-block;
  margin-top: 14px;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}

/* Search input bar (reusable) */
.search-bar {
  display: flex;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  box-shadow: var(--shadow-sm);
  max-width: 520px;
}
.search-bar input {
  flex: 1;
  border: 0; outline: none;
  background: transparent;
  padding: 10px 18px;
  font-family: inherit;
  font-size: .95rem;
}
.search-bar button {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: .85rem;
}
.search-bar button:hover { background: var(--navy-soft); }

/* Highlighted month strip (birthdays) */
.month-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 40px;
  scrollbar-width: none;
}
.month-tabs::-webkit-scrollbar { display: none; }
.month-tab {
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
}
.month-tab:hover { border-color: var(--gold); color: var(--gold-deep); }
.month-tab.is-active { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }

/* Featured birthday card */
.bday-feature {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border-radius: var(--radius-lg);
  color: var(--navy);
  box-shadow: var(--shadow-md);
}
.bday-feature__avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 2.2rem; font-weight: 700;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
}
.bday-feature__name { font-family: var(--serif); font-size: 2rem; margin: 0 0 4px; color: var(--navy); }
.bday-feature__role { font-size: .9rem; color: rgba(10,31,68,.7); margin: 0 0 10px; }
.bday-feature__msg { font-style: italic; color: var(--navy); margin: 0; opacity: .85; }
.bday-feature__actions { display: flex; flex-direction: column; gap: 8px; }
.bday-feature .btn--navy { background: var(--navy); color: var(--white); }
.bday-feature .btn--navy:hover { background: var(--navy-deep); }

/* Award card large */
.award-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.3);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  position: relative;
}
.award-card__media {
  background:
    radial-gradient(circle at 30% 30%, rgba(201,162,39,.35), transparent 60%),
    linear-gradient(160deg, var(--navy), var(--navy-deep));
  position: relative;
  min-height: 280px;
  display: grid; place-items: center;
  color: var(--gold);
}
.award-card__medal {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  display: grid; place-items: center;
  font-family: var(--serif);
  color: var(--navy);
  font-size: 2.6rem;
  border: 4px solid rgba(255,255,255,.4);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  position: relative;
}
.award-card__medal::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 14px 24px;
  border-color: transparent transparent var(--red);
  margin-top: 6px;
}
.award-card__body { padding: 36px; }
.award-card__cat {
  display: inline-block;
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin-bottom: 8px;
}
.award-card__name { font-family: var(--serif); font-size: 1.6rem; color: var(--navy); margin: 0 0 6px; }
.award-card__sub { color: var(--muted); margin-bottom: 14px; font-size: .9rem; }
.award-card__quote { font-style: italic; color: var(--ink); border-left: 3px solid var(--gold); padding-left: 14px; margin: 14px 0 0; font-size: .95rem; }

/* Timeline */
.timeline {
  position: relative;
  margin: 0;
  padding-left: 32px;
}
.timeline::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity: .4;
}
.timeline__item {
  position: relative;
  padding: 14px 0 24px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -32px; top: 22px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px var(--cream);
}
.timeline__year {
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .15em;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 4px;
}
.timeline__title { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); margin: 0 0 4px; }
.timeline__desc { color: var(--muted); font-size: .9rem; margin: 0; }

/* Featured blog post */
.featured-post {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  margin-bottom: 48px;
}
.featured-post__media {
  background-color: var(--navy);
  background-image:
    linear-gradient(135deg, rgba(10,31,68,.4), rgba(201,162,39,.2)),
    url('../assets/blog/featured.jpg');
  background-size: cover;
  background-position: center;
  min-height: 360px;
  position: relative;
}
.featured-post__media::after {
  content: "FEATURED";
  position: absolute;
  top: 20px; left: 20px;
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem;
  letter-spacing: .25em;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.featured-post__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.featured-post__meta { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; font-weight: 600; }
.featured-post__title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 14px; line-height: 1.2; }
.featured-post__excerpt { color: var(--muted); margin-bottom: 24px; font-size: 1rem; }
.featured-post__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.featured-post__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: .9rem;
}
.featured-post__author small {
  display: block;
  font-size: .75rem; letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
}
.featured-post__author strong { font-family: var(--serif); color: var(--navy); }

/* Bills/dues table */
.bills {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bills__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.bills__row:last-of-type { border-bottom: 0; }
.bills__row--head {
  background: var(--cream);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
}
.bills__row--total {
  background: var(--navy);
  color: var(--cream);
  border-bottom: 0;
}
.bills__row--total strong { color: var(--gold-light); font-family: var(--serif); font-size: 1.3rem; }
.bills__title { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); font-weight: 600; margin: 0; }
.bills__sub { font-size: .82rem; color: var(--muted); display: block; margin-top: 2px; font-family: var(--sans); }
.bills__amount { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); font-weight: 700; }
.bills__status {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.bills__status--due  { background: rgba(184,29,36,.1); color: var(--red); }
.bills__status--paid { background: rgba(45,140,80,.12); color: #2D8C50; }

/* Membership status badge */
.status-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201,162,39,.3);
}
.status-card::before {
  content: ""; position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px dashed rgba(201,162,39,.3);
}
.status-card__label { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 8px; font-weight: 700; }
.status-card__name { font-family: var(--serif); font-size: 1.8rem; color: var(--white); margin: 0 0 4px; }
.status-card__id { font-size: .82rem; color: rgba(250,246,236,.7); letter-spacing: .1em; margin-bottom: 24px; }
.status-card__chip {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--navy);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Trainings card */
.training {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.training:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(201,162,39,.4); }
.training__media {
  aspect-ratio: 16/9;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  position: relative;
}
.training__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,31,68,.5), rgba(201,162,39,.2));
}
.training__level {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 1;
  background: rgba(255,255,255,.95);
  color: var(--navy);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.training__body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
.training__title { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin: 0 0 8px; }
.training__desc { color: var(--muted); font-size: .92rem; flex: 1; margin-bottom: 14px; }
.training__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.training__meta strong { display: block; color: var(--gold-deep); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2px; }

/* Set highlight (Other Sets page detailed) */
.set-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.set-row:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.set-row--us { background: linear-gradient(135deg, var(--cream), var(--white)); border-color: var(--gold); }
.set-row__seal {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.4rem;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.set-row--us .set-row__seal {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
}
.set-row__year { font-family: var(--serif); color: var(--navy); margin: 0; font-size: 1.4rem; font-weight: 600; }
.set-row__count {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 4px 0 6px;
  font-weight: 700;
}
.set-row__rep { font-size: .9rem; color: var(--muted); margin: 0; }
.set-row__action {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all .2s;
}
.set-row__action:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Receipt list (Contributions transparency) */
.receipts { display: grid; gap: 10px; }
.receipt {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 22px;
  transition: border-color .25s;
}
.receipt:hover { border-color: var(--gold); }
.receipt__seal {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700;
  border: 1px solid rgba(201,162,39,.4);
}
.receipt__what { font-family: var(--serif); color: var(--navy); margin: 0; font-weight: 600; }
.receipt__when { font-size: .8rem; color: var(--muted); margin: 2px 0 0; }
.receipt__amount { font-family: var(--serif); color: var(--gold-deep); font-weight: 700; font-size: 1.05rem; }

@media (max-width: 1024px) {
  .members-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post__media { min-height: 240px; }
  .featured-post__body { padding: 36px; }
  .award-card { grid-template-columns: 1fr; }
  .award-card__media { min-height: 220px; }
  .bday-feature { grid-template-columns: auto 1fr; }
  .bday-feature__actions { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width: 720px) {
  .members-grid { grid-template-columns: repeat(2, 1fr); }
  .bday-feature { padding: 24px; grid-template-columns: 1fr; text-align: center; }
  .bday-feature__avatar { margin: 0 auto; }
  .bday-feature__actions { flex-direction: column; }
  .bills__row { grid-template-columns: 1fr auto; gap: 8px; }
  .bills__row .bills__status { grid-column: 1 / -1; justify-self: start; }
  .set-row { grid-template-columns: auto 1fr; gap: 18px; padding: 22px; }
  .set-row__action { grid-column: 1 / -1; justify-self: start; }
  .receipt { grid-template-columns: 36px 1fr; }
  .receipt__amount { grid-column: 2; }
  .featured-post__body { padding: 28px; }
  .award-card__body { padding: 28px; }
}

/* =========================================================
   BRAND v2 — shield & ribbon system
   ========================================================= */

/* Ribbon banner — applied to section headers or cards */
.ribbon {
  display: inline-block;
  position: relative;
  padding: 8px 22px;
  background: var(--red);
  color: var(--white);
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(177,18,38,.3);
}
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px; height: 100%;
  background: var(--red-deep);
}
.ribbon::before { left: -12px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ribbon::after  { right: -12px; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Shield divider — small ribbon-style underline */
.shield-rule {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 22px;
}
.shield-rule::before,
.shield-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}
.shield-rule__diamond {
  width: 10px; height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(212,160,23,.18);
}

/* Heritage stripe — for footer/header tops */
.heritage-stripe {
  height: 4px;
  background: linear-gradient(90deg,
    var(--navy) 0%, var(--navy) 33%,
    var(--red) 33%, var(--red) 66%,
    var(--gold) 66%, var(--gold) 100%);
}

/* Section feel — community-oriented background pattern */
.section--royal {
  background: var(--navy);
  color: var(--white);
  position: relative;
}
.section--royal h1,
.section--royal h2,
.section--royal h3 { color: var(--white); }
.section--royal .lead { color: rgba(255,255,255,.78); }
.section--royal .eyebrow { color: var(--gold-light); }
.section--royal .eyebrow::before { background: var(--gold-light); }

/* alias the old --navy class name */
.section--navy { background: var(--navy); color: var(--white); position: relative; }
.section--navy::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../assets/pattern.svg');
  background-size: 220px;
  opacity: .04;
  pointer-events: none;
}
.section--navy .eyebrow { color: var(--gold-light); }
.section--navy .eyebrow::before { background: var(--gold-light); }

/* Subtle ribbon underline replacement for divider-gold */
.divider-gold {
  width: 56px;
  height: 3px;
  background: var(--red);
  border-radius: 3px;
  margin: 14px 0 22px;
  position: relative;
}
.divider-gold::after {
  content: "";
  position: absolute;
  left: 64px; top: 1px;
  width: 24px; height: 1px;
  background: var(--gold);
  opacity: .6;
}

/* Card hover — more grounded */
.card { transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(11,31,138,.18); }

/* Eyebrow variant — when red is too loud (small areas) */
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--gold::before { background: var(--gold); }
.eyebrow--blue { color: var(--navy); }
.eyebrow--blue::before { background: var(--navy); }

/* =========================================================
   AUTH & MEMBER SYSTEM
   ========================================================= */

/* Full-page auth layout */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--cream);
}
.auth__brand {
  position: relative;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(242,201,76,.12), transparent 65%),
    radial-gradient(700px 500px at 10% 100%, rgba(177,18,38,.18), transparent 60%),
    linear-gradient(170deg, var(--navy-deep) 0%, var(--navy) 60%, #0A1B7D 100%);
  color: var(--white);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  overflow: hidden;
}
.auth__brand::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../assets/pattern.svg');
  background-size: 220px;
  opacity: .06;
  z-index: -1;
}
.auth__logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}
.auth__logo img { width: 52px; height: 52px; }
.auth__brand-text {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--white);
  text-transform: uppercase;
}
.auth__brand-sub {
  display: block;
  font-family: var(--ui);
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--gold-light);
  margin-top: 4px;
}
.auth__brand-hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.auth__brand-hero h1 em { font-style: normal; color: var(--gold-light); }
.auth__brand-hero p { color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 420px; }
.auth__brand-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.auth__brand-trust-item {
  display: flex; gap: 10px;
  font-size: .88rem;
  color: rgba(255,255,255,.82);
}
.auth__brand-trust-item strong { color: var(--gold-light); font-family: var(--ui); font-weight: 700; letter-spacing: .05em; font-size: .8rem; text-transform: uppercase; display: block; }

.auth__panel {
  display: flex; flex-direction: column;
  padding: 56px 72px;
  overflow-y: auto;
}
.auth__back {
  font-family: var(--ui);
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
}
.auth__back:hover { color: var(--navy); }
.auth__panel h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 2rem;
  margin-bottom: 8px;
}
.auth__panel-sub { color: var(--muted); margin-bottom: 28px; }

/* Stepper */
.stepper {
  display: flex; gap: 12px;
  margin-bottom: 28px;
}
.step {
  flex: 1;
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.step.is-active { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,31,138,.1); }
.step.is-done { border-color: var(--gold); background: linear-gradient(135deg, var(--white), rgba(242,201,76,.08)); }
.step__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--muted);
  display: grid; place-items: center;
  font-family: var(--ui); font-weight: 700; font-size: .82rem;
  flex-shrink: 0;
}
.step.is-active .step__num { background: var(--navy); color: var(--white); }
.step.is-done .step__num { background: var(--gold); color: var(--navy); }
.step__label { font-family: var(--ui); font-size: .8rem; font-weight: 600; color: var(--navy); letter-spacing: .04em; }
.step__sub { font-size: .72rem; color: var(--muted); margin-top: 2px; display: block; font-family: var(--sans); letter-spacing: 0; }

/* Form */
.form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group label,
.form-label {
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}
.form-group label .req { color: var(--red); margin-left: 2px; }
.form-group label .optional { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; font-size: .8em; }
.form-input,
.form-textarea,
.form-select {
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11,31,138,.12);
}
.form-textarea { resize: vertical; min-height: 110px; }
.form-help { font-size: .8rem; color: var(--muted); }
.form-actions {
  display: flex; gap: 12px; justify-content: space-between;
  margin-top: 14px; padding-top: 24px; border-top: 1px solid var(--line);
  align-items: center;
}
.form-actions--end { justify-content: flex-end; }
.form-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-family: var(--ui); font-size: .72rem;
  color: var(--muted); letter-spacing: .2em; text-transform: uppercase;
}
.form-divider::before, .form-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Photo upload */
.upload-zone {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  background: var(--cream);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  transition: border-color .2s;
}
.upload-zone:hover { border-color: var(--navy); }
.upload-zone__preview {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--line);
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--display);
  font-size: 1.6rem;
  background-size: cover; background-position: center;
}
.upload-zone__actions { display: flex; flex-direction: column; gap: 6px; }
.upload-zone__hint { font-size: .78rem; color: var(--muted); }
.upload-zone__btn {
  align-self: start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--ui); font-size: .76rem;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: background .2s;
}
.upload-zone__btn:hover { background: var(--navy-deep); }

/* Checkbox / radio */
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
}
.check input { margin: 3px 0 0; accent-color: var(--navy); }
.check a { color: var(--navy); text-decoration: underline; }

/* Auth footer link */
.auth__alt {
  text-align: center;
  margin-top: 24px;
  font-size: .9rem;
  color: var(--muted);
}
.auth__alt a { color: var(--navy); font-weight: 600; }
.auth__alt a:hover { color: var(--red); }

/* Verification questions block */
.verify-card {
  background: linear-gradient(180deg, var(--white), rgba(242,201,76,.05));
  border: 1px solid rgba(212,160,23,.3);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.verify-card h4 {
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 8px;
  font-weight: 700;
}
.verify-card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* =========================================================
   USER MENU / NAV STATE
   ========================================================= */
.nav-cta__signin {
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 14px;
  letter-spacing: .04em;
}
.nav-cta__signin:hover { color: var(--red); }

.user-menu { position: relative; }
.user-menu__trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--cream);
  border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s;
}
.user-menu__trigger:hover { border-color: var(--navy); }
.user-menu__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: 0;
}
.user-menu__name { font-family: var(--ui); font-size: .82rem; font-weight: 600; color: var(--navy); }
.user-menu__check {
  font-size: .65rem;
  background: var(--gold);
  color: var(--navy);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
}
.user-menu__drop {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 8px;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 8px;
  z-index: 110;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: all .2s var(--ease);
}
.user-menu.is-open .user-menu__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__drop li a, .user-menu__drop li button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--ui); font-size: .85rem; font-weight: 500;
  color: var(--navy);
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.user-menu__drop li a:hover, .user-menu__drop li button:hover { background: var(--cream); }
.user-menu__drop li.divider {
  height: 1px; background: var(--line); margin: 6px 0;
  padding: 0;
}
.user-menu__drop li.sign-out a, .user-menu__drop li.sign-out button { color: var(--red); }

[hidden] { display: none !important; }

/* =========================================================
   VERIFIED BADGE
   ========================================================= */
.badge-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.badge-verified::before {
  content: "✓";
  display: grid; place-items: center;
  width: 16px; height: 16px;
  background: var(--white);
  color: var(--navy);
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 700;
}
.badge-verified--lg {
  padding: 6px 14px 6px 8px;
  font-size: .78rem;
}
.badge-verified--lg::before { width: 22px; height: 22px; font-size: .8rem; }

.badge-pending {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(177,18,38,.1);
  color: var(--red);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(177,18,38,.25);
}
.badge-pending::before {
  content: "◷";
  font-size: .82rem;
}

/* =========================================================
   MEMBER-ONLY GATE / LOCKED CONTENT
   ========================================================= */
.locked-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--white);
  border-radius: var(--radius);
  margin-bottom: 32px;
  border: 1px solid rgba(212,160,23,.3);
  overflow: hidden;
}
.locked-banner::before {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1px dashed rgba(212,160,23,.3);
}
.locked-banner__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.4rem;
  flex-shrink: 0;
}
.locked-banner h3 { color: var(--white); font-size: 1.2rem; margin: 0 0 4px; font-family: var(--serif); }
.locked-banner p { color: rgba(255,255,255,.78); margin: 0; font-size: .92rem; }
.locked-banner__actions { display: flex; gap: 10px; }

.locked-wrap {
  position: relative;
  overflow: hidden;
}
.locked-wrap__veil { transition: filter .3s; }
.locked-wrap__cta { display: none; }

/* gate only kicks in for anon + pending — verified members see everything */
body.is-anon .locked-wrap--gate .locked-wrap__veil,
body.is-pending .locked-wrap--gate .locked-wrap__veil {
  pointer-events: none;
  filter: blur(7px) saturate(.5);
  opacity: .55;
  user-select: none;
}
body.is-anon .locked-wrap--gate .locked-wrap__cta,
body.is-pending .locked-wrap--gate .locked-wrap__cta {
  position: absolute;
  inset: 0;
  padding: 60px 24px;
  background: linear-gradient(180deg, rgba(245,247,250,.3) 0%, var(--cream) 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

/* the public locked banner only shows for non-verified */
.gate-banner { display: none; }
body.is-anon .gate-banner,
body.is-pending .gate-banner { display: grid; }
.locked-wrap__cta h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.locked-wrap__cta p { color: var(--muted); margin: 0; max-width: 460px; }
.locked-wrap__cta .btn-row { display: flex; gap: 10px; }

/* member card verified styling */
.member--verified { border-color: rgba(212,160,23,.4); }
.member--verified .member__avatar { box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm); }
.member__verified {
  position: absolute;
  bottom: 4px; right: 50%;
  margin-right: -36px;
  width: 26px; height: 26px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem;
  font-weight: 700;
  border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* =========================================================
   PENDING / STATUS SCREENS
   ========================================================= */
.status-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(212,160,23,.06), transparent 70%),
    var(--cream);
  padding: 40px 24px;
}
.status-card-lg {
  max-width: 600px; width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.status-card-lg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 33%, var(--red) 33%, var(--red) 66%, var(--gold) 66%, var(--gold) 100%);
}
.status-card-lg__seal {
  width: 110px; height: 110px;
  margin: 0 auto 22px;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2.6rem;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow-md);
  position: relative;
}
.status-card-lg__seal--gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); }
.status-card-lg__seal--red  { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: var(--white); border-color: rgba(255,255,255,.4); }
.status-card-lg h1 { font-family: var(--display); text-transform: uppercase; font-size: 1.8rem; margin: 0 0 8px; letter-spacing: .03em; }
.status-card-lg__sub { color: var(--muted); margin-bottom: 28px; }
.status-card-lg__id {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--ui);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--gold-deep);
  background: var(--cream);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-card-lg__steps {
  text-align: left;
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.status-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.status-step:last-child { border-bottom: 0; }
.status-step__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--muted);
  display: grid; place-items: center;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--ui);
}
.status-step--done .status-step__dot { background: var(--gold); color: var(--navy); }
.status-step--current .status-step__dot { background: var(--navy); color: var(--white); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
.status-step__title { font-family: var(--ui); font-weight: 700; font-size: .85rem; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }
.status-step__desc { font-size: .85rem; color: var(--muted); margin: 2px 0 0; }
.status-card-lg__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   PROTECTED DASHBOARD
   ========================================================= */
.dash-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  margin-top: 32px;
}
.dash-side {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 18px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.dash-side__user {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.dash-side__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold);
}
.dash-side__name { font-family: var(--display); text-transform: uppercase; color: var(--navy); font-size: 1rem; letter-spacing: .04em; margin: 4px 0; }
.dash-side__role { font-size: .76rem; color: var(--muted); margin-bottom: 8px; }
.dash-side ul { list-style: none; padding: 0; margin: 0; }
.dash-side li a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  font-family: var(--ui);
  font-size: .85rem;
  font-weight: 500;
  color: var(--navy);
  transition: background .2s;
}
.dash-side li a:hover { background: var(--cream); }
.dash-side li a.is-active { background: var(--cream); color: var(--red); font-weight: 600; }
.dash-side li a.is-active::before {
  content: ""; width: 3px; height: 18px;
  background: var(--red); border-radius: 3px; margin-right: -6px;
}

.dash-main { min-width: 0; }
.dash-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--white);
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.dash-hero::before {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px dashed rgba(212,160,23,.3);
}
.dash-hero h1 { color: var(--white); font-family: var(--display); text-transform: uppercase; font-size: 1.8rem; margin: 0 0 4px; letter-spacing: .03em; }
.dash-hero p { color: rgba(255,255,255,.78); margin: 0; }

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.dash-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dash-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(11,31,138,.2); }
.dash-tile__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.1rem;
  margin-bottom: 8px;
}
.dash-tile__label { font-family: var(--ui); font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }
.dash-tile__value { font-family: var(--display); font-size: 1.5rem; color: var(--navy); font-weight: 700; }

.dash-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.dash-panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.dash-panel__head h3 { font-family: var(--serif); font-size: 1.2rem; margin: 0; }
.dash-panel__head a { font-family: var(--ui); font-size: .78rem; font-weight: 600; color: var(--navy); }
.dash-panel__head a:hover { color: var(--red); }

.dash-feed { display: flex; flex-direction: column; }
.dash-feed-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.dash-feed-item:last-child { border-bottom: 0; }
.dash-feed-item__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
}
.dash-feed-item__title { margin: 0; font-family: var(--ui); font-size: .9rem; font-weight: 600; color: var(--navy); }
.dash-feed-item__meta { font-size: .8rem; color: var(--muted); margin: 2px 0 0; }
.dash-feed-item__time { font-size: .76rem; color: var(--muted); font-family: var(--ui); letter-spacing: .04em; }

/* =========================================================
   ADMIN REVIEW
   ========================================================= */
.admin-bar {
  background: var(--navy-deep);
  color: rgba(255,255,255,.8);
  padding: 10px 0;
  font-family: var(--ui);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.admin-bar .container { display: flex; justify-content: space-between; align-items: center; }
.admin-bar strong { color: var(--gold-light); }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.admin-stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.admin-stat__label { font-family: var(--ui); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.admin-stat__value { font-family: var(--display); font-size: 1.8rem; color: var(--navy); font-weight: 700; margin-top: 4px; letter-spacing: .02em; }
.admin-stat__sub { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.admin-stat--pending { border-color: rgba(177,18,38,.3); background: linear-gradient(180deg, var(--white), rgba(177,18,38,.04)); }
.admin-stat--pending .admin-stat__value { color: var(--red); }

.admin-table {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table__head,
.admin-table__row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 1fr .8fr auto;
  gap: 16px;
  padding: 14px 22px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.admin-table__head {
  background: var(--cream);
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.admin-table__row:last-child { border-bottom: 0; }
.admin-table__row:hover { background: var(--cream); }
.admin-table__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
}
.admin-table__name { font-family: var(--ui); font-weight: 600; color: var(--navy); font-size: .9rem; }
.admin-table__sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.admin-table__cell { font-family: var(--sans); font-size: .88rem; color: var(--ink); }
.admin-status {
  display: inline-block;
  font-family: var(--ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.admin-status--pending { background: rgba(177,18,38,.1); color: var(--red); }
.admin-status--info    { background: rgba(212,160,23,.15); color: var(--gold-deep); }
.admin-status--approved { background: rgba(45,140,80,.12); color: #2D8C50; }
.admin-status--rejected { background: rgba(95,102,117,.15); color: var(--muted); }
.admin-table__action {
  font-family: var(--ui); font-size: .76rem; font-weight: 600;
  color: var(--navy);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--navy);
  transition: all .2s;
}
.admin-table__action:hover { background: var(--navy); color: var(--white); }

.review {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  margin-top: 32px;
}
.review__body {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.review__head {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.review__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--line);
}
.review__head h2 { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .03em; }
.review__head-meta { color: var(--muted); margin: 4px 0 0; font-size: .88rem; }

.review-section { margin-bottom: 26px; }
.review-section h4 {
  font-family: var(--ui);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
  font-weight: 700;
}
.review-section dl {
  margin: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 16px;
}
.review-section dt {
  font-family: var(--ui);
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em;
  padding: 4px 0;
}
.review-section dd {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  padding: 4px 0;
}

.review-side {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.review-side__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.review-side__panel h4 {
  font-family: var(--ui);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 14px; font-weight: 700;
}
.review-actions { display: flex; flex-direction: column; gap: 8px; }
.review-actions .btn { width: 100%; }

@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { padding: 40px; min-height: 240px; }
  .auth__panel { padding: 40px 28px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
  .review { grid-template-columns: 1fr; }
  .review-side { position: static; }
  .admin-table__head, .admin-table__row { grid-template-columns: 50px 1fr 1fr auto; }
  .admin-table__head > :nth-child(4),
  .admin-table__head > :nth-child(5),
  .admin-table__row  > :nth-child(4),
  .admin-table__row  > :nth-child(5) { display: none; }
}
@media (max-width: 720px) {
  .auth__panel { padding: 28px 20px; }
  .stepper { flex-direction: column; gap: 8px; }
  .form-group--row { grid-template-columns: 1fr; }
  .dash-tiles { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .locked-banner { grid-template-columns: 1fr; text-align: center; }
  .locked-banner__icon { margin: 0 auto; }
  .locked-banner__actions { justify-content: center; }
  .status-card-lg { padding: 36px 24px; }
  .review-section dl { grid-template-columns: 1fr; gap: 4px 0; }
  .review-section dt { color: var(--gold-deep); font-weight: 700; }
}

/* =========================================================
   AVATAR — reusable component (with photo + initials fallback)
   ========================================================= */
.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--navy);
  background-image: linear-gradient(135deg, var(--navy), var(--navy-soft));
  background-size: cover;
  background-position: center;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0;
  overflow: visible;
  flex-shrink: 0;
}
.avatar.has-photo {
  background-color: var(--cream);
  background-image: var(--photo);
  color: transparent;
}
.avatar.has-photo .avatar__initials { display: none; }
.avatar__initials {
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .02em;
  pointer-events: none;
}
.avatar--xs { width: 28px; height: 28px; font-size: .72rem; }
.avatar--sm { width: 40px; height: 40px; font-size: .82rem; }
.avatar--md { width: 64px; height: 64px; font-size: 1rem; }
.avatar--lg { width: 88px; height: 88px; font-size: 1.4rem; }
.avatar--xl { width: 120px; height: 120px; font-size: 2rem; }
.avatar--xxl{ width: 160px; height: 160px; font-size: 2.6rem; }
.avatar--ring-white { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--line); }
.avatar--ring-gold  { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--gold); }
.avatar--ring-navy  { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--navy); }
.avatar__check {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 28px; height: 28px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem;
  font-weight: 700;
  border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  z-index: 2;
  font-family: var(--ui);
}
.avatar--sm .avatar__check { width: 18px; height: 18px; font-size: .62rem; border-width: 2px; }
.avatar--md .avatar__check { width: 22px; height: 22px; font-size: .7rem; }
.avatar--xl .avatar__check, .avatar--xxl .avatar__check { width: 34px; height: 34px; font-size: 1rem; }

/* =========================================================
   UPLOAD — drag-drop profile photo uploader
   ========================================================= */
.upload-drop {
  position: relative;
  border: 2px dashed rgba(11,31,138,.25);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--white), var(--cream));
  padding: 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s;
}
.upload-drop:hover {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--white), rgba(212,160,23,.04));
}
.upload-drop.is-dragover {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--white), rgba(212,160,23,.1));
  transform: scale(1.005);
  box-shadow: 0 0 0 4px rgba(212,160,23,.15);
}
.upload-drop.has-image {
  border-style: solid;
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--white), rgba(45,140,80,.04));
}
.upload-drop__preview {
  width: 110px; height: 110px;
  border-radius: 50%;
  background-color: var(--white);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--line);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s;
  flex-shrink: 0;
}
.upload-drop__preview.has-photo {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--gold);
}
.upload-drop__preview-text {
  color: var(--muted);
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
}
.upload-drop__preview .upload-drop__camera {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  background: rgba(7,20,92,.6);
  color: var(--gold-light);
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity .2s;
}
.upload-drop:hover .upload-drop__preview .upload-drop__camera,
.upload-drop.is-dragover .upload-drop__preview .upload-drop__camera { opacity: 1; }

.upload-drop__body { display: flex; flex-direction: column; gap: 6px; }
.upload-drop__title {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
}
.upload-drop__hint {
  font-size: .85rem;
  color: var(--muted);
}
.upload-drop__hint strong { color: var(--navy); font-family: var(--ui); font-weight: 600; }
.upload-drop__actions {
  display: flex; gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.upload-drop__btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background .2s;
}
.upload-drop__btn:hover { background: var(--navy-deep); }
.upload-drop__btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.upload-drop__btn--ghost:hover { color: var(--red); border-color: var(--red); background: rgba(177,18,38,.04); }
.upload-drop__status {
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 4px;
  min-height: 1.4em;
}
.upload-drop__status.is-success { color: #2D8C50; }
.upload-drop__status.is-error   { color: var(--red); }

/* Guidelines panel */
.upload-guidelines {
  background: linear-gradient(180deg, var(--white), rgba(11,31,138,.03));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 12px;
}
.upload-guidelines h5 {
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
  font-weight: 700;
}
.upload-guidelines ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.upload-guidelines li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .84rem;
  color: var(--ink);
}
.upload-guidelines li::before {
  content: "✓";
  color: var(--gold-deep);
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
}
.upload-guidelines li.no::before {
  content: "✕";
  color: var(--red);
}

/* =========================================================
   RICH MEMBER CARD (directory + featured)
   ========================================================= */
.member-rich {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease);
}
.member-rich:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212,160,23,.4);
}
.member-rich__cover {
  height: 76px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  position: relative;
}
.member-rich__cover::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../assets/pattern.svg');
  background-size: 160px;
  opacity: .06;
}
.member-rich__badges {
  position: absolute;
  top: 12px; left: 14px;
  display: flex; gap: 6px;
  z-index: 2;
}
.member-rich__set-badge {
  font-family: var(--ui);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255,255,255,.95);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 999px;
}
.member-rich__house-badge {
  font-family: var(--ui);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--white);
}
.member-rich__house-badge--yellow { background: #B8941A; }
.member-rich__house-badge--green  { background: #2D8C50; }
.member-rich__house-badge--red    { background: var(--red); }
.member-rich__house-badge--blue   { background: var(--navy); }

.member-rich__avatar-wrap {
  display: grid;
  place-items: center;
  margin-top: -54px;
  margin-bottom: 8px;
}
.member-rich__body {
  padding: 0 22px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.member-rich__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 600;
  margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.member-rich__name .badge-verified {
  font-size: .58rem;
  padding: 2px 6px 2px 4px;
}
.member-rich__name .badge-verified::before { width: 12px; height: 12px; font-size: .56rem; }
.member-rich__profession {
  font-size: .82rem;
  color: var(--gold-deep);
  letter-spacing: .04em;
  font-weight: 600;
  margin: 0;
}
.member-rich__location {
  font-family: var(--ui);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 4px 0 8px;
}
.member-rich__bio {
  font-size: .85rem;
  color: var(--muted);
  margin: 6px 0 14px;
  line-height: 1.5;
  min-height: 3em;
}
.member-rich__actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.member-rich__action {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
  text-align: center;
}
.member-rich__action:hover { background: var(--navy); color: var(--white); }
.member-rich__action--primary { background: var(--navy); color: var(--white); }
.member-rich__action--primary:hover { background: var(--navy-deep); }

/* =========================================================
   MEMBER PROFILE PAGE
   ========================================================= */
.mp-hero {
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(242,201,76,.12), transparent 65%),
    linear-gradient(170deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--white);
  padding: 80px 0 140px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../assets/pattern.svg');
  background-size: 220px;
  opacity: .05;
  z-index: -1;
}
.mp-hero__crumbs {
  display: inline-flex; gap: 8px;
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}

.mp-card {
  margin-top: -100px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.mp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 33%, var(--red) 33%, var(--red) 66%, var(--gold) 66%, var(--gold) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.mp-card__id {
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.mp-card h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: .03em;
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.mp-card__role {
  color: var(--gold-deep);
  font-family: var(--ui);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
.mp-card__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.mp-card__meta strong { color: var(--navy); }
.mp-card__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.mp-card__chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.mp-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  margin: 32px 0 80px;
}
.mp-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 18px;
}
.mp-section h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.mp-section h3 .label {
  font-family: var(--ui);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--cream);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.mp-side {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 100px; align-self: start;
}
.mp-side .mp-section { margin-bottom: 0; padding: 22px 24px; }
.mp-side .mp-section h3 { font-size: 1rem; padding-bottom: 10px; }

.mp-quick { list-style: none; padding: 0; margin: 0; }
.mp-quick li {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.mp-quick li:last-child { border-bottom: 0; }
.mp-quick li strong { color: var(--navy); font-family: var(--ui); font-weight: 600; }

.mp-contact { display: grid; gap: 10px; }
.mp-contact a {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--navy);
  transition: background .2s, border-color .2s;
}
.mp-contact a:hover { background: var(--cream); border-color: var(--navy); }
.mp-contact a span:first-child {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font-family: var(--display); font-size: .9rem;
}

.mp-achievement {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mp-achievement:last-child { border-bottom: 0; }
.mp-achievement__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.2rem;
}
.mp-achievement h4 { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); margin: 0 0 2px; }
.mp-achievement small { font-family: var(--ui); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.mp-achievement p { font-size: .9rem; color: var(--muted); margin: 4px 0 0; }

.mp-business {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: var(--cream);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.mp-business__logo {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.mp-business h4 { font-family: var(--serif); color: var(--navy); margin: 0; font-size: 1.05rem; }
.mp-business p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.mp-business a { font-family: var(--ui); font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--navy); padding: 6px 12px; border: 1px solid var(--navy); border-radius: 999px; transition: all .2s; }
.mp-business a:hover { background: var(--navy); color: var(--white); }

.mp-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mp-gallery__item {
  aspect-ratio: 1;
  border-radius: 10px;
  background-size: cover; background-position: center;
  transition: transform .2s, box-shadow .2s;
}
.mp-gallery__item:hover { transform: scale(1.02); box-shadow: var(--shadow-sm); }

/* Responsive */
@media (max-width: 1024px) {
  .upload-drop { grid-template-columns: 1fr; text-align: center; padding: 22px; }
  .upload-drop__preview { margin: 0 auto; }
  .upload-guidelines ul { grid-template-columns: 1fr; }
  .mp-card { grid-template-columns: auto 1fr; padding: 28px; margin-top: -80px; }
  .mp-card__actions { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .mp-layout { grid-template-columns: 1fr; }
  .mp-side { position: static; }
}
@media (max-width: 720px) {
  .mp-card { grid-template-columns: 1fr; text-align: center; }
  .mp-card h1 { justify-content: center; }
  .mp-card__meta { justify-content: center; }
  .mp-card__actions { flex-direction: column; }
  .mp-hero { padding: 60px 0 100px; }
  .mp-section { padding: 22px; }
  .mp-gallery { grid-template-columns: repeat(2, 1fr); }
  .member-rich__bio { min-height: auto; }
}

/* =========================================================
   ADMIN MANAGEMENT — shell, side nav, forms, tables, modals
   ========================================================= */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin: 28px 0 80px;
}
.admin-side {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 10px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.admin-side h5 {
  font-family: var(--ui);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 14px 6px;
  margin: 0;
  font-weight: 700;
}
.admin-side ul { list-style: none; padding: 0; margin: 0; }
.admin-side li a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--ui);
  font-size: .85rem;
  font-weight: 500;
  color: var(--navy);
  border-radius: 8px;
  transition: background .2s;
}
.admin-side li a:hover { background: var(--cream); }
.admin-side li a.is-active { background: var(--cream); color: var(--red); font-weight: 600; }
.admin-side li a.is-active::before {
  content: ""; width: 3px; height: 18px;
  background: var(--red); border-radius: 3px; margin-right: -6px;
}
.admin-side__count {
  font-family: var(--ui); font-size: .68rem;
  background: var(--red); color: var(--white);
  padding: 2px 9px; border-radius: 999px;
  font-weight: 700; letter-spacing: .04em;
}
.admin-side li a.is-active .admin-side__count { background: var(--navy); }

.admin-page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.admin-page-head h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.8rem; letter-spacing: .03em; margin: 0;
}
.admin-page-head p { color: var(--muted); margin: 4px 0 0; font-size: .92rem; }
.admin-page-head__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Restricted access */
.restricted {
  min-height: 80vh;
  display: grid; place-items: center;
  padding: 60px 24px;
}
.restricted__card {
  max-width: 540px; width: 100%;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.restricted__card::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 33%, var(--red) 33%, var(--red) 66%, var(--gold) 66%, var(--gold) 100%);
}
.restricted__icon {
  width: 96px; height: 96px;
  margin: 0 auto 22px;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: var(--white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2.6rem;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px rgba(177,18,38,.2);
}
.restricted h1 { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; letter-spacing: .03em; margin: 0 0 8px; }
.restricted p { color: var(--muted); margin: 0 0 20px; }
.restricted__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Status badges (content states) */
.status-badge {
  display: inline-block;
  font-family: var(--ui);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
}
.status-badge--draft     { background: rgba(95,102,117,.12); color: var(--muted); }
.status-badge--published { background: rgba(45,140,80,.12); color: #2D8C50; }
.status-badge--archived  { background: rgba(95,102,117,.08); color: var(--muted); border-color: var(--line); }
.status-badge--scheduled { background: rgba(212,160,23,.15); color: var(--gold-deep); }
.status-badge--paid      { background: rgba(45,140,80,.12); color: #2D8C50; }
.status-badge--unpaid    { background: rgba(177,18,38,.1); color: var(--red); }
.status-badge--partial   { background: rgba(212,160,23,.15); color: var(--gold-deep); }
.status-badge--public    { background: rgba(11,31,138,.1); color: var(--navy); }
.status-badge--members   { background: rgba(212,160,23,.15); color: var(--gold-deep); }
.status-badge--verified  { background: rgba(45,140,80,.12); color: #2D8C50; }
.status-badge--suspended { background: rgba(177,18,38,.1); color: var(--red); }
.status-badge--active    { background: rgba(45,140,80,.12); color: #2D8C50; }
.status-badge--closed    { background: rgba(95,102,117,.12); color: var(--muted); }

/* Admin list / row */
.admin-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.admin-list__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.admin-list__row:last-child { border-bottom: 0; }
.admin-list__row:hover { background: var(--cream); }
.admin-list__thumb {
  width: 56px; height: 42px;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: var(--cream);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--gold-deep); font-family: var(--display); font-size: 1rem;
}
.admin-list__title { font-family: var(--serif); color: var(--navy); font-weight: 600; font-size: 1rem; margin: 0; }
.admin-list__meta { font-size: .82rem; color: var(--muted); margin: 2px 0 0; }
.admin-list__actions { display: flex; gap: 8px; }
.admin-list__action {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: .9rem;
  border: 0; cursor: pointer;
  transition: background .2s, color .2s;
}
.admin-list__action:hover { background: var(--navy); color: var(--white); }
.admin-list__action--danger:hover { background: var(--red); }

/* Editor card */
.editor {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.editor__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.editor__head h3 { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.editor__body { padding: 28px; }
.editor__split { display: grid; grid-template-columns: 1fr 320px; gap: 28px; }
.editor textarea { font-family: var(--sans); }
.editor textarea.editor__content { min-height: 360px; }

/* Save bar */
.save-bar {
  position: sticky;
  bottom: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 14px 28px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 -8px 24px rgba(7,20,92,.06);
  z-index: 10;
}
.save-bar__hint { font-size: .82rem; color: var(--muted); }
.save-bar__actions { display: flex; gap: 10px; align-items: center; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(7,20,92,.65);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal__card {
  max-width: 480px; width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.modal__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.8rem;
}
.modal__icon--danger { background: rgba(177,18,38,.1); color: var(--red); }
.modal__icon--info   { background: rgba(11,31,138,.1); color: var(--navy); }
.modal__icon--success{ background: rgba(45,140,80,.12); color: #2D8C50; }
.modal h3 { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; letter-spacing: .03em; }
.modal p { color: var(--muted); margin: 0 0 20px; }
.modal__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Field side-panel (for editor right column) */
.field-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
}
.field-card h4 {
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
  font-weight: 700;
}

/* =========================================================
   DUES TABLE — finance + member-private
   ========================================================= */
.dues-table {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dues-table__row {
  display: grid;
  grid-template-columns: 90px 140px 140px 140px 1fr 120px;
  gap: 14px;
  padding: 14px 22px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.dues-table__row:last-child { border-bottom: 0; }
.dues-table__row--head {
  background: var(--cream);
  font-family: var(--ui);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.dues-table__row--total {
  background: var(--navy);
  color: var(--white);
  border-bottom: 0;
}
.dues-table__row--total strong { color: var(--gold-light); }
.dues-amount {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
}
.dues-table__row--total .dues-amount {
  color: var(--gold-light);
  font-size: 1.2rem;
}
.dues-year {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.dues-receipt {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.dues-receipt:hover { border-color: var(--navy); }
.dues-receipt--empty { color: var(--muted); opacity: .6; cursor: default; }

/* Voluntary reunion contribution row */
.dues-voluntary {
  background: linear-gradient(180deg, rgba(212,160,23,.06), rgba(212,160,23,.02));
  border-top: 2px dashed rgba(212,160,23,.3);
}
.dues-voluntary-label {
  display: inline-block;
  font-family: var(--ui);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(212,160,23,.12);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Privacy notice */
.privacy-notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(212,160,23,.06), rgba(11,31,138,.04));
  border: 1px solid rgba(212,160,23,.3);
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: .9rem;
  color: var(--ink);
}
.privacy-notice__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1rem;
}
.privacy-notice strong { font-family: var(--ui); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 2px; }

/* Dues summary tile */
.dues-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.dues-summary__tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.dues-summary__tile--outstanding {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--white);
  border-color: var(--navy);
}
.dues-summary__tile--outstanding .dues-summary__label { color: var(--gold-light); }
.dues-summary__tile--outstanding .dues-summary__value { color: var(--white); }
.dues-summary__label {
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.dues-summary__value {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--navy);
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: .02em;
}
.dues-summary__sub { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.dues-summary__tile--outstanding .dues-summary__sub { color: rgba(255,255,255,.7); }

/* Logo upload preview (settings page) */
.logo-uploader {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.logo-uploader__preview {
  width: 140px; height: 140px;
  border-radius: 16px;
  background: var(--white);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  padding: 14px;
}
.logo-uploader__preview img { max-width: 100%; max-height: 100%; }

/* Small toggle */
.toggle {
  position: relative;
  display: inline-block;
  width: 42px; height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--muted);
  border-radius: 24px;
  transition: background .2s;
}
.toggle__slider::before {
  position: absolute; content: "";
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: transform .2s;
}
.toggle input:checked + .toggle__slider { background: var(--navy); }
.toggle input:checked + .toggle__slider::before { transform: translateX(18px); }
.toggle--gold input:checked + .toggle__slider { background: var(--gold); }

/* Stat tiles small (dashboard) */
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.admin-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column;
  gap: 4px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.admin-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(11,31,138,.2); }
.admin-tile__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1rem;
  margin-bottom: 6px;
}
.admin-tile__label { font-family: var(--ui); font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); font-weight: 600; }
.admin-tile__value { font-family: var(--display); font-size: 1.6rem; color: var(--navy); font-weight: 700; letter-spacing: .02em; }
.admin-tile__sub { font-size: .78rem; color: var(--muted); }
.admin-tile--alert .admin-tile__icon { background: rgba(177,18,38,.1); color: var(--red); }
.admin-tile--alert .admin-tile__value { color: var(--red); }
.admin-tile--success .admin-tile__icon { background: rgba(45,140,80,.12); color: #2D8C50; }

/* Responsive */
@media (max-width: 1024px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { position: static; }
  .editor__split { grid-template-columns: 1fr; }
  .dues-table__row { grid-template-columns: 60px 1fr 1fr auto; gap: 8px; }
  .dues-table__row > :nth-child(4),
  .dues-table__row > :nth-child(5) { display: none; }
  .dues-summary { grid-template-columns: repeat(2, 1fr); }
  .admin-tiles { grid-template-columns: repeat(2, 1fr); }
  .logo-uploader { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .admin-list__row { grid-template-columns: auto 1fr auto; }
  .admin-list__row > :nth-child(3) { display: none; }
  .dues-summary, .admin-tiles { grid-template-columns: 1fr; }
}

/* CMS list controls (search + pagination) */
.cms-controls {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
  flex-wrap: wrap;
}
.cms-controls__search { flex: 1 1 220px; max-width: 340px; }
.cms-controls__per { font-size: .82rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.cms-controls__per select { min-width: 72px; padding: 4px 8px; font-size: .82rem; }
.cms-controls__count { margin-left: auto; color: var(--muted); font-size: .82rem; }
.cms-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.cms-pager__info { color: var(--muted); font-size: .85rem; text-align: center; }
.cms-pager .btn { justify-self: end; }
.cms-pager :nth-child(1) { justify-self: start; }
.cms-pager :nth-child(3) .btn, .cms-pager :nth-child(3) { justify-self: end; }

/* Admin dashboard panels grid */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* Mobile admin drawer (burger + off-canvas sidebar) */
.admin-burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  margin-right: 10px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.admin-burger span {
  display: block; width: 20px; height: 2px;
  background: var(--navy);
  transition: transform .2s, opacity .2s;
}
.admin-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.admin-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.admin-side-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(7, 20, 92, .45);
  opacity: 0; transition: opacity .2s ease;
  z-index: 90;
}
.admin-side-scrim.is-open { opacity: 1; }

@media (max-width: 900px) {
  .admin-burger { display: inline-flex; }
  .admin-side-scrim { display: block; }
  .admin-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 320px);
    background: var(--paper, #fff);
    border-right: 1px solid var(--line);
    padding: 24px 18px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .admin-side.is-open { transform: translateX(0); }
}

/* =========================================================
   NOTIFICATIONS — bell, drawer, toasts
   ========================================================= */
.bell {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--navy);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  margin-right: 8px;
  transition: border-color .2s, background .2s, transform .2s;
}
.bell:hover { border-color: var(--navy); }
.bell.has-unread { animation: bell-shake .8s ease-in-out 1; }
@keyframes bell-shake {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}
.bell__dot {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--ui);
  font-size: .66rem;
  font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--white);
}
.bell.is-empty .bell__dot { display: none; }

.notifs {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 10px;
  min-width: 380px;
  max-width: 94vw;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s var(--ease);
  overflow: hidden;
}
.notifs.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.notifs__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.notifs__head h4 {
  font-family: var(--ui);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  font-weight: 700;
}
.notifs__head a {
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .04em;
}
.notifs__head a:hover { color: var(--red); }
.notifs__group {
  font-family: var(--ui);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 18px 4px;
  font-weight: 700;
}
.notifs__body {
  max-height: 420px;
  overflow-y: auto;
}
.notif {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none; color: inherit;
}
.notif:hover { background: var(--cream); }
.notif:last-child { border-bottom: 0; }
.notif.is-unread { background: rgba(11,31,138,.025); }
.notif.is-unread::before {
  content: "";
  position: absolute;
  margin-left: -8px;
  margin-top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.notif__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.notif__icon--gold   { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); }
.notif__icon--red    { background: rgba(177,18,38,.1); color: var(--red); }
.notif__icon--navy   { background: var(--navy); color: var(--white); }
.notif__icon--green  { background: rgba(45,140,80,.12); color: #2D8C50; }
.notif__title {
  font-family: var(--sans);
  color: var(--navy);
  font-weight: 600;
  font-size: .88rem;
  margin: 0;
  line-height: 1.3;
}
.notif__meta {
  font-size: .78rem;
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.4;
}
.notif__time {
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.notifs__empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}
.notifs__empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-deep);
  display: grid; place-items: center;
  margin: 0 auto 12px;
  font-family: var(--display);
  font-size: 1.4rem;
}

/* Toasts */
.toast-rail {
  position: fixed;
  top: 90px; right: 24px;
  display: flex; flex-direction: column;
  gap: 10px;
  z-index: 150;
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-width: 380px;
  pointer-events: auto;
  animation: toast-in .35s var(--ease);
  font-size: .9rem;
}
.toast--success { border-left-color: #2D8C50; }
.toast--warn    { border-left-color: var(--gold); }
.toast--danger  { border-left-color: var(--red); }
.toast--gold    { border-left-color: var(--gold); }
.toast__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
}
.toast--success .toast__icon { background: rgba(45,140,80,.12); color: #2D8C50; }
.toast--warn    .toast__icon { background: rgba(212,160,23,.15); color: var(--gold-deep); }
.toast--danger  .toast__icon { background: rgba(177,18,38,.1);  color: var(--red); }
.toast strong { display: block; font-family: var(--ui); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 2px; }
.toast__close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 4px;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.toast.is-out { animation: toast-out .25s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* Contextual popup — emotional, premium */
.kpopup {
  position: fixed; inset: 0;
  background: rgba(7,20,92,.55);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.kpopup.is-open { display: flex; animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.kpopup__card {
  max-width: 480px; width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: pop-in .35s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.kpopup__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 33%, var(--red) 33%, var(--red) 66%, var(--gold) 66%, var(--gold) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpopup__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream);
  border: 0;
  color: var(--navy);
  font-size: 1.1rem;
  cursor: pointer;
}
.kpopup__seal {
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 2rem;
  color: var(--gold);
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  border: 3px solid var(--gold);
  box-shadow: 0 12px 30px rgba(7,20,92,.3);
}
.kpopup__seal--gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); border-color: var(--white); box-shadow: 0 12px 30px rgba(212,160,23,.4); }
.kpopup__seal--red  { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: var(--white); border-color: var(--white); }
.kpopup h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .03em;
  margin: 0 0 10px;
}
.kpopup p { color: var(--muted); margin: 0 0 22px; }
.kpopup__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kpopup__sub { font-size: .78rem; color: var(--muted); margin-top: 16px; }

/* =========================================================
   REUNION COUNTDOWN — sticky info banner
   ========================================================= */
.countdown-banner {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  color: var(--white);
  padding: 12px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--gold);
}
.countdown-banner::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../assets/pattern.svg');
  background-size: 200px;
  opacity: .05;
}
.countdown-banner__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.countdown-banner__label {
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
}
.countdown-banner__timer {
  display: flex; gap: 8px;
}
.countdown-banner__unit {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(212,160,23,.3);
  padding: 4px 10px;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px;
}
.countdown-banner__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-light);
  line-height: 1;
}
.countdown-banner__sub {
  font-family: var(--ui);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.countdown-banner__link {
  font-family: var(--ui);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-light);
  border: 1px solid var(--gold);
  padding: 6px 14px;
  border-radius: 999px;
  transition: all .2s;
}
.countdown-banner__link:hover { background: var(--gold); color: var(--navy); }

/* =========================================================
   RSVP STATES
   ========================================================= */
.rsvp-group {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 4px;
  gap: 2px;
}
.rsvp-btn {
  font-family: var(--ui);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  transition: all .2s;
}
.rsvp-btn:hover { background: var(--cream); }
.rsvp-btn.is-active {
  background: var(--navy);
  color: var(--white);
}
.rsvp-btn--going.is-active     { background: #2D8C50; color: var(--white); }
.rsvp-btn--interested.is-active { background: var(--gold); color: var(--navy); }
.rsvp-btn--decline.is-active   { background: var(--red); color: var(--white); }

.rsvp-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rsvp-status--full { color: var(--red); }
.rsvp-status--waitlist { color: var(--gold-deep); }
.rsvp-status--open { color: #2D8C50; }

.attendee-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.attendee-preview__stack { display: flex; }
.attendee-preview__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  border: 2px solid var(--white);
  margin-left: -8px;
}
.attendee-preview__avatar:first-child { margin-left: 0; }
.attendee-preview__count {
  font-family: var(--ui);
  font-size: .8rem;
  color: var(--muted);
  font-weight: 500;
}
.attendee-preview__count strong { color: var(--navy); font-weight: 700; }

/* =========================================================
   PROFILE COMPLETION RING & ACTIVITY
   ========================================================= */
.completion-ring {
  --pct: 75;
  --size: 110px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--cream) 0);
  position: relative;
}
.completion-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--white);
}
.completion-ring__center {
  position: relative;
  z-index: 1;
  text-align: center;
}
.completion-ring__num {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.completion-ring__label {
  font-family: var(--ui);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.completion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.completion__checks {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
}
.completion__checks li {
  display: flex; gap: 8px; align-items: center;
  font-size: .85rem;
  color: var(--muted);
  font-family: var(--sans);
}
.completion__checks li.done { color: var(--ink); }
.completion__checks li.done::before { content: "✓"; color: #2D8C50; font-weight: 700; }
.completion__checks li:not(.done)::before { content: "○"; color: var(--muted); }

/* Alumni badge row */
.alumni-badges {
  display: flex; gap: 10px;
  flex-wrap: wrap;
}
.alumni-badge {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 78px;
  text-align: center;
  transition: transform .2s, border-color .2s;
}
.alumni-badge:hover { transform: translateY(-2px); border-color: var(--gold); }
.alumni-badge__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(212,160,23,.25);
}
.alumni-badge--locked .alumni-badge__icon {
  background: var(--cream);
  color: var(--muted);
  box-shadow: none;
}
.alumni-badge__label {
  font-family: var(--ui);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}
.alumni-badge--locked .alumni-badge__label { color: var(--muted); }

/* Activity feed (profile) */
.activity-feed {
  list-style: none; padding: 0; margin: 0;
}
.activity-feed li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.activity-feed li:last-child { border-bottom: 0; }
.activity-feed__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
}
.activity-feed__title { font-family: var(--sans); color: var(--navy); margin: 0; font-weight: 600; font-size: .92rem; }
.activity-feed__meta  { font-size: .8rem; color: var(--muted); margin: 2px 0 0; }
.activity-feed__time { font-family: var(--ui); font-size: .72rem; letter-spacing: .04em; color: var(--muted); }

/* Empty-state polish */
.empty--warm {
  background: linear-gradient(180deg, var(--white), rgba(212,160,23,.04));
  border-color: rgba(212,160,23,.25);
}
.empty--warm .empty__icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--navy);
  border-color: var(--white);
  box-shadow: 0 4px 14px rgba(212,160,23,.3);
}

/* Reminder banner (in-page, less heavy than popup) */
.reminder-banner {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  border: 1px solid;
}
.reminder-banner--dues {
  background: linear-gradient(135deg, rgba(177,18,38,.06), var(--white));
  border-color: rgba(177,18,38,.3);
}
.reminder-banner--birthday {
  background: linear-gradient(135deg, rgba(212,160,23,.08), var(--white));
  border-color: rgba(212,160,23,.3);
}
.reminder-banner--event {
  background: linear-gradient(135deg, rgba(11,31,138,.05), var(--white));
  border-color: rgba(11,31,138,.2);
}
.reminder-banner__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 1.2rem;
}
.reminder-banner--dues .reminder-banner__icon { background: var(--red); color: var(--white); }
.reminder-banner--birthday .reminder-banner__icon { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); }
.reminder-banner--event .reminder-banner__icon { background: var(--navy); color: var(--gold-light); }
.reminder-banner h4 { font-family: var(--serif); font-size: 1.05rem; margin: 0; color: var(--navy); }
.reminder-banner p { font-size: .85rem; color: var(--muted); margin: 2px 0 0; }
.reminder-banner__actions { display: flex; gap: 8px; align-items: center; }
.reminder-banner__dismiss {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 8px;
}

/* Payment-state mini cards */
.pay-state {
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}
.pay-state--success { background: rgba(45,140,80,.06); border-color: rgba(45,140,80,.3); }
.pay-state--pending { background: rgba(212,160,23,.06); border-color: rgba(212,160,23,.3); }
.pay-state--failed  { background: rgba(177,18,38,.06); border-color: rgba(177,18,38,.3); }
.pay-state__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 1.2rem;
}
.pay-state--success .pay-state__icon { background: #2D8C50; color: var(--white); }
.pay-state--pending .pay-state__icon { background: var(--gold); color: var(--navy); }
.pay-state--failed  .pay-state__icon { background: var(--red); color: var(--white); }
.pay-state strong { font-family: var(--serif); color: var(--navy); display: block; font-size: 1rem; }
.pay-state small { font-size: .82rem; color: var(--muted); }

/* Responsive */
@media (max-width: 1024px) {
  .notifs { right: -10px; min-width: 340px; }
  .countdown-banner__inner { gap: 12px; }
  .countdown-banner__unit { min-width: 42px; padding: 3px 8px; }
  .countdown-banner__num { font-size: .95rem; }
}
@media (max-width: 720px) {
  .toast-rail { top: 80px; right: 12px; left: 12px; }
  .toast { max-width: none; }
  .notifs { right: -50px; min-width: calc(100vw - 24px); }
  .countdown-banner__label, .countdown-banner__link { width: 100%; text-align: center; }
  .completion { grid-template-columns: 1fr; text-align: center; }
  .completion__checks { grid-template-columns: 1fr; }
  .reminder-banner { grid-template-columns: 40px 1fr; padding: 14px; }
  .reminder-banner__actions { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
}

/* =========================================================
   RECEIPT CARD (used in popups + history)
   ========================================================= */
.receipt {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 0;
  font-family: var(--sans);
}
.receipt__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px 14px;
  border-bottom: 1px dashed var(--line);
  background: linear-gradient(180deg, rgba(11,31,138,.02), transparent);
}
.receipt__brand {
  display: flex; align-items: center; gap: 12px;
}
.receipt__brand img { width: 42px; height: 42px; }
.receipt__brand strong {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
  font-size: 1rem;
  display: block;
}
.receipt__brand span {
  font-family: var(--ui);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
}
.receipt__ref { text-align: right; }
.receipt__ref small {
  font-family: var(--ui);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  font-weight: 700;
}
.receipt__ref strong {
  font-family: var(--ui);
  font-size: .82rem;
  color: var(--navy);
  letter-spacing: .04em;
  display: block;
  margin-top: 2px;
}
.receipt__body { padding: 12px 28px 8px; }
.receipt__row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(11,31,138,.06);
  font-size: .9rem;
}
.receipt__row:last-of-type { border-bottom: 0; }
.receipt__row span { color: var(--muted); }
.receipt__row strong { color: var(--navy); font-family: var(--sans); font-weight: 600; }
.receipt__voluntary {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(212,160,23,.08);
  border: 1px dashed rgba(212,160,23,.4);
  border-radius: 8px;
  font-size: .8rem;
  color: var(--gold-deep);
}
.receipt__voluntary span {
  font-family: var(--ui);
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}
.receipt__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 28px;
  background: var(--navy);
  color: var(--white);
}
.receipt__total span {
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
}
.receipt__total strong {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--gold-light);
  letter-spacing: .02em;
}
.receipt__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px;
  background: var(--cream);
  font-size: .78rem;
  color: var(--muted);
}

/* =========================================================
   TRANSACTION TIMELINE
   ========================================================= */
.txn-timeline {
  list-style: none; padding: 0; margin: 0;
}
.txn-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.txn-item:last-child { border-bottom: 0; }
.txn-item__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  background: var(--cream);
  color: var(--navy);
}
.txn-item__icon--dues     { background: rgba(11,31,138,.08); color: var(--navy); }
.txn-item__icon--donation { background: rgba(212,160,23,.12); color: var(--gold-deep); }
.txn-item__icon--project  { background: rgba(45,140,80,.12); color: #2D8C50; }
.txn-item__icon--reunion  { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); }
.txn-item__title {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  font-size: .95rem;
}
.txn-item__meta {
  font-size: .8rem;
  color: var(--muted);
  margin: 2px 0 0;
}
.txn-item__amount {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.05rem;
}
.txn-item__amount--reunion { color: var(--gold-deep); }
.txn-item__action {
  font-family: var(--ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--navy);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
}
.txn-item__action:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* =========================================================
   PAYMENT METHOD SELECTOR
   ========================================================= */
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.pay-method {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--white);
}
.pay-method:hover { border-color: var(--navy); }
.pay-method input { margin: 3px 0 0; accent-color: var(--navy); }
.pay-method.is-active {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--white), rgba(11,31,138,.04));
  box-shadow: 0 0 0 3px rgba(11,31,138,.08);
}
.pay-method__title {
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .04em;
  display: block;
}
.pay-method__sub {
  font-size: .76rem;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.pay-method__badge {
  font-family: var(--ui);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  align-self: flex-start;
}
.pay-method__badge--instant { background: rgba(45,140,80,.12); color: #2D8C50; }
.pay-method__badge--manual  { background: rgba(212,160,23,.15); color: var(--gold-deep); }

@media (max-width: 720px) {
  .receipt__head, .receipt__body, .receipt__total, .receipt__footer { padding-left: 18px; padding-right: 18px; }
  .receipt__total strong { font-size: 1.3rem; }
  .pay-methods { grid-template-columns: 1fr; }
  .txn-item { grid-template-columns: 40px 1fr auto; }
  .txn-item__action { grid-column: 2 / -1; justify-self: start; }
}

/* Utility */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .lead { margin: 0 auto; }
.row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.row-between .lead { margin: 8px 0 0; }
.divider-gold { width: 60px; height: 3px; background: var(--gold); border-radius: 3px; margin: 18px 0 22px; }
.section-head .divider-gold { margin-left: auto; margin-right: auto; }