/* ===========================================================================
   Zeta Beta Xi — collegiate design system (navy + gold)
   Placeholder-driven; swap content per README.
   =========================================================================== */

:root {
  --navy:        #0A1F44;
  --navy-2:      #12305F;
  --navy-deep:   #071634;
  --gold:        #C8A24B;
  --gold-bright: #E8C766;
  --gold-deep:   #7d5f1e;   /* darkened from #9A7628 → clears WCAG AA 4.5:1 as small text on cream/parchment */
  --cream:       #F7F5EF;
  --cream-2:     #EFEADC;
  --ink:         #12151C;
  --muted:       #5B6270;
  /* "white" is warm paper sitewide — true #fff stays only on the crest badge */
  --white:       #FBF8F1;
  --paper:       #FDFBF6;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1160px;
  --shadow: 0 18px 50px rgba(10, 31, 68, 0.16);
  --shadow-sm: 0 6px 18px rgba(10, 31, 68, 0.10);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* ---- Global themed scrollbar (applies to the page + every scroll container,
   current and future — modals, the tree viewport, dropdowns, etc.) ---------- */
/* A transparent track lets the browser's DEFAULT (white, clunky) channel show
   through in light mode — so give the track an explicit, subtle tint instead. */
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--scroll-track); }   /* Firefox */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  border: 2px solid transparent;        /* transparent inset -> slim floating pill */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  background-clip: padding-box;
}

/* ---- Kill the browser's autofill paint job ---------------------------------
   When Chrome/Safari autofills a field it slaps its own pale blue/yellow
   background and near-black text over the input, which looked white-on-dark and
   broke the theme. There's no `background` override for it — the supported route
   is a giant inset box-shadow (which paints on top) plus -webkit-text-fill-color.
   The absurd transition delay keeps it from flashing back on focus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
          box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--text);
  border: 1.5px solid var(--hairline);
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* autofilled passwords keep the gold dots */
input[type="password"]:-webkit-autofill { -webkit-text-fill-color: var(--gold); }

/* the modal's ✕ sits at the card's top-right — keep the tab row out from under it */
.pmodal .portal-tabs { padding-right: 2rem; }

/* ---- Password fields: GOLD masking dots + 🐓 hold-to-peek ------------------
   The dots take the input's own `color`, so this genuinely recolors them (the
   mask *character* itself is browser-drawn and can't be swapped for a glyph). */
input[type="password"] {
  color: var(--gold);
  letter-spacing: .2em;
  font-weight: 700;
}
input[type="password"]::placeholder { color: var(--muted); letter-spacing: normal; font-weight: 400; }

.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 3rem !important; }
.pw-peek {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--tint);
  color: var(--gold);                 /* the SVG rooster is fill=currentColor -> GOLD */
  line-height: 1; display: grid; place-items: center;
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background .12s, transform .12s, border-color .12s, color .12s;
}
.pw-peek svg { width: 20px; height: 20px; display: block; }
.pw-peek:hover { background: rgba(200,162,75,.22); border-color: var(--gold); color: var(--gold-bright); }
/* while held: button fills gold, so flip the bird to navy or it would vanish */
.pw-peek.on { background: var(--gold); border-color: var(--gold-deep); color: var(--navy-deep); transform: translateY(-50%) scale(1.08); }

/* ---- Chapter-title request (profile) ---- */
.title-req {
  margin-top: .5rem; padding: .6rem .75rem; border-radius: 10px;
  font-size: .88rem; border: 1px solid var(--hairline); background: var(--tint); color: var(--heading);
}
.title-req span { display: block; margin-top: .2rem; color: var(--muted); font-size: .8rem; }
.title-req--wait { border-color: rgba(200,162,75,.5); }
.title-req--no { border-color: rgba(180,52,43,.4); background: rgba(180,52,43,.07); color: #b4342b; }
.title-req-open { margin-top: .5rem; }
.title-req-open > summary {
  cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--gold-deep);
  padding: .5rem .75rem; border: 1px dashed var(--gold); border-radius: 10px; background: var(--tint);
  list-style: none;
}
.title-req-open > summary::-webkit-details-marker { display: none; }
.title-req-open > summary:hover { background: rgba(200,162,75,.18); }
.title-req-open[open] > summary { border-style: solid; margin-bottom: .7rem; }
.title-req-form { padding: .2rem .1rem; }

/* ---- Account: sign-in email + two-step destructive confirm ---- */
.acct-email {
  margin: 0 0 .9rem; font-family: var(--sans); font-weight: 600; color: var(--heading);
  background: var(--tint); border: 1px solid var(--hairline); border-radius: 10px;
  padding: .65rem .8rem; word-break: break-all;
}
/* Cloudflare Turnstile widget holder on the auth forms. Collapses to nothing
   when empty (widget disabled or not yet mounted) so there's no phantom gap. */
.ts-holder { margin: .2rem 0 .9rem; }
.ts-holder:empty { margin: 0; }
/* Two-factor (2FA) enrollment UI */
.mfa-qr { margin: .6rem 0; }
.mfa-qr img { width: 180px; height: 180px; max-width: 100%; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--hairline); }
.mfa-secret { margin: .2rem 0 .6rem; font-size: .85rem; }
.mfa-secret code { background: var(--tint); border: 1px solid var(--hairline); border-radius: 6px; padding: .15rem .4rem; word-break: break-all; letter-spacing: .05em; }
.mfa-on { margin: 0 0 .8rem; color: var(--heading); font-weight: 600; }
.danger-confirm {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 12px;
  background: rgba(180,52,43,.08); border: 1px solid rgba(180,52,43,.35);
}
.danger-confirm p { margin: 0 0 .5rem; color: #b4342b; }
.danger-confirm ul { margin: 0 0 .9rem; padding-left: 1.1rem; color: var(--text); font-size: .9rem; line-height: 1.7; }
.danger-confirm .field { margin-bottom: .8rem; }
.danger-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn--danger { background: #b4342b; color: #fff; }
.btn--danger:hover:not(:disabled) { background: #9a2b23; transform: translateY(-2px); }
.btn--danger:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Global file-input styling: turn the generic "Choose File" button into a
   gold pill site-wide (applies to every current/future <input type=file>) ---- */
input[type="file"] { font-family: var(--sans); font-size: .88rem; color: var(--muted); cursor: pointer; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: var(--sans); font-weight: 600; font-size: .85rem; letter-spacing: .01em;
  color: var(--navy-deep); background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 0; border-radius: 999px; padding: .5rem 1.15rem; margin-right: .9rem; cursor: pointer;
  transition: box-shadow .15s, transform .15s, filter .15s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  box-shadow: 0 6px 16px rgba(200,162,75,.4); transform: translateY(-1px); filter: brightness(1.04);
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Keyboard skip link (injected by a11y.js) — off-screen until focused. */
.skip-link { position: fixed; left: .5rem; top: -3rem; z-index: 3000; background: var(--gold); color: var(--navy-deep); padding: .65rem 1.1rem; border-radius: 0 0 10px 10px; font-weight: 700; font-size: .9rem; transition: top .15s; }
.skip-link:focus { top: 0; outline: 2px solid var(--navy-deep); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 .4em; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--heading); }
p { margin: 0 0 1em; }

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy .section-title { color: var(--gold-bright); }
.section--cream2 { background: var(--bg-2); }
.center { text-align: center; }

/* Eyebrow + gold rule */
.eyebrow {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .8rem;
}
.section--navy .eyebrow { color: var(--gold-bright); }
.rule { width: 74px; height: 3px; background: var(--gold); border: 0; margin: 1.1rem 0; }
.center .rule { margin-inline: auto; }
.lede { font-size: 1.18rem; color: var(--muted); max-width: 60ch; }
.section--navy .lede { color: var(--on-dark); }
.center .lede { margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-block; font-weight: 600; font-size: .98rem;
  padding: .85rem 1.7rem; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep); box-shadow: 0 10px 24px rgba(200,162,75,.35); }
.btn--gold:hover { box-shadow: 0 14px 30px rgba(200,162,75,.5); transform: translateY(-2px); }
/* Soft gold fill so the secondary button reads as a solid pill, not a washed
   outline; hover still fills solid gold. */
.btn--ghost { border-color: var(--gold); color: var(--gold-bright); background: rgba(200,162,75,.12); }
.btn--ghost:hover { background: var(--gold); color: var(--navy-deep); }
.btn--navy { background: var(--navy); color: var(--on-navy); }
.btn--navy:hover { background: var(--navy-2); transform: translateY(-2px); }

/* ---------- Header / nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(var(--chrome), 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200,162,75,.28);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--on-navy); }
.brand img { height: 42px; width: auto; }
.brand__txt { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.brand__txt small { display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .25em; color: var(--gold-bright); font-weight: 600; }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { color: var(--on-navy-2); font-size: .92rem; font-weight: 500; letter-spacing: .02em; transition: color .15s; }
.nav__links a:hover { color: var(--gold-bright); }
.nav__cta { padding: .55rem 1.2rem; font-size: .88rem; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--gold-bright); margin: 5px 0; transition: .25s; }

/* Account indicator (top-right) */
.nav__account { display: flex; align-items: center; position: relative; }
.nav__chip {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  background: rgba(200,162,75,.10); border: 1.5px solid rgba(200,162,75,.5);
  color: var(--on-navy); border-radius: 999px; padding: .32rem .7rem .32rem .35rem;
  font-family: var(--sans); font-size: .9rem; transition: background .15s, border-color .15s;
}
.nav__chip:hover { background: rgba(200,162,75,.2); border-color: var(--gold); }
.nav__avatar {
  position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .95rem;
}
.nav__chip-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nav__caret { color: var(--gold-bright); font-size: .7rem; }
.admin-badge {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep);
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; padding: .12rem .4rem; border-radius: 5px;
}
.nav__menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 232px;
  background: #0c2350; border: 1px solid rgba(200,162,75,.35); border-radius: 12px;
  padding: .5rem; z-index: 120; box-shadow: 0 18px 44px rgba(0,0,0,.5);
  display: none;
}
.nav__menu.open { display: block; }
.nav__menu-head { padding: .5rem .6rem .7rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .4rem; }
.nav__menu-head b { display: block; color: var(--on-navy); font-family: var(--display); font-size: 1rem; }
.nav__menu-head span { display: block; color: var(--on-dark); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
.nav__menu-head .admin-badge { display: inline-block; margin-top: .45rem; }
.nav__menu a, .nav__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--on-navy-2); font-family: var(--sans); font-size: .9rem; padding: .6rem .6rem; border-radius: 8px; transition: background .12s, color .12s;
}
.nav__menu a:hover, .nav__menu button:hover { background: rgba(200,162,75,.12); color: var(--gold-bright); }
.nav__menu-admin { color: var(--gold-bright) !important; font-weight: 600; }
.nav__menu-divider { height: 1px; background: rgba(255,255,255,.08); margin: .4rem 0; }
.nav__menu-signout:hover { background: rgba(180,52,43,.18) !important; color: #ff9c93 !important; }

/* "Brothers Only" — expands in place to the members-only surfaces */
.nav__sub-toggle {
  display: flex; align-items: center; gap: .65rem; width: calc(100% - .9rem);
  margin: 0 .45rem; padding: .6rem .55rem; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--gold-bright); font-family: var(--sans); font-size: .9rem; font-weight: 600;
  text-align: left; transition: background .12s;
}
.nav__sub-toggle i { font-style: normal; flex: none; width: 22px; text-align: center; }
.nav__sub-toggle:hover { background: rgba(200,162,75,.12); }
.nav__sub-caret { font-style: normal; margin-left: auto; font-size: .7rem; transition: transform .2s; }
.nav__sub-toggle[aria-expanded="true"] .nav__sub-caret { transform: rotate(180deg); }
.nav__sub { display: none; margin: .1rem .45rem .2rem; padding-left: .6rem; border-left: 2px solid rgba(200,162,75,.3); }
.nav__sub.open { display: block; }
.nav__sub a { font-size: .86rem; padding: .45rem .5rem; }

/* Log in / Sign up CTA + its dropdown */
.nav__login-btn { display: inline-flex; align-items: center; gap: .4rem; }
.nav__login-btn .nav__caret { color: var(--navy-deep); font-size: .62rem; transition: transform .2s; }
.nav__login-btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__menu--login { width: 262px; padding: .4rem; }
.nav__menu--login a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; margin: .12rem 0; border-radius: 11px; line-height: 1.2;
}
.nav__login-ic {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  background: rgba(200,162,75,.14); border: 1px solid rgba(200,162,75,.32);
  transition: background .12s, border-color .12s;
}
.nav__login-txt { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.nav__login-txt b { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--on-navy); letter-spacing: .01em; }
.nav__login-txt small { font-size: .74rem; color: var(--on-dark); opacity: .72; white-space: nowrap; }
.nav__menu--login a:hover .nav__login-ic { background: rgba(200,162,75,.28); border-color: var(--gold); }
.nav__menu--login a:hover .nav__login-txt small { opacity: .95; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--on-navy); padding-top: 72px; overflow: hidden;
}
/* Smooth navy field with warm gold accent glows on both sides. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 70% at 26% 42%, rgba(200,162,75,.30), rgba(200,162,75,0) 60%),
    radial-gradient(90% 80% at 96% 8%, rgba(232,199,102,.16), rgba(232,199,102,0) 55%),
    radial-gradient(140% 120% at 50% 120%, var(--navy-2), rgba(18,48,95,0) 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%);
}
/* Two columns: crest on the left, text on the right — no overlap. */
.hero__inner {
  position: relative; z-index: 2; width: min(var(--wrap), 92vw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.hero__crest-col { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* "est. 1993" was baked into the crest art, inline with the bead arc — black on
   navy, so it vanished once the white background came off. It's painted out of
   the PNG (arc closed with matching beads) and set as real text here instead. */
.hero__est {
  /* Same box as the crest image, so the two centres coincide exactly. */
  display: block; width: 100%; max-width: 460px;
  margin: -.4rem auto 0; text-align: center;
  font-family: var(--display); font-weight: 700;
  color: var(--gold-bright); font-size: 1.05rem;
  /* letter-spacing also trails the LAST glyph, which drags centred text left by
     half a space; an equal text-indent restores true optical centring. */
  letter-spacing: .42em; text-indent: .42em;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  animation: heroCrestIn 1s cubic-bezier(.2,.7,.2,1) both;
}
@media (max-width: 820px) { .hero__est { font-size: .9rem; letter-spacing: .34em; text-indent: .34em; } }
/* crest-hero.webp has its white background cut out, so the crest floats straight
   on the navy hero — no plate, no rectangle. */
.hero__crest-img {
  width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.5));
  animation: heroCrestIn 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroCrestIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.hero__text { text-align: left; }
.hero__kicker { font-size: .82rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.6); margin: 0 0 .4rem; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; margin: .2rem 0 0; text-shadow: 0 4px 24px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.85); }
.hero h1 .amp { color: var(--gold-bright); font-style: italic; }
/* Stronger gold accent under the headline. */
.hero__rule { border: 0; height: 3px; width: 96px; margin: 1.2rem 0 1.3rem;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
  border-radius: 3px; box-shadow: 0 0 18px rgba(232,199,102,.45); }
.hero__tag { font-size: clamp(1.02rem, 1.7vw, 1.3rem); max-width: 46ch; margin: 0 0 2rem; color: var(--on-navy-2); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Stack on narrower screens: crest on top, text centered below. */
@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  .hero__crest-img { max-width: 300px; }
  .hero__text { text-align: center; }
  .hero__rule { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  /* Breathing room so the CTA doesn't crowd the cream section below. */
  .hero { padding-bottom: clamp(2.75rem, 7vh, 4.5rem); }
  /* Mobile Safari rasterises `filter: drop-shadow()` to the element's BOX rather
     than to the PNG's alpha, which drew a faint rectangular edge under the crest
     (invisible on desktop). The crest reads fine on navy unaided — drop the
     filter on phones in BOTH themes so no box can be painted. */
  .hero__crest-img,
  :root[data-theme="dark"] .hero__crest-img { filter: none; }
}

/* ---------- About / values ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.founding-note { background: var(--navy); color: var(--on-navy); border-radius: var(--radius); padding: 2rem 2.2rem; box-shadow: var(--shadow); border: 1px solid rgba(200,162,75,.3); }
.founding-note h3 { color: var(--gold-bright); font-size: 1.5rem; }
.stat-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.stat { }
.stat b { display: block; font-family: var(--display); font-size: 2.4rem; color: var(--gold-bright); line-height: 1; }
.stat span { font-size: .82rem; letter-spacing: .06em; color: var(--on-dark); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.value { background: var(--surface); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); border-top: 4px solid var(--gold); }
.value h3 { color: var(--heading); font-size: 1.35rem; }
.value p { color: var(--muted); margin: 0; font-size: .98rem; }

/* Badges */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
.badge { text-align: center; }
.badge__seal {
  width: 92px; height: 92px; margin: 0 auto .8rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep));
  display: grid; place-items: center; color: var(--navy-deep); font-size: 2rem;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.3); border: 3px solid var(--gold-bright);
}
.badge b { display: block; color: var(--gold-bright); font-family: var(--display); font-size: 1rem; }
.badge span { font-size: .74rem; color: var(--on-dark); letter-spacing: .05em; }

/* ---------- Brotherhood / flip cards ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.6rem; }
.flip { perspective: 1200px; aspect-ratio: 4/5; }
.flip__inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.flip:hover .flip__inner, .flip:focus-within .flip__inner, .flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.flip__front { background: var(--navy-2); }
.flip__front img { width: 100%; height: 100%; object-fit: cover; }
.flip__name { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem; background: linear-gradient(transparent, rgba(var(--chrome),.92)); color: var(--on-navy); }
.flip__name b { font-family: var(--display); font-size: 1.1rem; display: block; }
.flip__name span { font-size: .78rem; color: var(--gold-bright); letter-spacing: .04em; }
.flip__back { background: var(--navy); color: var(--on-navy); transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; border: 2px solid var(--gold); }
.flip__back .role { color: var(--gold-bright); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .74rem; }
.flip__back .quote { font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; margin-top: .5rem; }
.flip__back .meta { margin-top: auto; font-size: .82rem; color: var(--on-dark); }
.eboard-label { margin-top: 2.4rem; }

/* ---------- Rush ---------- */
.rush-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.steps { list-style: none; padding: 0; margin: 1.4rem 0 0; counter-reset: s; }
.steps li { position: relative; padding: 0 0 1.4rem 3.2rem; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--gold); color: var(--navy-deep); font-weight: 700; display: grid; place-items: center; font-family: var(--display); }
.steps li b { display: block; color: var(--heading); font-family: var(--display); font-size: 1.15rem; }
.section--navy .steps li b { color: var(--gold-bright); }
.steps li p { margin: .15rem 0 0; color: var(--muted); font-size: .95rem; }
.section--navy .steps li p { color: var(--on-dark); }

/* ---------- Forms ---------- */
.card-form { background: var(--surface); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); border-top: 5px solid var(--gold); }
.section--navy .card-form { color: var(--text); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--heading); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--hairline); border-radius: 10px;
  font-family: var(--sans); font-size: .98rem; background: var(--bg); transition: border .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,75,.25); }
.field textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.form-status { margin-top: 1rem; font-weight: 600; display: none; }
.form-status.ok { display: block; color: #1c7a41; }
.form-status.err { display: block; color: #b4342b; }
.btn[disabled] { opacity: .6; cursor: default; }

/* ---------- Alumni ---------- */
.alumni-cta { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.give-card { background: linear-gradient(160deg, var(--navy-2), var(--navy-deep)); border: 1px solid rgba(200,162,75,.4); border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow); }
.give-card h3 { color: var(--gold-bright); font-size: 1.7rem; }

/* ---------- Events ---------- */
.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
.event { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.event:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.event img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.event__body { padding: 1.3rem 1.4rem 1.6rem; }
.event__tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.event h3 { color: var(--heading); font-size: 1.3rem; margin: .3rem 0 .4rem; }
.event p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; }
.gallery button { padding: 0; border: 0; cursor: pointer; background: none; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .35s; }
.gallery button:hover img { transform: scale(1.06); }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(var(--chrome),.94); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; border: 3px solid var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(200,162,75,.15); color: var(--gold-bright); border: 1.5px solid var(--gold); border-radius: 999px; cursor: pointer; font-size: 1.4rem; width: 52px; height: 52px; display: grid; place-items: center; transition: background .15s; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); color: var(--navy-deep); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav.prev { left: 20px; } .lightbox__nav.next { right: 20px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
.socials { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.4rem; }
.social { display: flex; align-items: center; gap: .8rem; color: var(--on-navy); padding: .8rem 1rem; border: 1px solid rgba(200,162,75,.35); border-radius: 12px; transition: background .15s, border .15s; }
.social:hover { background: rgba(200,162,75,.12); border-color: var(--gold); }
.social .ic { width: 34px; height: 34px; display: grid; place-items: center; background: var(--gold); color: var(--navy-deep); border-radius: 8px; font-weight: 700; flex: none; }
.social b { display: block; } .social span { font-size: .82rem; color: var(--on-dark); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: var(--on-dark); padding: 3rem 0 2rem; text-align: center; }
.footer img { height: 74px; margin: 0 auto 1rem; }
.footer__nav { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0; }
.footer__nav a { color: var(--on-dark); font-size: .9rem; }
.footer__nav a:hover { color: var(--gold-bright); }
.footer small { display: block; margin-top: 1rem; color: var(--on-navy-3); font-size: .8rem; }
.footer .motto { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-bright); }

/* ---------- Admin: tabs, search, edit modal ---------- */
/* (.btn--danger consolidated at the top button block — the duplicate here had an
   unguarded :hover that lifted/darkened even disabled buttons.) */

.admin-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.admin-tabs button {
  background: var(--surface); border: 1.5px solid var(--hairline); color: var(--muted);
  border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.admin-tabs button.on { background: var(--navy); color: var(--on-navy); border-color: var(--heading); }
.tab-count { display: inline-block; min-width: 1.4em; text-align: center; font-size: .75rem; background: rgba(200,162,75,.25); color: inherit; border-radius: 999px; padding: 0 .35em; margin-left: .2em; }
.admin-tabs button.on .tab-count { background: rgba(255,255,255,.2); }
.admin-search {
  width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--hairline); border-radius: 12px;
  font-family: var(--sans); font-size: .95rem; background: var(--surface); margin-bottom: 1.2rem;
}
.admin-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,75,.22); }

.admin-modal { position: fixed; inset: 0; z-index: 220; background: rgba(var(--chrome),.85); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 4vw; overflow-y: auto; }
.admin-modal.open { display: flex; }
.admin-modal__card { background: var(--bg); color: var(--text); border-radius: 16px; width: min(560px, 96vw); padding: 2rem; position: relative; border-top: 6px solid var(--gold); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.admin-modal__card h3 { color: var(--heading); margin-top: 0; }
/* Import preview: the default 560px card puts Apply off-screen behind 300+ rows,
   and the backdrop is the scroller, so the list needs its own.
   Navy, not the default cream: the preview's body copy (.admin-hint, .cls-sum) is
   --on-dark text designed for the navy console and disappears on a light card.
   Same committed navy+gold in both themes as the rest of the console. */
.admin-modal__card--wide {
  width: min(860px, 96vw);
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: var(--on-navy);
  border: 1px solid rgba(200,162,75,.28);
}
.admin-modal__card--wide h3 { color: var(--gold-bright); }
.admin-modal__card--wide .admin-modal__close { color: var(--on-navy); }
/* The one-line-of-text ask modal (ask-modal.js): a narrow navy card. */
.admin-modal__card--ask {
  width: min(460px, 96vw);
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: var(--on-navy);
  border: 1px solid rgba(200,162,75,.28);
}
.admin-modal__card--ask h3 { color: var(--gold-bright); }
.admin-modal__card--ask .admin-modal__close { color: var(--on-navy); }
.ask-rows { margin: 0 0 1rem; font-size: .9rem; }
.ask-rows div { display: flex; gap: .6rem; }
.ask-rows span { min-width: 7.5em; color: var(--on-dark); }
.ask-rows b { color: var(--on-navy); font-weight: 600; }
.ask-input { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(200,162,75,.4); border-radius: 10px; padding: .65rem .8rem; color: var(--on-navy); font: inherit; }
.ask-input:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(200,162,75,.22); }
.ask-warn { margin: .7rem 0 0; font-size: .85rem; color: var(--gold-bright); }
.ask-body { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.5; color: var(--on-navy); }
.ask-body b, .ask-body strong { color: var(--gold-bright); font-weight: 600; }
.ask-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }

.imp-list { max-height: 46vh; overflow-y: auto; margin: .5rem 0 1rem; }
/* A decided conflict quiets down so the undecided ones stand out. */
.admin-row--decided { opacity: .6; }
.admin-row--decided .admin-row__info span b { color: var(--gold-bright); }
.admin-modal__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 1.3rem; color: var(--muted); cursor: pointer; }
.admin-modal__card .field label { color: var(--heading); }

/* ---------- Privacy "locked" states ---------- */
.flip__locked { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: .5rem; text-align: center; padding: 1rem; color: var(--on-dark); }
.flip__lock-ic { font-size: 1.6rem; }
.bm__locked { margin-top: 1rem; padding: 1.1rem; background: rgba(10,31,68,.05); border: 1px dashed rgba(10,31,68,.25); border-radius: 12px; text-align: center; }
.bm__locked b { display: block; color: var(--heading); font-family: var(--display); font-size: 1.1rem; margin: .2rem 0; }
.bm__locked span { display: block; color: var(--muted); font-size: .9rem; margin-bottom: .8rem; }
.bm__locked .btn { padding: .5rem 1.2rem; font-size: .9rem; }
.bm__loading { color: var(--muted); text-align: center; padding: 1rem; }
.bm__bio { color: var(--text); font-size: .95rem; margin-top: 1rem; }

/* ---------- Brotherhood directory cards (homepage) ---------- */
.dir-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.6rem; }
.dir-card {
  display: block; background: var(--surface); border-radius: var(--radius); padding: 2.2rem;
  box-shadow: var(--shadow-sm); border-top: 5px solid var(--gold); transition: transform .18s, box-shadow .2s;
}
.dir-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dir-card__ic { font-size: 2rem; display: block; margin-bottom: .6rem; }
.dir-card b { font-family: var(--display); font-size: 1.5rem; color: var(--heading); display: block; }
.dir-card__count { display: inline-block; min-height: 1.2em; color: var(--gold-deep); font-weight: 700; font-size: .9rem; margin: .2rem 0 .5rem; }
.dir-card p { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; }
.dir-card__go { color: var(--gold-deep); font-weight: 600; font-size: .92rem; }

/* ---------- Subpages (active/alumni) ---------- */
.page-body { background: var(--bg); }
.page-main { padding-top: 72px; }
.page-hero { background: var(--navy); color: var(--on-navy); padding: clamp(3rem, 7vw, 5rem) 0; }
.page-hero .lede { color: var(--on-dark); }
#pageCount { color: var(--gold-bright); font-weight: 600; }

/* ---------- Legal pages (privacy, terms) — readable long-form prose ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { font-family: var(--display); color: var(--heading); font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2.6rem 0 .9rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-family: var(--sans); color: var(--heading); font-size: 1.05rem; font-weight: 700; margin: 1.7rem 0 .5rem; }
.legal p, .legal li { color: var(--text); line-height: 1.75; font-size: 1.02rem; }
.legal p { margin: 0 0 1.05rem; }
.legal ul { margin: .3rem 0 1.2rem; padding-left: 1.25rem; }
.legal li { margin: 0 0 .55rem; }
.legal strong { color: var(--heading); font-weight: 700; }
.legal a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .legal a { color: var(--gold-bright); }
/* Data-request CTA — beats the .legal a link styling in both themes (fixed gold button, dark text) */
.legal a.legal-cta,
:root[data-theme="dark"] .legal a.legal-cta {
  display: inline-block; text-decoration: none; color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  font-weight: 700; padding: .7rem 1.15rem; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(200,162,75,.35);
}
.legal a.legal-cta:hover { box-shadow: 0 14px 30px rgba(200,162,75,.5); transform: translateY(-1px); }
.legal-updated { color: var(--muted); font-size: .95rem; margin: -.4rem 0 2.2rem; }
.legal-note { background: var(--bg-2); border-left: 3px solid var(--gold); padding: 1rem 1.2rem; border-radius: 8px; margin: 0 0 2rem; }
.legal-note p:last-child { margin-bottom: 0; }
.footer__disclaimer { display: block; max-width: 640px; margin: .7rem auto 0; font-size: .72rem; line-height: 1.55; opacity: .7; }
.footer__legal { display: block; margin-top: .55rem; font-size: .82rem; }
.footer__legal a { color: var(--gold-bright); text-decoration: none; margin: 0 .3rem; }
.footer__legal a:hover { text-decoration: underline; }
.nav__links a.on { color: var(--gold-bright); font-weight: 700; }
.page-empty { color: var(--muted); padding: 1.4rem 0; }

/* minmax(0,1fr), not bare 1fr: a plain 1fr track keeps its min-content floor,
   so one card with a long unbreakable line (name · title · company) silently
   widens its whole column — the "some cards are wider" bug. */
.eb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.eb-card {
  background: var(--surface); border: 0; border-radius: var(--radius); padding: 1.6rem 1rem; text-align: center;
  box-shadow: var(--shadow-sm); border-top: 4px solid var(--gold); cursor: pointer; transition: transform .15s, box-shadow .2s;
  font-family: var(--sans);
}
.eb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.eb-card__av { position: relative; overflow: hidden; width: 64px; height: 64px; margin: 0 auto .7rem; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.eb-card b { display: block; font-family: var(--display); color: var(--heading); font-size: 1.1rem; }
.eb-card__role { display: block; color: var(--gold-deep); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; margin: .25rem 0; }
.eb-card small { color: var(--muted); font-size: .78rem; }

.bro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
.bro-card {
  display: flex; align-items: center; gap: .8rem; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--hairline); border-radius: 12px; padding: .8rem .9rem;
  font-family: var(--sans); transition: border-color .15s, box-shadow .15s, transform .12s;
}
.bro-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
/* No overflow:hidden here — the __dot badge overhangs the circle by design;
   the absolutely-pinned img (below) is what keeps the photo a true circle. */
.bro-card__av { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--navy-2); color: var(--on-dark); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .95rem; }
.bro-card--live .bro-card__av { background: var(--navy); color: var(--gold-bright); }
.bro-card__dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-bright); border: 2px solid var(--white); }
.bro-card__meta { min-width: 0; }
.bro-card__meta b { display: block; color: var(--heading); font-family: var(--display); font-size: 1.02rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bro-card__meta small { color: var(--muted); font-size: .76rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bro-card__tag { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--gold-deep); }
.bro-card__tag--off { color: var(--muted); font-weight: 500; }
.bro-card--live { border-color: rgba(200,162,75,.55); }

/* ---------- Tree: legend, toggles, registration colors ---------- */
.tree-legend { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; color: var(--muted); font-size: .85rem; }
.tree-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.tree-legend .dot--reg { background: var(--gold); box-shadow: 0 0 0 2px rgba(200,162,75,.3); }
.tree-legend .dot--unreg { background: var(--navy-2); }
.tree-legend .dot--chev { width: auto; height: auto; border-radius: 6px; background: var(--surface); border: 1px solid var(--hairline); padding: 0 .4rem; font-size: .75rem; color: var(--gold-deep); font-weight: 700; }
.tree-toggle {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  background: var(--gold); color: var(--navy-deep); border-radius: 999px; padding: .1rem .55rem;
  font-size: .72rem; font-weight: 800; box-shadow: var(--shadow-sm); white-space: nowrap; z-index: 3;
}
.tree-toggle:hover { background: var(--gold-bright); }
.tree-node--reg { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,75,.25), var(--shadow-sm); }
.tree-node--reg .tree-node__av { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep); }

/* ---------- Portal: claim chooser ---------- */
.portal-choose h3, .portal-claim h3 { color: var(--heading); font-family: var(--display); text-align: center; }
.portal-choice {
  display: block; width: 100%; text-align: left; background: var(--bg); border: 1.5px solid var(--hairline);
  border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .8rem; cursor: pointer; font-family: var(--sans);
  transition: border-color .15s, background .15s;
}
.portal-choice:hover { border-color: var(--gold); background: var(--tint); }
.portal-choice b { display: block; color: var(--heading); font-size: 1rem; }
.portal-choice span { color: var(--muted); font-size: .85rem; }
.claim-list { max-height: 300px; overflow-y: auto; }
.claim-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
  background: var(--bg); border: 1.5px solid var(--hairline); border-radius: 10px; padding: .7rem .9rem;
  margin-bottom: .5rem; cursor: pointer; font-family: var(--sans); text-align: left;
}
.claim-row:hover { border-color: var(--gold); }
.claim-row b { color: var(--heading); }
.claim-row span { color: var(--muted); font-size: .8rem; flex: none; }

/* ---------- Real crest badge (white-background art framed on navy) ---------- */
.crest-badge { background: var(--surface); border-radius: 10px; padding: 3px; border: 1.5px solid var(--gold); box-shadow: 0 5px 16px rgba(0,0,0,.3); object-fit: contain; }
.brand .crest-badge { border-radius: 8px; padding: 2px; }
.footer .crest-badge { border-radius: 14px; padding: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .rush-grid, .alumni-cta, .contact-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .badges { grid-template-columns: repeat(2, 1fr); }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .events { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .dir-cards { grid-template-columns: 1fr; }
  .eb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bro-grid, .eb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nav__links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(var(--chrome),.98); padding: 1rem 0; border-bottom: 1px solid rgba(200,162,75,.3);
    transform: translateY(-140%); transition: transform .3s; align-items: stretch;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: .9rem 8vw; }
  .nav__links .nav__cta { margin: .6rem 8vw; text-align: center; }
  .nav__toggle { display: block; }
  .nav__account { margin-left: auto; margin-right: .6rem; }
  .nav__chip-name { max-width: 92px; }
  .form-row { grid-template-columns: 1fr; }
  .stat-row { gap: 1.6rem; }
}
@media (max-width: 460px) {
  .badges, .grid-cards, .gallery { grid-template-columns: 1fr 1fr; }
  .nav__chip-name { display: none; }
}

/* ---------- Family tree ---------- */
.tree-shell { position: relative; }
.tree-viewport {
  position: relative; height: min(56vh, 480px); background:
    radial-gradient(circle at 50% 0%, #fffdf7, var(--cream-2));
  border: 1px solid rgba(10,31,68,.12); border-radius: var(--radius);
  overflow: hidden; cursor: grab; box-shadow: inset 0 2px 20px rgba(10,31,68,.06);
  /* The tree owns touch: one finger pans, two fingers pinch. (A `pan-y` here let
     the BROWSER claim vertical movement, which fought our pinch handler and made
     two-finger gestures slide only left/right.) Desktop wheel is gated separately
     in family-tree.js so the page still scrolls. */
  touch-action: none;
}
/* keep the container off the screen edge on phones so a thumb doesn't land in it */
@media (max-width: 760px) {
  .tree-shell { margin-inline: 6px; }
  .tree-viewport { height: min(50vh, 420px); }
}
.tree-viewport.grabbing { cursor: grabbing; }
.tree-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.tree-links { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.tree-links path { fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: .55; }
.tree-node {
  position: absolute; display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem;
  background: var(--surface); border: 2px solid var(--navy); border-radius: 12px; cursor: pointer;
  box-shadow: var(--shadow-sm); text-align: left; transition: transform .12s, box-shadow .2s, border-color .2s;
}
.tree-node:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 24px rgba(200,162,75,.35); z-index: 5; }
.tree-node__av { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: var(--navy); color: var(--gold-bright); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.tree-node__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tree-node__meta { overflow: hidden; }
.tree-node__meta b { display: block; font-family: var(--display); font-size: 1.04rem; color: var(--heading); line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tree-node__meta small { color: var(--gold-deep); font-size: .8rem; }
.tree-controls { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; gap: .4rem; }
.tree-controls button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(10,31,68,.15); background: var(--surface); color: var(--heading); font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s; }
.tree-controls button:hover { background: var(--gold); color: var(--navy-deep); }
.tree-hint { text-align: center; color: var(--muted); font-size: .82rem; margin-top: .9rem; }

/* Brother modal */
.bmodal { position: fixed; inset: 0; z-index: 1400; background: rgba(var(--chrome),.9); display: none; align-items: center; justify-content: center; padding: 5vw; } /* above the fullscreen tree shell (z-index 1300) so brother cards open on top */
.bmodal.open { display: flex; }
/* max-height + overflow are what let a long bio scroll INSIDE the card. Without
   them the card grew past the viewport on a phone and could not be scrolled. */
.bmodal__card { background: var(--bg); border-radius: 18px; width: min(440px, 94vw); padding: 2rem; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.5); border-top: 6px solid var(--gold); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) {
  .bmodal { align-items: flex-start; padding: 3vh 3vw; }   /* tall cards start at the top instead of being clipped both ends */
  .bmodal__card { max-height: 92vh; padding: 1.5rem 1.25rem; }
}
/* while any full-screen popup is open, don't let the PAGE scroll behind it */
body.modal-open { overflow: hidden; }
.bmodal__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 1.3rem; color: var(--muted); cursor: pointer; }
.bmodal__head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.2rem; }
.bmodal__avatar { position: relative; width: 76px; height: 76px; flex: none; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.5rem; overflow: hidden; }
.bmodal__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bmodal__head h3 { color: var(--heading); margin: 0; font-size: 1.5rem; }
.bmodal__sub { margin: 0; color: var(--gold-deep); font-weight: 600; font-size: .9rem; }
.bmodal__body .bm__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(10,31,68,.08); font-size: .95rem; }
.bmodal__body .bm__row span { color: var(--muted); }
.bmodal__body .bm__row b { color: var(--heading); text-align: right; }
.bmodal__body .bm__quote { font-family: var(--serif); font-size: 1.2rem; color: var(--heading); margin-top: 1rem; }

/* ---------- Brother portal ---------- */
.portal-wrap { max-width: 560px; margin-inline: auto; }
.portal-tabs { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.portal-tabs button { flex: 1; padding: .7rem; border: 1.5px solid var(--hairline); background: var(--bg); border-radius: 10px; font-weight: 600; cursor: pointer; color: var(--muted); }
.portal-tabs button.on { background: var(--navy); color: var(--on-navy); border-color: var(--heading); }
.portal-msg { text-align: center; padding: 1.5rem 1rem; }
.portal-msg__ic { font-size: 2.6rem; margin-bottom: .5rem; }
.portal-msg h3 { color: var(--heading); }
.portal-msg p { color: var(--muted); }
.portal-live { color: #1c7a41; font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
.portal-signout { display: block; margin: 1rem auto 0; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .85rem; }

/* Shared back-navigation pill — the consoles' "← Back to site", the admin
   class drill, the board's "← Back to …" and the portal's back/cancel steps.
   Navy + gold hairline reads on both cream pages and the navy consoles. */
.back-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--navy); color: var(--gold-bright);
  border: 1px solid rgba(200,162,75,.5); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: border-color .15s, transform .15s;
}
.back-pill:hover { border-color: var(--gold-bright); transform: translateY(-1px); }
.back-pill--center { display: flex; width: max-content; margin: 1.1rem auto 0; }

/* ---------- Admin page ---------- */
.admin-body { background: var(--navy-deep); color: var(--on-navy); min-height: 100vh; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem,5vw,3rem); border-bottom: 1px solid rgba(200,162,75,.3);
  position: sticky; top: 0; z-index: 50; background: var(--navy-deep); }
.admin-topbar .brand img { height: 40px; }
.admin-wrap { width: min(1180px, 96vw); margin: 2.5rem auto; }

/* ============================================================================
   CONSOLE MASTHEAD — the "chapter registry" signature. Full on the landing
   view; collapses to a slim bar (.is-slim) once you enter a tab. Shared by the
   Admin + Officer consoles (both are .admin-body pages).
   ============================================================================ */
.console-masthead {
  position: relative; overflow: hidden; text-align: center;
  padding: 1.7rem 1rem 1.5rem; margin-bottom: 1.6rem;
  border: 1px solid rgba(200,162,75,.30); border-radius: var(--radius);
  background:
    radial-gradient(120% 170% at 50% -45%, rgba(200,162,75,.13), transparent 55%),
    linear-gradient(180deg, var(--navy), var(--navy-deep));
  transition: padding .28s ease;
}
.console-masthead__crest { display: block; width: 60px; height: auto; margin: 0 auto .45rem;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); transition: width .28s ease; }
.console-masthead__eyebrow { display: block; font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.console-masthead__title { font-family: var(--display); font-weight: 700; color: var(--on-navy);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1; margin: .3rem 0 .5rem; }
.console-masthead__rule { display: flex; align-items: center; justify-content: center; gap: .7rem;
  max-width: 320px; margin: .1rem auto .55rem; }
.console-masthead__rule::before, .console-masthead__rule::after { content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(200,162,75,.42), transparent); }
.console-masthead__rule i { font-style: normal; color: var(--gold); font-size: .85rem; }
.console-masthead__seat { font-family: var(--serif); font-size: 1.1rem; color: var(--on-dark); margin: 0; }
.console-masthead__seat b { color: var(--gold-bright); font-weight: 700; }

/* Slim state — crest + title on one line, identity pushed to the right. */
.console-masthead.is-slim { display: flex; align-items: center; gap: .85rem; text-align: left; padding: .7rem 1.15rem; }
.console-masthead.is-slim .console-masthead__crest { width: 34px; margin: 0; }
.console-masthead.is-slim .console-masthead__eyebrow,
.console-masthead.is-slim .console-masthead__rule { display: none; }
.console-masthead.is-slim .console-masthead__title { font-size: 1.35rem; margin: 0; }
.console-masthead.is-slim .console-masthead__seat { font-size: .92rem; margin-left: auto; text-align: right; }
@media (max-width: 600px) {
  .console-masthead.is-slim { flex-wrap: wrap; }
  .console-masthead.is-slim .console-masthead__seat { margin-left: 0; width: 100%; text-align: left; }
}

/* ============================================================================
   ADMIN CONSOLE — left rail nav (crest + grouped, alphabetised sections).
   Replaces the old centre-floating pill cloud, which got unreadable once there
   were 14 sections.
   ============================================================================ */
.admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.6rem; align-items: start; }

/* The rail is capped to the viewport and scrolls its own nav list. Without the
   cap, a rail taller than the screen cannot be pinned by `sticky` at all — it
   just scrolls with the page, so the bottom sections were only reachable by
   dragging the whole page down. Crest + Sign out stay put; only the list moves. */
.admin-side {
  position: sticky; top: 90px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 110px);
  background: var(--navy); border: 1px solid rgba(200,162,75,.32);
  border-radius: var(--radius); padding: 1rem .75rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.admin-side__nav {
  flex: 1 1 auto; min-height: 0;      /* min-height:0 — a flex child refuses to shrink below its content without it */
  overflow-y: auto;
  overscroll-behavior: contain;       /* finishing the rail must not lurch the page */
  padding-right: .3rem;               /* breathing room for the scrollbar */
}
.admin-side__id, .admin-side__out, .admin-side__burger { flex: none; }
.admin-side__id { display: flex; align-items: center; gap: .6rem; padding: 0 .3rem .8rem; border-bottom: 1px solid rgba(200,162,75,.22); margin-bottom: .8rem; }
.admin-side__id .crest-badge { width: 40px; height: auto; flex: none; }
.admin-side__id b { display: block; font-family: var(--display); color: var(--gold-bright); font-size: 1.15rem; letter-spacing: .04em; }
.admin-side__id span { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }

.admin-navgroup { margin-bottom: 1rem; }
.admin-navgroup__label {
  display: block; font-size: .64rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); padding: 0 .5rem .4rem;
}
.admin-navbtn {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .55rem .6rem; margin-bottom: .18rem; border: 0; border-radius: 9px;
  background: none; cursor: pointer; color: var(--on-dark);
  font-family: var(--sans); font-size: .92rem; font-weight: 500;
  transition: background .12s, color .12s;
}
.admin-navbtn i { font-style: normal; width: 20px; flex: none; text-align: center; }
.admin-navbtn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The count badge is also a `> span`, so the rule above gave it flex:1 and it stole
   ~half the row from the label (truncating "Unclaimed"/"Title requests"). Size it to
   its content instead, leaving all remaining width to the label. */
.admin-navbtn > span.tab-count { flex: none; }
.admin-navbtn:hover { background: rgba(200,162,75,.14); color: var(--gold-bright); }
.admin-navbtn.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep); font-weight: 700; }
.admin-navbtn.on .tab-count { background: rgba(7,22,52,.22); color: var(--navy-deep); }
.admin-side__out { width: 100%; margin-top: .4rem; }
.admin-side__burger { display: none; }

/* The main column carries a faint high-res crest watermark (same art as the hero)
   so a sparse tab no longer floats in an empty navy void. It sits behind the
   content, which is lifted above it. */
.admin-main { min-width: 0; }
.admin-main .admin-head { display: block; margin-bottom: 1.1rem; }

/* Crest emblem pinned to the LOWER-RIGHT corner of the screen. A single fixed
   rule, so the Admin and Officer consoles carry an IDENTICAL watermark (same
   size, position, opacity) — in both light and dark mode, since the console is
   always dark-chrome. It sits behind the content, which is lifted above it. */
.admin-body::after {
  content: ""; position: fixed; right: 0; bottom: 0; width: 300px; height: 300px;
  background: url(../img/crest-hero.webp) right bottom / contain no-repeat;
  opacity: .06; pointer-events: none; z-index: 0;
}
.admin-topbar, .admin-wrap { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .admin-body::after { width: 168px; height: 168px; opacity: .05; }
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 1rem; }
  /* Drawer, not a rail — let it expand to its full height instead of trapping a
     second scrollbar inside a panel that is already at the top of the page. */
  .admin-side { position: static; padding-bottom: .6rem; max-height: none; display: block; }
  .admin-side__nav { overflow-y: visible; padding-right: 0; }
  .admin-side__burger {
    display: block; width: 100%; margin-top: .2rem; padding: .6rem;
    border: 1px solid rgba(200,162,75,.4); border-radius: 10px; cursor: pointer;
    background: rgba(200,162,75,.12); color: var(--gold-bright); font-weight: 700; font-family: var(--sans);
  }
  .admin-side__nav, .admin-side__out { display: none; }        /* drawer, closed by default */
  .admin-side.open .admin-side__nav { display: block; margin-top: .8rem; }
  .admin-side.open .admin-side__out { display: block; }
}
/* Login / message card: navy to match the console (box-shadow is invisible on
   navy, so it needs a gold hairline to have an edge). */
.admin-card, .admin-msg { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); color: var(--on-navy);
  border: 1px solid rgba(200,162,75,.28); border-radius: var(--radius); padding: 2rem; max-width: 420px; margin: 3rem auto; box-shadow: var(--shadow); }
.admin-card h2, .admin-msg h2 { color: var(--gold-bright); }

/* Officer-permissions grid (admin Officers tab + reused nowhere else). */
.og-table { width: 100%; border-collapse: collapse; margin-top: .6rem;
  background: linear-gradient(180deg, var(--console-card-hi), var(--console-card-lo)); border: 1px solid rgba(200,162,75,.22);
  border-radius: 12px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.og-table th, .og-table td { padding: .8rem .7rem; border-bottom: 1px solid rgba(200,162,75,.18); text-align: left; vertical-align: top; }
.og-table tr:last-child td { border-bottom: 0; }
.og-table th { color: var(--gold-bright); font-family: var(--sans); font-size: .95rem; background: rgba(var(--chrome),.55); }
.og-table td b { color: var(--on-navy); }
.og-table th small, .og-table td small { display: block; color: var(--on-dark); font-weight: 400; font-size: .78rem; margin-top: .2rem; }
.og-table th:not(:first-child), .og-table td:not(:first-child) { text-align: center; width: 160px; }
.og-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.og-na { color: rgba(150,150,150,.5); }
.og-saved { display: block; color: var(--gold-bright); font-size: .68rem; margin-top: .25rem; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.admin-head h2 { color: var(--gold-bright); margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1.05; }
.admin-empty { text-align: center; color: var(--on-dark); padding: 2rem; }
/* Record-row card: crisp lifted navy with a gold "ledger spine" down the left,
   replacing the old washed-out grey (var(--surface) is light in light mode, but
   the console body is always navy, so grey rows read as disabled). */
.admin-row { display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(180deg, var(--console-card-hi), var(--console-card-lo)); color: var(--on-navy);
  border: 1px solid rgba(200,162,75,.24); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .8rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .12s, border-color .12s; }
.admin-row:hover { transform: translateY(-1px); border-left-color: var(--gold-bright); }
.admin-row__ph { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--navy); color: var(--gold-bright);
  border: 1px solid rgba(200,162,75,.28); display: grid; place-items: center; font-family: var(--display); overflow: hidden; }
.admin-row__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.admin-row__info { flex: 1; min-width: 0; }
.admin-row__info b { display: block; color: var(--on-navy); font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
/* Direct child only — the meta line. Without `>` this also hit the status chip
   nested in the name <b>, overriding its own colour. */
.admin-row__info > span { color: var(--on-navy-3); font-size: .85rem; }
.admin-row__info em { display: block; color: var(--gold-bright); font-size: .85rem; margin-top: .2rem; }
.admin-row__act { display: flex; gap: .5rem; flex: none; }
/* Refined record-row actions: hairline pills that sit quietly on the navy card
   and light up on hover — not the heavy 2px outline the site buttons use. */
.admin-row__act .btn { padding: .45rem 1rem; font-size: .84rem; border-width: 1px; font-weight: 600; }
.admin-row__act .btn--ghost { border-color: rgba(200,162,75,.42); color: var(--on-dark); background: none; }
.admin-row__act .btn--ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(200,162,75,.10); }
.admin-row__act .btn--danger { background: none; border: 1px solid rgba(178,58,58,.6); color: #e59a9a; }
.admin-row__act .btn--danger:hover { background: #7a2626; color: #fff; border-color: #7a2626; transform: none; }
.admin-row__act .btn--gold { box-shadow: 0 6px 16px rgba(200,162,75,.28); }

/* Timestamp line on record rows — its own muted line so it never collides with actions. */
.admin-row__when { display: block; color: var(--on-navy-3); font-size: .74rem; margin-top: .25rem; letter-spacing: .01em; }

/* Signup email on Pending rows — its own line, a touch brighter than the timestamp so
   it reads clearly when vetting. Scoped under __info to beat `.admin-row__info span`. */
.admin-row__info .admin-row__email { display: block; color: var(--on-navy-2); font-size: .8rem; margin-top: .2rem; word-break: break-all; }

/* Navy/gold dropdown for the always-navy console (title-request approval). */
.zselect {
  appearance: none; -webkit-appearance: none; max-width: 100%;
  background-color: var(--console-field); color: var(--on-navy);
  border: 1px solid rgba(200,162,75,.5); border-radius: 9px;
  padding: .5rem 1.9rem .5rem .75rem; font-size: .86rem; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E8C766' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center;
}
.zselect:hover { border-color: var(--gold-bright); }
.zselect:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(200,162,75,.25); }
.zselect option { background: var(--console-field); color: var(--on-navy); }

/* Positions-held editor (inside the theme-aware brother edit modal). */
.pos-editor { display: flex; flex-direction: column; gap: .4rem; }
.pos-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: rgba(200,162,75,.10); border: 1px solid rgba(200,162,75,.28); border-radius: 8px; padding: .4rem .7rem; }
.pos-row span { color: var(--text); font-size: .9rem; }
.pos-row em { color: var(--heading); opacity: .72; font-style: normal; font-size: .8rem; }
.pos-del { background: none; border: none; color: #b4342b; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: .1rem .35rem; }
.pos-del:hover { color: #d0433a; }
.pos-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .2rem; }
.pos-add .pos-in, .pos-add select { padding: .5rem .7rem; border-radius: 9px; border: 1px solid rgba(200,162,75,.4);
  background: var(--surface-2); color: var(--text); font-size: .88rem; }
.pos-add .pos-in { flex: 1; min-width: 110px; }
.pos-add select { min-width: 118px; }
.pos-add .pos-in:focus, .pos-add select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,75,.22); }

@media (max-width: 620px) {
  .admin-row { flex-wrap: wrap; }
  .admin-row__act { width: 100%; }
  .admin-row__act .btn { flex: 1; }
}

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

/* ============================================================================
   v4 — Members platform components
   ============================================================================ */

/* ---------- Portal: profile fieldsets + account tab ---------- */
/* Profile modal: a small "brother registry" header (echoes the console masthead's
   crest + gold eyebrow). Left-aligned so it clears the ✕ close button. Uses theme
   tokens, so it adapts to light/dark like the rest of the modal. */
.pf-masthead { display: flex; align-items: center; gap: .55rem; padding: 0 2rem .8rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
.pf-masthead__crest { width: 34px; height: auto; flex: none; }
.pf-masthead__eyebrow { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

.pf-group { border: 1px solid var(--hairline); border-radius: 12px; padding: 1rem 1.2rem 1.2rem; margin: 0 0 1.3rem; }
/* Leadership record — read-only positions list in the profile editor (brother_titles) */
.lead-record { list-style: none; margin: .2rem 0 0; padding: .5rem .75rem; border: 1.5px solid var(--hairline); border-radius: 10px; background: var(--surface); }
.lead-record li { font-size: .92rem; color: var(--text); padding: .2rem 0; }
.lead-record li + li { border-top: 1px solid var(--hairline); }
.lead-record li span { color: var(--muted); }
.pf-group legend { font-family: var(--display); color: var(--heading); font-size: 1.06rem; padding: 0 .55rem; }
/* Gold registry marker before each section name — echoes the console's ✦ rule. */
.pf-group legend::before { content: "✦"; color: var(--gold); font-size: .72em; margin-right: .42rem; vertical-align: middle; opacity: .85; }
.pref-row { display: flex; gap: .9rem; flex-wrap: wrap; padding-top: .55rem; }
.pref-box { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; color: var(--text); cursor: pointer; }
.acct-block { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.acct-block h4 { margin: 0 0 .8rem; color: var(--heading); font-family: var(--display); font-size: 1.1rem; }
.acct-block--danger { border-color: #e8c9c9; }
.btn--ghost-danger { background: none; border: 1.5px solid #b54848; color: #b54848; }
.btn--ghost-danger:hover { background: #b54848; color: #fff; }
.form-note.center { text-align: center; }
.form-note a { color: var(--gold-deep); text-decoration: underline; }

/* ---------- Family (branch) selector ---------- */
.fam-bar { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 1.4rem 0 .4rem; }
.fam-chip { border: 1.5px solid var(--navy-2); background: var(--surface); color: var(--heading); border-radius: 999px; padding: .42rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.fam-chip i { font-style: normal; opacity: .55; font-size: .78rem; }
.fam-chip:hover { border-color: var(--gold-deep); }
.fam-chip.on { background: var(--navy); color: var(--gold-bright); border-color: var(--heading); }

/* ---------- Roster filters ---------- */
.page-filters { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: -0.4rem 0 1.4rem; }
/* max-width: a native select sizes to its LONGEST option and refuses to
   shrink, so a long profession/class option overflowed phone viewports. */
.page-filter { padding: .55rem .8rem; border-radius: 10px; border: 1.5px solid var(--hairline); background: var(--surface); color: var(--text); font-size: .9rem; max-width: 100%; }
.page-filter-hint { font-size: .84rem; color: var(--muted); }
/* Absolutely pinned to the container box: a percentage height on a grid item
   in an auto-sized track resolves to AUTO (cyclic sizing), so `height:100%`
   let a 3:4 photo keep its natural aspect and overflow the circle as an oval.
   inset:0 sizes against the positioned container instead — always a true
   square crop. overflow:hidden on the containers is the backstop. */
.bro-card__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.eb-card__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bro-card__extra { color: var(--gold-deep) !important; }

/* ---------- Author chip (gallery/board) ---------- */
.author-chip { display: inline-flex; align-items: center; gap: .45rem; }
.author-chip__av { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: inline-grid; place-items: center; font-size: .75rem; font-style: normal; overflow: hidden; flex: none; }
.author-chip__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.author-chip b { font-size: .92rem; color: var(--heading); }

/* ---------- Gallery ---------- */
.gallery-teaser { margin-top: 2.4rem; }
.gallery a { display: block; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery a img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .35s; }
.gallery a:hover img { transform: scale(1.06); }

.gupload { background: var(--surface); border: 1.5px dashed var(--hairline); border-radius: 14px; padding: 1.2rem; margin-bottom: 2rem; }
.gupload__drop { display: block; text-align: center; padding: 1.2rem; cursor: pointer; color: var(--heading); border-radius: 10px; transition: background .15s; }
.gupload__drop:hover { background: var(--bg-2); }
.gupload__drop b { display: block; font-family: var(--display); font-size: 1.1rem; }
.gupload__drop span { color: var(--muted); font-size: .85rem; }
.gupload__row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }
.gupload__row input { flex: 1; min-width: 160px; padding: .7rem .9rem; border-radius: 10px; border: 1.5px solid var(--hairline); font-size: .95rem; }
.gupload__album { flex: 0 1 auto; min-width: 140px; max-width: 220px; }

/* Album filter chips — one grid, chips filter it (board pattern; that CSS was
   retired in the rail redesign, so this is fresh). Gold-fill selected state
   matches the site's .btn--gold convention; empty albums dim, never hide. */
.gchips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.gchip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
  border: 1.5px solid var(--hairline); background: var(--surface); color: var(--heading);
  font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.gchip:hover { border-color: var(--gold-bright); }
.gchip.on { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--navy); }
.gchip__n { font-size: .78rem; font-weight: 700; opacity: .65; }
.gchip.on .gchip__n { opacity: .85; color: var(--navy); }
.gchip--empty { opacity: .5; }
.gchip--empty.on { opacity: 1; }

/* Admin console gallery storage meter (navy surface -> flipping tokens only). */
.stor-meter { margin: .2rem 0 1rem; }
.stor-meter__bar { height: 12px; border-radius: 999px; background: var(--console-field); border: 1px solid var(--hairline); overflow: hidden; }
.stor-meter__bar span { display: block; height: 100%; border-radius: 999px; background: var(--gold-bright); transition: width .4s ease; }
.stor-meter__label { margin: .55rem 0 .1rem; color: var(--on-dark); font-size: .92rem; }

/* On-page gallery section manager (admin + a granted alumni president). Sits on
   the normal page surface, so page tokens — not the console navy tokens. */
.galbum-mgr { margin: -.7rem 0 1.4rem; }
.galbum-mgr__toggle { background: none; border: 1.5px solid var(--hairline); color: var(--muted);
  border-radius: 999px; padding: .35rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s; }
.galbum-mgr__toggle:hover, .galbum-mgr--open .galbum-mgr__toggle { border-color: var(--gold-bright); color: var(--heading); }
.galbum-mgr__list { margin-top: .7rem; padding: .5rem 1rem; border: 1.5px solid var(--hairline); border-radius: 12px; background: var(--surface); }
.galbum-mgr__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--hairline); }
.galbum-mgr__row:last-of-type { border-bottom: 0; }
.galbum-mgr__row b { font-weight: 600; color: var(--heading); }
.galbum-mgr__acts a { color: var(--gold-deep); font-size: .85rem; text-decoration: none; }
.galbum-mgr__acts a:hover { text-decoration: underline; }
.galbum-mgr__acts--fixed { color: var(--muted); font-size: .82rem; font-style: italic; }
.galbum-mgr__add { margin: .7rem 0 .3rem; }

.ggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.ggrid__cell { position: relative; padding: 0; border: 0; background: var(--navy); border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 1; box-shadow: var(--shadow-sm); }
.ggrid__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ggrid__cell:hover img { transform: scale(1.05); }
.ggrid__ph { display: grid; place-items: center; height: 100%; color: var(--gold-bright); }
.ggrid__hover { position: absolute; inset: auto 0 0 0; padding: .4rem .6rem; background: linear-gradient(transparent, rgba(var(--chrome),.75)); color: #fff; font-size: .85rem; text-align: left; opacity: 0; transition: opacity .2s; }
.ggrid__cell:hover .ggrid__hover { opacity: 1; }

.gmodal { position: fixed; inset: 0; z-index: 210; background: rgba(var(--chrome),.9); display: none; align-items: center; justify-content: center; padding: 3vw; }
.gmodal.open { display: flex; }
.gmodal__card { background: var(--surface); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); width: min(1020px, 94vw); max-height: 88vh; position: relative; }
.gmodal__close { position: absolute; top: 10px; right: 12px; z-index: 2; border: 0; background: rgba(var(--chrome),.5); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.gmodal__img { background: #0b1830; display: grid; place-items: center; }
.gmodal__img img { width: 100%; height: 100%; max-height: 88vh; object-fit: contain; }
.gmodal__side { display: flex; flex-direction: column; padding: 1.1rem 1.2rem; overflow-y: auto; }
.gmodal__author { padding-bottom: .7rem; border-bottom: 1px solid var(--hairline); }
.gmodal__caption { color: var(--text); font-size: .95rem; margin: .8rem 0; }
.gmodal__actions { display: flex; align-items: center; gap: .9rem; padding: .5rem 0 .8rem; border-bottom: 1px solid var(--hairline); }
.glike { border: 0; background: none; cursor: pointer; font-size: 1.05rem; color: var(--heading); font-weight: 600; }
.glike.on { color: #c0392b; }
.gdate { color: var(--muted); font-size: .82rem; }
.gdelete { margin-left: auto; border: 0; background: none; color: #b54848; cursor: pointer; font-size: .82rem; text-decoration: underline; }
.gcomments { flex: 1; overflow-y: auto; padding: .8rem 0; min-height: 120px; }
.gcomment { margin-bottom: .9rem; }
.gcomment p { margin: .25rem 0 .1rem; font-size: .92rem; color: var(--text); }
.gcomment small { color: var(--muted); font-size: .78rem; }
.gcomment small a { color: #b54848; }
.gcompose { display: flex; gap: .6rem; padding-top: .8rem; border-top: 1px solid var(--hairline); }
.gcompose input { flex: 1; padding: .65rem .85rem; border-radius: 10px; border: 1.5px solid var(--hairline); font-size: .92rem; }
.gcompose .btn { padding: .6rem 1.1rem; font-size: .88rem; }

/* ---------- Events ---------- */
.ev-list { display: grid; gap: 1.1rem; margin-top: 2.4rem; max-width: 860px; margin-inline: auto; }
.ev-card { display: flex; gap: 1.2rem; background: var(--surface); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); align-items: flex-start; }
.ev-card--members { border: 1.5px solid var(--gold); }
.ev-card__date { flex: none; width: 74px; text-align: center; background: var(--navy); color: var(--on-navy); border-radius: 12px; padding: .6rem .3rem; }
.ev-card__date b { display: block; font-size: 1.6rem; font-family: var(--display); color: var(--gold-bright); line-height: 1.1; }
.ev-card__date span { font-size: .72rem; letter-spacing: .18em; }
.ev-card__date small { display: block; font-size: .68rem; opacity: .7; }
.ev-card__body h3 { color: var(--heading); margin: .15rem 0 .2rem; font-size: 1.25rem; }
.ev-card__meta { color: var(--gold-deep); font-size: .88rem; font-weight: 600; margin: 0 0 .35rem; }
.ev-card__body p { color: var(--muted); font-size: .93rem; margin: 0; }
.admin-row--past { opacity: .55; }

/* ---------- Giving campaigns ---------- */
.give-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.give-tile { background: var(--surface); border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); text-align: center; }
.give-tile__ic { font-size: 1.9rem; }
.give-tile h4 { color: var(--heading); font-family: var(--display); font-size: 1.15rem; margin: .55rem 0 .4rem; }
.give-tile p { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.give-tile__soon { display: inline-block; color: var(--muted); font-size: .82rem; border: 1.5px dashed var(--hairline); border-radius: 999px; padding: .45rem 1rem; }

/* ---------- Discussion board ---------- */
.thread-list { display: grid; gap: .7rem; }
.thread-row { display: flex; align-items: center; gap: 1rem; text-align: left; background: var(--surface); border: 0; border-radius: 12px; padding: 1rem 1.2rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s; }
.thread-row:hover { transform: translateY(-2px); }
.thread-row__main { flex: 1; min-width: 0; }
.thread-row__main b { display: block; color: var(--heading); font-family: var(--display); font-size: 1.08rem; margin-bottom: .25rem; }
.thread-row__main span { color: var(--muted); font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem; }
.thread-row__count { flex: none; color: var(--gold-deep); font-weight: 700; font-size: .9rem; }
.thr-tag { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: .15rem .5rem; margin-right: .5rem; vertical-align: 2px; }
.thr-tag--offering { background: #e4f2e4; color: #2c6e2c; }
.thr-tag--seeking { background: #eee7fb; color: #5b3ea8; }
.thread-view { background: var(--surface); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-sm); max-width: 820px; }
.thread-view h2 { color: var(--heading); font-family: var(--display); margin: 0 0 .5rem; }
.thread-view__meta { color: var(--muted); font-size: .86rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.thread-view__meta a { color: #b54848; text-decoration: underline; }
.thread-view__body { color: var(--text); margin: 1.1rem 0 1.4rem; line-height: 1.7; }

/* ---------- Notification bell ---------- */
.bell { position: relative; margin-right: .35rem; }
.bell__btn { position: relative; border: 0; background: rgba(255,255,255,.08); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 1.05rem; display: grid; place-items: center; }
.bell__btn:hover { background: rgba(255,255,255,.16); }
.bell__badge { position: absolute; top: -3px; right: -3px; background: #c0392b; color: #fff; font-size: .66rem; font-weight: 700; border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; }
.bell__menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, 88vw); background: var(--surface); border-radius: 14px; box-shadow: 0 18px 50px rgba(var(--chrome),.35); display: none; overflow: hidden; z-index: 120; }
.bell__menu.open { display: block; }
.bell__head { padding: .8rem 1rem; font-family: var(--display); color: var(--heading); border-bottom: 1px solid var(--hairline); font-weight: 700; }
.bell__list { max-height: 340px; overflow-y: auto; }
.bell__row { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem 1rem; border-bottom: 1px solid var(--hairline); color: var(--text); font-size: .86rem; }
.bell__row:hover { background: var(--bg); }
.bell__row.unread { background: var(--tint); }
.bell__row i { font-style: normal; flex: none; }
.bell__row span { flex: 1; line-height: 1.4; }
.bell__row em { font-style: normal; color: var(--muted); font-size: .74rem; flex: none; }
.bell__empty { padding: 1.2rem 1rem; color: var(--muted); font-size: .88rem; text-align: center; }

/* ---------- Admin stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.stat-card { background: var(--surface); border-radius: 12px; padding: 1.1rem 1rem; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card b { display: block; font-size: 1.7rem; font-family: var(--display); color: var(--heading); }
.stat-card span { color: var(--muted); font-size: .8rem; }
.stat-h { color: var(--gold-bright); font-family: var(--display); margin: 1.6rem 0 .7rem; }
.thread-view .stat-h { color: var(--heading); }
.stat-list { background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.stat-list__row { display: flex; gap: .8rem; align-items: baseline; padding: .65rem 1rem; border-bottom: 1px solid var(--hairline); font-size: .88rem; }
.stat-list__row b { color: var(--heading); flex: none; }
.stat-list__row span { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-list__row em { font-style: normal; color: var(--muted); font-size: .78rem; flex: none; }

/* ---------- v4 responsive ---------- */
@media (max-width: 900px) {
  .ggrid { grid-template-columns: repeat(3, 1fr); }
  .give-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .gmodal__card { grid-template-columns: 1fr; overflow-y: auto; }
  .gmodal__img img { max-height: 44vh; }
}
@media (max-width: 560px) {
  .ggrid { grid-template-columns: repeat(2, 1fr); }
  .gupload__row { flex-direction: column; }
  .ev-card { flex-direction: column; }
  .ev-card__date { width: 100%; display: flex; align-items: baseline; gap: .5rem; justify-content: center; }
  .fam-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .4rem; }
  .fam-chip { flex: none; }
  .page-filters { flex-direction: column; align-items: stretch; }
  .thread-row { flex-wrap: wrap; }
  .bell__menu { position: fixed; right: 3vw; left: 3vw; width: auto; top: 64px; }
}

/* ---------- Admin roster management (v4.1) ---------- */
.admin-addbar { display: flex; gap: .7rem; margin: 0 0 1.1rem; flex-wrap: wrap; }
.admin-addbar .btn { padding: .6rem 1.2rem; font-size: .9rem; }
/* Status chips: solid on-brand pills (not stark pale). Neutral = slate-navy,
   positive(●) = gold, warn = muted red. Solid so they read on ANY background —
   the navy console (navy in light / black in dark) AND the cream board card —
   without needing a separate dark rule. */
.schip { display: inline-block; vertical-align: 2px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: .16rem .5rem; margin-left: .45rem; background: #33425f; color: #eef1f7; }
.schip--active { background: var(--gold); color: var(--navy-deep); }
.guide-intro h3 { color: var(--gold-bright); font-family: var(--display); margin: 0 0 .3rem; }
.guide-intro p { color: var(--on-dark); margin-bottom: 1.2rem; }
.guide-sec { background: var(--surface); border-radius: 12px; margin-bottom: .7rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.guide-sec summary { cursor: pointer; padding: .95rem 1.2rem; font-weight: 700; color: var(--heading); font-family: var(--display); font-size: 1.02rem; list-style: none; }
.guide-sec summary::-webkit-details-marker { display: none; }
.guide-sec summary::before { content: '▸ '; color: var(--gold-deep); }
.guide-sec[open] summary::before { content: '▾ '; }
.guide-sec > div { padding: 0 1.3rem 1.1rem; color: var(--text); font-size: .93rem; }
.guide-sec ol, .guide-sec ul { margin: .3rem 0 .6rem; padding-left: 1.3rem; }
.guide-sec li { margin-bottom: .35rem; }

/* ============================================================================
   v5 — admin cleanup, tree editor, profile popup, calendar, welcome
   ============================================================================ */

/* ---------- Admin: grouped tabs + hints ---------- */
.admin-tabgroup { display: flex; align-items: center; gap: .8rem; margin-bottom: .55rem; flex-wrap: wrap; }
.admin-tabgroup__label { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); width: 72px; flex: none; }
.admin-tabgroup .admin-tabs { margin: 0; }
.admin-hint { background: rgba(255,255,255,.07); border-left: 3px solid var(--gold); color: var(--on-dark); font-size: .88rem; padding: .7rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.admin-hint b { color: var(--gold-bright); }

/* Officer Console "Overview" landing — a card per enabled tool (officer.js renderHome). */
.oc-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; margin: .2rem 0 0; }
.oc-card { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; text-align: left;
  padding: 1.15rem 1.2rem; border-radius: 14px; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, var(--console-card-hi), var(--console-card-lo)); color: var(--on-navy);
  border: 1px solid rgba(200,162,75,.24); border-left: 3px solid var(--gold);
  box-shadow: 0 8px 22px rgba(0,0,0,.24); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.oc-card:hover { transform: translateY(-2px); border-left-color: var(--gold-bright); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.oc-card:focus-visible { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(200,162,75,.28); }
.oc-card__ic { font-size: 1.7rem; line-height: 1; }
.oc-card__label { font-weight: 600; font-size: 1.03rem; font-family: var(--display); color: var(--on-navy); }
.oc-card__meta { font-size: .85rem; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.admin-hint a { color: var(--gold-bright); text-decoration: underline; }
.admin-hint--tip { background: rgba(200,162,75,.12); }

/* ---------- Admin: tree editor ---------- */
.treeed-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.treeed-list { background: var(--surface); border-radius: 12px; padding: .9rem 1rem; box-shadow: var(--shadow-sm); overflow-x: auto; }
.treeed-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem; border-bottom: 1px solid var(--hairline); min-width: 540px; }
.treeed-row:last-child { border-bottom: 0; }
.treeed-row__connector { color: var(--gold-deep); flex: none; width: 18px; text-align: center; }
.treeed-row__name { flex: 1; min-width: 0; }
.treeed-row__name b { color: var(--heading); font-size: .95rem; }
.treeed-row__name small { display: block; color: var(--muted); font-size: .76rem; }
.treeed-reg { color: #2c6e2c; font-style: normal; }
.treeed-row__act { display: flex; gap: .35rem; flex: none; }
.treeed-row__act button { border: 1px solid var(--hairline); background: var(--bg); color: var(--heading); font-size: .74rem; font-weight: 600; border-radius: 7px; padding: .3rem .6rem; cursor: pointer; transition: all .12s; }
.treeed-row__act button:hover { border-color: var(--gold-deep); background: var(--surface); }
.treeed-row__act button.danger { color: #b54848; }
.treeed-row__act button.danger:hover { border-color: #b54848; }
.treeed-help p { margin-bottom: .8rem; font-size: .93rem; color: var(--text); }

/* ---------- Public tree: search, family menu, pulse, path ---------- */
.tree-search { position: relative; max-width: 380px; margin: 1.4rem auto 0; }
.tree-search input { width: 100%; padding: .7rem 1rem; border-radius: 999px; border: 1.5px solid var(--hairline); font-size: .95rem; background: var(--surface); }
.tree-search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); z-index: 30; overflow: hidden; display: none; }
.tree-search__results button { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; width: 100%; text-align: left; padding: .6rem 1rem; border: 0; background: none; cursor: pointer; }
.tree-search__results button:hover { background: var(--bg-2); }
.tree-search__results button b { color: var(--heading); font-size: .92rem; }
.tree-search__results button span { color: var(--muted); font-size: .78rem; }
.tree-search__none { display: block; padding: .7rem 1rem; color: var(--muted); font-size: .88rem; }
.tree-node--family { justify-content: flex-start; }
.tree-node--family .tree-toggle { margin-left: auto; }
.tree-node--pulse { animation: nodePulse 1.2s ease-in-out 2; }
@keyframes nodePulse { 0%,100% { box-shadow: var(--shadow-sm); } 50% { box-shadow: 0 0 0 6px rgba(232,199,102,.55); } }
.tree-node--path { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(200,162,75,.35); }
.bm-jump { color: var(--gold-deep); text-decoration: underline; }

/* ---------- Portal: slim login + perks ---------- */
.portal-duo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 2rem; align-items: start; justify-content: center; }
.card-form--slim { max-width: 460px; }
.perks { display: grid; gap: .9rem; align-content: start; }
.perks__title { color: var(--gold-bright); font-family: var(--display); margin: 0 0 .2rem; font-size: 1.25rem; }
.perk { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(200,162,75,.25); border-radius: 12px; padding: .9rem 1.1rem; color: var(--on-navy); }
.perk__ic { font-size: 1.5rem; flex: none; }
.perk b { display: block; font-family: var(--display); font-size: 1.02rem; }
.perk small { color: var(--on-dark); font-size: .82rem; line-height: 1.4; display: block; }
.perk i { margin-left: auto; font-style: normal; opacity: .7; flex: none; }
.perk--live { border-color: var(--gold); transition: transform .15s, background .15s; }
.perk--live:hover { transform: translateX(4px); background: rgba(200,162,75,.14); }
.perk--live i { color: var(--gold-bright); }

/* ---------- Profile popup ---------- */
.pmodal { position: fixed; inset: 0; z-index: 220; background: rgba(var(--chrome),.9); display: none; align-items: flex-start; justify-content: center; padding: 4vh 3vw; overflow-y: auto; }
.pmodal.open { display: flex; }
.pmodal__card { position: relative; width: min(680px, 96vw); max-height: 92vh; overflow-y: auto; }
.pmodal__close { position: absolute; top: 12px; right: 14px; z-index: 2; border: 0; background: var(--bg-2); color: var(--heading); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.pmodal__close:hover { background: var(--gold); }

/* ---------- Events calendar ---------- */
.ev-toggle { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.ev-toggle button { border: 1.5px solid var(--navy-2); background: var(--surface); color: var(--heading); border-radius: 999px; padding: .5rem 1.3rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
.ev-toggle button.on { background: var(--navy); color: var(--gold-bright); border-color: var(--heading); }
#eventsMonth { max-width: 860px; margin: 1.6rem auto 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.cal-head b { font-family: var(--display); color: var(--heading); font-size: 1.35rem; }
.cal-nav { border: 1.5px solid var(--hairline); background: var(--surface); color: var(--heading); width: 38px; height: 38px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
.cal-nav:hover { border-color: var(--gold-deep); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .3rem 0; }
.cal-cell { position: relative; min-height: 74px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: .35rem .4rem; text-align: left; font-family: var(--sans); cursor: default; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-cell--pad { background: transparent; border: 0; }
.cal-cell--today { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
.cal-cell--has { cursor: pointer; }
.cal-cell--has:hover { border-color: var(--gold-deep); }
.cal-cell__n { font-size: .78rem; font-weight: 700; color: var(--heading); }
.cal-chip { display: block; font-size: .64rem; font-weight: 600; color: #fff; background: var(--navy-2); border-radius: 4px; padding: .1rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip--rush { background: #8a5a1f; }
.cal-chip--philanthropy { background: #2c6e2c; }
.cal-chip--reunion { background: #7a4a9e; }
.cal-chip--meeting { background: #12305F; }
.cal-chip--social { background: #9A7628; }
.cal-more { font-size: .64rem; color: var(--muted); }
.cal-detail { margin-top: 1.1rem; }
.cal-detail h4 { color: var(--heading); font-family: var(--display); margin: 0 0 .6rem; }
.cal-detail__ev { background: var(--surface); border-radius: 10px; padding: .8rem 1rem; box-shadow: var(--shadow-sm); margin-bottom: .6rem; }
.cal-detail__ev b { display: block; color: var(--heading); font-size: 1.05rem; }
.cal-detail__ev small { color: var(--gold-deep); font-weight: 600; }
.cal-detail__ev p { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; }

/* ---------- Welcome page ---------- */
.welcome-step { display: flex; gap: 1.2rem; background: var(--surface); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); margin-bottom: 1.1rem; align-items: flex-start; }
.welcome-step__n { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.welcome-step h3 { color: var(--heading); margin: 0 0 .4rem; font-size: 1.25rem; }
.welcome-step p { color: var(--muted); font-size: .95rem; margin-bottom: .8rem; }
.welcome-step p a { color: var(--gold-deep); text-decoration: underline; }
.welcome-step .btn { padding: .6rem 1.3rem; font-size: .88rem; }

/* ---------- v5 responsive ---------- */
@media (max-width: 860px) {
  .portal-duo { grid-template-columns: 1fr; }
  .card-form--slim { max-width: none; }
}
@media (max-width: 620px) {
  .cal-cell { min-height: 52px; }
  .cal-chip { display: none; }
  .cal-cell--has::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); }
  .admin-tabgroup__label { width: 100%; }
  .welcome-step { flex-direction: column; }
}

/* ============================================================================
   v6 — avatar photos, banner, RSVPs, spotlight, mentor finder, alumni map
   ============================================================================ */

/* ---------- Header avatar photo ---------- */
.nav__avatar { overflow: hidden; }
.nav__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---------- Announcement banner ---------- */
.site-banner { position: fixed; top: 72px; left: 0; right: 0; z-index: 95;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
  box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.site-banner__inner { width: min(var(--wrap), 94vw); margin-inline: auto; display: flex; align-items: center; gap: 1rem; padding: .55rem 0; }
.site-banner a, .site-banner span { color: var(--navy-deep); font-weight: 700; font-size: .92rem; flex: 1; }
.site-banner a { text-decoration: underline; }
.site-banner__x { border: 0; background: rgba(var(--chrome),.15); color: var(--navy-deep); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: none; font-size: .8rem; }
.site-banner__x:hover { background: rgba(var(--chrome),.3); }

/* ---------- Event RSVPs ---------- */
.ev-rsvp { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; flex-wrap: wrap; }
.ev-rsvp__btn { border: 1.5px solid var(--navy-2); background: var(--surface); color: var(--heading); border-radius: 999px; padding: .4rem 1rem; font-size: .84rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.ev-rsvp__btn:hover { border-color: var(--gold-deep); }
.ev-rsvp__btn.on { background: var(--navy); color: var(--gold-bright); border-color: var(--heading); }
.ev-rsvp b { color: var(--heading); }
.ev-rsvp__who { color: var(--muted); font-size: .8rem; width: 100%; }

/* ---------- Brother spotlight ---------- */
.spot-card { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; max-width: 860px; margin-inline: auto; text-align: left; }
.spot-card__photo { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.spot-card__body { padding: 2rem 2.2rem 2rem 0; }
.spot-card__body h3 { color: var(--heading); font-size: 1.7rem; margin: 0 0 .2rem; }
.spot-card__sub { color: var(--gold-deep); font-weight: 600; font-size: .9rem; margin: 0 0 .9rem; }
.spot-card__quote { font-family: var(--serif); font-style: italic; color: var(--heading); font-size: 1.1rem; margin: 0 0 .8rem; }
.spot-card__bio { color: var(--muted); font-size: .95rem; margin: 0 0 1.3rem; }
@media (max-width: 720px) {
  .spot-card { grid-template-columns: 1fr; }
  .spot-card__photo { min-height: 240px; max-height: 320px; }
  .spot-card__body { padding: 0 1.5rem 1.6rem; }
}

/* ---------- Mentor finder ---------- */

/* ---------- Alumni map ---------- */
.alumni-map { position: relative; z-index: 0; isolation: isolate; height: 420px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-2); } /* isolate keeps Leaflet's internal z-indexes (controls=1000) from escaping over the nav/modals */
.alumni-map .leaflet-popup-content a { color: var(--gold-deep); text-decoration: underline; display: inline-block; padding: .1rem 0; }
/* fullscreen map: fills the viewport, above the nav but below brother cards (1400) */
.alumni-map--full { position: fixed !important; inset: 0; z-index: 1300; height: 100dvh !important; width: 100vw; border-radius: 0; box-shadow: none; }
/* fullscreen toggle button (a Leaflet control) */
.map-fs-btn {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(200,162,75,.5); background: rgba(var(--chrome),.9);
  color: var(--gold-bright); font-size: 1.15rem; line-height: 1;
  box-shadow: 0 6px 16px rgba(var(--chrome),.35); backdrop-filter: blur(6px);
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.map-fs-btn:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-1px); }
@media (max-width: 620px) { .alumni-map { height: 300px; } }

/* ============================================================================
   v7 — e-board manager, polls, committees, suggestions, class pages
   ============================================================================ */

/* ---------- Admin: e-board seats ---------- */
.seat-row { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.seat-row:last-child { border-bottom: 0; }
.seat-row__title { flex: none; width: 120px; font-weight: 700; color: var(--gold-deep); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.seat-row__who { flex: 1; min-width: 140px; }
.seat-row__who b { color: var(--heading); }
.seat-row__who small { display: block; color: var(--muted); font-size: .78rem; }
.seat-row__who--empty { color: var(--muted); font-style: italic; }
.seat-row__act { display: flex; gap: .4rem; flex: none; }
.seat-row__act .btn { padding: .4rem .9rem; font-size: .8rem; }

/* ---------- Polls ---------- */
.poll-card { background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); margin-bottom: 1.1rem; max-width: 680px; }
.poll-card h3 { color: var(--heading); font-family: var(--display); margin: 0 0 .9rem; font-size: 1.25rem; }
.poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: 1.5px solid var(--hairline); background: var(--bg); border-radius: 10px; padding: .65rem .9rem; margin-bottom: .5rem; cursor: pointer; overflow: hidden; transition: border-color .15s; }
.poll-opt:hover { border-color: var(--gold-deep); }
.poll-opt.on { border-color: var(--gold); }
.poll-opt.closed { cursor: default; }
.poll-opt__bar { position: absolute; inset: 0 auto 0 0; background: rgba(200,162,75,.18); transition: width .3s; }
.poll-opt__label { position: relative; font-weight: 600; color: var(--heading); font-size: .92rem; }
.poll-opt__n { position: relative; color: var(--muted); font-size: .8rem; flex: none; }
.poll-card__meta { color: var(--muted); font-size: .82rem; margin-top: .5rem; }
.poll-card__meta a { color: #b54848; text-decoration: underline; }
.poll-closed { color: #b54848; }

/* ---------- Board: committee tabs + suggestion box ---------- */
.sug-box { background: var(--surface); border: 1.5px dashed var(--hairline); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.sug-box__head b { color: var(--heading); font-family: var(--display); }
.sug-box__head span { color: var(--muted); font-size: .85rem; margin-left: .5rem; }
.sug-box .gcompose { border-top: 0; padding-top: .7rem; }
.sug-mine { padding: .45rem 0 0; font-size: .86rem; color: var(--text); }
.sug-mine .schip { margin: 0 .4rem 0 0; }
.sug-card { background: var(--surface); border-radius: 12px; padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); margin-bottom: .8rem; }
.sug-card__body { color: var(--text); margin: 0 0 .2rem; }
.sug-card small { color: var(--muted); font-size: .76rem; }
.sug-card__resp { background: var(--bg-2); border-left: 3px solid var(--gold); border-radius: 6px; padding: .5rem .8rem; margin: .6rem 0 0; color: var(--text); font-size: .88rem; }
.sug-card__act { margin-top: .7rem; }
.sug-card__act textarea { width: 100%; min-height: 60px; border: 1.5px solid var(--hairline); border-radius: 8px; padding: .6rem .8rem; font-family: var(--sans); font-size: .88rem; margin-bottom: .5rem; }
.sug-card__act .btn { padding: .45rem 1rem; font-size: .82rem; margin-right: .4rem; }

/* ---------- Class page + modal class link ---------- */
.bm-class { color: var(--gold-deep); text-decoration: underline; }

/* ============================================================================
   v8 — lockdown notes, board redesign, mobile fixes, cream + admin restyle
   ============================================================================ */

/* ---------- global: warm form fields ---------- */
input, select, textarea { background: var(--surface-2); }

/* ---------- lockdown ---------- */
.tree-lockline { text-align: center; color: var(--muted); font-size: .95rem; background: var(--surface); border: 1.5px dashed var(--gold); border-radius: 999px; padding: .55rem 1.2rem; display: inline-block; margin: .8rem auto 0; }
.center .tree-lockline { display: inline-block; }
.tree-lockline a { color: var(--gold-deep); text-decoration: underline; }

/* ---------- mobile fixes ---------- */
.fam-select { display: none; width: 100%; max-width: 420px; margin: 1rem auto 0; padding: .7rem 1rem; border-radius: 12px; border: 1.5px solid var(--navy-2); color: var(--heading); font-weight: 600; font-size: .95rem; }
@media (max-width: 700px) {
  .fam-bar { display: none !important; }
  .fam-select { display: block; }
}
@media (max-width: 820px) {
  .alumni-cta { text-align: center; }
  .alumni-cta .lede { margin-inline: auto; }
  .alumni-cta .hero__cta { justify-content: center !important; }
}

/* ---------- board redesign ---------- */

/* Board shell — nav rail left, feed right. Mirrors .admin-shell's 250px so the
   two rails line up across the site. */
.board-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.board-main { min-width: 0; }

/* Deliberately simpler than .admin-side: that panel carries flex + max-height +
   an internal scroller because the console has 15+ tabs and overflows the
   viewport. This rail has ~10 rows and never will. The BUTTONS are shared
   (.admin-navbtn / .tab-count) — a fix there fixes the console and the board.
   --on-dark is defined in BOTH themes for exactly this (navy panel) case. */
.board-rail {
  position: sticky; top: 90px;
  background: var(--navy); border: 1px solid rgba(200,162,75,.32);
  border-radius: var(--radius); padding: 1rem .75rem;
  box-shadow: var(--shadow-sm);
}
/* The foot holds what isn't a place to post — the suggestion box and help. */
.board-rail__foot { margin-top: .5rem; padding-top: .6rem; border-top: 1px solid rgba(200,162,75,.22); }
/* An empty room stays visible but honest — never hidden, so Opportunities keeps its door. */
.admin-navbtn--empty { opacity: .45; }
.admin-navbtn--empty.on { opacity: 1; }
/* Unread = solid gold, matching the gold .thr-dot and the help modal's "Gold = new".
   No override for the active row on purpose: the console's existing
   `.admin-navbtn.on .tab-count` (0,3,0) already outranks this (0,1,0) and renders
   the badge correctly on gold. An override here measured 4.19 contrast in light —
   below AA — while letting the existing rule win measures 4.93. */
.tab-count--new { background: var(--gold); color: var(--navy-deep); font-weight: 700; }

.board-controls__right { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.board-spaces { display: none; }                     /* desktop: the rail IS the control */
.board-help--mobile { display: none; width: auto; padding: .5rem .7rem; border: 1px solid rgba(200,162,75,.5); border-radius: 9px; color: var(--heading); }

@media (max-width: 900px) {
  .board-shell { grid-template-columns: 1fr; }
  .board-rail { display: none; }
  /* 40px: the touch-target floor website-qa demands. */
  .board-spaces { display: block; min-height: 40px; }
  .board-help--mobile { display: inline-flex; min-height: 40px; }
  /* A <select> sizes to its LONGEST option ("Chapter Business (0)" -> 205px), so
     spaces+sort+help wanted 420px in a 359px row and wrapped to three lines.
     Let the two selects share the row instead; the closed state ellipsises, and
     the open state is a full-screen native picker anyway. */
  .board-controls__right { width: 100%; }
  .board-controls__right .board-spaces,
  .board-controls__right .page-filter { flex: 1 1 0; min-width: 0; }
  /* Where you ARE belongs above what you can DO: the spaces select goes directly
     under the section's hero band, and "+ New thread" drops below it. order:-1
     rather than reordering the DOM, because on desktop the button and the sort
     select share one row and that reads correctly already. This also matches
     renderPolls(), which has always put its controls above its "+ New poll". */
  .board-controls__right { order: -1; }
}

/* Introductions composer — the one place on the board that spends boldness.
   Deliberately navy+gold in BOTH themes: a single committed look, the only
   element carrying this weight, so it reads as *the* thing to do. */
.intro-card {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin: 0 0 1.2rem;
  box-shadow: var(--shadow-sm);
}
.intro-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.intro-card__head b {
  font-family: var(--display); font-size: 1.35rem;
  font-weight: 600; color: var(--gold-bright);
}
.intro-card__class {
  color: rgba(251, 248, 241, .72); font-size: .8rem;
  font-weight: 600; letter-spacing: .02em;
}
.intro-card textarea {
  width: 100%; min-height: 92px; resize: vertical;
  border-radius: 10px; border: 1px solid rgba(200, 162, 75, .35);
  background: rgba(255, 255, 255, .06); color: var(--white);
  padding: .75rem .85rem; font-family: var(--sans); font-size: .92rem;
}
.intro-card textarea::placeholder { color: rgba(251, 248, 241, .5); }
.intro-card textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.intro-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-top: .8rem;
}
.intro-card__hint { color: rgba(251, 248, 241, .6); font-size: .76rem; }
.intro-card .form-status { margin: .6rem 0 0; }
@media (max-width: 640px) {
  .intro-card__foot { flex-direction: column; align-items: stretch; }
  .intro-card__foot .btn { width: 100%; }
}

.cat-band { display: flex; gap: .8rem; align-items: center; background: var(--surface); border-radius: 12px; padding: .8rem 1.1rem; font-size: 1.3rem; box-shadow: var(--shadow-sm); border-left: 5px solid var(--navy); margin-bottom: .9rem; }
.cat-band b { display: block; color: var(--heading); font-family: var(--display); font-size: 1.05rem; }
.cat-band span { color: var(--muted); font-size: .82rem; }
.cat-band--advice { border-left-color: #1f6f6b; }
.cat-band--social { border-left-color: var(--gold-deep); }
.cat-band--opportunities { border-left-color: #2c6e2c; }
.cat-band--comm { border-left-color: var(--gold); }

.board-controls { display: flex; gap: .7rem; align-items: center; justify-content: space-between; margin: 0 0 1rem; flex-wrap: wrap; }

.thread-row { border-left: 4px solid var(--navy); }
.thread-row--advice { border-left-color: #1f6f6b; }
.thread-row--social { border-left-color: var(--gold-deep); }
.thread-row--opportunities { border-left-color: #2c6e2c; }
.thread-row--comm { border-left-color: var(--gold); border-left-style: dashed; }
.thread-row__av { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: grid; place-items: center; font-family: var(--display); overflow: hidden; }
.thread-row__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Needs .thread-row__main to outrank `.thread-row__main span` (0,1,1), which sets
   display:inline-flex and was running the preview into the author line. */
.thread-row__main .thread-row__prev { display: block; color: var(--muted); font-size: .84rem; margin: .1rem 0 .2rem; }
.thread-row.unread .thread-row__main > b { color: var(--navy-deep); }
/* Dark mode remaps --navy-deep to #000 (it's a chrome token), so the rule above
   painted unread titles black on a #151515 card — 1.15 contrast. Unread means
   "emphasized", which in this theme is bright gold, not black. */
:root[data-theme="dark"] .thread-row.unread .thread-row__main > b { color: var(--heading); }
.thr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-right: .45rem; vertical-align: 1px; }
.thr-hot { font-style: normal; font-size: .85rem; }

.board-empty { text-align: center; padding: 2.5rem 1rem 3rem; position: relative; }
.board-empty img { width: 130px; margin: 0 auto 1rem; opacity: .25; filter: grayscale(35%); }
.board-empty p { color: var(--muted); font-size: .95rem; }
.board-empty b { color: var(--heading); }

.react-bar { display: inline-flex; gap: .35rem; margin-top: .35rem; }
.react { border: 1px solid var(--hairline); background: var(--surface-2); border-radius: 999px; padding: .12rem .55rem; font-size: .8rem; cursor: pointer; transition: all .12s; }
.react:hover { border-color: var(--gold-deep); }
.react.on { background: var(--tint); border-color: var(--gold); }

.thread-view__photo { margin: 1rem 0; }
.thread-view__photo img { max-width: 100%; max-height: 440px; border-radius: 12px; box-shadow: var(--shadow-sm); }

/* ---------- admin console redesign ---------- */
.admin-body { background:
  radial-gradient(90% 60% at 85% -10%, rgba(200,162,75,.14), rgba(200,162,75,0) 55%),
  radial-gradient(70% 50% at 0% 100%, rgba(18,48,95,.7), rgba(18,48,95,0) 60%),
  var(--navy-deep); }
/* Dark console is pure black — the navy bottom-left glow reads as an off-identity
   blue smudge on it, so drop it and keep only the subtle gold top-right glow. */
:root[data-theme="dark"] .admin-body { background:
  radial-gradient(90% 60% at 85% -10%, rgba(200,162,75,.14), rgba(200,162,75,0) 55%),
  var(--navy-deep); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(200,162,75,.28); margin-bottom: 1.3rem; flex-wrap: wrap; }
.admin-head__id { display: flex; align-items: center; gap: .9rem; }
.admin-head__id img { height: 52px; width: auto; }
.admin-head h2 { margin: 0; color: var(--gold-bright); }
.admin-head__sub { color: var(--on-dark); font-size: .82rem; }
.admin-tabgroup { margin-bottom: .7rem; }
.admin-tabgroup__label { color: rgba(232,199,102,.75); }
.admin-tabs button { border: 1px solid rgba(200,162,75,.35); background: rgba(255,255,255,.06); color: var(--on-navy-2); border-radius: 999px; padding: .5rem 1.05rem; font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.admin-tabs button:hover { border-color: var(--gold); color: var(--gold-bright); }
.admin-tabs button.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep); border-color: transparent; box-shadow: 0 6px 18px rgba(200,162,75,.35); }
.admin-tabs button.on .tab-count { background: rgba(var(--chrome),.25); color: var(--navy-deep); }
.tab-count { background: rgba(200,162,75,.22); color: var(--gold-bright); border-radius: 999px; padding: .06rem .45rem; font-size: .72rem; }
/* Console search: navy to match (scoped to .admin-body so the light-page mentor
   bar keeps its own styling). The old .admin-row overrides here were stale
   leftovers that reset the gold ledger-spine — removed. */
.admin-body .admin-search { border: 1.5px solid rgba(200,162,75,.30); background: var(--console-field); color: var(--on-navy); }
.admin-body .admin-search::placeholder { color: var(--on-navy-3); }

/* Console cream cards -> warm parchment (was stark near-white on the navy body).
   Scoped to .admin-body so the public "My Profile" popup's .acct-block stays as-is.
   --console-panel flips (warm parchment light / lifted-dark dark), so dark mode is
   unaffected; the gold hairline reads in both. Inner content keeps its current
   dark-on-parchment / light-on-dark colors — no inner flips. */
.admin-body .acct-block,
.admin-body .guide-sec,
.admin-body .stat-card,
.admin-body .stat-list,
.admin-body .treeed-list { background: var(--console-panel); border-color: rgba(200,162,75,.28); }
/* keep the destructive "Semester rollover" card's caution border (my rule above
   would otherwise repaint it gold) — theme-agnostic muted red. */
.admin-body .acct-block--danger { border-color: rgba(178,52,43,.42); }

/* Email composer tab (email-tab.js) reuses the generic .field / .pref-box form
   classes, but it mounts on the NAVY console where --heading/--text/--muted
   resolve to dark ink and vanish. Re-point them to the console's gold+cream-on-
   navy palette, and restore the navy .zselect that ".field select" was
   overpainting cream (0,1,1 > 0,1,0). Scoped to .email-tab so the cream
   edit-modal .field labels stay untouched. */
.email-tab .field label { color: var(--gold-bright); }
.email-tab .field input,
.email-tab .field textarea {
  background: var(--console-field); border-color: rgba(200,162,75,.30); color: var(--on-navy);
}
.email-tab .field input::placeholder,
.email-tab .field textarea::placeholder { color: var(--on-navy-3); }
.email-tab .zselect {
  background-color: var(--console-field); color: var(--on-navy);
  border-color: rgba(200,162,75,.5); padding: .7rem 1.9rem .7rem .8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E8C766' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center;
}
.email-tab .pref-box { color: var(--on-navy); }
.email-tab .pref-box small { color: var(--on-dark); }
.email-tab input[type="checkbox"] { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.email-tab input[type="file"] { color: var(--on-dark); font-size: .9rem; }
.email-tab .form-note { color: var(--on-dark); }
.email-tab .form-status { display: block; color: var(--on-navy); }
.stat-card { border-top: 3px solid var(--gold); }
.stat-h { display: flex; align-items: center; gap: .6rem; }
.stat-h::after { content: ''; flex: 1; height: 1px; background: rgba(200,162,75,.3); }

/* ============================================================================
   v9 — Family Tree explorer: floating toolbar, gesture hint, fullscreen,
   dropdown family selector on every screen size
   ============================================================================ */
.tree-controls {
  top: 12px; right: 12px; bottom: auto; left: auto; transform: none;
  align-items: center; gap: .12rem;
  background: rgba(var(--chrome),.9); border: 1px solid rgba(200,162,75,.45);
  border-radius: 999px; padding: .3rem .5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(var(--chrome),.35);
}
.tree-controls button {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: transparent; color: var(--gold-bright); box-shadow: none; font-size: 1.1rem;
}
.tree-controls button:hover { background: rgba(200,162,75,.25); color: #fff; }
.tree-controls__sep { width: 1px; height: 22px; background: rgba(200,162,75,.35); margin: 0 .3rem; }

/* Vertical rail on the LEFT edge (reads top-to-bottom) so it never lies across
   the cards while it waits to fade — the horizontal pill used to cover the
   bottom row until the first drag. */
.tree-hintchip {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: rgba(var(--chrome),.85); color: #e8d9ac; font-size: .78rem;
  padding: 1.1rem .45rem; border-radius: 999px; border: 1px solid rgba(200,162,75,.35);
  pointer-events: none; z-index: 9; white-space: nowrap; max-height: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis; transition: opacity .6s;
}
.tree-hintchip.gone { opacity: 0; }
/* Fullscreen: move the Close button to the top-left so the toolbar keeps the
   top-right corner; the hint keeps the left edge. */
.tree-shell--full .tree-fullclose { left: 14px; right: auto; }
.tree-shell--full .tree-hintchip { left: 14px; }

.tree-fullclose {
  display: none; position: absolute; top: 14px; right: 14px; z-index: 12;
  border-radius: 999px; border: 1px solid rgba(200,162,75,.5);
  background: rgba(var(--chrome),.88); color: var(--gold-bright);
  font-weight: 600; font-size: .9rem; padding: .55rem 1.15rem; cursor: pointer;
}
.tree-fullclose:hover { background: var(--gold); color: var(--navy-deep); }

.tree-shell--full {
  position: fixed; inset: 0; z-index: 1300; margin: 0 !important;
  background: var(--navy-deep);
}
.tree-shell--full .tree-viewport {
  height: 100dvh; max-height: none; border-radius: 0; border: 0;
  background: radial-gradient(120% 90% at 50% 0%, #fffdf7, var(--cream-2));
}
.tree-shell--full .tree-fullclose { display: block; }
body.tree-lock { overflow: hidden; }

.tree-node--rootsel {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,162,75,.45), 0 10px 26px rgba(200,162,75,.25);
}

/* the family dropdown is now THE selector on desktop too */
.fam-select {
  display: block; appearance: none; -webkit-appearance: none;
  margin: 1.4rem auto .2rem; padding: .75rem 2.8rem .75rem 1.2rem;
  border: 1.5px solid var(--gold); background-color: var(--paper);
  border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-sm);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23A07E2D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
.fam-select:hover { border-color: var(--gold-deep); }

@media (pointer: coarse) {
  .tree-toggle { padding: .3rem .55rem; font-size: .95rem; }
  .tree-controls button { width: 42px; height: 42px; }
}

/* ============================================================================
   v9 — unified chapter calendar: month grid + Up Next rail, admin in-place
   editing, symmetric layout
   ============================================================================ */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.8rem; align-items: start; }
.cal-main { background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.6rem; box-shadow: var(--shadow-sm); }
.cal-head { margin-bottom: 1rem; }
.cal-cell { background: var(--surface-2); }
.cal-cell--sel { border-color: var(--gold-deep); box-shadow: 0 0 0 1.5px var(--gold-deep); }
.cal-cell[data-day]:not(.cal-cell--has) { cursor: pointer; }
.cal-cell[data-day]:not(.cal-cell--has):hover { border-color: rgba(200,162,75,.6); }
.cal-cell:disabled { cursor: default; }
.cal-detail { border-top: 1px solid var(--hairline); padding-top: 1rem; margin-top: 1.2rem; }
.cal-detail:empty { display: none; }
.cal-detail__ev { background: var(--surface-2); border: 1px solid var(--hairline); box-shadow: none; }
.cal-detail__none { color: var(--muted); font-size: .9rem; }
.cal-detail__add { margin-top: .4rem; font-size: .88rem; padding: .55rem 1.2rem; }
.ev-loc { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.cal-rail { background: var(--surface); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow-sm); position: sticky; top: 88px; }
.cal-rail__h { margin: 0 0 .9rem; color: var(--heading); font-family: var(--display); font-size: 1.1rem; }
.cal-rail__none { color: var(--muted); font-size: .9rem; }
.cal-rail__add { width: 100%; margin-top: .4rem; font-size: .88rem; padding: .55rem 0; }
.cal-rail__help { display: block; width: 100%; margin-top: .8rem; background: none; border: 0; border-top: 1px solid var(--hairline); padding: .7rem 0 .1rem; color: var(--gold-deep); font-size: .84rem; font-weight: 600; cursor: pointer; text-align: center; }
.cal-rail__help:hover { color: var(--heading); }

.unx { display: flex; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--hairline); cursor: pointer; align-items: flex-start; }
.unx:last-of-type { border-bottom: 0; }
.unx:hover .unx__body > b { color: var(--gold-deep); }
.unx__date { flex: none; width: 46px; text-align: center; background: var(--navy); color: var(--on-navy); border-radius: 10px; padding: .35rem 0; }
.unx__date b { display: block; font-size: 1.15rem; font-family: var(--display); color: var(--gold-bright); line-height: 1.05; }
.unx__date span { font-size: .6rem; letter-spacing: .16em; }
.unx__body { min-width: 0; }
.unx__body > b { display: block; color: var(--heading); font-size: .95rem; line-height: 1.25; }
.unx__body small { color: var(--muted); font-size: .78rem; }
.unx__cat { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.unx__cat--philanthropy { color: #2c6e2c; }
.unx__cat--meeting { color: var(--heading); }
.unx__cat--reunion { color: #7a4a9e; }
.unx__cat--rush { color: #8a5a1f; }
.unx .ev-rsvp { margin-top: .4rem; }
.unx .ev-rsvp__btn { padding: .25rem .7rem; font-size: .76rem; }
.unx .ev-rsvp__who { display: none; }

.cal-adminrow { display: flex; gap: .5rem; margin-top: .6rem; }
.cal-mini { border: 1.5px solid var(--navy-2); background: var(--surface-2); color: var(--heading); border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.cal-mini:hover { border-color: var(--gold-deep); }
.cal-mini--del { border-color: #c0392b55; color: #b03a2e; }
.cal-mini--del:hover { border-color: #b03a2e; background: #fdf0ee; }

.evm-allday { display: flex; align-items: center; gap: .5rem; color: var(--heading); font-size: .92rem; font-weight: 600; margin: .2rem 0 .8rem; cursor: pointer; }
.evm-allday input { width: auto; }
.evm-times { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem; }
.evm-actions { display: flex; align-items: center; gap: .8rem; margin-top: .4rem; }
.cal-helpbody p { color: var(--text); font-size: .95rem; line-height: 1.65; margin: 0 0 .9rem; }
.cal-helpbody b { color: var(--heading); }

@media (max-width: 880px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-rail { position: static; }
}

/* ============================================================================
   v9 — Recognized Excellence: engraved gold medallions (admin-editable)
   ============================================================================ */
.medals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 2.8rem; }
.medal {
  position: relative; text-align: center; padding: 2rem 1.2rem 1.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(200,162,75,.28); border-radius: 16px;
  overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.medal:hover { transform: translateY(-5px); border-color: rgba(200,162,75,.6); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.medal::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(232,199,102,.14) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform .8s ease;
  pointer-events: none;
}
.medal:hover::before { transform: translateX(120%); }
.medal__seal {
  width: 96px; height: 96px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.1rem; color: var(--navy-deep);
  background:
    radial-gradient(circle at 32% 28%, #f6e3a8, #E8C766 38%, #C8A24B 68%, #8f701f 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.55),
    inset 0 -4px 10px rgba(90,64,10,.45),
    0 0 0 3px rgba(200,162,75,.35),
    0 0 0 7px rgba(200,162,75,.12),
    0 10px 24px rgba(0,0,0,.4);
}
.medal__seal span { filter: drop-shadow(0 1px 0 rgba(255,240,190,.6)); }
.medal > b { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--gold-bright); line-height: 1.3; }
.medal__pillar { display: block; margin-top: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark); }
.medal p { color: var(--on-navy-3); font-size: .84rem; line-height: 1.55; margin: .7rem 0 0; }

.award-years { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.award-years button {
  border: 1px solid rgba(200,162,75,.4); background: transparent; color: var(--on-navy-2);
  border-radius: 999px; padding: .4rem 1.1rem; font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.award-years button:hover { border-color: var(--gold); color: var(--gold-bright); }
.award-years button.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep); border-color: transparent; }

.aw-year { color: var(--gold-bright); font-family: var(--display); margin: 1.4rem 0 .6rem; }

@media (max-width: 900px) { .medals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .medals { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* ============================================================================
   v9 — header polish, announcement banner redesign, rich account dropdown
   ============================================================================ */
/* nav link underline sweep */
.nav__links a { position: relative; padding-bottom: 4px; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav__links a:hover::after, .nav__links a.on::after { transform: scaleX(1); }
.nav--scrolled { background: rgba(var(--chrome), .97); box-shadow: 0 10px 30px rgba(var(--chrome),.45); border-bottom-color: rgba(200,162,75,.55); }
.brand .crest-badge { transition: box-shadow .25s; }
.brand:hover .crest-badge { box-shadow: 0 0 0 3px rgba(200,162,75,.35), 0 0 18px rgba(232,199,102,.5); }

/* account dropdown: navy identity header + roomy icon rows */
.nav__chip .nav__avatar { box-shadow: 0 0 0 2px rgba(200,162,75,.55); }
.nav__caret { transition: transform .2s; }
.nav__chip[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__menu {
  width: 262px; padding: 0 0 .45rem; border-radius: 16px; overflow: hidden;
  animation: menuIn .18s ease both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav__menu-head {
  display: flex; align-items: center; gap: .8rem; padding: .95rem .9rem;
  background: linear-gradient(135deg, #10294f, #0A1F44 70%);
  border-bottom: 1px solid rgba(200,162,75,.35); margin-bottom: .4rem;
}
.nav__menu-av {
  position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  box-shadow: 0 0 0 2px rgba(200,162,75,.6);
}
.nav__menu-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.nav__menu-id { min-width: 0; }
.nav__menu-id b { display: block; color: var(--on-navy); font-family: var(--display); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__menu-id > span { display: block; color: var(--on-dark); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }
.role-pill {
  display: inline-block; margin-top: .4rem; font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: .16rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.1); color: var(--on-navy-2); border: 1px solid rgba(255,255,255,.18);
}
.role-pill--admin {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy-deep); border-color: transparent;
}
.nav__menu a, .nav__menu button { display: flex; align-items: center; gap: .65rem; margin: 0 .45rem; width: auto; padding: .6rem .55rem; }
.nav__menu a i, .nav__menu button i { font-style: normal; flex: none; width: 22px; text-align: center; }
.nav__menu-admin em { font-style: normal; margin-left: auto; }
.nav__menu-badge {
  background: #c0392b; color: #fff; font-size: .64rem; font-weight: 700;
  border-radius: 999px; padding: .12rem .5rem; margin-left: .3rem;
}
.nav__menu-divider { margin: .4rem .9rem; }

/* ============================================================================
   Crest system — featured "Our Arms" showcase + faint section watermarks
   ============================================================================ */
.has-watermark { position: relative; overflow: hidden; }
/* Floating crest watermark: a transparent PNG (no rectangle) that adapts to
   theme + section background. Sits fully on-screen on the right, behind content. */
.sect-watermark {
  position: absolute; top: 50%; right: 2%; transform: translateY(-50%);
  width: min(430px, 40%); aspect-ratio: 500 / 750; z-index: 0;
  pointer-events: none; user-select: none;
}
.sect-watermark__img {
  display: block; width: 100%; height: 100%;
  background: center / contain no-repeat;
  opacity: .22;
}
/* which colored crest + how strong, per section background:
   - brotherhood is cream (light) -> dark crest;  navy/black -> gold crest
   - contact is navy/black in both themes         -> gold crest always      */
#brotherhood .sect-watermark__img { background-image: url("../img/crest-float-dark.webp"); }
#contact     .sect-watermark__img { background-image: url("../img/crest-float-gold.webp"); opacity: .2; }
:root[data-theme="dark"] #brotherhood .sect-watermark__img { background-image: url("../img/crest-float-gold.webp"); opacity: .26; }
:root[data-theme="dark"] #contact     .sect-watermark__img { opacity: .26; filter: drop-shadow(0 0 26px rgba(200,162,75,.18)); }
.has-watermark > .wrap { position: relative; z-index: 1; }
@media (max-width: 560px) { .sect-watermark { display: none; } }  /* protect form legibility on tiny screens */

/* reveal (slide in from the right) + gentle continuous float — only when motion is allowed */
.fx .sect-watermark {
  opacity: 0; transform: translateY(-50%) translateX(50px);
  transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.fx .sect-watermark.in { opacity: 1; transform: translateY(-50%) translateX(0); }
.fx .sect-watermark.in .sect-watermark__img { animation: wm-float 7s ease-in-out infinite; }
@keyframes wm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }


/* ============================================================================
   Networking Phase A — completion meter, open-to chips, Connect bar
   ============================================================================ */
/* profile completion meter (My Profile popup) */
.pmeter { display: flex; align-items: center; gap: .8rem; background: var(--surface-2); border: 1px solid rgba(200,162,75,.4); border-radius: 12px; padding: .65rem .9rem; margin-bottom: 1.1rem; }
.pmeter__bar { flex: 1; height: 8px; background: var(--hairline); border-radius: 999px; overflow: hidden; }
.pmeter__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: 999px; transition: width .4s ease; }
.pmeter > span { flex: none; color: var(--muted); font-size: .8rem; }
.pmeter > span b { color: var(--heading); }
.pmeter--done { color: var(--heading); font-size: .88rem; background: var(--tint); border-color: var(--gold); }

/* "open to" badges on the profile card */
.ot-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.ot-chip { background: var(--tint); border: 1px solid rgba(200,162,75,.55); color: var(--heading); border-radius: 999px; padding: .28rem .8rem; font-size: .78rem; font-weight: 700; }

/* Connect bar at the bottom of a brother card */
.bm__connect { display: flex; align-items: center; gap: .9rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.bm__connect span { color: var(--muted); font-size: .78rem; flex: 1; min-width: 180px; }
.bm__connect-btn { font-size: .88rem; padding: .55rem 1.3rem; }
.bm__connect-btn:disabled { opacity: .75; cursor: default; }

/* tiny open-to icons on roster cards */
.bro-card__ots { font-style: normal; margin-left: .3rem; letter-spacing: .1em; }
.bro-card__ot { font-style: normal; font-size: .8rem; }

/* "How networking works" trigger */
.net-help { background: none; border: 0; color: var(--gold-deep); font-weight: 600; font-size: .84rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.net-help:hover { color: var(--heading); }

/* ============================================================================
   Networking Phase B — mentor request, class index
   ============================================================================ */
/* mentor finder bar: search + request button */
.mentor-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.mentor-bar .admin-search { flex: 1; min-width: 240px; margin: 0; }
.mentor-bar .btn { flex: none; font-size: .88rem; padding: .6rem 1.2rem; white-space: nowrap; }

@media (max-width: 620px) { .mentor-bar .btn { width: 100%; } }

/* Phase C — invite status chip */
.schip--warn { background: #a4392f; color: #fff; }
.acct-block textarea { width: 100%; min-height: 110px; }

/* invite-link greeting on the portal auth card */
.invite-banner { background: var(--tint); border: 1.5px solid var(--gold); border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem; }
.invite-banner b { display: block; color: var(--heading); font-size: .95rem; }
.invite-banner span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.5; margin-top: .2rem; }
.invite-banner span b { display: inline; color: var(--heading); }

/* ============================================================================
   v10 — header: legible crest + Greek monogram, and a nav that never overflows
   ============================================================================ */
.brand { flex: none; }
.brand img { height: 52px; }
.brand__txt { font-size: 1.75rem; letter-spacing: .06em; line-height: 1.05; white-space: nowrap; }
.brand__txt small { font-size: .58rem; letter-spacing: .2em; margin-top: .22rem; }
.nav__inner { gap: 1rem; }
.nav__links a { white-space: nowrap; }
.nav__account { flex: none; }

/* Tighten the links before handing off to the hamburger. */
@media (max-width: 1180px) {
  .nav__links { gap: 1.05rem; }
  .nav__links a { font-size: .86rem; }
}

/* The links + bell + account chip stopped fitting on one line far above the old
   760px hamburger breakpoint — the nav wrapped onto the hero and "Contact" slid
   under the notification bell. Hand off while there's still room. */
@media (max-width: 1023px) {
  .nav__links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(var(--chrome),.98); padding: 1rem 0;
    border-bottom: 1px solid rgba(200,162,75,.3);
    transform: translateY(-140%); transition: transform .3s; align-items: stretch;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: .9rem 8vw; font-size: 1rem; }
  .nav__links a::after { display: none; }   /* underline sweep is for the desktop row */
  .nav__links .nav__cta { margin: .6rem 8vw; text-align: center; }
  .nav__toggle { display: block; }
  .nav__account { margin-left: auto; margin-right: .6rem; }
}

@media (max-width: 620px) {
  .brand img { height: 44px; }
  .brand__txt { font-size: 1.45rem; }
  .brand__txt small { font-size: .52rem; letter-spacing: .16em; }
}

/* ---- Phone header: make the row actually fit -------------------------------
   On a ~428px phone the row wanted ~417px of the ~394px available: the brand
   subtitle ("EST. 1993 · GENESEO", ~140px) and the ADMIN text badge (~55px)
   overflowed it, shoving the hamburger off the right edge entirely (so the nav
   links were unreachable) and clipping the account chip. Trim to the essentials
   — crest + ΖΒΞ, theme, bell, avatar, hamburger — and everything fits with room
   to spare. Nothing is lost: the subtitle is on the hero, and the dropdown still
   shows the "★ Admin" role pill. */
@media (max-width: 620px) {
  .nav__inner { gap: .35rem; flex-wrap: nowrap; }
  .brand { gap: .5rem; min-width: 0; flex: none; }
  .brand img { height: 38px; }
  .brand__txt { font-size: 1.25rem; }
  .brand__txt small { display: none; }
  .theme-toggle { width: 40px; height: 40px; margin-right: .1rem; }
  .bell { margin-right: .15rem; }
  .bell__btn { width: 40px; height: 40px; font-size: .95rem; }
  .bell ~ .nav__account { margin-left: .2rem; }
  .nav__chip { padding: .22rem .4rem; gap: .35rem; }
  .nav__chip .admin-badge { display: none; }
  .nav__toggle { flex: none; padding: 8px 7px; margin-left: .25rem; }
}

/* Roomier, easier-to-tap mobile menu rows. */
@media (max-width: 1023px) {
  .nav__links a { padding: 1rem 8vw; border-bottom: 1px solid rgba(200,162,75,.10); }
  .nav__links a:last-of-type { border-bottom: 0; }
}

/* Below the breakpoint .nav__links is position:fixed and leaves the flow, so the
   bell (a sibling injected before .nav__account) would drift left beside the
   brand. Push the bell right; the chip then tucks in beside it. */
@media (max-width: 1023px) {
  .bell { margin-left: auto; }
  .bell ~ .nav__account { margin-left: .35rem; }
  .nav__toggle { margin-left: .4rem; }
}

/* Crossing the hamburger breakpoint flips .nav__links to position:fixed with
   translateY(-140%). Because transform is transitioned, the menu visibly slid
   up out of view — a split-second flash of the whole menu on every resize.
   Only allow the animation once the layout has settled (class set by JS). */
@media (max-width: 1023px) {
  .nav__links { transition: none; }
  .nav-anim .nav__links { transition: transform .3s; }
}


/* ============================================================================
   THEME TOKENS — light aliases the existing palette; [data-theme="dark"] is a
   full BLACK + GOLD identity (not a dimmed navy). Backgrounds go black, the
   navy chrome family + --chrome go black, and text flips to a legible gold.
   ============================================================================ */
:root {
  --bg:        var(--cream);
  --bg-2:      var(--cream-2);
  --surface:   var(--white);
  --surface-2: var(--paper);
  --heading:   var(--navy);
  --text:      var(--ink);
  --hairline:  #e6ded0;
  --tint:      #fdf6e0;
  --chrome:    7, 22, 52;     /* nav / modals / overlays (navy in light) */
  --on-dark:   #cdd6e6;       /* body text that sits on navy sections */
  --scroll-track: #0A1F44;   /* solid NAVY channel — a transparent/near-white track read as clunky */
  /* Text + surfaces that sit ON navy-family backgrounds. The navy tokens go
     BLACK in dark mode, so anything painted on them must come from these
     tokens — never literal cream/blue-grey hex (it won't flip and reads
     white-on-black). --on-navy strong > --on-navy-2 secondary > --on-navy-3 muted. */
  --on-navy:   var(--cream);
  --on-navy-2: #d7deec;
  --on-navy-3: #93a4c2;
  --console-card-hi: #16294b;  /* console record-row / table gradient */
  --console-card-lo: #112240;
  --console-field:   #0f2143;  /* console inputs + navy dropdowns */
  --console-panel:   #ece4d2;  /* warm parchment cards on the navy console (was stark #FBF8F1) */
}
:root[data-theme="dark"] {
  /* True neutral black. The page stays essentially dead black; the separation
     between page and cards comes from lifting the CARDS, not from greying out
     the background — so the deep-black look survives on OLED. */
  --bg:        #050505;   /* page — still reads as pure black */
  --bg-2:      #0b0b0b;   /* alternating band sections */
  --surface:   #151515;   /* cards: lifted enough to show an edge */
  --surface-2: #1f1f1f;   /* inputs / nested panels */
  /* text -> gold family (high contrast on black) */
  --heading:   #f3d16b;   /* bright gold headings/titles */
  --text:      #ecdcaa;   /* pale gold body copy — legible */
  --muted:     #b19b64;   /* dim gold for secondary text */
  --on-dark:   #e8d8ab;   /* pale gold on the (now black) navy sections */
  /* the navy chrome family -> black */
  --navy:      #0b0b0b;
  --navy-2:    #131313;
  --navy-deep: #000000;
  --chrome:    8, 8, 8;    /* nav bar, modal scrims, overlays -> near-black */
  /* keep gold accents; hairlines + tints go gold */
  --gold:        #C8A24B;
  --gold-bright: #EAC873;
  --gold-deep:   #C8A24B;   /* no light-mode override existed → gold-deep text was too dim on the black console */
  --hairline:  rgba(200,162,75,.24);
  --tint:      rgba(200,162,75,.12);
  --shadow:    0 20px 55px rgba(0,0,0,.75);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.6);
  --scroll-track: #14110a;   /* near-black channel in dark mode; thumb stays gold */
  /* on-navy family -> gold text on the now-black navy surfaces */
  --on-navy:   #ecdcaa;
  --on-navy-2: #e8d8ab;
  --on-navy-3: #b19b64;
  --console-card-hi: #161616;  /* lifted blacks, matching the dark card identity */
  --console-card-lo: #101010;
  --console-field:   #191919;
  --console-panel:   #1a1712;  /* subtly-warm lifted dark; ≈ old #151515 so dark barely shifts */
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* hard-coded surfaces the tokens can't reach */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { color: var(--text); border-color: var(--hairline); background: var(--surface-2); }
:root[data-theme="dark"] .nav__links a { color: var(--on-dark); }
:root[data-theme="dark"] .nav__menu { background: #0d0d0d; border-color: rgba(200,162,75,.4); }
:root[data-theme="dark"] .nav__menu a, :root[data-theme="dark"] .nav__menu button { color: var(--on-dark); }
:root[data-theme="dark"] .nav__menu-head { background: linear-gradient(135deg, #1f1f1f, #050505 70%); }
:root[data-theme="dark"] .tree-viewport,
:root[data-theme="dark"] .tree-shell--full .tree-viewport {
  background: radial-gradient(circle at 50% 0%, #161616, #050505);
}
/* Cards get their edge from a box-shadow, which is invisible against black.
   The lifted --surface does most of the work; a faint hairline finishes it. */
:root[data-theme="dark"] .value,
:root[data-theme="dark"] .card-form,
:root[data-theme="dark"] .event,
:root[data-theme="dark"] .ev-card,
:root[data-theme="dark"] .give-tile,
:root[data-theme="dark"] .thread-row,
:root[data-theme="dark"] .thread-view,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .stat-list,
:root[data-theme="dark"] .guide-sec,
:root[data-theme="dark"] .welcome-step,
:root[data-theme="dark"] .spot-card,
:root[data-theme="dark"] .poll-card,
:root[data-theme="dark"] .cal-detail__ev,
:root[data-theme="dark"] .admin-card,
:root[data-theme="dark"] .admin-msg,
:root[data-theme="dark"] .admin-row,
:root[data-theme="dark"] .treeed-list,
:root[data-theme="dark"] .bell__menu,
:root[data-theme="dark"] .gmodal__card { border: 1px solid var(--hairline); }

/* Controls that borrowed navy for their border would vanish on a black card. */
:root[data-theme="dark"] .fam-chip,
:root[data-theme="dark"] .ev-toggle button,
:root[data-theme="dark"] .ev-rsvp__btn,
:root[data-theme="dark"] .tree-controls button,
:root[data-theme="dark"] .tree-node { border-color: rgba(200,162,75,.35); }
:root[data-theme="dark"] .tree-links path { stroke: var(--gold); opacity: .85; }
:root[data-theme="dark"] .cal-chip--meeting { background: #2a2410; }
:root[data-theme="dark"] .gmodal, :root[data-theme="dark"] .pmodal,
:root[data-theme="dark"] .bmodal, :root[data-theme="dark"] .admin-modal { background: rgba(0,0,0,.72); }
/* a soft gold halo lifts the crest off the black hero */
:root[data-theme="dark"] .hero__crest-img {
  filter: drop-shadow(0 0 34px rgba(200,162,75,.18)) drop-shadow(0 18px 46px rgba(0,0,0,.6));
}

/* the theme toggle button in the nav */
.theme-toggle {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(200,162,75,.45); background: rgba(255,255,255,.08);
  color: var(--gold-bright); font-size: 1rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center; margin-right: .4rem; transition: background .15s, transform .15s;
}
.theme-toggle:hover { background: rgba(200,162,75,.2); transform: translateY(-1px); }
@media (max-width: 460px) { .theme-toggle { width: 40px; height: 40px; margin-right: .25rem; } }
/* Console topbar: push the toggle to the right, beside the back pill. */
.admin-topbar .theme-toggle { margin-left: auto; margin-right: .8rem; }
/* Pages with no header at all (404): float it in the corner. */
.theme-toggle--fixed { position: fixed; top: 1rem; right: 1rem; z-index: 100; }

/* ============================================================================
   SCROLL ANIMATIONS — reveal-on-scroll, staggered cascades, section-title
   line-wipe, medal "stamp", hero entrance + parallax, and a scroll-progress
   bar. All motion is opt-in behind <html class="fx">, which an inline head
   snippet sets ONLY when the visitor allows motion. No .fx => everything is
   static and fully visible, so no-JS and reduced-motion users never see a
   blank or hidden element. GPU-only (transform/opacity) to stay jank-free.
   ============================================================================ */

/* thin gold progress bar across the top; fills with page scroll */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
@supports (animation-timeline: scroll()) {
  .fx .scroll-progress { animation: sp-grow linear both; animation-timeline: scroll(root); }
}
@keyframes sp-grow { to { transform: scaleX(1); } }

/* reveal-on-scroll: hidden until JS adds .in when the element enters view */
.fx .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.fx .reveal--left  { transform: translateX(-42px); }
.fx .reveal--right { transform: translateX(42px); }
.fx .reveal.in { opacity: 1; transform: none; }
/* On phones the horizontal slide-in pokes ~30px past the right edge (a ~360px block
   at translateX(42px)) → page-level horizontal scroll. Split halves stack vertically
   here anyway, so drop the sideways offset and keep only the vertical rise. */
@media (max-width: 640px) {
  .fx .reveal--left, .fx .reveal--right { transform: translateY(20px); }
}

/* staggered group: direct children cascade in, offset by their --i index */
.fx .stagger > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.fx .stagger.in > * { opacity: 1; transform: none; }

/* section-title rule wipes open once its header is revealed */
.fx .reveal .rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1) .15s; }
.fx .reveal.in .rule { transform: scaleX(1); }

/* award medals: the seal "stamps" in with a slight overshoot */
.fx .medals.in .medal__seal { animation: seal-stamp .6s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--i, 0) * 90ms + .12s); }
@keyframes seal-stamp { 0% { transform: scale(.5); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* hero: headline / tagline / CTAs rise in on load, staggered */
.fx .hero__text > * { opacity: 0; animation: hero-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.fx .hero__kicker { animation-delay: .10s; }
.fx .hero__text h1 { animation-delay: .24s; }
.fx .hero__rule { animation-delay: .38s; }
.fx .hero__tag { animation-delay: .50s; }
.fx .hero__cta { animation-delay: .62s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* hero parallax — desktop only, where the browser supports scroll timelines */
@supports (animation-timeline: view()) {
  @media (min-width: 900px) {
    .fx .hero__crest-col { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes hero-parallax { to { transform: translateY(-46px); } }
  }
}

/* ============================================================================
   Skeleton loaders — placeholder shimmer shown while a view's data fetches,
   then swapped for the real cards. Skeleton markup REUSES the component classes
   (.bro-card / .ggrid__cell / .thread-row / .admin-row) so the layout matches
   exactly; .sk just paints the shimmer. Decorative — always aria-hidden.
   ============================================================================ */
.sk { position: relative; overflow: hidden; background: rgba(130,142,164,.20); border-radius: 8px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: translateX(-100%); animation: sk-shimmer 1.25s ease-in-out infinite;
}
.sk-line { display: block; height: .72em; margin: .4em 0; }
:root[data-theme="dark"] .sk { background: rgba(200,210,230,.10); }
[aria-hidden="true"].sk-wrap, .sk-wrap[aria-hidden="true"] { pointer-events: none; }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ============================================================================
   🎓 Pledge Classes tab (admin console) — summary line, ⚠️ flags, bulk merge bar.
   Rows reuse .admin-row, so only these three bits are new.
   ============================================================================ */
.cls-sum { color: var(--on-dark); font-size: .9rem; margin: 0 0 .9rem; }
.cls-warn { color: #ffcf6b; }
.admin-row__when.cls-warn { color: #ffcf6b; }
/* Pending vet: a signup name the chapter roster doesn't recognize. */
.admin-row__when.admin-flag { color: #e59a9a; font-weight: 600; }
.cls-bulk {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .6rem 0 1.2rem; padding: .7rem .8rem;
  border: 1px solid rgba(200,162,75,.28); border-radius: 10px; background: var(--navy);
}
.cls-bulk label { color: var(--gold-bright); font-size: .85rem; font-weight: 600; }
.cls-bulk .form-note { margin: 0; }