/* ============================================
   components.css — Component-level styles
   Buttons, cards, nav, forms, lockup, accent sections.
   ============================================ */

/* ============================================
   Lockup (Region IX brand mark)
   Source: ../_design-system.md "Brand Lockup" section
   Variations: A (primary), B (badge), D (compact)
   ============================================ */
.lockup {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
}

.lockup__mark {
  width: auto;
  display: block;
  flex-shrink: 0;
}

.lockup__sep {
  background: var(--lockup-sep);
  display: block;
  flex-shrink: 0;
}

.lockup__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.lockup__region {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lockup-region);
}

.lockup__ix {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-on-authority);
}

/* Header lockup — override for authority bg */
.site-header .lockup__ix,
.mobile-nav-dialog .lockup__ix {
  color: var(--text-on-authority);
}

/* Variation A — Primary (header)
   Scaled down ~25% on REGION + IX vs prior spec so the NBA national
   logo holds visual hierarchy. REGION and IX tightened toward each
   other with margin-bottom: -2px and line-height: 0.92 on IX. */
.lockup-primary {
  gap: 16px;
}
.lockup-primary .lockup__mark { height: 56px; }
.lockup-primary .lockup__sep { width: 1px; height: 56px; align-self: center; }
.lockup-primary .lockup__region {
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: -2px;
  line-height: 1;
}
.lockup-primary .lockup__ix {
  font-size: 28px;
  line-height: 0.92;
}

@media (min-width: 640px) {
  .lockup-primary .lockup__mark { height: 64px; }
  .lockup-primary .lockup__sep { height: 64px; }
  .lockup-primary .lockup__region { font-size: 11px; }
  .lockup-primary .lockup__ix { font-size: 32px; }
}

/* Variation B — Badge (footer)
   Same proportional scale-down as Variation A; REGION tucked tight to IX. */
.lockup-badge {
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.lockup-badge .lockup__mark { height: 72px; }
.lockup-badge .lockup__sep { height: 1px; width: 96px; }
.lockup-badge .lockup__text { gap: 0; }
.lockup-badge .lockup__region {
  font-size: 9px;
  letter-spacing: 0.10em;
  margin-bottom: -1px;
  line-height: 1;
}
.lockup-badge .lockup__ix {
  font-size: 26px;
  line-height: 0.92;
}

@media (min-width: 640px) {
  .lockup-badge .lockup__mark { height: 78px; }
  .lockup-badge .lockup__sep { width: 110px; }
  .lockup-badge .lockup__ix { font-size: 28px; }
}

/* Variation D — Compact (mobile dialog header / sticky shrunken nav) */
.lockup-compact { gap: 10px; }
.lockup-compact .lockup__mark { height: 40px; }
.lockup-compact .lockup__sep { width: 1px; height: 40px; align-self: center; }
.lockup-compact .lockup__text {
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}
.lockup-compact .lockup__region {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.lockup-compact .lockup__ix {
  font-size: 16px;
  line-height: 1;
}

/* ============================================
   Buttons
   ============================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  font-size: var(--type-button);
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

.button--primary {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
  border-color: var(--cta-primary-bg);
}
.button--primary:hover {
  background: var(--cta-primary-hover);
  color: var(--cta-primary-text);
  border-color: var(--cta-primary-hover);
}

.button--secondary {
  background: transparent;
  color: var(--text-on-authority);
  border-color: rgba(247, 243, 245, 0.4);
}
.button--secondary:hover {
  background: rgba(247, 243, 245, 0.12);
  border-color: rgba(247, 243, 245, 0.7);
  color: var(--text-on-authority);
}

.button--outline {
  background: transparent;
  color: var(--cta-primary-bg);
  border-color: var(--cta-primary-bg);
}
.button--outline:hover {
  background: var(--cta-primary-bg);
  color: white;
}

.button--sponsor {
  background: var(--cta-sponsor-bg);
  color: var(--cta-primary-text);
  border-color: var(--cta-sponsor-bg);
}
.button--sponsor:hover {
  background: var(--crimson-600);
  border-color: var(--crimson-600);
  color: var(--cta-primary-text);
}

.button--lg {
  padding: var(--space-4) var(--space-8);
  font-size: 15px;
}

/* ============================================
   Partials loading anti-flash — kept as a safety reservation,
   though the header is now fixed-positioned and out of flow.
   ============================================ */
[data-include="header"] {
  display: block;
}

/* ============================================
   Header (v8 — floating fixed nav, slides in when hero lockup leaves view)
   Default state on home: hidden, translated up off-screen.
   .is-visible class (added via JS) slides it down.
   Other pages: JS adds .is-visible immediately since no hero lockup exists.
   ============================================ */
/*
   Site header — sitewide scroll-direction behavior (v2):

   - Default state (over a hero, near the top): transparent, no background,
     no border, no shadow. Sits visibly over the hero image / dark fill.
   - Scrolling DOWN past the hide threshold: header slides UP off-screen.
   - Scrolling UP from anywhere past the threshold: header slides BACK DOWN
     with the wine background + backdrop blur applied (so it reads against
     any underlying content, not just the hero).
   - Pages WITHOUT a hero (.site-header.no-hero-mode applied by JS): the
     wine background is always on so the header doesn't sit on raw page bg.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--text-on-authority);
  padding: 18px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transform: translateY(0);
  transition:
    transform 600ms var(--ease-in-out),
    background-color 280ms ease,
    backdrop-filter 280ms ease,
    -webkit-backdrop-filter 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

/* No-hero pages — always show the wine "chrome" background. JS adds this. */
.site-header.no-hero-mode,
.site-header.is-floating {
  background: rgba(43, 0, 21, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* Fallback for browsers without backdrop-filter — solid wine. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.no-hero-mode,
  .site-header.is-floating { background: var(--wine-850); }
}

/* Hidden state — translate up off-screen. Applied while scrolling down past
   the threshold, on pages with a hero. */
.site-header.is-hidden { transform: translateY(-100%); }

/* Legacy compat — earlier JS toggled .is-visible. Keep the rule as a no-op
   so any cached scripts during deploy don't break the header. */
.site-header.is-visible { transform: translateY(0); }

@media (min-width: 768px) {
  .site-header { padding-inline: var(--space-10); }
}

.site-header__brand-link {
  color: var(--text-on-authority);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-block;
  /* Slow, symmetric ease-in-out grow on hover. Center origin so the
     scale expands evenly in both directions instead of pivoting from
     the edge. 700ms feels paced both on the way up and the way back
     down — neither snappy nor sluggish. */
  transform-origin: center center;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.site-header__brand-link:hover,
.site-header__brand-link:focus-visible {
  transform: scale(1.06);
}

/* Smaller lockup in the nav band — overrides lockup-primary defaults */
.site-header .lockup-primary .lockup__mark { height: 44px; }
.site-header .lockup-primary .lockup__sep { height: 44px; }
.site-header .lockup-primary .lockup__region { font-size: 10px; }
.site-header .lockup-primary .lockup__ix { font-size: 22px; }
@media (min-width: 640px) {
  .site-header .lockup-primary .lockup__mark { height: 48px; }
  .site-header .lockup-primary .lockup__sep { height: 48px; }
  .site-header .lockup-primary .lockup__region { font-size: 10px; }
  .site-header .lockup-primary .lockup__ix { font-size: 24px; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* v31 per Diallo: scoped to the direct child UL only, so the horizontal
   flex layout applies to the top-level nav row and DOESN'T cascade into
   the dropdown menus' nested ULs (which need to stack vertically). */
.site-header__nav > ul {
  display: flex;
  gap: var(--space-12);
  list-style: none;
}

.site-header__nav a {
  color: var(--grey-100);
  font-size: 13px;            /* down 2px for a cleaner balance with bigger spacing */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  opacity: 1;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header__nav a:hover {
  color: #FFFFFF;
}

.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--crimson-400);   /* red underline instead of tan */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.site-header__nav a:hover::after,
.site-header__nav a.is-active::after {
  transform: scaleX(1);
}

.site-header__nav a.is-active {
  color: #FFFFFF;
}

/* ============================================================
   Light-background header variant — for pages with a light page bg
   (post template v3+). At REST: transparent header, crimson nav links
   + crimson Region IX lockup text. The mark uses the black-on-light
   logo asset (swapped in the page HTML).
   On SCROLL (.is-floating): flips to a solid crimson floating header
   that immediately appears as the page scrolls under it. Dropdown
   panel contents (.nav-menu a) are NOT touched — they keep their
   white-on-dark styling since the panels themselves are dark.
   The Support CTA (.site-header__cta) is also untouched — it stays
   as the white-on-crimson button it is by default.
   ============================================================ */
.site-header--on-light,
.site-header--on-light.no-hero-mode {
  /* Solid white resting state — sits cleanly above the cream mesh
     body. Soft hairline border + faint warm shadow define the edge
     without competing with the post content. The is-floating state
     (added on scroll) flips the bg back to the default wine chrome. */
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: rgba(50, 0, 25, 0.06);
  box-shadow: 0 1px 0 rgba(50, 0, 25, 0.04);
  color: var(--crimson-600);
}
/* Brand + lockup colors (light state) */
.site-header--on-light .site-header__brand-link { color: var(--crimson-600); }
.site-header--on-light .lockup__region,
.site-header--on-light .lockup__ix { color: var(--crimson-600); }
.site-header--on-light .lockup__sep { background-color: rgba(110, 15, 31, 0.30); }

/* Nav links (NOT inside a dropdown panel — those panels are dark) */
.site-header--on-light .site-header__nav > ul > li > a { color: var(--crimson-600); }
.site-header--on-light .site-header__nav > ul > li > a:hover,
.site-header--on-light .site-header__nav > ul > li > a.is-active { color: var(--crimson-700); }

/* Nav triggers (About, Membership) — but NOT the Support CTA button.
   The Support CTA has a solid crimson bg + white text and keeps that. */
.site-header--on-light .site-header__nav .nav-trigger:not(.site-header__cta),
.site-header--on-light .site-header__nav .nav-trigger:not(.site-header__cta) .nav-trigger__label {
  color: var(--crimson-600);
}
.site-header--on-light .site-header__nav .nav-trigger:not(.site-header__cta):hover,
.site-header--on-light .site-header__nav .nav-trigger:not(.site-header__cta):hover .nav-trigger__label {
  color: var(--crimson-700);
}

/* Hamburger bars become crimson too */
.site-header--on-light .hamburger__bar { background: var(--crimson-600); }

/* SCROLL state — fall back to the DEFAULT floating header (dark wine
   with blur). The base .is-floating rule provides the bg + blur; we
   only need to flip the text colors back to white since the bg is no
   longer light. */
.site-header--on-light.is-floating .site-header__brand-link,
.site-header--on-light.is-floating .lockup__region,
.site-header--on-light.is-floating .lockup__ix,
.site-header--on-light.is-floating .site-header__nav > ul > li > a,
.site-header--on-light.is-floating .site-header__nav .nav-trigger:not(.site-header__cta),
.site-header--on-light.is-floating .site-header__nav .nav-trigger:not(.site-header__cta) .nav-trigger__label {
  color: #FFFFFF;
}
.site-header--on-light.is-floating .site-header__nav > ul > li > a:hover,
.site-header--on-light.is-floating .site-header__nav > ul > li > a.is-active {
  color: var(--tan-200);
}
.site-header--on-light.is-floating .lockup__sep { background-color: rgba(255, 255, 255, 0.30); }
.site-header--on-light.is-floating .hamburger__bar { background: #FFFFFF; }
/* In the floating state, swap the mark back to the white NBA logo so
   it reads against the dark wine bg. */
.site-header--on-light.is-floating .lockup__mark {
  content: url('../assets/icons/nba-logo-white.svg');
}

/* ============================================
   v30 per Diallo: nav dropdown system.
   About + Membership in the primary nav, plus the Support CTA, all
   open dropdown menus on hover/click/focus. Triggers are <button>
   elements styled to match the existing nav-link look. Menus are
   absolutely-positioned panels with a crimson gradient, soft drop
   shadow, and an animated in/out (fade + slight rise + 180° chevron
   flip). A 14px hover bridge above each menu prevents flicker when
   the cursor crosses the gap between trigger and panel.
   ============================================ */
.nav-item--has-menu {
  position: relative;
}
.nav-trigger {
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--grey-100);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0 0 4px 0;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-trigger:hover {
  color: #FFFFFF;
}
/* Underline accent (matches the .site-header__nav a::after pattern,
   but excludes the chevron from its width). */
.nav-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 18px;
  bottom: -2px;
  height: 2px;
  background: var(--crimson-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.nav-item--has-menu:hover > .nav-trigger::after,
.nav-trigger[aria-expanded="true"]::after,
.nav-trigger.is-active::after {
  transform: scaleX(1);
}
.nav-trigger.is-active {
  color: #FFFFFF;
}
/* v31 per Diallo: chevrons sit pointing RIGHT by default (rotate -90°
   from the down-pointing SVG), then animate to pointing DOWN when the
   parent menu opens. Smooth 280ms rotation, same easing across all
   three triggers (About, Membership, Support). */
.nav-trigger__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  color: currentColor;
}
.nav-trigger__chevron svg {
  width: 100%;
  height: 100%;
}
.nav-item--has-menu:hover > .nav-trigger .nav-trigger__chevron,
.nav-trigger[aria-expanded="true"] .nav-trigger__chevron {
  transform: rotate(0deg);
}

/* Dropdown panel */
.nav-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  margin-top: 14px;
  min-width: 230px;
  background: linear-gradient(165deg, #9A1F2C 0%, #6B1722 55%, #4A0F1B 100%);
  border-radius: 14px;
  padding: 10px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition:
    opacity 280ms var(--ease-out),
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0ms linear 320ms;
  box-shadow:
    0 14px 36px rgba(74, 15, 27, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Hover bridge: invisible band above the panel so the cursor can
   cross from trigger to menu without :hover dropping. */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-item--has-menu:hover > .nav-menu,
.nav-item--has-menu:focus-within > .nav-menu,
.nav-trigger[aria-expanded="true"] + .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 240ms var(--ease-out),
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0ms linear 0ms;
}
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a,
.nav-menu__placeholder {
  display: block;
  /* v33 per Diallo: right padding bumped so the external-link icon
     next to National Bar Association has the same breathing room
     from the panel edge that text has on the left. Applies to all
     dropdowns for consistency. */
  padding: 11px 32px 11px 24px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition:
    background-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    padding-left 260ms var(--ease-out);
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  padding-left: 30px;
  outline: none;
}
.nav-menu__placeholder {
  color: rgba(255, 255, 255, 0.42);
  cursor: not-allowed;
}
.nav-menu__placeholder em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.32);
  margin-left: 8px;
}

/* Active page inside a dropdown: clean underline + unclickable.
   Mirrors the top-level nav active treatment (white text + crimson
   underline) instead of a left-side border. */
.nav-menu a.is-active {
  color: #FFFFFF;
  background-color: rgba(196, 78, 45, 0.18);
  pointer-events: none;
  cursor: default;
  box-shadow: inset 0 -2px 0 var(--crimson-400);
}
.nav-menu a.is-active:hover { padding-left: 24px; }
/* v31 per Diallo: external-link indicator on the National Bar Association
   link inside Membership. Small up-right arrow that nudges further on
   hover so the affordance reads as "opens a new tab". */
.nav-menu__ext-ic {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  vertical-align: -1px;
  color: var(--tan-300);          /* warm rich tan at rest */
  opacity: 1;
  transition:
    transform 240ms var(--ease-out),
    color 240ms var(--ease-out);
}
.nav-menu a:hover .nav-menu__ext-ic {
  color: var(--crimson-400);      /* bright red on hover */
  transform: translate(2px, -2px);
}

/* Right-aligned variant for the Support CTA dropdown. */
.nav-menu--cta {
  left: auto;
  right: -4px;
  transform-origin: top right;
  min-width: 220px;
}

/* Support button (replaces Donate). The btn-primary--bold base
   handles the pill + circle + expanding-hover; the doubled-class
   .site-header__cta overrides keep it compact. When the dropdown
   is open via click (aria-expanded="true") we hold the hover state
   so the button stays visually "on". */
.btn-primary.site-header__cta.nav-trigger {
  /* The chevron icon sits inside the existing .btn-primary__ic
     circle. Override the underline pseudo since this trigger lives
     in a button, not a nav link. */
}
.btn-primary.site-header__cta.nav-trigger::after {
  display: none;
}
.btn-primary.site-header__cta.nav-trigger[aria-expanded="true"] {
  color: #FFFFFF;
  border-color: var(--crimson-700);
}
.btn-primary.site-header__cta.nav-trigger[aria-expanded="true"]::before {
  top: -1px; right: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  background: var(--crimson-700);
}
/* v31 per Diallo: chevron inside the Support circle starts pointing
   RIGHT (same as About + Membership) and rotates 90° clockwise to
   point DOWN when hovered or when the dropdown is open. */
.btn-primary.site-header__cta .btn-primary__ic svg {
  transform: rotate(-90deg);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-primary.site-header__cta.nav-trigger[aria-expanded="true"] .btn-primary__ic svg,
.site-header__cta-wrap:hover .btn-primary.site-header__cta .btn-primary__ic svg {
  transform: rotate(0deg);
}
.site-header__cta-wrap {
  position: relative;
}
.site-header__cta-wrap .nav-menu {
  margin-top: 12px;
}

/* Mobile dialog groups — section headings + indented sub-items so
   the dialog mirrors the desktop dropdown structure. */
.mobile-nav-dialog__group {
  padding: var(--space-3) 0;
}
.mobile-nav-dialog__group-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--crimson-400);
  margin-bottom: 8px;
}
.mobile-nav-dialog__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-dialog__group ul li {
  border-bottom: none;
}
.mobile-nav-dialog__group ul a,
.mobile-nav-dialog__placeholder {
  display: block;
  padding: 10px 0 10px 14px;
  color: var(--text-on-authority);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}
.mobile-nav-dialog__group ul a:hover {
  opacity: 1;
  padding-left: 20px;
  color: var(--tan-200);
}
.mobile-nav-dialog__placeholder {
  color: rgba(247, 243, 245, 0.4);
  cursor: not-allowed;
}
.mobile-nav-dialog__placeholder em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(247, 243, 245, 0.35);
  margin-left: 8px;
  text-transform: uppercase;
}
/* v31 per Diallo: external-link indicator in the mobile dialog —
   matches the desktop dropdown version, sized for mobile readability. */
.mobile-nav-dialog__ext-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -1px;
  color: var(--tan-300);          /* warm rich tan at rest */
  opacity: 1;
  transition:
    transform 240ms var(--ease-out),
    color 240ms var(--ease-out);
}
.mobile-nav-dialog__group ul a:hover .mobile-nav-dialog__ext-ic {
  color: var(--crimson-400);      /* bright red on hover */
  transform: translate(2px, -2px);
}

.site-header__cta {
  display: none;
  border-radius: 100px;          /* pill geometry */
}
/* v27 per Diallo: header Donate CTA uses the full btn-primary family
   (label + circle icon + expanding hover) but at a tightened scale
   that matches the previous compact pill height (~32px). Doubled-class
   specificity keeps these overrides ahead of the base btn-primary rules. */
.btn-primary.site-header__cta {
  height: 32px;
  padding: 0 4px 0 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}
.btn-primary.site-header__cta::before {
  top: 3px; right: 3px;
  width: 26px; height: 26px;
}
.btn-primary.site-header__cta:hover::before {
  top: -1px; right: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
}
.btn-primary.site-header__cta .btn-primary__label {
  margin-right: 10px;
}
.btn-primary.site-header__cta .btn-primary__ic {
  width: 26px; height: 26px;
}
.btn-primary.site-header__cta .btn-primary__ic svg {
  width: 8px; height: 11px;
}
.site-header__menu-toggle { display: flex; }

@media (min-width: 860px) {
  .site-header__nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__menu-toggle { display: none; }
}

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

/* ============================================
   Hamburger button
   ============================================ */
.site-header__menu-toggle {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(247, 243, 245, 0.1);
  border: 1px solid rgba(247, 243, 245, 0.2);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-out);
}

.site-header__menu-toggle:hover {
  background: rgba(247, 243, 245, 0.18);
}

.hamburger__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text-on-authority);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================
   Mobile nav dialog
   ============================================ */
.mobile-nav-dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  height: 100%;
  border: none;
  background: var(--bg-authority);
  color: var(--text-on-authority);
  padding: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
}

.mobile-nav-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

@starting-style {
  .mobile-nav-dialog[open] {
    transform: translateX(-100%);
    opacity: 0;
  }
}
.mobile-nav-dialog[open] {
  transform: translateX(0);
  opacity: 1;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

.mobile-nav-dialog__inner {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: var(--space-8);
}

.mobile-nav-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--text-on-authority);
  background: rgba(247, 243, 245, 0.08);
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.mobile-nav-dialog__close:hover {
  background: rgba(247, 243, 245, 0.15);
}

.mobile-nav-dialog__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-dialog__links li {
  border-bottom: 1px solid rgba(247, 243, 245, 0.1);
}

.mobile-nav-dialog__links a {
  display: block;
  padding: var(--space-4) 0;
  color: var(--text-on-authority);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}

.mobile-nav-dialog__links a:hover,
.mobile-nav-dialog__links a.is-active {
  opacity: 1;
  padding-left: var(--space-2);
  color: var(--tan-200);
}

.mobile-nav-dialog__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}

.mobile-nav-dialog__ctas .button {
  width: 100%;
  justify-content: center;
  padding-block: var(--space-4);
}

/* ============================================
   Footer
   ============================================ */
/* ============================================
   Site footer — wine palette dark gradient,
   4-column balanced layout (badge + 2 nav + NBA),
   crimson hover underlines, BQ credit with light-sweep on hover
   ============================================ */
.site-footer {
  /* Vertical wine gradient, three stops, deep. The top sits at wine-850
     (not wine-800), so even the "lightest" point reads as a darker wine
     than the rest of the site. Straight vertical, no angle, no radial,
     no crimson warm spots. Just deeper wine top to bottom. */
  background: linear-gradient(180deg,
    #2B0015 0%,        /* wine-850 at top */
    #200010 55%,       /* deeper wine middle */
    #170009 100%);     /* deepest wine bottom */
  color: var(--text-on-authority);
  padding: var(--space-16) var(--space-5) var(--space-8);
}

@media (min-width: 768px) {
  .site-footer { padding-inline: var(--space-8); }
}

.site-footer__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-10);
  justify-content: center;
}

/* Four columns at desktop — each at its natural width, evenly distributed.
   Larger gap between the two nav cols vs. between the outer cols + their neighbors. */
@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
    column-gap: var(--space-10);
    align-items: start;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Rotating badge — column 1 anchor. Hover: gentle grow + per-element
   color shift across the three pieces (Region, IX, ring text). */
.site-footer__badge {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  cursor: pointer;
}
.site-footer__badge--link { text-decoration: none; }
.site-footer__badge:hover { transform: scale(1.06); }

.site-footer__badge svg.ring {
  width: 100%;
  height: 100%;
  animation: spin-footer-badge 28s linear infinite;
}
.site-footer__badge svg.ring text {
  fill: var(--tan-100);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: fill 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__badge:hover svg.ring text {
  fill: var(--tan-300);   /* warm amber shift on hover */
}

.site-footer__badge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.site-footer__badge-center .region {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson-400);
  line-height: 1;
  transition: color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__badge-center .ix {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 600;
  color: #F5EFE8;
  line-height: 1;
  margin-top: 6px;
  transition: color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover color swap: REGION goes white, IX goes red. */
.site-footer__badge:hover .site-footer__badge-center .region { color: #FFFFFF; }
.site-footer__badge:hover .site-footer__badge-center .ix     { color: var(--crimson-400); }

@keyframes spin-footer-badge { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .site-footer__badge svg.ring { animation: none; }
  .site-footer__badge { transition: none; }
  .site-footer__badge:hover { transform: none; }
}

.site-footer__nav-col h3 {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tan-200);
  margin-bottom: var(--space-4);
}

.site-footer__nav-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav links — bumped up 2px from previous size, with crimson underline on hover */
.site-footer__nav-col a {
  color: var(--text-on-authority);
  font-size: 15px;            /* bumped up from var(--type-body-sm) which is ~13px */
  line-height: 1.5;
  opacity: 0.82;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--crimson-400), var(--crimson-400));
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  transition: opacity 250ms ease, color 250ms ease, background-size 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__nav-col a:hover {
  opacity: 1;
  color: #fff;
  background-size: 100% 1.5px;
}

/* v23 — Active page underline on footer nav, matching the header's
   underline-on-active behavior. JS adds .is-active + aria-current
   to whichever link matches the current path (see setActiveNavLink
   in main.js). */
.site-footer__nav-col a.is-active {
  opacity: 1;
  color: #fff;
  background-size: 100% 1.5px;
}

/* NBA National column — logo + visit button (no header, no email) */
.site-footer__nba {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;          /* explicit space between logo and button */
}
.site-footer__nba-logo-link {
  display: inline-block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}
.site-footer__nba-logo-link:hover {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__nba-logo-link { transition: none; }
  .site-footer__nba-logo-link:hover { transform: none; }
}

.site-footer__nba-logo {
  width: 150px;
  height: auto;
  display: block;
}
.site-footer__nba-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;   /* slimmer vertical padding */
  background: transparent;
  border: 1px solid rgba(245, 229, 201, 0.32);
  border-radius: 999px;
  color: var(--tan-100);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.site-footer__nba-cta:hover {
  background: var(--crimson-400);
  border-color: var(--crimson-400);
  color: #fff;
}
.site-footer__nba-cta svg {
  width: 10px;
  height: 10px;
}

/* Bottom bar — copyright on left, BQ stamp on right.
   Copyright is small and warm — a couple shades deeper in the tan palette
   so it reads as amber/dim rather than white. */
.site-footer__bottom {
  max-width: 1100px;
  margin: var(--space-12) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(247, 243, 245, 0.10);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

/* Copyright paragraph — sized down from the 15px footer nav links
   (a couple sizes smaller, still readable). Color matches BQ stamp. */
.site-footer__bottom p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(245, 229, 201, 0.45);   /* matches BQ stamp baseline */
}
.site-footer__bottom a { color: inherit; }

/* ============================================
   "Site by Brand Quality" stamp — modest at rest (dim tan to match
   the copyright tone), smoothly illuminates with a light sweep that
   TRACES through the logo shape on hover (via CSS mask-image).
   Plus subtle scale + soft glow.
   ============================================ */
/* When [data-bq-slow] is set on the credit link, override the default
   reveal animation duration so the BQ stamp eases in slower than the
   rest of the footer cascade. The stamp is the LAST thing to settle. */
.site-footer__credit-link[data-bq-slow].is-revealed {
  animation-duration: 2200ms !important;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.site-footer__credit-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 2px 4px;
  transform-origin: center center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The masked logo "paint" — the SVG silhouette is the mask, the
   background-color is what shows through. */
.site-footer__credit-svg {
  display: block;
  width: 216px;              /* +15% from 188px, preserves 308.6:32.24 aspect */
  height: 23px;              /* +15% from 20px */
  background-color: rgba(245, 229, 201, 0.45);   /* original dim cream — tan-100 at low alpha */
  -webkit-mask: url(../assets/icons/site-by-bq.svg) center / contain no-repeat;
          mask: url(../assets/icons/site-by-bq.svg) center / contain no-repeat;
  position: relative;
  overflow: hidden;          /* keep the sweep inside the masked area */
  transition: background-color 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover — slow, intentional ease IN to white, light scale, soft glow */
.site-footer__credit-link:hover,
.site-footer__credit-link:focus-visible {
  transform: scale(1.06);
}

.site-footer__credit-link:hover .site-footer__credit-svg,
.site-footer__credit-link:focus-visible .site-footer__credit-svg {
  background-color: #FFFFFF;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35))
          drop-shadow(0 0 18px rgba(255, 255, 255, 0.12));
}

/* The trace-of-light: a bright sliver moves across the logo on hover.
   Lives inside the masked element, so the light only paints inside the
   logo silhouette — it "traces" through the letters/mark.
   Wider bright peak + longer duration so it reads at the larger size. */
.site-footer__credit-svg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 22%,
    rgba(255, 255, 255, 1) 42%,
    rgba(255, 255, 255, 1) 58%,
    transparent 78%,
    transparent 100%
  );
  transform: translateX(-150%);
  opacity: 0;
  pointer-events: none;
}

.site-footer__credit-link:hover .site-footer__credit-svg::after,
.site-footer__credit-link:focus-visible .site-footer__credit-svg::after {
  animation: bq-light-trace 2400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bq-light-trace {
  0%   { transform: translateX(-150%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(150%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__credit-link { transition: none; }
  .site-footer__credit-svg { transition: background-color 250ms ease; }
  .site-footer__credit-svg::after { display: none; }
  .site-footer__credit-link:hover { transform: none; }
}

/* ============================================
   Cards (generic)
   ============================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  container-type: inline-size;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border-color: var(--border-emphasis);
}

@media (prefers-color-scheme: dark) {
  .card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================
   News cards
   ============================================ */
.news-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  container-type: inline-size;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .news-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
}

.news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Image area follows the photo's natural aspect ratio — no fixed 16:9 crop.
   Width is 100% of the card, height adapts to the image. */
.news-card__image-wrap {
  overflow: hidden;
  background: var(--bg-surface-tint);
  line-height: 0;
}

.news-card__image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.news-card:hover .news-card__image {
  transform: scale(1.05);
}

.news-card__body {
  /* +5px horizontal padding sitewide per Diallo so the card text and
     category pills have a touch more breathing room from the card edge. */
  padding: var(--space-5) calc(var(--space-5) + 5px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.news-card__category {
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cta-primary-bg);
}

.news-card__title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-primary);
}

.news-card__excerpt {
  font-size: var(--type-body-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-card__date {
  font-size: var(--type-caption);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ============================================
   Stat cards (for About page + Home at-a-glance)
   ============================================ */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  text-align: center;
}

.stat-card__number {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--cta-primary-bg);
  letter-spacing: -0.02em;
  display: block;
}

.stat-card__label {
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ============================================
   Officer cards (Leadership page)
   ============================================ */
.officer-card {
  container-type: inline-size;
  text-align: center;
}

.officer-card__image-wrap {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface-tint);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-default);
}

.officer-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.officer-card:hover .officer-card__image {
  transform: scale(1.04);
}

.officer-card__name {
  font-family: var(--font-serif);
  font-size: var(--type-h4);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.officer-card__title {
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ============================================
   Affiliate cards
   ============================================ */
.affiliate-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.affiliate-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border-color: var(--cta-primary-bg);
  color: inherit;
}

.affiliate-card__logo {
  width: 64px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.affiliate-card__info {
  flex: 1;
  min-width: 0;
}

.affiliate-card__name {
  font-size: var(--type-body-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.affiliate-card__meta {
  font-size: var(--type-caption);
  color: var(--text-muted);
  margin-top: 2px;
}

.affiliate-card__arrow {
  color: var(--cta-primary-bg);
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.affiliate-card:hover .affiliate-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   Eyebrow
   ============================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow--authority {
  color: var(--tan-200);
}

.eyebrow--light {
  color: var(--text-muted);
}

.eyebrow--accent {
  color: var(--cta-primary-bg);
}

/* ============================================
   Pull quote
   ============================================ */
.pull-quote {
  border-left: 3px solid var(--cta-primary-bg);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}

.pull-quote__text {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}

/* ============================================
   Section dividers
   ============================================ */
.section-header {
  margin-bottom: var(--space-10);
}

.section-header--centered {
  text-align: center;
}

.section-header .eyebrow {
  margin-bottom: var(--space-3);
}

.section-header h2 {
  margin-bottom: var(--space-3);
}

.section-header p {
  max-width: 600px;
}

.section-header--centered p {
  margin-inline: auto;
}

/* ============================================
   Accent section (dark authority callouts)
   ============================================ */
.accent-section {
  background: var(--bg-authority);
  color: var(--text-on-authority);
  padding: var(--space-16) var(--space-5);
}

@media (min-width: 768px) {
  .accent-section { padding-inline: var(--space-8); }
}

.accent-section h2 {
  color: var(--text-on-authority);
}

.accent-section p {
  color: var(--text-on-authority);
  opacity: 0.8;
}

/* ============================================
   Forms
   ============================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--type-body-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.form-control {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--cta-primary-bg);
  box-shadow: 0 0 0 3px rgba(161, 29, 51, 0.12);
}

.form-control:invalid:not(:placeholder-shown) {
  border-color: var(--semantic-error);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

/* ============================================
   Category filter chips (news page)
   ============================================ */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: 500;
  padding: 6px var(--space-4);
  border-radius: 100px;
  border: 1.5px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.filter-chip:hover {
  border-color: var(--cta-primary-bg);
  color: var(--cta-primary-bg);
}

.filter-chip.is-active {
  background: var(--cta-primary-bg);
  border-color: var(--cta-primary-bg);
  color: white;
}

/* ============================================
   ============================================
   PHASE 5 PATTERN UTILITIES (added 2026-05-24)
   New components for the inspiration-review v5 patterns.
   See _inspiration-review.html v5 for visual reference.
   ============================================
   ============================================ */


/* ============================================
   FAQ Accordion — JS-driven smooth animation
   Markup: <div class="faq-item" data-faq>
             <div class="faq-summary" data-faq-toggle>Question <span class="faq-toggle"></span></div>
             <div class="faq-wrap"><div class="faq-answer">Answer</div></div>
           </div>
   JS in main.js handles the toggle + measured max-height.
   ============================================ */
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-summary {
  cursor: pointer;
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  font-weight: 500;
  color: var(--text-primary);
  user-select: none;
}
.faq-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 220ms ease, border-color 220ms ease, transform 360ms cubic-bezier(0.5, 0, 0.2, 1);
}
.faq-toggle::before {
  content: "+";
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-secondary);
  transition: color 220ms;
}
.faq-item.is-open .faq-toggle {
  background: var(--crimson-500);
  border-color: var(--crimson-500);
  transform: rotate(180deg);
}
.faq-item.is-open .faq-toggle::before {
  content: "−";
  color: var(--tan-100);
}
.faq-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer {
  padding: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--type-body);
  line-height: 1.6;
  max-width: 90%;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease 100ms, transform 320ms ease 80ms;
}
.faq-item.is-open .faq-answer {
  opacity: 1;
  transform: translateY(0);
}



/* ============================================
   Affiliate marquee on white band
   Markup: <section class="marquee-band">
             <div class="marquee">
               <div class="marquee__track"><span class="marquee__logo">...</span> ... </div>
             </div>
           </section>
   ============================================ */
.marquee-band {
  background: var(--bg-light);
  padding-block: var(--space-10);
}
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee__track {
  display: flex;
  gap: 60px;
  align-items: center;
  animation: marquee-scroll 45s linear infinite;
  width: max-content;
  padding-block: var(--space-4);
  cursor: grab;
  user-select: none;
}
.marquee__track.is-dragging { cursor: grabbing; }
/* JS-controlled mode: when the marquee is taken over by JS, the CSS animation is removed */
.marquee.js-controlled .marquee__track {
  animation: none;
  will-change: transform;
}
.marquee__logo {
  padding: 8px 18px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--crimson-700);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Image-logo variant — transparent bg so it blends into a tinted section.
   Logo files swap in at this size with their original colors preserved. */
.marquee--logos {
  background: transparent;
  padding-block: var(--space-6);
}
.marquee--logos .marquee__track {
  gap: 56px;
  padding-block: var(--space-5);
}
.marquee--logos .marquee__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 72px;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 500ms var(--ease-in-out), filter 500ms var(--ease-in-out);
}
.marquee--logos .marquee__logo img {
  max-height: 100%;
  max-width: 170px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  filter: saturate(0.9);
}
.marquee--logos .marquee__logo:hover {
  transform: scale(1.06);
}
.marquee--logos .marquee__logo:hover img {
  filter: saturate(1.1);
}


/* ============================================
   Color-tagged content cards (news index variant)
   All tag colors from brand palette.
   ============================================ */
.color-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 200ms ease, transform 200ms ease;
}
.color-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.color-card__img {
  height: 180px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--crimson-700), var(--wine-800));
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.color-card__img--civilrights { background: linear-gradient(135deg, var(--crimson-700), var(--wine-800)); }
.color-card__img--judicial    { background: linear-gradient(135deg, var(--tan-400), var(--crimson-800)); }
.color-card__img--scholarship { background: linear-gradient(135deg, var(--tan-300), var(--wine-775)); }
.color-card__img--affiliates  { background: linear-gradient(135deg, var(--wine-700), var(--crimson-700)); }
.color-card__img--leadership  { background: linear-gradient(135deg, var(--crimson-500), var(--wine-850)); }
.color-card__img--programs    { background: linear-gradient(135deg, var(--wine-775), var(--crimson-700)); }
.color-card__tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-start;
}
.color-card__tag--civilrights { background: rgba(208,76,74,0.22); color: #E89998; }
.color-card__tag--judicial    { background: rgba(212,150,88,0.22); color: var(--tan-300); }
.color-card__tag--scholarship { background: rgba(231,179,126,0.18); color: var(--tan-200); }
.color-card__tag--affiliates  { background: rgba(110,15,31,0.30); color: #E89998; }
.color-card__tag--leadership  { background: rgba(161,29,51,0.30); color: #E89998; }
.color-card__tag--programs    { background: rgba(78,15,31,0.40); color: var(--tan-200); }
.color-card__title {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}
.color-card__excerpt {
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}


/* ============================================
   Sticky-grid layout (for judges page and similar)
   Left column sticks; right column scrolls.
   Markup: <div class="sticky-grid">
             <div class="sticky-grid__col-left">...</div>
             <div class="sticky-grid__col-right">...</div>
           </div>
   ============================================ */
.sticky-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-10);
  align-items: start;
}
.sticky-grid__col-left {
  position: sticky;
  top: var(--space-8);
  align-self: start;
}
.sticky-grid__col-right {
  min-width: 0;
}
@media (max-width: 768px) {
  .sticky-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .sticky-grid__col-left { position: static; }
}


/* ============================================
   Floating overlay card on hero (latest pull)
   Anchor to a hero composition with position: relative.
   ============================================ */
.overlay-card {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  max-width: 320px;
  z-index: 2;
}
.overlay-card--bottom-right {
  bottom: -28px;
  right: -16px;
}
.overlay-card--bottom-left {
  bottom: -28px;
  left: -16px;
}
.overlay-card__label {
  font-size: var(--type-caption);
  color: var(--tan-200);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.overlay-card__title {
  font-family: var(--font-serif);
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.overlay-card__link {
  font-size: var(--type-body-sm);
  color: var(--tan-300);
}


/* ============================================
   Scroll-driven word reveal
   Apply to a paragraph/headline; JS in main.js splits into spans
   and updates opacity tied to scroll position.
   ============================================ */
.reveal-text {
  font-family: var(--font-serif);
}
.reveal-text span {
  color: rgba(247, 243, 245, 0.14);  /* very dim — blends into wine page so lit state pops */
  transition: color 120ms linear;
  display: inline-block;
  margin-right: 0.25em;
}
.reveal-text span.is-lit {
  color: var(--text-primary);
}

/* Scoped color overrides — when .reveal-text lives in a section with a
   different background, the dim/lit colors need to adjust so the muted
   state still reads as "not yet revealed" against that bg. */
.home-news .reveal-text span        { color: rgba(255, 255, 255, 0.18); }
.home-news .reveal-text span.is-lit { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .reveal-text span,
  .home-news .reveal-text span { color: var(--text-primary) !important; transition: none !important; }
  .home-news .reveal-text span { color: #FFFFFF !important; }
}


/* ============================================
   Count-up stat strip with dividers
   ============================================ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-strip__cell {
  padding: var(--space-5) var(--space-6);
  border-right: 1px solid var(--border-subtle);
  text-align: left;
}
.stat-strip__cell:last-child {
  border-right: none;
}
.stat-strip__num {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-strip__label {
  font-size: var(--type-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__cell { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: var(--space-4); }
  .stat-strip__num { font-size: 38px; }
}


/* ============================================
   Subtle outline curves background (decorative)
   Apply as background-image to a section.
   ============================================ */
.bg-outline-curves {
  position: relative;
  overflow: hidden;
}
.bg-outline-curves::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(237,208,160,0.06), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(208,76,74,0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.bg-outline-curves > * {
  position: relative;
  z-index: 1;
}


/* ============================================
   Geometric repeating background (diamond lattice)
   Brand colors only — tan-on-wine pattern.
   ============================================ */
.bg-diamond-lattice {
  background-color: var(--wine-850);
  background-image:
    linear-gradient(45deg, transparent 47%, rgba(237,208,160,0.10) 47%, rgba(237,208,160,0.10) 53%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(237,208,160,0.10) 47%, rgba(237,208,160,0.10) 53%, transparent 53%);
  background-size: 36px 36px;
}


/* ============================================
   Logo outline as background artifact
   ============================================ */
.bg-ix-outline {
  position: relative;
  overflow: hidden;
}
.bg-ix-outline::after {
  content: "IX";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 320px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px rgba(237, 208, 160, 0.10);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bg-ix-outline > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .bg-ix-outline::after { font-size: 200px; right: -20px; }
}


/* ============================================
   PRIMARY BUTTON — Expand-pill (Phase 5 deployment)
   Markup:
     <a class="btn-expand" href="...">
       <span class="btn-expand__fill"></span>
       <span class="btn-expand__label">Pay Dues</span>
       <span class="btn-expand__arrow"><svg.../></span>
     </a>
   ============================================ */
.btn-expand {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 6px;
  border: 1px solid var(--tan-200);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  text-decoration: none;
  min-width: 220px;
}
.btn-expand--sm { height: 48px; min-width: 180px; padding: 5px; }
.btn-expand--lg { height: 64px; min-width: 260px; padding: 7px; }

.btn-expand__fill {
  position: absolute;
  top: 6px; left: 6px; bottom: 6px;
  width: calc(100% - 56px);
  background: var(--wine-800);
  border-radius: 100px;
  transition: width 360ms cubic-bezier(0.5, 0, 0.2, 1);
  z-index: 1;
}
.btn-expand--sm .btn-expand__fill { top: 5px; left: 5px; bottom: 5px; width: calc(100% - 48px); }
.btn-expand--lg .btn-expand__fill { top: 7px; left: 7px; bottom: 7px; width: calc(100% - 64px); }
.btn-expand:hover .btn-expand__fill { width: calc(100% - 12px); }
.btn-expand--sm:hover .btn-expand__fill { width: calc(100% - 10px); }
.btn-expand--lg:hover .btn-expand__fill { width: calc(100% - 14px); }

.btn-expand__label {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  color: var(--tan-100);
  font-weight: 600;
  font-size: var(--type-body-sm);
  padding: 0 var(--space-6);
  letter-spacing: 0.02em;
}
.btn-expand--lg .btn-expand__label { font-size: var(--type-body); }

.btn-expand__arrow {
  position: relative;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tan-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wine-800);
  transition: background 280ms ease, color 280ms ease;
  flex-shrink: 0;
}
.btn-expand--sm .btn-expand__arrow { width: 38px; height: 38px; }
.btn-expand--lg .btn-expand__arrow { width: 50px; height: 50px; }
.btn-expand:hover .btn-expand__arrow { background: transparent; color: var(--tan-100); }
.btn-expand__arrow svg { display: block; }


/* ============================================
   SECONDARY BUTTON — Hover circle-fill
   Markup:
     <a class="btn-circle-fill" href="...">
       <span class="btn-circle-fill__label">Watch the story</span>
       <span class="btn-circle-fill__ic"><svg.../></span>
     </a>
   ============================================ */
.btn-circle-fill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 6px 0 24px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--type-body-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: color 220ms ease 80ms, border-color 220ms;
}
.btn-circle-fill::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--tan-200);
  transition: all 320ms cubic-bezier(0.5, 0, 0.2, 1);
  z-index: 0;
}
.btn-circle-fill:hover {
  color: var(--wine-800);
  border-color: var(--tan-200);
}
.btn-circle-fill:hover::before {
  top: -1px;
  right: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 100px;
}
.btn-circle-fill__label {
  position: relative;
  z-index: 1;
  margin-right: 12px;
}
.btn-circle-fill__ic {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wine-800);
  flex-shrink: 0;
}
.btn-circle-fill__ic svg { display: block; }


/* ============================================
   News card category tags — color-coded by category
   (Phase 5 — added 2026-05-24)
   All colors from the brand palette.
   ============================================ */
.news-card__category {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
}
.news-card__category--civil-rights      { background: rgba(208, 76, 74, 0.22); color: #E89998; }
.news-card__category--judicial-pipeline { background: rgba(212, 150, 88, 0.22); color: var(--tan-300); }
.news-card__category--scholarship       { background: rgba(231, 179, 126, 0.18); color: var(--tan-200); }
.news-card__category--leadership        { background: rgba(161, 29, 51, 0.30); color: #E89998; }
.news-card__category--awards            { background: rgba(212, 150, 88, 0.30); color: var(--tan-200); }
.news-card__category--programs          { background: rgba(78, 15, 31, 0.55); color: var(--tan-200); }
.news-card__category--affiliates        { background: rgba(110, 15, 31, 0.30); color: #E89998; }
.news-card__category--video             { background: transparent; color: var(--crimson-400); border: 1.5px solid var(--crimson-400); padding: 2.5px 10.5px; }

/* Slight hover lift on tagged cards */
.news-card--tagged {
  transition: transform 220ms ease, border-color 220ms ease;
}
.news-card--tagged:hover {
  transform: translateY(-2px);
}


/* ============================================
   Video play-button overlay modal (Phase 5)
   Markup pattern:
     <div class="video-overlay" data-yt-thumb="VIDEO_ID">
       <span class="video-overlay__label">Featured video</span>
       <div class="video-overlay__title">Title here</div>
       <button class="video-play-btn" data-video="VIDEO_ID" aria-label="Play video">
         <svg.../>
       </button>
     </div>
   Modal markup must exist once per page (typically at end of <main>):
     <div class="video-modal" id="video-modal" role="dialog" aria-label="Video player">
       <div class="video-modal__inner">
         <button class="video-modal__close" id="video-modal-close" aria-label="Close">×</button>
         <iframe id="video-modal-iframe" allow="..." allowfullscreen></iframe>
       </div>
     </div>
   ============================================ */
.video-overlay {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--wine-800), var(--crimson-800));
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
.video-overlay__label {
  position: absolute;
  top: var(--space-5);
  left: var(--space-6);
  font-size: var(--type-caption);
  color: var(--tan-200);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.video-overlay__title {
  position: absolute;
  top: 56px;
  left: var(--space-6);
  max-width: 60%;
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  line-height: 1.2;
  color: var(--tan-100);
  font-weight: 500;
}
/* Crimson play button — original single-ring expanding pulse pattern.
   Same animation, sizing, and proportions as the original; just the
   colors are flipped from tan to crimson. No border, white triangle. */
.video-play-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--crimson-500);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, transform 200ms;
  z-index: 2;
  animation: video-pulse 2.4s ease-out infinite;
}
.video-play-btn:hover {
  background: var(--crimson-400);
  transform: scale(1.05);
}
.video-play-btn svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}
@keyframes video-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(208, 76, 74, 0.55); }
  100% { box-shadow: 0 0 0 28px rgba(208, 76, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .video-play-btn { animation: none; }
}

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6);
}
.video-modal.is-open { display: flex; }
.video-modal__inner {
  background: var(--wine-850);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 960px;
  width: 100%;
  position: relative;
}
.video-modal__inner iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: var(--radius-sm);
}
.video-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tan-200);
  color: var(--wine-800);
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================
   PRIMARY BUTTON — v6.2 hover circle-fill at primary size
   Markup:
     <a class="btn-primary" href="...">
       <span class="btn-primary__label">Pay Dues</span>
       <span class="btn-primary__ic"><svg/></span>
     </a>
   ============================================ */
.btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  height: 56px;
  padding: 0 8px 0 28px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--crimson-700);
  color: var(--text-primary);
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: color 220ms ease 80ms, border-color 220ms;
}
.btn-primary--fat { height: 64px; padding: 0 9px 0 32px; font-size: 16px; }

/* Compact size for nav/inline contexts — same mechanic at smaller scale */
.btn-primary--sm { height: 40px; padding: 0 5px 0 18px; font-size: 13px; }
.btn-primary--sm .btn-primary__label { margin-right: 10px; }

.btn-primary::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 40px; height: 40px;
  border-radius: 100px;
  background: var(--crimson-500);
  transition: all 360ms cubic-bezier(0.5, 0, 0.2, 1);
  z-index: 0;
}
.btn-primary--fat::before { top: 9px; right: 9px; width: 46px; height: 46px; }
.btn-primary--sm::before { top: 4px; right: 4px; width: 32px; height: 32px; }

.btn-primary:hover {
  color: var(--tan-100);
  border-color: var(--crimson-500);
}
.btn-primary:hover::before {
  top: -1px; right: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  border-radius: 100px;
}

.btn-primary__label {
  position: relative; z-index: 1;
  margin-right: 16px;
}
.btn-primary__ic {
  position: relative; z-index: 1;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tan-100);
  flex-shrink: 0;
}
.btn-primary--fat .btn-primary__ic { width: 46px; height: 46px; }
.btn-primary--sm .btn-primary__ic { width: 32px; height: 32px; }
.btn-primary__ic svg { display: block; }

/* Reversed-out primary */
.btn-primary--reversed {
  background: var(--crimson-700);
  border-color: var(--crimson-700);
  color: var(--tan-100);
}
.btn-primary--reversed::before {
  background: transparent;
  border: 1px solid var(--tan-100);
  top: 8px; right: 8px;
  width: 40px; height: 40px;
}
.btn-primary--reversed:hover {
  background: var(--crimson-500);
  border-color: var(--crimson-500);
  color: var(--tan-100);
}
.btn-primary--reversed:hover::before {
  background: transparent;
  border-color: var(--tan-100);
  top: 8px; right: 8px;
  width: 40px; height: 40px;
}
.btn-primary--reversed .btn-primary__ic { color: var(--tan-100); }

/* Solid filled variant — sits filled at rest, swaps to a brighter red on hover.
   Same pill geometry as .btn-primary so it slots into the same visual family. */
.btn-primary--solid {
  background: var(--crimson-700);
  border-color: var(--crimson-700);
  color: var(--tan-100);
}
.btn-primary--solid::before {
  background: var(--crimson-400);   /* the inner circle is the brighter red */
}
.btn-primary--solid:hover {
  color: #FFFFFF;
  border-color: var(--crimson-400);
  background: var(--crimson-700);   /* hold the dark base while circle takes over */
}
.btn-primary--solid:hover::before {
  background: var(--crimson-400);   /* circle expands and fills with bright red */
}
.btn-primary--solid .btn-primary__ic { color: #FFFFFF; }

/* Bold variant — filled bright red at rest, expands to deep red on hover.
   Used for the most primary action (hero Pay Dues). Color story: bright → deep. */
.btn-primary--bold {
  background: var(--crimson-500);
  border-color: var(--crimson-500);
  color: #FFFFFF;
}
.btn-primary--bold::before {
  background: var(--crimson-700);
}
.btn-primary--bold:hover {
  color: #FFFFFF;
  border-color: var(--crimson-700);
}
.btn-primary--bold:hover::before {
  background: var(--crimson-700);
}
.btn-primary--bold .btn-primary__ic { color: #FFFFFF; }

/* Sponsor variant — transparent base with deep crimson border, bright crimson-400
   circle (matches the Learn About circle), white text and white arrow throughout.
   On hover the bright circle expands to fill the button. */
.btn-primary--sponsor {
  background: transparent;
  border-color: var(--crimson-700);    /* matches the inner circle color of the Pay Dues button */
  color: #FFFFFF;
}
.btn-primary--sponsor::before {
  background: var(--crimson-400);      /* matches the Learn About Region IX circle */
}
.btn-primary--sponsor:hover {
  color: #FFFFFF;
  border-color: var(--crimson-400);
}
.btn-primary--sponsor:hover::before {
  background: var(--crimson-400);
}
.btn-primary--sponsor .btn-primary__ic { color: #FFFFFF; }
.btn-primary--sponsor:hover .btn-primary__ic { color: #FFFFFF; }

/* White variant — white button base with crimson text, crimson-500 circle.
   Same expand-circle mechanic as the rest of the family.
   On hover the circle fills the button with crimson-500 and text flips to white. */
.btn-primary--white {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--crimson-500);
}
.btn-primary--white::before {
  background: var(--crimson-500);
}
.btn-primary--white:hover {
  color: #FFFFFF;
  border-color: var(--crimson-500);
}
.btn-primary--white:hover::before {
  background: var(--crimson-500);
}
.btn-primary--white .btn-primary__ic { color: #FFFFFF; }