/* ==========================================================================
   CAGSOSA — Premium public site styles
   Brand tokens live in :root. Change them here to re-theme the whole site.
   ========================================================================== */

:root {
  /* Brand — sampled from the CAGSOSA crest */
  --brand-900: #220a0f;   /* deepest wine (dark sections) */
  --brand-800: #3d0f19;
  --brand-700: #5a1522;
  --brand-600: #6b1826;   /* crest shield maroon */
  --brand-500: #8e2233;
  --crimson:   #d01828;   /* laurel & motto banner red */
  --espresso:  #2b1f1b;   /* crest ring brown */
  --cream:     #eddec5;
  --gold-600:  #b8891c;   /* banner-tip gold accent */
  --gold-500:  #cfa233;
  --gold-400:  #e0bb55;
  --gold-300:  #f0d78f;
  --ivory:     #faf6f0;
  --white:     #ffffff;

  /* Neutrals */
  --ink:      #1f1416;
  --text:     #4a3c3e;
  --muted:    #7c6d6f;
  --line:     #ece4dc;
  --surface:  #ffffff;

  /* Effects */
  --grad-gold: linear-gradient(135deg, #f3dc95 0%, #d9ad40 45%, #b8891c 100%);
  --grad-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-900) 100%);
  --shadow-sm: 0 2px 8px rgba(61, 15, 25, .06);
  --shadow-md: 0 12px 32px -12px rgba(61, 15, 25, .18);
  --shadow-lg: 0 30px 60px -20px rgba(61, 15, 25, .28);
  --shadow-gold: 0 14px 30px -12px rgba(207, 162, 51, .55);
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.22, .9, .3, 1);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 84px;
}

/* ---------------------------------------------------------------- Base -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { color: var(--ink); font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
a { color: var(--brand-600); text-decoration: none; transition: color .25s; }
a:hover { color: var(--crimson); }
img { max-width: 100%; display: block; }
::selection { background: var(--gold-300); color: var(--brand-900); }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--brand-800); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { left: 8px; color: #fff; }

.container-xl { max-width: 1280px; padding-left: 20px; padding-right: 20px; }

/* Page loader */
.page-loader { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--brand-900); transition: opacity .6s var(--ease), visibility .6s; }
.page-loader__crest { width: 120px; height: 120px; padding: 12px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold-500), 0 0 60px rgba(207,162,51,.35); animation: pulseCrest 1.4s ease-in-out infinite; }
.page-loader__crest img { width: 100%; height: 100%; object-fit: contain; }
body.is-loaded .page-loader { opacity: 0; visibility: hidden; }
@keyframes pulseCrest { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------- Buttons -- */
.btn-gold, .btn-brand, .btn-glass, .btn-outline-brand, .btn-ghost-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: .95rem; line-height: 1; border-radius: 999px;
  padding: .95rem 1.5rem; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .25s, border-color .25s;
  white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
}
.btn-gold { background: var(--grad-gold); color: var(--brand-900); box-shadow: var(--shadow-gold); }
.btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); z-index: -1; }
.btn-gold:hover { color: var(--brand-900); transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(207,162,51,.7); }
.btn-gold:hover::after { transform: translateX(120%); }
.btn-brand { background: var(--brand-800); color: #fff; box-shadow: var(--shadow-md); }
.btn-brand:hover { background: var(--brand-700); color: #fff; transform: translateY(-2px); }
.btn-outline-brand { background: transparent; color: var(--brand-800); border-color: rgba(61,15,25,.25); }
.btn-outline-brand:hover { background: var(--brand-800); color: #fff; border-color: var(--brand-800); }
.btn-glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: #fff; color: var(--brand-900); }
.btn-ghost-sm { padding: .65rem 1.1rem; font-size: .88rem; color: var(--brand-800); background: transparent; border-color: rgba(61,15,25,.15); }
.btn-ghost-sm:hover { background: var(--brand-800); color: #fff; }
.btn-sm-pill { padding: .7rem 1.15rem; font-size: .88rem; }
.btn-lg-pill { padding: 1.05rem 1.8rem; font-size: 1rem; }
.btn-link-muted { display: block; text-align: center; color: var(--muted); font-weight: 600; padding: .5rem; }
.btn-gold:disabled, .btn-brand:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid rgba(61,15,25,.12); background: transparent; color: var(--brand-800); cursor: pointer; transition: all .3s var(--ease); }
.icon-btn:hover { background: var(--brand-800); color: #fff; border-color: var(--brand-800); }

.link-arrow { font-weight: 700; color: var(--brand-700); display: inline-flex; align-items: center; gap: .5rem; }
.link-arrow i { transition: transform .3s var(--ease); }
.link-arrow:hover i, a:hover > .link-arrow i { transform: translateX(5px); }

/* ---------------------------------------------------------- Typography -- */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--crimson); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--gold { color: var(--gold-400); }
.eyebrow--brand { color: var(--brand-800); }
.section-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.15rem); margin-bottom: 1.25rem; }
.lead-muted { font-size: 1.15rem; color: var(--text); }
.text-muted-2 { color: var(--muted); }
.text-white-60 { color: rgba(255,255,255,.68); }
.text-brand-soft { color: var(--brand-500); }
.text-gold-grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }

/* -------------------------------------------------------------- Navbar -- */
.site-nav { position: sticky; top: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; transition: background .4s var(--ease), box-shadow .4s, height .4s var(--ease), backdrop-filter .4s; }
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.site-nav--solid, .site-nav.is-scrolled { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(61,15,25,.06), 0 10px 30px -18px rgba(61,15,25,.25); }

.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--brand-900); }
.brand:hover { color: var(--brand-900); }
.brand__crest { width: 50px; height: 50px; object-fit: contain; padding: 3px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(207,162,51,.55), 0 6px 16px rgba(0,0,0,.18); transition: transform .5s var(--ease); }
.brand:hover .brand__crest { transform: rotate(-6deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; }
.brand__text small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); }

.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links > a, .nav-drop__btn { position: relative; padding: .55rem .85rem; font-weight: 600; font-size: .94rem; color: var(--brand-900); background: none; border: 0; border-radius: 999px; transition: color .25s, background .25s; }
.nav-links > a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); transform: translateX(-50%) scale(0); transition: transform .3s var(--ease); }
.nav-links > a:hover, .nav-links > a.active { color: var(--brand-600); }
.nav-links > a.active::after, .nav-links > a:hover::after { transform: translateX(-50%) scale(1); }
.nav-drop { position: relative; }
.nav-drop__btn i { font-size: .65rem; margin-left: .25rem; transition: transform .3s; }
.nav-drop:hover .nav-drop__btn i, .nav-drop:focus-within .nav-drop__btn i { transform: rotate(180deg); }
.nav-drop__menu { position: absolute; top: calc(100% + 14px); left: 50%; width: 330px; padding: .6rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: all .3s var(--ease); }
.nav-drop__menu::before { content: ""; position: absolute; inset: -16px 0 auto 0; height: 16px; }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop__menu a { display: flex; gap: .9rem; align-items: center; padding: .75rem .85rem; border-radius: 12px; color: var(--ink); }
.nav-drop__menu a:hover { background: var(--ivory); }
.nav-drop__menu a > i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(207,162,51,.12); color: var(--gold-600); }
.nav-drop__menu b { display: block; font-size: .92rem; }
.nav-drop__menu small { color: var(--muted); font-size: .8rem; }

.nav-actions { display: flex; align-items: center; gap: .6rem; }

/* transparent state over hero */
.site-nav--hero:not(.is-scrolled) .brand, .site-nav--hero:not(.is-scrolled) .nav-links > a, .site-nav--hero:not(.is-scrolled) .nav-drop__btn { color: #fff; }
.site-nav--hero:not(.is-scrolled) .brand__text small { color: var(--gold-300); }
.site-nav--hero:not(.is-scrolled) .icon-btn, .site-nav--hero:not(.is-scrolled) .btn-ghost-sm { color: #fff; border-color: rgba(255,255,255,.3); }
.site-nav--hero:not(.is-scrolled) .icon-btn:hover, .site-nav--hero:not(.is-scrolled) .btn-ghost-sm:hover { background: #fff; color: var(--brand-900); }
.site-nav--hero:not(.is-scrolled) .burger span { background: #fff; }
.site-nav--hero:not(.is-scrolled) { background: linear-gradient(180deg, rgba(34,10,15,.55), transparent); }

.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-900); transition: .3s var(--ease); }
.burger span:nth-child(2) { width: 15px; margin-left: 7px; }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 1500; visibility: hidden; overflow: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(34,10,15,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 88vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s var(--ease); box-shadow: var(--shadow-lg); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer__nav { flex: 1; overflow-y: auto; padding: .75rem; }
.drawer__nav a { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border-radius: 12px; color: var(--ink); font-weight: 600; opacity: 0; transform: translateX(20px); transition: background .2s, opacity .4s var(--ease), transform .4s var(--ease); }
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a i { width: 22px; color: var(--gold-600); }
.drawer__nav a:hover { background: var(--ivory); }
.drawer__foot { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: .6rem; border-top: 1px solid var(--line); }

/* Search overlay */
.search-overlay { position: fixed; inset: 0; z-index: 1600; background: rgba(34,10,15,.94); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all .4s var(--ease); }
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__close { position: absolute; top: 24px; right: 24px; color: #fff; border-color: rgba(255,255,255,.3); }
.search-overlay__form { width: min(760px, 100%); display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid var(--gold-500); padding-bottom: 1rem; transform: translateY(20px); transition: transform .5s var(--ease); }
.search-overlay.is-open .search-overlay__form { transform: none; }
.search-overlay__form i { color: var(--gold-400); font-size: 1.6rem; }
.search-overlay__form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.search-overlay__form input::placeholder { color: rgba(255,255,255,.4); }
.search-overlay__hint { color: rgba(255,255,255,.45); margin-top: 1rem; font-size: .9rem; }
.search-overlay__hint kbd { background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 6px; }

/* ---------------------------------------------------------------- Hero -- */
.hero { position: relative; padding: 0; background: var(--brand-900); }
.hero-frame { position: relative; width: 100%; max-width: none; margin: 0; height: clamp(540px, calc(100vh - 124px), 820px); height: clamp(540px, calc(100svh - 124px), 820px); border-radius: 0; overflow: hidden; background: var(--brand-900); isolation: isolate; }
.hero-swiper, .hero-empty { height: 100%; }
.hero-empty { background: radial-gradient(ellipse at 70% 30%, var(--brand-600), var(--brand-900) 70%); display: flex; }
.hero-slide { position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-slide__media, .hero-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide__media img { object-fit: cover; transform: scale(1.14); transition: transform 9s linear; }
.swiper-slide-active .hero-slide__media img { transform: scale(1); }
.hero-slide__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(34,10,15, calc(var(--overlay) + .25)) 0%, rgba(34,10,15, var(--overlay)) 45%, rgba(34,10,15, calc(var(--overlay) * .35)) 100%),
  linear-gradient(0deg, rgba(34,10,15,.85) 0%, transparent 35%); }
.hero-slide--center .hero-slide__shade { background: radial-gradient(ellipse at center, rgba(34,10,15, var(--overlay)) 0%, rgba(34,10,15, calc(var(--overlay) + .2)) 100%), linear-gradient(0deg, rgba(34,10,15,.85), transparent 40%); }
.hero-slide--right .hero-slide__shade { transform: scaleX(-1); }
.hero-slide__content { position: relative; z-index: 2; width: 100%; padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 130px; max-width: 1360px; }
.hero-copy { max-width: 760px; }
.hero-slide--center .hero-copy { margin: 0 auto; text-align: center; }
.hero-slide--center .hero-ctas { justify-content: center; }
.hero-slide--right .hero-copy { margin-left: auto; text-align: right; }
.hero-slide--right .hero-ctas { justify-content: flex-end; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(224,187,85,.25); animation: ping 2s infinite; }
@keyframes ping { 0%,100% { box-shadow: 0 0 0 0 rgba(224,187,85,.5); } 70% { box-shadow: 0 0 0 10px rgba(224,187,85,0); } }
.hero-title { color: #fff; font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.2rem); line-height: 1.04; margin: 1.4rem 0 1.2rem; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.hero-sub { color: rgba(255,255,255,.82); font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); max-width: 600px; margin-bottom: 2.2rem; }
.hero-slide--center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-slide--right .hero-sub { margin-left: auto; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

/* entrance on first load; afterwards Swiper parallax moves the text as slides change */
.hero-copy > * { animation: rise 1s var(--ease) backwards; }
.hero-copy > :nth-child(2) { animation-delay: .15s; } .hero-copy > :nth-child(3) { animation-delay: .3s; } .hero-copy > :nth-child(4) { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }

/* --------------------------------------------------------------- Stats -- */
.stats-wrap { position: relative; z-index: 6; margin-top: -64px; }
.stats-card { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.stat { position: relative; padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
.stat i { font-size: 1.25rem; color: var(--gold-600); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(207,162,51,.1); margin-bottom: .4rem; }
.stat strong { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); color: var(--brand-900); line-height: 1.1; }
.stat > span { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* ------------------------------------------------------------ Sections -- */
.section { padding: clamp(4.5rem, 3rem + 5vw, 7.5rem) 0; position: relative; }
.section--ivory { background: var(--ivory); }
.section--brand { background: var(--grad-brand); color: rgba(255,255,255,.75); overflow: hidden; }
.section--brand::before { content: ""; position: absolute; width: 640px; height: 640px; right: -200px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.22), transparent 65%); pointer-events: none; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.text-center { margin-left: auto; margin-right: auto; }
.section-head.text-center .eyebrow::after { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.section-head--split .section-title { margin-bottom: 0; }

/* About */
.about-visual { position: relative; aspect-ratio: 1; max-width: 520px; margin: 0 auto; display: grid; place-items: center; }
.about-visual::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #fff 55%, var(--ivory) 100%); box-shadow: var(--shadow-lg), 0 0 0 10px var(--brand-600), 0 0 0 12px var(--gold-500); }
.about-visual__ring { position: absolute; inset: -2%; border-radius: 50%; border: 1.5px dashed rgba(208,24,40,.4); animation: spin 60s linear infinite; }
.about-visual__ring::before, .about-visual__ring::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 6px rgba(208,24,40,.18); }
.about-visual__ring::before { top: 12%; left: 12%; }
.about-visual__ring::after { bottom: 12%; right: 12%; width: 10px; height: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.about-visual__crest { position: relative; width: 70%; aspect-ratio: 1; animation: float 6s ease-in-out infinite; }
.about-visual__crest img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(61,15,25,.25)); }
@keyframes float { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
.about-badge { position: absolute; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1rem 1.3rem; }
.about-badge--year { top: 8%; right: 0; text-align: center; }
.about-badge--year small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.about-badge--year strong { font-family: var(--font-display); font-size: 2rem; color: var(--brand-800); line-height: 1; }
.about-badge--motto { bottom: 4%; left: 0; display: flex; align-items: center; gap: .7rem; background: var(--crimson); color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.check-list { list-style: none; padding: 0; margin: 1.6rem 0 2.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; }
.check-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ink); font-size: .95rem; }
.check-list i { color: var(--crimson); }

/* Pillars */
.pillar { display: block; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.1rem 1.8rem; color: var(--text); position: relative; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.pillar::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.pillar:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; color: var(--text); }
.pillar:hover::before { transform: scaleX(1); }
.pillar__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--grad-brand); color: var(--gold-400); font-size: 1.5rem; margin-bottom: 1.4rem; transition: transform .5s var(--ease); }
.pillar:hover .pillar__icon { transform: rotate(-8deg) scale(1.08); }
.pillar h3 { font-size: 1.45rem; margin-bottom: .6rem; }
.pillar p { font-size: .95rem; margin-bottom: 1.2rem; }
.pillar__more { font-weight: 700; font-size: .88rem; color: var(--brand-600); display: inline-flex; gap: .5rem; align-items: center; }
.pillar__more i { transition: transform .3s var(--ease); }
.pillar:hover .pillar__more i { transform: translateX(5px); }

/* Chips & media fallback */
.chip { position: absolute; top: 16px; left: 16px; z-index: 2; padding: .4rem .85rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.chip--glass { background: rgba(255,255,255,.92); color: var(--brand-800); backdrop-filter: blur(6px); }
.chip--gold { background: var(--grad-gold); color: var(--brand-900); }
.media-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--grad-brand); color: rgba(224,187,85,.55); font-size: 3rem; }
.media-fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(207,162,51,.28), transparent 55%); }
.media-fallback--1 { background: linear-gradient(135deg, var(--brand-600), var(--brand-900)); }
.media-fallback--2 { background: linear-gradient(135deg, var(--espresso), #140c0a); }

/* Cause cards + progress */
.cause-card { height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.cause-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cause-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cause-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cause-card:hover .cause-card__media img { transform: scale(1.07); }
.cause-card__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.cause-card__body h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.cause-card__body h3 a { color: var(--ink); }
.cause-card__body h3 a:hover { color: var(--brand-600); }
.cause-card__body > p { font-size: .94rem; color: var(--muted); flex: 1; }
.cause-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1.3rem 0 1.4rem; padding: 1rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.cause-card__meta small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.cause-card__meta strong { font-family: var(--font-display); color: var(--brand-900); font-size: 1.15rem; }

.progress-x { position: relative; height: 10px; border-radius: 10px; background: #f1e9e3; margin-top: 2.2rem; overflow: visible; }
.progress-x__fill { position: relative; height: 100%; width: 0; border-radius: 10px; background: var(--grad-gold); transition: width 1.8s var(--ease); }
.progress-x__fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px); animation: stripes 1.2s linear infinite; }
@keyframes stripes { to { background-position: 22px 0; } }
.progress-x__tip { position: absolute; right: 0; bottom: calc(100% + 8px); transform: translateX(50%); background: var(--brand-800); color: #fff; font-size: .72rem; font-weight: 800; padding: .25rem .5rem; border-radius: 6px; opacity: 0; transition: opacity .4s 1.4s; white-space: nowrap; }
.progress-x__tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--brand-800); }
.progress-x__fill.is-animated .progress-x__tip { opacity: 1; }

/* Events (brand section) */
.event-row { position: relative; display: flex; align-items: center; gap: 1.4rem; padding: 1.3rem 1.4rem; margin-bottom: 1rem; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; transition: all .45s var(--ease); }
.event-row:hover { background: rgba(255,255,255,.1); border-color: rgba(224,187,85,.45); transform: translateX(6px); color: #fff; }
.event-row__date { flex: none; width: 72px; height: 76px; border-radius: 16px; background: var(--grad-gold); color: var(--brand-900); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.event-row__date strong { font-family: var(--font-display); font-size: 1.9rem; }
.event-row__date span { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: .25rem; }
.event-row__body { flex: 1; min-width: 0; }
.event-row__body h3 { color: #fff; font-size: 1.25rem; margin-bottom: .35rem; }
.event-row__body p { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .88rem; color: rgba(255,255,255,.65); }
.event-row__body p i { color: var(--gold-400); margin-right: .25rem; }
.event-row__countdown { display: flex; gap: .4rem; }
.event-row__countdown span { min-width: 50px; text-align: center; padding: .4rem .3rem; border-radius: 10px; background: rgba(255,255,255,.07); }
.event-row__countdown b { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fff; line-height: 1.1; }
.event-row__countdown small { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); }
.event-row__go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); transition: all .35s var(--ease); }
.event-row:hover .event-row__go { background: var(--gold-500); border-color: var(--gold-500); color: var(--brand-900); transform: rotate(-45deg); }
.empty-glass { text-align: center; padding: 3rem; border-radius: var(--radius); border: 1px dashed rgba(255,255,255,.2); color: rgba(255,255,255,.6); }
.empty-glass i { font-size: 2rem; color: var(--gold-400); margin-bottom: .8rem; }

/* Join CTA */
.join-cta-wrap { padding-top: 0; margin-top: -1px; }
.section--brand + .join-cta-wrap { padding-top: clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.join-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; padding: clamp(2.2rem, 1.5rem + 3vw, 4rem); border-radius: var(--radius-lg); background: var(--grad-gold); box-shadow: var(--shadow-gold); }
.join-cta__pattern { position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(var(--brand-900) 1.2px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); }
.join-cta__copy, .join-cta__actions { position: relative; }
.join-cta h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); color: var(--brand-900); margin-bottom: .8rem; }
.join-cta p { color: rgba(34,10,15,.78); margin: 0; font-weight: 500; }
.join-cta__actions { display: grid; gap: .8rem; justify-items: stretch; }
.join-cta .btn-outline-brand { border-color: rgba(34,10,15,.35); }

/* Testimonials */
.testi-swiper { padding-bottom: 3.5rem !important; }
.testi { height: 100%; margin: 0; background: #fff; border-radius: var(--radius-lg); padding: 2.2rem; border: 1px solid var(--line); position: relative; display: flex; flex-direction: column; transition: box-shadow .4s, transform .4s var(--ease); }
.swiper-slide-active .testi, .testi:hover { box-shadow: var(--shadow-md); }
.testi__mark { font-size: 2rem; color: var(--gold-400); margin-bottom: 1rem; }
.testi blockquote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.55; color: var(--ink); flex: 1; margin-bottom: 1.6rem; }
.testi figcaption { display: flex; align-items: center; gap: .9rem; }
.testi figcaption img, .avatar-initials { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-initials { display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-weight: 800; font-size: 1rem; }
.testi figcaption strong { display: block; color: var(--ink); }
.testi figcaption small { color: var(--muted); }
.testi-swiper .swiper-slide { height: auto; }
.testi-pagination { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; }
.testi-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--brand-800); opacity: .2; transition: all .4s var(--ease); }
.testi-pagination .swiper-pagination-bullet-active { width: 32px; border-radius: 6px; opacity: 1; background: var(--gold-500); }

/* News */
.news-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; color: var(--text); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); color: var(--text); }
.news-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.07); }
.news-card__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.news-card time { font-size: .82rem; color: var(--muted); font-weight: 600; }
.news-card time i { color: var(--gold-600); margin-right: .3rem; }
.news-card h3 { font-size: 1.3rem; margin: .6rem 0; transition: color .3s; }
.news-card:hover h3 { color: var(--brand-600); }
.news-card p { font-size: .94rem; color: var(--muted); flex: 1; }

/* -------------------------------------------------------------- Footer -- */
.site-footer { position: relative; background: var(--brand-900); color: rgba(255,255,255,.65); padding-top: 4rem; overflow: hidden; }
.site-footer__glow { position: absolute; width: 700px; height: 700px; left: -250px; bottom: -350px; background: radial-gradient(circle, rgba(207,162,51,.16), transparent 65%); pointer-events: none; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--gold-400); }
.footer-newsletter { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 2.4rem; border-radius: var(--radius-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); margin-bottom: 4rem; }
.footer-newsletter h3 { color: #fff; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); margin: 0; max-width: 520px; }
.newsletter-form { display: flex; gap: .5rem; flex: 1; max-width: 480px; min-width: 280px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); padding: .4rem; border-radius: 999px; }
.newsletter-form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; padding: 0 1rem; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.footer-cols h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.3rem; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.brand--light, .brand--light:hover { color: #fff; }
.brand--light .brand__text small { color: var(--gold-400); }
.footer-about { margin: 1.3rem 0 .8rem; max-width: 360px; }
.footer-motto { color: var(--gold-300); font-family: var(--font-display); font-size: 1.05rem; }
.footer-contact li { display: flex; gap: .8rem; }
.footer-contact i { color: var(--gold-400); margin-top: .35rem; width: 16px; }
.socials { display: flex; gap: .5rem; margin-top: 1.2rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); transition: all .35s var(--ease); }
.socials a:hover { background: var(--gold-500); color: var(--brand-900); transform: translateY(-3px); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding: 1.6rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .88rem; }
.footer-bottom__links { display: flex; gap: 1.5rem; }

.back-top { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--brand-800); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(16px); transition: all .4s var(--ease); cursor: pointer; }
.back-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.back-top circle { fill: none; stroke: var(--gold-400); stroke-width: 2.5; stroke-dasharray: 126; stroke-dashoffset: var(--dash, 126); }
.back-top:hover { background: var(--gold-500); color: var(--brand-900); }

/* --------------------------------------------- Generic inner pages ------ */
.page-hero { position: relative; padding: 4.5rem 0; background: var(--grad-brand); overflow: hidden; color: rgba(255,255,255,.75); }
.page-hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.25), transparent 65%); }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); position: relative; z-index: 1; }
.page-hero .crumbs { position: relative; z-index: 1; display: flex; gap: .6rem; font-size: .9rem; }
.page-hero .crumbs a { color: var(--gold-300); }
.coming-soon { text-align: center; max-width: 620px; margin: 0 auto; }
.coming-soon__icon { width: 96px; height: 96px; margin: 0 auto 1.5rem; border-radius: 28px; display: grid; place-items: center; background: var(--grad-gold); color: var(--brand-900); font-size: 2.2rem; box-shadow: var(--shadow-gold); }

/* Auth pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-art { position: relative; background: var(--grad-brand); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.auth-art::before { content: ""; position: absolute; width: 700px; height: 700px; right: -300px; bottom: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.3), transparent 65%); }
.auth-art__crest { width: 200px; padding: 18px; background: #fff; border-radius: 50%; margin: 2rem 0; box-shadow: 0 0 0 4px var(--gold-500), 0 25px 50px rgba(0,0,0,.4); animation: float 6s ease-in-out infinite; }
.auth-art h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); max-width: 480px; position: relative; }
.auth-art p { color: rgba(255,255,255,.7); max-width: 440px; position: relative; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: var(--ivory); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 { font-size: 2.2rem; margin-bottom: .4rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: .45rem; }
.field__control { position: relative; }
.field__control > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.field input, .field select, .field textarea { width: 100%; padding: .95rem 1rem .95rem 2.8rem; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(207,162,51,.18); }
.toggle-pass { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; }
.toggle-pass:hover { color: var(--brand-800); }

/* ---------------------------------------------------------- Responsive -- */
@media (max-width: 1199.98px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 991.98px) {
  :root { --nav-h: 72px; }
  .stats-card { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .event-row__countdown { display: none; }
  .join-cta { grid-template-columns: 1fr; }
  .hero-pager__label { display: none; }
  .hero-pager { gap: .8rem; max-width: 320px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}
@media (max-width: 767.98px) {
  .hero { min-height: 600px; }
  .hero-slide__content { padding-bottom: 150px; }
  .hero-slide--right .hero-copy, .hero-slide--right .hero-sub { text-align: left; margin-left: 0; }
  .hero-slide--right .hero-ctas { justify-content: flex-start; }
  .hero-slide__shade { background: linear-gradient(0deg, rgba(34,10,15,.95) 0%, rgba(34,10,15, var(--overlay)) 55%, rgba(34,10,15,.5) 100%) !important; transform: none !important; }
  .hero-controls { bottom: 86px; }
  .hero-arrow { width: 46px; height: 46px; }
  .hero-ctas .btn-lg-pill { padding: .95rem 1.35rem; font-size: .94rem; }
  .scroll-cue { display: none; }
  .stats-wrap { margin-top: -50px; }
  .stat { padding: 1.4rem .8rem; }
  .check-list { grid-template-columns: 1fr; }
  .about-badge { padding: .7rem 1rem; }
  .about-badge--motto { font-size: .9rem; }
  .event-row { gap: 1rem; padding: 1rem; }
  .event-row__date { width: 60px; height: 64px; }
  .event-row__go { display: none; }
  .footer-newsletter { padding: 1.6rem; }
  .newsletter-form { flex-direction: column; border-radius: 20px; background: transparent; border: 0; padding: 0; min-width: 0; }
  .newsletter-form input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: .9rem 1.2rem; }
  .brand__text small { font-size: .6rem; }
}
@media (max-width: 380px) {
  .brand__text small { display: none; }
  .hero-title { font-size: 2.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Phase 2 — registration, account pages, member dashboard, About, leadership
   ========================================================================== */
.eyebrow--brand { color: var(--brand-700); }
.btn-outline-brand { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; border-radius: 999px; padding: .95rem 1.5rem; border: 1.5px solid rgba(61,15,25,.3); color: var(--brand-800); background: transparent; transition: all .3s var(--ease); }
.btn-outline-brand:hover { background: var(--brand-800); color: #fff; border-color: var(--brand-800); }
.join-cta .btn-outline-brand { border-color: rgba(34,10,15,.35); }

/* Forms on auth pages */
.auth-card--wide { max-width: 640px; }
.auth-form-side { align-items: flex-start; padding-top: 4rem; }
@media (min-height: 860px) { .auth-form-side { align-items: center; padding-top: 3rem; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c6d6f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 2.4rem; cursor: pointer; }
.field input.is-invalid, .field select.is-invalid, .consent.is-invalid { border-color: var(--crimson) !important; }
.f-err { color: var(--crimson); font-size: .8rem; font-weight: 600; margin: .4rem 0 0; }
.opt { font-weight: 500; color: var(--muted); font-size: .76rem; margin-left: .25rem; }
.req { color: var(--crimson); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: .7rem; align-items: flex-start; padding: .95rem 1.1rem; border-radius: 14px; margin-bottom: 1.2rem; font-weight: 600; font-size: .92rem; }
.notice i { margin-top: .2rem; }
.notice--info { background: rgba(207,162,51,.12); color: #6b4f0f; }
.notice--error { background: rgba(208,24,40,.08); color: #9b1220; }
.result-icon { width: 92px; height: 92px; margin: 0 auto 1.4rem; border-radius: 28px; display: grid; place-items: center; font-size: 2.2rem; }
.result-icon--ok { background: var(--grad-gold); color: var(--brand-900); box-shadow: var(--shadow-gold); }
.result-icon--warn { background: rgba(208,24,40,.1); color: var(--crimson); }

.stepper { list-style: none; padding: 0; margin: 0 0 1.8rem; display: flex; gap: .5rem; counter-reset: s; }
.stepper li { flex: 1; display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 700; color: var(--muted); padding-bottom: .7rem; border-bottom: 3px solid var(--line); transition: all .35s var(--ease); }
.stepper li span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); font-size: .76rem; transition: all .35s var(--ease); }
.stepper li.is-on { color: var(--brand-800); border-color: var(--gold-500); }
.stepper li.is-on span { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.stepper li.is-done { color: var(--brand-600); border-color: var(--brand-600); }
.stepper li.is-done span { background: var(--gold-500); border-color: var(--gold-500); color: var(--brand-900); }
.js-steps .step { display: none; animation: stepIn .45s var(--ease); }
.js-steps .step.is-on { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } }
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.step-nav .btn-link-muted { display: inline-flex; gap: .4rem; align-items: center; background: none; border: 0; padding: .5rem 0; cursor: pointer; }
.pw-meter { margin-top: .55rem; }
.pw-meter__bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pw-meter__bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .4s var(--ease), background .4s; }
.pw-meter small { display: block; margin-top: .35rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
.consent { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: .88rem; cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: .1rem; accent-color: var(--brand-600); }

/* Member dashboard */
.member-area { background: var(--ivory); }
.dash-hero { position: relative; padding: 3rem 0 6rem; background: var(--grad-brand); overflow: hidden; }
.dash-hero::after { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.28), transparent 65%); }
.dash-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.dash-avatar { position: relative; width: 104px; height: 104px; flex: none; }
.dash-avatar > img, .dash-avatar > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #fff; color: var(--brand-700); font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; box-shadow: 0 0 0 4px var(--gold-500), 0 18px 40px rgba(0,0,0,.35); }
.dash-avatar__badge { position: absolute; right: 0; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-500); color: var(--brand-900); font-size: .8rem; border: 3px solid var(--brand-800); font-style: normal; }
.dash-avatar__badge.is-ok { background: #1f9d55; color: #fff; }
.dash-hero__hello { margin: 0; color: var(--gold-300); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.dash-hero h1 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin: .3rem 0 .7rem; }
.dash-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-tags span { padding: .4rem .85rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.88); font-size: .82rem; font-weight: 600; }
.dash-tags i { color: var(--gold-400); margin-right: .3rem; }
.dash-body { position: relative; z-index: 2; margin-top: -3.5rem; padding-bottom: 5rem; }
.status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.status-card { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: var(--radius); padding: 1.4rem; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.status-card__icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--ivory); color: var(--brand-600); font-size: 1.15rem; }
.status-card.is-ok .status-card__icon { background: rgba(31,157,85,.1); color: #1f9d55; }
.status-card.is-warn .status-card__icon { background: rgba(208,24,40,.08); color: var(--crimson); }
.status-card.is-wait .status-card__icon { background: rgba(207,162,51,.15); color: var(--gold-600); }
.status-card small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.status-card strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin: .1rem 0 .2rem; }
.status-card p { margin: 0; font-size: .86rem; color: var(--muted); word-break: break-word; }
.progress-x--sm { height: 7px; margin-top: .6rem; }
.link-btn { background: none; border: 0; padding: 0; margin-top: .5rem; color: var(--brand-600); font-weight: 700; font-size: .86rem; cursor: pointer; }
.link-btn:hover { color: var(--crimson); }
.dash-panel { background: #fff; border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.dash-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.dash-panel h2 { font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: .55rem; }
.dash-panel h2 i { color: var(--gold-600); font-size: 1rem; }
.dash-panel h3 { font-size: 1.05rem; margin: 1.4rem 0 .9rem; }
.dash-panel--gold { background: var(--grad-gold); border: 0; }
.dash-panel--gold h2 { color: var(--brand-900); }
.dash-panel--gold p { color: rgba(34,10,15,.75); }
.btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; background: var(--brand-600); color: #fff; font-weight: 700; border: 0; cursor: pointer; transition: all .3s var(--ease); }
.btn-brand:hover { background: var(--brand-700); color: #fff; transform: translateY(-2px); }
.btn-brand:disabled { opacity: .6; transform: none; }
.badge-dot { font-style: normal; min-width: 22px; height: 22px; padding: 0 .4rem; display: inline-grid; place-items: center; border-radius: 11px; background: var(--crimson); color: #fff; font-family: var(--font-body); font-size: .72rem; font-weight: 800; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { display: flex; gap: .85rem; padding: .85rem .6rem; border-radius: 12px; }
.notif-list li + li { border-top: 1px solid var(--line); }
.notif-list li.is-unread { background: rgba(207,162,51,.08); }
.notif-list__icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ivory); color: var(--brand-600); }
.notif-list strong { color: var(--ink); font-size: .94rem; }
.notif-list p { margin: .1rem 0; font-size: .86rem; color: var(--text); }
.notif-list small { color: var(--muted); font-size: .76rem; }
.empty-li { color: var(--muted); justify-content: center; }
.pref-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-radius: 14px; background: var(--ivory); cursor: pointer; }
.pref-row strong { display: block; color: var(--ink); font-size: .94rem; }
.pref-row small { color: var(--muted); font-size: .82rem; }
.toggle { position: relative; width: 50px; height: 28px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; border-radius: 28px; background: #d9cfc8; transition: background .3s; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .35s var(--ease); }
.toggle input:checked + span { background: #1f9d55; }
.toggle input:checked + span::after { transform: translateX(22px); }
.pw-form .field input { padding-left: 2.6rem; }
.mini-event { display: flex; gap: .9rem; align-items: center; padding: .75rem; border-radius: 14px; color: var(--ink); transition: background .25s; }
.mini-event:hover { background: var(--ivory); color: var(--ink); }
.mini-event__date { width: 52px; height: 56px; flex: none; border-radius: 12px; background: var(--grad-brand); color: rgba(255,255,255,.8); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.mini-event__date b { font-family: var(--font-display); font-size: 1.35rem; color: #fff; letter-spacing: 0; line-height: 1; }
.mini-event strong { display: block; font-size: .94rem; }
.mini-event small { color: var(--muted); font-size: .8rem; }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.quick-links a { display: flex; align-items: center; gap: .6rem; padding: .85rem; border-radius: 12px; background: var(--ivory); color: var(--ink); font-weight: 600; font-size: .9rem; }
.quick-links a:hover { background: var(--brand-600); color: #fff; }
.quick-links i { color: var(--gold-600); }
.quick-links a:hover i { color: var(--gold-300); }

/* About page */
.page-hero__lead { position: relative; z-index: 1; color: rgba(255,255,255,.78); font-size: 1.12rem; max-width: 680px; margin-top: 1rem; }
.page-hero--about { padding-bottom: 5.5rem; }
.page-hero .eyebrow { position: relative; z-index: 1; margin-top: 1.5rem; }
.hero-medallion { position: relative; z-index: 1; width: 300px; aspect-ratio: 1; margin-left: auto; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 32px; box-shadow: 0 0 0 8px rgba(207,162,51,.6), 0 0 0 18px rgba(255,255,255,.06), 0 40px 80px rgba(0,0,0,.4); animation: float 6s ease-in-out infinite; }
.hero-medallion img { width: 100%; height: 100%; object-fit: contain; }
.vm { margin-top: -3rem; padding-top: 0; position: relative; z-index: 2; }
.vm-card { position: relative; height: 100%; padding: 2.4rem 2.2rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.vm-card p { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.55; color: var(--ink); margin: 0; }
.vm-card--mission { background: var(--grad-brand); border: 0; }
.vm-card--mission p { color: #fff; }
.vm-card__icon { position: absolute; right: 1.6rem; top: 1.6rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: rgba(208,24,40,.08); color: var(--crimson); font-size: 1.3rem; }
.vm-card--mission .vm-card__icon { background: rgba(255,255,255,.1); color: var(--gold-400); }
.values__acronym { display: flex; justify-content: center; gap: clamp(.4rem, 1.5vw, 1.2rem); font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); }
.values__acronym span { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }
.values__acronym span:not(:last-child)::after { content: "."; position: absolute; right: -.35em; color: var(--brand-600); -webkit-text-fill-color: var(--brand-600); }
.aos-animate .values__acronym span, .values__acronym.aos-animate span { animation: rise .8s var(--ease) both; animation-delay: var(--d); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.value-card { position: relative; padding: 2rem 1.8rem 1.8rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.value-card__letter { position: absolute; right: -10px; top: -28px; font-family: var(--font-display); font-size: 9rem; font-weight: 700; line-height: 1; color: rgba(107,24,38,.06); transition: color .5s; }
.value-card:hover .value-card__letter { color: rgba(207,162,51,.18); }
.value-card h3 { position: relative; font-size: 1.5rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .7rem; }
.value-card h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 5px rgba(208,24,40,.12); }
.value-card p { position: relative; margin: 0; color: var(--muted); }

/* Leadership */
.leader-group { margin-top: 3.5rem; }
.leader-group:first-of-type { margin-top: 0; }
.leader-group__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.leader-group__icon { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-400); font-size: 1.25rem; }
.leader-group__head h3 { margin: 0; font-size: 1.6rem; }
.leader-group__head p { margin: 0; color: var(--muted); font-size: .94rem; }
.leader-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.leader-grid > .leader { flex: 0 1 220px; }
.leader-grid--home > .leader { flex: 1 1 220px; max-width: 290px; }
.leader-lead { display: flex; justify-content: center; margin-bottom: 1.6rem; }
.leader { position: relative; text-align: center; padding: 2rem 1.3rem 1.6rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.leader:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.leader.has-bio { cursor: pointer; }
.leader.has-bio::after { content: "Read bio"; position: absolute; left: 50%; bottom: -12px; transform: translate(-50%, 6px); padding: .3rem .8rem; border-radius: 999px; background: var(--brand-600); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; opacity: 0; transition: all .35s var(--ease); }
.leader.has-bio:hover::after { opacity: 1; transform: translate(-50%, 0); }
.leader__photo { width: 132px; height: 132px; margin: 0 auto 1.2rem; border-radius: 50%; padding: 5px; background: var(--grad-gold); }
.leader__photo img, .leader__photo span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; border: 4px solid #fff; background: var(--grad-brand); color: var(--gold-300); font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; }
.leader h3 { font-size: 1.12rem; line-height: 1.3; margin-bottom: .35rem; }
.leader__pos { margin: 0; color: var(--crimson); font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.leader__set { margin: .3rem 0 0; color: var(--muted); font-size: .8rem; }
.leader__in { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--brand-600); font-size: .85rem; }
.leader--lead { width: min(380px, 100%); padding: 2.6rem 2rem 2.2rem; background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%); border-color: rgba(207,162,51,.45); box-shadow: var(--shadow-md); }
.leader--lead .leader__photo { width: 170px; height: 170px; }
.leader--lead h3 { font-size: 1.4rem; }
.leader--lead::before { content: "\f521"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--brand-900); font-size: .85rem; box-shadow: var(--shadow-gold); }
.swal-round { border-radius: 50% !important; object-fit: cover; border: 4px solid #cfa233; }
.swal-pos { color: var(--crimson); font-weight: 700; margin: -6px 0 12px; }
.swal-bio { text-align: left; color: var(--text); line-height: 1.7; }

/* Homepage values ribbon */
.values-ribbon { padding: 1rem 0 0; }
.values-ribbon__inner { display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; padding: 1.3rem 1.8rem; border-radius: var(--radius-lg); background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-md); }
.values-ribbon__label small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.values-ribbon__label strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .08em; }
.values-ribbon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.values-ribbon li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-weight: 600; font-size: .9rem; }
.values-ribbon li b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--brand-900); font-family: var(--font-display); font-size: .9rem; }
.values-ribbon .link-arrow { color: var(--gold-300); }
.values-ribbon .link-arrow:hover { color: #fff; }

@media (max-width: 991.98px) {
  .status-row { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .grid-2 { grid-template-columns: 1fr; }
  .stepper li { font-size: 0; gap: 0; justify-content: center; }
  .values-grid { grid-template-columns: 1fr; }
  .leader-grid { gap: .9rem; }
  .leader-grid > .leader, .leader-grid--home > .leader { flex: 0 1 calc(50% - .45rem); max-width: none; }
  .leader { padding: 1.4rem .8rem 1.2rem; }
  .leader__photo { width: 96px; height: 96px; }
  .leader h3 { font-size: .98rem; }
  .vm-card { padding: 2rem 1.5rem; }
  .vm-card__icon { position: static; margin-bottom: 1rem; }
  .dash-hero__inner { flex-direction: column; text-align: center; }
  .dash-tags { justify-content: center; }
  .quick-links { grid-template-columns: 1fr 1fr; }
}

/* Navbar: keep items on one line at laptop widths */
.nav-links > a, .nav-drop__btn, .brand__text strong, .brand__text small, .btn-ghost-sm { white-space: nowrap; }
@media (max-width: 1519.98px) {
  .nav-links { gap: 0; }
  .nav-links > a, .nav-drop__btn { padding: .5rem .6rem; font-size: .9rem; }
  .site-nav__inner { gap: 1rem; }
  .brand__text small { font-size: .6rem; letter-spacing: .1em; }
}
@media (min-width: 1200px) and (max-width: 1319.98px) { .nav-actions .btn-ghost-sm { display: none !important; } }

/* ==========================================================================
   Phase 3 — separate header, framed sliding hero, graduation sets, profiles
   ========================================================================== */

/* Top bar + sticky header */
.topbar { background: var(--brand-900); color: rgba(255,255,255,.72); font-size: .8rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar__motto { margin: 0; display: flex; align-items: center; gap: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__motto i, .topbar__motto em { color: var(--gold-300); }
.topbar__motto em { font-family: var(--font-display); font-size: .92rem; }
.topbar__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--crimson); flex: none; }
.topbar__links { display: flex; align-items: center; gap: 1.2rem; white-space: nowrap; }
.topbar__links a { color: rgba(255,255,255,.8); display: inline-flex; align-items: center; gap: .45rem; }
.topbar__links a:hover { color: var(--gold-300); }
.topbar__links i { color: var(--gold-400); font-size: .78rem; }
.topbar__social { display: inline-flex; gap: .85rem; padding-left: 1.2rem; border-left: 1px solid rgba(255,255,255,.14); }
.site-nav { background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(61,15,25,.06); }
.site-nav.is-scrolled { box-shadow: 0 12px 30px -18px rgba(61,15,25,.35); }

/* Framed hero slider */
.hero-swiper, .hero-empty { height: 100%; border-radius: inherit; }
.hero-slide { background: var(--brand-900); }
.hero-slide .swiper-slide-shadow { background: rgba(34,10,15,.65) !important; }
.hero-title { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.9rem); }
.hero-controls { position: absolute; left: clamp(1.5rem, 4vw, 4rem); right: clamp(1.5rem, 4vw, 4rem); bottom: 34px; z-index: 6; display: flex; align-items: flex-end; gap: 2rem; }
.hero-count { font-family: var(--font-display); color: rgba(255,255,255,.55); font-size: 1rem; line-height: 1; white-space: nowrap; }
.hero-count b { font-size: 2.6rem; color: #fff; font-weight: 600; margin-right: .2rem; display: inline-block; min-width: 2.1ch; }
.hero-count span { margin: 0 .25rem; color: var(--gold-400); }
.hero-pager { display: flex; gap: 1.1rem; flex: 1; max-width: 680px; }
.hero-pager__item { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0 0 2px; color: rgba(255,255,255,.55); cursor: pointer; transition: color .3s; }
.hero-pager__item:hover, .hero-pager__item.is-active { color: #fff; }
.hero-pager__label { display: block; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.hero-pager__bar { display: block; height: 3px; margin-top: .6rem; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
.hero-pager__bar i { display: block; height: 100%; width: 0; background: var(--grad-gold); border-radius: 3px; }
.hero-pager__item.is-done .hero-pager__bar i { width: 100%; }
.hero-arrows { display: flex; gap: .6rem; margin-left: auto; }
.hero-arrow { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: all .35s var(--ease); }
.hero-arrow:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--brand-900); transform: scale(1.06); }
.hero-next { background: #fff; color: var(--brand-800); border-color: #fff; }
.hero-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; z-index: 7; }
.stats-wrap { margin-top: -56px; }

/* Find-your-set search */
.set-search { position: relative; display: flex; align-items: center; gap: .5rem; padding: .45rem .45rem .45rem 1.2rem; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-md); transition: border-color .25s, box-shadow .25s; }
.set-search:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 5px rgba(207,162,51,.18), var(--shadow-md); }
.set-search__icon { color: var(--brand-600); }
.set-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); padding: .65rem .2rem; }
.set-search input::placeholder { color: var(--muted); font-weight: 500; }
.set-search .btn-gold { padding: .85rem 1.3rem; }
.set-search__drop { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: .5rem; max-height: 320px; overflow-y: auto; }
.set-search__drop a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-radius: 12px; color: var(--ink); font-weight: 700; }
.set-search__drop a:hover, .set-search__drop a.is-hl { background: var(--ivory); color: var(--brand-600); }
.set-search__drop a small { color: var(--muted); font-weight: 600; }
.set-search__drop a b { font-family: var(--font-display); font-size: 1.15rem; color: var(--brand-700); margin-left: .3rem; }
.set-search__drop p { margin: 0; padding: .8rem 1rem; color: var(--muted); font-size: .9rem; }
.page-hero .set-search { max-width: 620px; margin-top: 2rem; z-index: 2; }

/* Homepage sets showcase */
.sets-home { position: relative; padding: clamp(4.5rem, 3rem + 5vw, 7rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5rem); background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%); overflow: hidden; }
.sets-home__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: end; margin-bottom: 3rem; }
.sets-home__search { display: grid; gap: 1rem; justify-items: end; }
.sets-home__search .set-search { width: 100%; }
.marquee { display: grid; gap: 1.2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__row { overflow: hidden; padding: .9rem 0; }
.marquee__track { display: flex; gap: 1.2rem; width: max-content; animation: marquee var(--dur, 60s) linear infinite; will-change: transform; }
.marquee__row:nth-child(2) .marquee__track { animation-duration: calc(var(--dur, 60s) * 1.15); margin-left: -110px; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - .6rem)); } }
.marquee__item { flex: none; }

/* Set card */
.setcard { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; width: 270px; height: 190px; padding: 1.3rem 1.4rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); color: var(--ink); overflow: hidden; box-shadow: 0 10px 26px -18px rgba(61,15,25,.35); transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s, color .3s; }
.setcard::before { content: ""; position: absolute; inset: 0; background: var(--grad-brand); opacity: 0; transition: opacity .5s var(--ease); }
.setcard::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.28), transparent 65%); transition: transform .8s var(--ease); }
.setcard > * { position: relative; z-index: 1; }
.setcard:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 26px 46px -22px rgba(61,15,25,.6); color: #fff; }
.setcard:hover::before { opacity: 1; }
.setcard:hover::after { transform: scale(1.4); }
.setcard__label { grid-column: 1 / -1; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--crimson); transition: color .3s; }
.setcard:hover .setcard__label { color: var(--gold-300); }
.setcard__year { grid-column: 1 / -1; font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.setcard__count { align-self: end; font-size: .8rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; transition: color .3s; }
.setcard:hover .setcard__count { color: rgba(255,255,255,.75); }
.setcard__count i { color: var(--gold-600); }
.setcard__stack { grid-column: 1; grid-row: 4; display: flex; align-self: end; margin-top: .6rem; }
.setcard__stack img, .setcard__stack span { width: 32px; height: 38px; border-radius: 9px; object-fit: cover; border: 2px solid #fff; margin-right: -9px; background: var(--brand-600); color: var(--gold-300); font-size: .62rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.setcard__stack .more { background: var(--gold-500); color: var(--brand-900); }
.setcard__stack--empty { color: var(--muted); font-size: .9rem; }
.setcard__count { grid-column: 1; grid-row: 3; }
.setcard__go { grid-column: 2; grid-row: 3 / 5; align-self: end; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--brand-600); transition: all .4s var(--ease); }
.setcard:hover .setcard__go { background: var(--gold-500); color: var(--brand-900); transform: rotate(-45deg); }

/* Sets page */
.decade-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.2rem; }
.decade-chips button { padding: .6rem 1.15rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; color: var(--text); cursor: pointer; transition: all .25s; }
.decade-chips button:hover { border-color: var(--brand-600); color: var(--brand-600); }
.decade-chips button.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.sets-grid .setcard { width: 100%; }

/* Set page hero */
.set-hero { position: relative; overflow: hidden; background: var(--grad-brand); color: rgba(255,255,255,.75); padding: 3rem 0 2.2rem; }
.set-hero__year { position: absolute; right: -2vw; bottom: -6vw; font-family: var(--font-display); font-weight: 700; font-size: clamp(9rem, 22vw, 22rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(224,187,85,.18); letter-spacing: -.04em; pointer-events: none; user-select: none; }
.set-hero__inner { position: relative; z-index: 1; }
.set-hero .crumbs { display: flex; gap: .6rem; font-size: .9rem; margin-bottom: 1.6rem; }
.set-hero .crumbs a { color: var(--gold-300); }
.set-hero__row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.set-hero h1 { color: #fff; font-size: clamp(2.6rem, 1.8rem + 3.5vw, 4.6rem); margin: .2rem 0 .6rem; }
.set-hero__nick { font-family: var(--font-display); font-style: italic; color: var(--gold-300); font-size: 1.2rem; margin: -.3rem 0 .8rem; }
.set-hero__stats { display: flex; flex-wrap: wrap; gap: .6rem; }
.set-hero__stats span { padding: .5rem .95rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .86rem; }
.set-hero__stats b { color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-right: .2rem; }
.set-hero__faces { display: flex; }
.set-hero__faces img { width: 78px; height: 98px; object-fit: cover; border-radius: 16px; border: 3px solid #fff; margin-left: -18px; box-shadow: 0 12px 26px rgba(0,0,0,.35); transform: rotate(calc((var(--i) - 2) * 4deg)) translateY(calc(var(--i) * 3px)); }
.set-hero__nav { display: flex; justify-content: space-between; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); }
.set-hero__nav a { color: rgba(255,255,255,.8); font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; }
.set-hero__nav a:hover { color: var(--gold-300); }
.set-members { padding-top: 2.5rem; background: var(--ivory); min-height: 50vh; }
.set-toolbar { display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }

/* Name search + filters */
.name-search { position: relative; flex: 1; max-width: 520px; min-width: 240px; }
.name-search > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--brand-600); pointer-events: none; }
.name-search input[type=search] { width: 100%; padding: 1rem 3rem 1rem 3.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s; }
.name-search input[type=search]:focus { outline: 0; border-color: var(--gold-500); box-shadow: 0 0 0 5px rgba(207,162,51,.18); }
.name-search__spin { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--brand-600); opacity: 0; animation: spin .8s linear infinite; transition: opacity .2s; }
.is-loading .name-search__spin { opacity: 1; }
.dir-filters { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.select-pill { position: relative; display: inline-flex; align-items: center; }
.select-pill i { position: absolute; left: 16px; color: var(--brand-600); pointer-events: none; }
.select-pill select { appearance: none; -webkit-appearance: none; padding: 1rem 2.6rem 1rem 2.7rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c6d6f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }

/* Member results */
.results-meta { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); min-height: 1.4em; }
.results-meta b { color: var(--ink); }
#results { transition: opacity .25s; }
#results.is-fading { opacity: .35; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.3rem; }
.mcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px -18px rgba(61,15,25,.35); transition: transform .5s var(--ease), box-shadow .5s var(--ease); animation: cardIn .6s var(--ease) both; }
.mgrid .mcard:nth-child(2) { animation-delay: .04s; } .mgrid .mcard:nth-child(3) { animation-delay: .08s; } .mgrid .mcard:nth-child(4) { animation-delay: .12s; }
.mgrid .mcard:nth-child(5) { animation-delay: .16s; } .mgrid .mcard:nth-child(6) { animation-delay: .2s; } .mgrid .mcard:nth-child(n+7) { animation-delay: .24s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.mcard:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -24px rgba(61,15,25,.5); }
.mcard.is-me { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(207,162,51,.25); }
.mcard__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--grad-brand); }
.mcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mcard:hover .mcard__photo img { transform: scale(1.06); }
.mcard__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, rgba(34,10,15,.45), transparent); pointer-events: none; }
.mcard__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 3.6rem; font-weight: 600; color: var(--gold-300); background: radial-gradient(circle at 70% 25%, rgba(207,162,51,.3), transparent 60%); }
.mcard__me { position: absolute; top: 12px; left: 12px; z-index: 1; padding: .3rem .7rem; border-radius: 999px; background: var(--grad-gold); color: var(--brand-900); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mcard__set { position: absolute; top: 12px; right: 12px; z-index: 1; padding: .3rem .65rem; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--brand-700); font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.mcard__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.mcard h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 .15rem; }
.mcard__job, .mcard__loc { margin: 0; font-size: .82rem; color: var(--muted); display: flex; gap: .45rem; align-items: baseline; }
.mcard__job i, .mcard__loc i { color: var(--gold-600); font-size: .75rem; width: 12px; }
.mcard__chip { align-self: flex-start; margin-top: .45rem; padding: .25rem .65rem; border-radius: 999px; background: var(--ivory); color: var(--brand-600); font-size: .72rem; font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; }
.empty-state-pub { text-align: center; padding: 3.5rem 1rem; background: #fff; border-radius: 24px; border: 1px dashed var(--line); }
.empty-state-pub > i { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 24px; background: var(--grad-gold); color: var(--brand-900); font-size: 1.7rem; }
.empty-state-pub h3 { font-size: 1.4rem; }
.empty-state-pub p { color: var(--muted); margin-bottom: 1.4rem; }
.pagination-x { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }
.pagination-x a, .pagination-x span { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; height: 44px; padding: 0 .9rem; border-radius: 14px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: all .25s; }
.pagination-x a:hover { border-color: var(--brand-600); color: var(--brand-600); }
.pagination-x .pg-nums { display: inline-flex; gap: .4rem; padding: 0; border: 0; background: none; }
.pagination-x .is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination-x .pg-gap { border: 0; background: none; min-width: 20px; padding: 0; }
.pagination-x .pg-nav.is-off { opacity: .4; }

/* Registration photo picker */
.photo-field { display: flex; gap: 1.2rem; align-items: center; padding: 1rem; margin-bottom: 1.3rem; border-radius: 18px; border: 1.5px dashed var(--line); background: #fff; }
.photo-field.is-invalid { border-color: var(--crimson); }
.photo-field__frame { position: relative; flex: none; width: 96px; height: 120px; border-radius: 16px; overflow: hidden; background: var(--ivory); cursor: pointer; border: 2px solid var(--line); transition: border-color .25s; }
.photo-field__frame:hover { border-color: var(--gold-500); }
.photo-field__frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-field__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--brand-600); }
.photo-field__empty i { font-size: 1.4rem; }
.photo-field__empty small { font-size: .72rem; font-weight: 700; }
.photo-field__frame img:not([hidden]) + .photo-field__empty { display: none; }
.photo-field__text strong { color: var(--ink); }
.photo-field__text p { margin: .2rem 0 .7rem; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.btn-sm-pill.btn-outline-brand { padding: .55rem 1rem; font-size: .84rem; cursor: pointer; }

/* Dashboard avatar → rectangle + edit button */
.dash-avatar { width: 108px; height: 135px; }
.dash-avatar > img, .dash-avatar > span { border-radius: 22px; }
.dash-avatar__edit { position: absolute; left: -8px; bottom: -8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-700); box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: pointer; transition: transform .25s; z-index: 2; }
.dash-avatar__edit:hover { transform: scale(1.1); }
.dash-avatar__badge { right: -8px; bottom: -8px; }

/* Leaders → rectangle portraits */
.leader { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.leader__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0; padding: 0; border-radius: 0; background: var(--grad-brand); position: relative; overflow: hidden; }
.leader__photo img, .leader__photo span { border: 0; border-radius: 0; width: 100%; height: 100%; font-size: 3.4rem; transition: transform 1s var(--ease); }
.leader:hover .leader__photo img { transform: scale(1.05); }
.leader__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--grad-gold); }
.leader h3 { padding: 1.1rem 1.1rem 0; }
.leader__pos { padding: 0 1.1rem; }
.leader__set { padding: 0 1.1rem; }
.leader > :last-child:not(.leader__photo) { padding-bottom: 1.3rem; }
.leader__in { z-index: 2; background: rgba(255,255,255,.92); }
.leader--lead { padding: 0; width: min(330px, 100%); }
.leader--lead .leader__photo { width: 100%; height: auto; }
.leader--lead::before { z-index: 3; top: 14px; }
.leader.has-bio::after { bottom: 12px; }
.swal-round { border-radius: 18px !important; height: 175px !important; }

/* Responsive */
@media (max-width: 1199.98px) {
  .topbar__motto .topbar__sep, .topbar__motto { font-size: .76rem; }
}
@media (max-width: 991.98px) {
  .topbar { display: none; }
  .sets-home__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .sets-home__search { justify-items: start; }
  .hero-count { display: none; }
  .hero-pager { max-width: 360px; }
  .hero-pager__label { display: none; }
}
@media (max-width: 767.98px) {
  .hero { padding: 10px 10px 0; }
  .hero-frame { height: min(640px, calc(100svh - 90px)); min-height: 520px; border-radius: 22px; }
  .hero-slide__content { padding: 1.5rem 1.4rem 120px; }
  .hero-controls { left: 1.2rem; right: 1.2rem; bottom: 24px; gap: 1rem; }
  .hero-arrow { width: 46px; height: 46px; }
  .stats-wrap { margin-top: -40px; }
  .setcard { width: 220px; height: 170px; padding: 1.1rem 1.15rem; }
  .setcard__year { font-size: 2.5rem; }
  .set-search { padding-left: 1rem; }
  .set-search .btn-gold span { display: none; }
  .set-search .btn-gold { width: 48px; height: 48px; padding: 0; }
  .mgrid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .mcard { border-radius: 16px; }
  .mcard__body { padding: .75rem .8rem .9rem; }
  .mcard h3 { font-size: .94rem; }
  .mcard__initials { font-size: 2.6rem; }
  .set-hero__faces { display: none; }
  .pagination-x .pg-nav span { display: none; }
  .name-search { min-width: 100%; }
  .select-pill, .select-pill select { width: 100%; }
  .photo-field { align-items: flex-start; }
}
/* keep slider controls clear of the overlapping stats card */
.hero-controls { bottom: 84px; }
.hero-slide__content { padding-bottom: 190px; }
@media (max-width: 767.98px) { .hero-controls { bottom: 62px; } .hero-slide__content { padding-bottom: 150px; } }

/* Full-bleed hero (update 4): edge to edge on every screen */
.hero-frame::after { display: none; }
.hero-slide__media img { object-fit: cover; object-position: center; }
.hero-slide__content { margin: 0 auto; }
@media (max-width: 767.98px) {
  .hero { padding: 0; }
  .hero-frame { height: min(660px, calc(100svh - 72px)); min-height: 520px; border-radius: 0; }
}

/* ==========================================================================
   Update 4 — News, Events, Gallery, Profiles
   ========================================================================== */
.section--tight { padding-top: 2.5rem; }
.chip--static { position: static; display: inline-flex; align-items: center; gap: .35rem; }
.chip--red { background: var(--crimson); color: #fff; }
.page-hero--compact { padding: 3rem 0; }
.page-hero__meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .4rem 0 0; font-size: .92rem; }
.page-hero__meta i { color: var(--gold-400); margin-right: .3rem; }
.page-hero__meta a { color: var(--gold-300); }
.crumbs--dark { display: flex; gap: .6rem; font-size: .88rem; color: var(--muted); margin-bottom: 1.4rem; }
.crumbs--dark a { color: var(--brand-600); font-weight: 600; }

/* Chips / filters */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-row--center { justify-content: center; }
.chip-row a { padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--text); font-weight: 700; font-size: .9rem; transition: all .25s; }
.chip-row a small { font-weight: 700; color: var(--muted); margin-left: .25rem; }
.chip-row a:hover { border-color: var(--brand-600); color: var(--brand-600); }
.chip-row a.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.chip-row a.is-on small { color: var(--gold-300); }
.news-filters { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.name-search--sm { max-width: 320px; min-width: 220px; flex: 0 1 320px; }
.name-search--sm input[type=search] { padding-top: .8rem; padding-bottom: .8rem; }

/* News lead */
.news-lead { display: grid; grid-template-columns: 1.25fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--text); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.news-lead:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--text); }
.news-lead__media { position: relative; min-height: 360px; overflow: hidden; }
.news-lead__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.news-lead:hover .news-lead__media img { transform: scale(1.05); }
.news-lead__body { padding: clamp(1.6rem, 1rem + 2vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; gap: .8rem; }
.news-lead__body h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin: 0; }
.news-lead__body > p:not(.news-meta) { color: var(--muted); margin: 0; }
.news-meta { margin: 0; font-size: .84rem; font-weight: 700; color: var(--crimson); letter-spacing: .02em; }

/* Article */
.container-read { max-width: 860px; }
.article__head { padding: 3rem 0 2rem; background: linear-gradient(180deg, var(--ivory), #fff); }
.article__head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.12; margin-bottom: 1rem; text-wrap: balance; }
.article__dek { font-size: 1.2rem; color: var(--text); font-family: var(--font-display); line-height: 1.5; }
.article__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; color: var(--muted); font-size: .88rem; font-weight: 600; margin-top: 1.4rem; }
.article__meta i { color: var(--gold-600); margin-right: .3rem; }
.article__by { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.av-xs { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-size: .72rem; font-weight: 800; }
.article__cover { margin: 0 auto 2.5rem; max-width: 1180px; }
.article__cover img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.article__cover figcaption { margin-top: .7rem; font-size: .84rem; color: var(--muted); text-align: center; }
.article__layout { position: relative; padding-bottom: 3rem; }
.share-rail { position: absolute; left: -84px; top: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: sticky; float: left; margin-left: -84px; top: 110px; }
.share-rail span { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.share-rail a, .share-rail button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--brand-700); cursor: pointer; transition: all .25s var(--ease); }
.share-rail a:hover, .share-rail button:hover { background: var(--brand-600); color: #fff; border-color: var(--brand-600); transform: translateY(-2px); }
.prose { font-size: 1.1rem; line-height: 1.85; color: #3a2d2f; }
.prose > * + * { margin-top: 1.15em; }
.prose p { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.8em; margin-bottom: .2em; }
.prose h2 { font-size: 1.85rem; } .prose h3 { font-size: 1.45rem; } .prose h4 { font-size: 1.2rem; }
.prose a { color: var(--brand-600); text-decoration: underline; text-decoration-color: rgba(207,162,51,.6); text-underline-offset: 3px; }
.prose img { border-radius: 16px; margin: 1.8em auto; box-shadow: var(--shadow-md); }
.prose blockquote { margin: 1.8em 0; padding: 1.2rem 1.6rem; border-left: 4px solid var(--gold-500); background: var(--ivory); border-radius: 0 16px 16px 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose li[data-list="bullet"] { list-style: disc; }
.prose iframe, .prose .ql-video { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 16px; display: block; }
.prose .ql-align-center { text-align: center; } .prose .ql-align-right { text-align: right; } .prose .ql-align-justify { text-align: justify; }
.prose pre { background: var(--brand-900); color: var(--gold-300); padding: 1rem; border-radius: 12px; overflow-x: auto; font-size: .9rem; }
.article__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); }
.article__pn a { display: block; padding: 1.1rem 1.3rem; border-radius: 16px; border: 1px solid var(--line); color: var(--ink); transition: all .25s; }
.article__pn a:hover { border-color: var(--gold-500); background: var(--ivory); }
.article__pn small { display: block; font-weight: 700; color: var(--crimson); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }
.article__pn strong { font-family: var(--font-display); font-size: 1.05rem; }

/* Date badge & countdown */
.date-badge { width: 62px; height: 66px; border-radius: 16px; background: var(--grad-gold); color: var(--brand-900); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 10px 20px -10px rgba(0,0,0,.35); }
.date-badge b { font-family: var(--font-display); font-size: 1.7rem; }
.date-badge span { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: .2rem; }
.date-badge--lg { width: 76px; height: 82px; } .date-badge--lg b { font-size: 2.1rem; }
.date-badge--xl { width: 104px; height: 112px; flex: none; border-radius: 22px; } .date-badge--xl b { font-size: 3rem; } .date-badge--xl span { font-size: .74rem; }
.countdown { display: flex; gap: .6rem; margin: .6rem 0 1.2rem; }
.countdown div { min-width: 68px; padding: .7rem .4rem; border-radius: 14px; text-align: center; background: var(--ivory); border: 1px solid var(--line); }
.countdown b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--brand-800); line-height: 1; }
.countdown small { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.countdown--hero { margin-top: 2rem; }
.countdown--hero div { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.countdown--hero b { color: #fff; } .countdown--hero small { color: rgba(255,255,255,.65); }

/* Events list */
.event-feature { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--text); margin-bottom: 1rem; transition: transform .5s var(--ease), box-shadow .5s; }
.event-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--text); }
.event-feature__media { position: relative; min-height: 380px; overflow: hidden; }
.event-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.event-feature:hover .event-feature__media img { transform: scale(1.05); }
.event-feature__body { padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.event-feature__body h2 { margin: .3rem 0 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
.event-feature__body > p:not(.event-meta) { margin: 0; color: var(--muted); }
.event-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; font-size: .86rem; color: var(--muted); font-weight: 600; }
.event-meta i { color: var(--gold-600); margin-right: .3rem; }
.event-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--text); transition: transform .5s var(--ease), box-shadow .5s; }
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--text); }
.event-card.is-cancelled { opacity: .75; }
.event-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.event-card:hover .event-card__media img { transform: scale(1.06); }
.event-card__media .date-badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.event-card__media .chip { left: auto; right: 16px; }
.event-card__body { padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.event-card__body h3 { font-size: 1.3rem; margin: 0; }
.event-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.event-card__foot small { color: var(--brand-600); font-weight: 700; }

/* Event detail */
.event-hero { position: relative; overflow: hidden; background: var(--brand-900); color: rgba(255,255,255,.8); padding: 3rem 0 3.2rem; }
.event-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.1); transform: scale(1.06); opacity: .45; }
.event-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,10,15,.95) 0%, rgba(34,10,15,.7) 60%, rgba(34,10,15,.5)); z-index: 1; }
.event-hero--plain { background: var(--grad-brand); }
.event-hero__inner { position: relative; z-index: 2; }
.event-hero .crumbs { display: flex; gap: .6rem; font-size: .88rem; margin-bottom: 1.6rem; }
.event-hero .crumbs a { color: var(--gold-300); }
.event-hero__row { display: flex; gap: 1.6rem; align-items: center; }
.event-hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); margin: .4rem 0 .8rem; text-wrap: balance; }
.event-hero__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; font-weight: 600; }
.event-hero__meta i { color: var(--gold-400); margin-right: .35rem; }
.event-body { background: #fff; }
.event-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin: 2rem 0; }
.event-facts > div { display: flex; gap: .8rem; align-items: center; padding: 1rem; border-radius: 16px; background: var(--ivory); }
.event-facts i { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--brand-600); }
.event-facts small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.event-facts span { font-weight: 600; color: var(--ink); font-size: .92rem; }
.album-link { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem .8rem .8rem; border-radius: 18px; border: 1px solid var(--line); color: var(--ink); transition: all .25s; }
.album-link:hover { border-color: var(--gold-500); background: var(--ivory); color: var(--ink); }
.album-link img { width: 84px; height: 64px; border-radius: 12px; object-fit: cover; }
.album-link span { flex: 1; } .album-link small { display: block; color: var(--crimson); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.album-link strong { font-family: var(--font-display); font-size: 1.1rem; }
.rsvp-card { position: sticky; top: 110px; padding: 1.8rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.rsvp-card h2 { font-size: 1.5rem; margin: 0; }
.rsvp-card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.rsvp-card__count { text-align: right; line-height: 1; }
.rsvp-card__count b { font-family: var(--font-display); font-size: 2.2rem; color: var(--brand-700); }
.rsvp-card__count small { font-size: 1rem; color: var(--muted); }
.rsvp-card__count span { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: .3rem; }
.rsvp-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.2rem; }
.rsvp-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .95rem .4rem; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; text-align: center; font-weight: 700; font-size: .84rem; color: var(--text); transition: all .25s var(--ease); }
.rsvp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rsvp-choice i { font-size: 1.4rem; color: var(--muted); transition: transform .3s var(--ease), color .25s; }
.rsvp-choice:hover { border-color: var(--gold-500); }
.rsvp-choice.is-on { border-color: var(--brand-600); background: var(--ivory); color: var(--ink); }
.rsvp-choice--going.is-on { border-color: #1f9d55; background: rgba(31,157,85,.08); } .rsvp-choice--going.is-on i { color: #1f9d55; transform: scale(1.15); }
.rsvp-choice--maybe.is-on i { color: var(--gold-600); transform: scale(1.15); }
.rsvp-choice--not_going.is-on { border-color: var(--crimson); background: rgba(208,24,40,.05); } .rsvp-choice--not_going.is-on i { color: var(--crimson); }
.rsvp-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.rsvp-choice input:focus-visible + i { outline: 3px solid var(--gold-400); outline-offset: 4px; border-radius: 50%; }
.rsvp-extra { margin-top: 1rem; display: grid; gap: .5rem; }
.rsvp-extra[hidden] { display: none; }
.rsvp-select, .rsvp-note { width: 100%; padding: .75rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); font: inherit; background: #fff; }
.rsvp-select:focus, .rsvp-note:focus { outline: 0; border-color: var(--gold-500); }
.rsvp-status { min-height: 1.4em; margin: .8rem 0 0; font-size: .86rem; font-weight: 600; color: #1f9d55; }
.attendees { display: flex; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.attendees a, .attendees .more { width: 40px; height: 48px; margin: 0 -6px 6px 0; border-radius: 10px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); transition: transform .25s var(--ease); }
.attendees a:hover { transform: translateY(-4px); z-index: 1; }
.attendees img, .attendees span { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-size: .68rem; font-weight: 800; }
.attendees .more { display: grid; place-items: center; background: var(--grad-gold); color: var(--brand-900); font-size: .74rem; font-weight: 800; }
.rsvp-card__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.rsvp-card__links a, .rsvp-card__links button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 999px; background: var(--ivory); border: 0; color: var(--brand-700); font-weight: 700; font-size: .8rem; cursor: pointer; }
.rsvp-card__links a:hover, .rsvp-card__links button:hover { background: var(--brand-600); color: #fff; }
.rsvp-pill { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--ivory); color: var(--brand-600); white-space: nowrap; }
.rsvp-pill--going { background: rgba(31,157,85,.12); color: #1f9d55; }
.rsvp-pill--maybe { background: rgba(207,162,51,.16); color: var(--gold-600); }
.rsvp-pill--not_going { background: #f3eeea; color: var(--muted); }

/* Gallery */
.gallery-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2.2rem 1.6rem; }
.galbum { display: block; color: var(--ink); }
.galbum:hover { color: var(--ink); }
.galbum__stack { position: relative; aspect-ratio: 4 / 3; margin: 14px 14px 0; }
.galbum__stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 14px 30px -14px rgba(61,15,25,.45); transition: transform .6s var(--ease); }
.galbum__back--0 { transform: rotate(-5deg) translate(-8px, 4px); }
.galbum__back--1 { transform: rotate(4deg) translate(8px, -2px); }
.galbum:hover .galbum__back--0 { transform: rotate(-9deg) translate(-26px, 6px); }
.galbum:hover .galbum__back--1 { transform: rotate(8deg) translate(26px, -6px); }
.galbum:hover .galbum__front { transform: translateY(-6px) scale(1.02); }
.galbum__count { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: .35rem .75rem; border-radius: 999px; background: rgba(34,10,15,.78); color: #fff; font-size: .78rem; font-weight: 700; backdrop-filter: blur(4px); }
.galbum__body { padding: 1.2rem .4rem 0; }
.galbum__body h3 { font-size: 1.25rem; margin: 0 0 .2rem; transition: color .25s; }
.galbum:hover h3 { color: var(--brand-600); }
.galbum__body p { margin: 0; color: var(--muted); font-size: .86rem; }
.masonry { columns: 4 260px; column-gap: 14px; }
.masonry__item { position: relative; display: block; margin-bottom: 14px; break-inside: avoid; border-radius: 16px; overflow: hidden; background: var(--ivory); cursor: zoom-in; }
.masonry__item img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease), filter .4s; }
.masonry__item:hover img { transform: scale(1.04); filter: brightness(.82); }
.masonry__zoom { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--brand-700); opacity: 0; transform: scale(.8); transition: all .3s var(--ease); }
.masonry__item:hover .masonry__zoom { opacity: 1; transform: none; }
.masonry__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .9rem .8rem; background: linear-gradient(0deg, rgba(34,10,15,.85), transparent); color: #fff; font-size: .84rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: all .35s var(--ease); }
.masonry__item:hover .masonry__cap { opacity: 1; transform: none; }
.more-albums { margin-top: 3.5rem; }
.more-albums h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.more-albums__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.more-albums__row a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.more-albums__row img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.more-albums__row a:hover img { transform: scale(1.06); }
.more-albums__row span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .8rem; background: linear-gradient(0deg, rgba(34,10,15,.85), transparent); color: #fff; font-weight: 700; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: auto 1fr auto; background: rgba(14,6,8,.96); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem; color: rgba(255,255,255,.75); font-weight: 600; font-size: .9rem; }
.lb__bar > div { display: flex; gap: .5rem; }
.lb__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 0; color: #fff; cursor: pointer; transition: background .25s; }
.lb__btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 70px; }
.lb__stage img { max-width: 100%; max-height: calc(100vh - 210px); object-fit: contain; border-radius: 10px; opacity: 0; transform: translateX(var(--dx, 0)) scale(.98); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.lb__stage img.is-in { opacity: 1; transform: none; }
.lb__stage figcaption { margin-top: .9rem; color: rgba(255,255,255,.85); font-size: .95rem; text-align: center; max-width: 720px; }
.lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1.1rem; cursor: pointer; transition: all .25s; z-index: 2; }
.lb__nav:hover { background: var(--gold-500); color: var(--brand-900); }
.lb__prev { left: 14px; } .lb__next { right: 14px; }
.lb__strip { display: flex; gap: 6px; justify-content: center; padding: .8rem 1rem 1.1rem; overflow-x: auto; scrollbar-width: none; }
.lb__strip button { flex: none; width: 58px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; opacity: .45; cursor: pointer; background: none; transition: all .25s; }
.lb__strip button.is-on { opacity: 1; border-color: var(--gold-400); }
.lb__strip img { width: 100%; height: 100%; object-fit: cover; }

/* Homepage moments */
.moments { padding-bottom: 2rem; }
.moments__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 170px; gap: 10px; padding: 0 10px; }
.moments__item { position: relative; overflow: hidden; border-radius: 18px; }
.moments__item--0 { grid-column: span 2; grid-row: span 2; }
.moments__item--3 { grid-column: span 2; }
.moments__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .4s; }
.moments__item:hover img { transform: scale(1.07); filter: brightness(.75); }
.moments__item span { position: absolute; left: 14px; bottom: 12px; right: 14px; color: #fff; font-weight: 700; font-size: .86rem; opacity: 0; transform: translateY(8px); transition: all .35s var(--ease); }
.moments__item:hover span { opacity: 1; transform: none; }

/* Profile editing */
.profile-head { background: var(--grad-brand); padding: 2.6rem 0 5.5rem; color: rgba(255,255,255,.75); }
.profile-head .crumbs { display: flex; gap: .6rem; font-size: .88rem; margin-bottom: 1rem; }
.profile-head .crumbs a { color: var(--gold-300); }
.profile-head h1 { color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: .3rem; }
.dash-body--profile { margin-top: -4rem; }
.profile-layout { display: grid; grid-template-columns: 290px 1fr; gap: 1.6rem; align-items: start; }
.profile-side { position: sticky; top: 100px; display: grid; gap: 1rem; }
.profile-card { background: #fff; border-radius: var(--radius-lg); padding: 1.6rem; text-align: center; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.profile-card__photo { position: relative; width: 150px; aspect-ratio: 4 / 5; margin: 0 auto 1rem; }
.profile-card__photo img, .profile-card__photo > span { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-family: var(--font-display); font-size: 3rem; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gold-500); }
.profile-card__cam { position: absolute; right: -10px; bottom: -10px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-600); color: #fff; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.25); transition: transform .25s; }
.profile-card__cam:hover { transform: scale(1.1); }
.profile-card h2 { font-size: 1.3rem; margin: .5rem 0 .2rem; }
.profile-card p { color: var(--muted); font-size: .84rem; margin-bottom: 1rem; }
.profile-nav { background: #fff; border-radius: var(--radius); padding: .5rem; border: 1px solid var(--line); display: grid; }
.profile-nav a { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; color: var(--text); font-weight: 600; font-size: .9rem; }
.profile-nav a i { width: 18px; color: var(--gold-600); }
.profile-nav a:hover { background: var(--ivory); color: var(--brand-600); }
.profile-main .dash-panel { scroll-margin-top: 100px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 1rem; }
.textarea-plain { width: 100%; padding: .95rem 1rem !important; border-radius: 14px; border: 1.5px solid var(--line); font: inherit; resize: vertical; }
.textarea-plain:focus { outline: 0; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(207,162,51,.18); }
.save-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: .8rem .8rem .8rem 1.4rem; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.save-bar span { color: var(--muted); font-size: .86rem; } .save-bar i { color: var(--gold-600); }
.dash-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.dash-hero__actions .btn-glass, .dash-hero__actions .btn-gold { padding: .75rem 1.15rem; font-size: .88rem; }

/* Public profile */
.pprofile { padding-bottom: 4rem; background: var(--ivory); }
.pprofile__band { height: 190px; background: var(--grad-brand); position: relative; overflow: hidden; }
.pprofile__band::after { content: ""; position: absolute; width: 480px; height: 480px; right: -120px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.35), transparent 65%); }
.pprofile__card { position: relative; margin-top: -110px; display: flex; gap: 2rem; align-items: flex-end; padding: 1.6rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pprofile__photo { flex: none; width: 200px; aspect-ratio: 4 / 5; margin-top: -70px; }
.pprofile__photo img, .pprofile__photo > span { width: 100%; height: 100%; border-radius: 24px; object-fit: cover; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-family: var(--font-display); font-size: 4rem; box-shadow: 0 0 0 6px #fff, 0 20px 40px -14px rgba(0,0,0,.45); }
.pprofile__main { flex: 1; min-width: 0; }
.pprofile__main h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin: .1rem 0 .3rem; }
.pprofile__badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-gold); color: var(--brand-900); font-size: .9rem; vertical-align: middle; }
.pprofile__job { font-size: 1.1rem; color: var(--text); font-weight: 600; margin-bottom: .8rem; }
.pprofile__tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.pprofile__tags span { padding: .38rem .8rem; border-radius: 999px; background: var(--ivory); font-size: .82rem; font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.pprofile__tags i { color: var(--gold-600); }
.pprofile__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.pprofile__actions .btn-gold, .pprofile__actions .btn-brand, .pprofile__actions .btn-outline-brand { padding: .75rem 1.2rem; font-size: .9rem; }
.pprofile__hint { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }
.pprofile__more { margin-top: 1.5rem; }
.pprofile__bio { font-size: 1.05rem; line-height: 1.8; margin: 0; }
.mates { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.mates a { text-align: center; color: var(--ink); }
.mates img, .mates span { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-family: var(--font-display); font-size: 1.6rem; transition: transform .3s var(--ease); }
.mates a:hover img, .mates a:hover span { transform: translateY(-4px); }
.mates small { display: block; margin-top: .35rem; font-weight: 700; font-size: .82rem; }
a.mcard { color: inherit; }
a.mcard:hover { color: inherit; }
a.mcard:hover h3 { color: var(--brand-600); }

@media (max-width: 1199.98px) { .share-rail { position: static; float: none; margin: 0 0 1.5rem; flex-direction: row; } }
@media (max-width: 991.98px) {
  .news-lead, .event-feature { grid-template-columns: 1fr; }
  .news-lead__media, .event-feature__media { min-height: 240px; }
  .rsvp-card { position: static; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-side { position: static; }
  .profile-nav { grid-auto-flow: column; overflow-x: auto; }
  .profile-nav a { white-space: nowrap; }
  .moments__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 140px; }
  .pprofile__card { flex-direction: column; align-items: center; text-align: center; }
  .pprofile__tags, .pprofile__actions { justify-content: center; }
}
@media (max-width: 575.98px) {
  .event-hero__row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .date-badge--xl { width: 84px; height: 90px; } .date-badge--xl b { font-size: 2.3rem; }
  .countdown div { min-width: 0; flex: 1; }
  .countdown b { font-size: 1.35rem; }
  .masonry { columns: 2 140px; column-gap: 8px; }
  .masonry__item { margin-bottom: 8px; border-radius: 12px; }
  .lb__stage { padding: 0 8px; }
  .lb__nav { display: none; }
  .moments__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .moments__item--3 { grid-column: span 1; }
  .article__pn { grid-template-columns: 1fr; }
  .save-bar { border-radius: 20px; flex-direction: column; align-items: stretch; text-align: center; padding: .8rem; }
  .pprofile__photo { width: 160px; }
  .news-filters .name-search--sm { flex: 1 1 100%; max-width: none; }
  .rsvp-choice span { font-size: .76rem; }
}

/* ==========================================================================
   Update 5 — Projects, donations, receipts
   ========================================================================== */
.page-hero--give { padding-bottom: 4rem; }
.give-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); overflow: hidden; }
.give-stats div { padding: 1.2rem .8rem; text-align: center; }
.give-stats div + div { border-left: 1px solid rgba(255,255,255,.12); }
.give-stats b { display: block; font-family: var(--font-display); font-size: 1.8rem; color: #fff; line-height: 1.1; }
.give-stats span { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-300); }
.cause-card__cat { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); margin-bottom: .3rem; }
.cause-feature { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--text); transition: transform .5s var(--ease), box-shadow .5s; }
.cause-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--text); }
.cause-feature__media { position: relative; min-height: 400px; overflow: hidden; }
.cause-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cause-feature:hover .cause-feature__media img { transform: scale(1.05); }
.cause-feature__body { padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); display: flex; flex-direction: column; gap: .4rem; }
.cause-feature__body h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin: 0; }
.cause-feature__body > p { color: var(--muted); }
.cause-feature__body .btn-gold { align-self: flex-start; }
.progress-x--lg { height: 14px; margin-top: 1rem; }

/* Leaderboard */
.leaderboard { margin-top: 4rem; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); border-radius: var(--radius-lg); background: var(--grad-brand); color: rgba(255,255,255,.75); position: relative; overflow: hidden; }
.leaderboard::after { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.3), transparent 65%); }
.leaderboard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; position: relative; z-index: 1; margin-bottom: 1.4rem; }
.leaderboard__head h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); margin: 0 0 .3rem; }
.leaderboard__head p { margin: 0; }
.leaderboard__head > i { font-size: 3rem; color: var(--gold-400); filter: drop-shadow(0 8px 20px rgba(207,162,51,.5)); }
.leaderboard ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; position: relative; z-index: 1; }
.leaderboard li { display: grid; grid-template-columns: 40px 160px 1fr auto; align-items: center; gap: 1rem; padding: .7rem 1rem; border-radius: 14px; background: rgba(255,255,255,.06); }
.leaderboard__rank { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; font-weight: 800; }
.leaderboard li:first-child .leaderboard__rank { background: var(--grad-gold); color: var(--brand-900); }
.leaderboard li a { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.leaderboard li a:hover { color: var(--gold-300); }
.leaderboard__bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.leaderboard__bar i { display: block; height: 100%; border-radius: 8px; background: var(--grad-gold); }
.leaderboard__amt { text-align: right; color: #fff; font-weight: 800; }
.leaderboard__amt small { display: block; font-weight: 600; font-size: .72rem; color: rgba(255,255,255,.6); }

/* Cause page */
.cause-hero { padding: 3rem 0 1.5rem; background: linear-gradient(180deg, var(--ivory), #fff); }
.cause-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); max-width: 900px; text-wrap: balance; margin-bottom: .8rem; }
.cause-hero__lead { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); max-width: 800px; }
.cause-body { padding-top: 1.5rem; }
.cause-cover { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-bottom: 1.8rem; }
.cause-progress { padding: 1.6rem; border-radius: var(--radius-lg); background: var(--ivory); border: 1px solid var(--line); }
.cause-progress__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.cause-progress__top b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); color: var(--brand-800); line-height: 1.1; }
.cause-progress__top span { color: var(--muted); font-weight: 600; }
.cause-progress__pct { font-family: var(--font-display); font-size: 2rem; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cause-progress__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; font-size: .9rem; color: var(--text); }
.cause-progress__facts i { color: var(--gold-600); margin-right: .3rem; }
.goal-hit { color: #1f9d55 !important; font-weight: 800; } .goal-hit i { color: #1f9d55 !important; }
.updates { margin-top: 3rem; }
.updates h2 { font-size: 1.7rem; margin-bottom: 1.4rem; }
.updates h2 small { font-size: .9rem; color: var(--muted); font-family: var(--font-body); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 2rem 1rem; }
.timeline li::before { content: ""; position: absolute; left: -2.15rem; top: .25rem; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(207,162,51,.35); }
.timeline time { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--crimson); }
.timeline h3 { font-size: 1.25rem; margin: .3rem 0 .4rem; }
.timeline p { color: var(--text); margin-bottom: .8rem; }
.timeline img { width: 100%; max-width: 520px; border-radius: 16px; cursor: zoom-in; box-shadow: var(--shadow-md); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.share-row span { font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: .4rem; }
.share-row a, .share-row button { display: inline-flex; gap: .45rem; align-items: center; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--brand-700); font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .25s; }
.share-row a:hover, .share-row button:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.donate-sticky { position: sticky; top: 100px; display: grid; gap: 1.2rem; }

/* Donate box */
.donate-box { position: relative; padding: 1.8rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.donate-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-gold); }
.test-ribbon { margin: -1.8rem -1.8rem 1.2rem; padding: .55rem 1rem; background: repeating-linear-gradient(-45deg, #fff4d6 0 12px, #ffeebd 12px 24px); color: #7a5a0c; font-size: .8rem; font-weight: 800; text-align: center; }
.donate-box__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.3rem; }
.donate-box__icon { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-400); font-size: 1.3rem; }
.donate-box h2 { font-size: 1.5rem; margin: 0; }
.donate-box__head p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.f-label-sm { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.donate-select { width: 100%; appearance: none; padding: .85rem 1rem .85rem 2.8rem; border-radius: 14px; border: 1.5px solid var(--line); font: inherit; font-weight: 600; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c6d6f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.amount { position: relative; cursor: pointer; }
.amount input { position: absolute; opacity: 0; pointer-events: none; }
.amount span { display: block; padding: .8rem .4rem; border-radius: 14px; border: 1.5px solid var(--line); text-align: center; font-weight: 800; color: var(--ink); transition: all .25s var(--ease); }
.amount:hover span { border-color: var(--gold-500); }
.amount.is-on span { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(107,24,38,.7); }
.amount input:focus-visible + span { outline: 3px solid var(--gold-400); outline-offset: 2px; }
.amount-custom { position: relative; margin: .8rem 0 1.1rem; }
.amount-custom > span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-700); }
.amount-custom input { width: 100%; padding: .9rem 1rem .9rem 2.6rem; border-radius: 16px; border: 2px solid var(--line); font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.amount-custom input:focus { outline: 0; border-color: var(--gold-500); box-shadow: 0 0 0 5px rgba(207,162,51,.18); }
.amount-custom small { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .72rem; font-weight: 600; }
.donor-fields { display: grid; gap: .55rem; }
.donor-fields input, .donor-fields textarea { width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); font: inherit; resize: vertical; }
.donor-fields input:focus, .donor-fields textarea:focus { outline: 0; border-color: var(--gold-500); }
.anon { display: flex; gap: .6rem; align-items: center; margin: .9rem 0 1.1rem; font-size: .86rem; color: var(--text); cursor: pointer; }
.anon input { width: 18px; height: 18px; accent-color: var(--brand-600); }
.donate-btn b { font-weight: 800; }
.secure-note { margin: .8rem 0 0; text-align: center; font-size: .78rem; color: var(--muted); }
.secure-note i { color: #1f9d55; }
.bank-box { margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--ivory); }
.bank-box summary { cursor: pointer; font-weight: 700; color: var(--brand-700); font-size: .9rem; list-style: none; }
.bank-box summary::-webkit-details-marker { display: none; }
.bank-box summary i { color: var(--gold-600); margin-right: .4rem; }
.bank-box__body { margin: .8rem 0; padding: .9rem 1rem; border-radius: 12px; background: #fff; border: 1px dashed var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; color: var(--ink); }
.supporters { padding: 1.5rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.supporters h3 { font-size: 1.15rem; margin-bottom: 1rem; } .supporters h3 i { color: var(--crimson); }
.supporters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-height: 460px; overflow-y: auto; }
.supporters li { display: flex; gap: .8rem; align-items: flex-start; }
.supporters__av { width: 40px; height: 48px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-size: .74rem; font-weight: 800; }
.supporters__av img { width: 100%; height: 100%; object-fit: cover; }
.supporters li > div { flex: 1; min-width: 0; }
.supporters strong { color: var(--ink); font-size: .92rem; }
.supporters strong small { color: var(--muted); font-weight: 600; }
.supporters p { margin: .15rem 0; font-size: .86rem; color: var(--text); font-style: italic; }
.supporters li small { color: var(--muted); font-size: .75rem; }
.supporters em { font-style: normal; font-weight: 800; color: var(--brand-700); font-size: .9rem; }
.why-give { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.1rem; }
.why-give li { display: flex; gap: 1rem; }
.why-give i { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: rgba(207,162,51,.14); color: var(--gold-600); font-size: 1.2rem; }
.why-give strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.why-give p { margin: .1rem 0 0; color: var(--muted); }
.donate-proof { padding: 1rem 1.2rem; border-radius: 14px; background: var(--ivory); font-weight: 600; }
.donate-proof b { color: var(--brand-700); font-family: var(--font-display); font-size: 1.2rem; }

/* Thank you + receipt */
.receipt-page { background: var(--ivory); }
.receipt-wrap { padding-top: 3rem; }
.thanks { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.thanks__burst { width: 104px; height: 104px; margin: 0 auto 1.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--brand-900); font-size: 2.6rem; box-shadow: 0 0 0 12px rgba(207,162,51,.15), 0 0 0 26px rgba(207,162,51,.07); animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } }
.thanks--wait .thanks__burst { background: #fff4d6; color: var(--gold-600); animation: none; }
.thanks--fail .thanks__burst { background: rgba(208,24,40,.1); color: var(--crimson); animation: none; }
.thanks h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.thanks p { font-size: 1.08rem; color: var(--text); }
.receipt { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 2.2rem; position: relative; }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 10px 0, transparent 8px, #fff 8.5px) 0 0 / 20px 12px repeat-x; }
.receipt::before { top: -11px; transform: rotate(180deg); } .receipt::after { bottom: -11px; }
.receipt__head { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.2rem; border-bottom: 2px dashed var(--line); }
.receipt__head img { width: 56px; height: 56px; object-fit: contain; }
.receipt__head strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.receipt__head small { color: var(--muted); font-size: .78rem; }
.receipt__badge { margin-left: auto; padding: .4rem .8rem; border-radius: 999px; background: rgba(31,157,85,.12); color: #1f9d55; font-weight: 800; font-size: .8rem; white-space: nowrap; }
.receipt h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .6rem; }
.receipt__rows { margin: 0; }
.receipt__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.receipt__rows dt { font-weight: 600; color: var(--muted); font-size: .9rem; }
.receipt__rows dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; font-size: .92rem; }
.receipt__total { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-radius: 16px; background: var(--grad-brand); color: var(--gold-300); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.receipt__total b { font-family: var(--font-display); font-size: 2rem; color: #fff; letter-spacing: 0; }
.receipt__msg { margin: 1.2rem 0 0; font-family: var(--font-display); font-style: italic; color: var(--text); text-align: center; }
.receipt__foot { display: flex; justify-content: space-between; margin-top: 1.6rem; padding-top: 1rem; border-top: 2px dashed var(--line); font-size: .82rem; color: var(--muted); }
.receipt__foot em { font-family: var(--font-display); color: var(--brand-600); }
.receipt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.4rem; }
.giving__total { font-family: var(--font-display); font-weight: 700; color: var(--brand-700); font-size: 1.15rem; }
.giving__list { list-style: none; margin: 0; padding: 0; }
.giving__list a { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem .4rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.giving__list a:hover { background: var(--ivory); }
.giving__list small { display: block; color: var(--muted); font-size: .76rem; }
.giving__list b { font-family: var(--font-display); color: var(--brand-700); }

@media print {
  .topbar, .site-nav, .site-footer, .receipt-actions, .back-top, .thanks, .drawer, .search-overlay, .page-loader { display: none !important; }
  body, .receipt-page { background: #fff !important; }
  .receipt { box-shadow: none; border: 1px solid #ddd; max-width: none; }
  .receipt__total { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 991.98px) {
  .cause-feature { grid-template-columns: 1fr; }
  .cause-feature__media { min-height: 240px; }
  .donate-sticky { position: static; }
  .leaderboard li { grid-template-columns: 34px 1fr auto; }
  .leaderboard__bar { grid-column: 2 / 4; grid-row: 2; }
}
@media (max-width: 575.98px) {
  .give-stats b { font-size: 1.35rem; }
  .donate-box, .receipt { padding: 1.3rem; }
  .test-ribbon { margin: -1.3rem -1.3rem 1rem; }
  .receipt__rows div { flex-direction: column; gap: .1rem; }
  .receipt__rows dd { text-align: left; }
}

/* =====================================================================
   Update 6 — Chapters, contact, stories
   ===================================================================== */
/* Chapters index */
.chapters-toolbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2.4rem; }
.chapters-toolbar .name-search { display: block; margin: 0; }
.mine-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--text); font-size: .9rem; box-shadow: var(--shadow-sm); }
.mine-pill i { color: var(--gold-600); }
.mine-pill b { color: var(--brand-700); }
.mine-pill--soft { background: transparent; box-shadow: none; font-size: .85rem; color: var(--muted); }
.mine-pill--on { background: rgba(255,255,255,.12); border-color: rgba(224,187,85,.55); color: #fff; }
.mine-pill--on i { color: var(--gold-300); }
.chapter-group + .chapter-group { margin-top: 3rem; }
.chapter-group__title { font-size: 1.35rem; display: flex; align-items: center; gap: .6rem; margin-bottom: 1.3rem; }
.chapter-group__title i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--ivory); color: var(--brand-600); font-size: .95rem; }
.chapter-group__title small { font-family: var(--font-body); font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--ivory); padding: .2rem .6rem; border-radius: 999px; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.chapter-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 22px; border: 1px solid var(--line); overflow: hidden; color: var(--text); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.chapter-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; color: var(--text); }
.chapter-card__media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.chapter-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.chapter-card:hover .chapter-card__media img { transform: scale(1.06); }
.chapter-card__pattern { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 1.2rem .2rem; background:
  radial-gradient(circle at 85% 15%, rgba(224,187,85,.35), transparent 45%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px), var(--grad-brand); }
.chapter-card__pattern--1 { background-color: var(--espresso); background-image: radial-gradient(circle at 15% 20%, rgba(224,187,85,.3), transparent 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px), linear-gradient(135deg, #3a2a24, #140c0a); }
.chapter-card__pattern--2 { background-image: radial-gradient(circle at 70% 90%, rgba(208,24,40,.35), transparent 50%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px), linear-gradient(135deg, var(--brand-500), var(--brand-900)); }
.chapter-card__pattern--3 { background-image: radial-gradient(circle at 30% 80%, rgba(224,187,85,.4), transparent 50%), repeating-radial-gradient(circle at 100% 0, rgba(255,255,255,.05) 0 2px, transparent 2px 18px), linear-gradient(135deg, #5a1522, #220a0f); }
.chapter-card__pattern span { font-family: var(--font-display); font-weight: 700; font-size: 4.2rem; line-height: .8; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(240,215,143,.55); transition: transform .8s var(--ease); }
.chapter-card:hover .chapter-card__pattern span { transform: translateX(8px); }
.chapter-card__flag { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.chapter-card__body { padding: 1.3rem 1.4rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.chapter-card h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.chapter-card__loc, .chapter-card__meet { display: flex; gap: .5rem; align-items: baseline; font-size: .88rem; color: var(--muted); margin-bottom: .3rem; }
.chapter-card__loc i, .chapter-card__meet i { color: var(--brand-500); width: 14px; }
.chapter-card__foot { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line); }
.chapter-card__foot small { color: var(--muted); font-size: .84rem; }
.chapter-card__foot small b { color: var(--ink); }
.chapter-card__go { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ivory); color: var(--brand-600); transition: all .35s var(--ease); }
.chapter-card:hover .chapter-card__go { background: var(--brand-600); color: #fff; transform: translateX(3px); }
.chapter-card__next { margin: .9rem -1.4rem -1.2rem; padding: .65rem 1.4rem; background: #fdf3e1; color: #6b4d12; font-size: .8rem; font-weight: 700; }
.chapter-card__next i { color: var(--gold-600); }
.face-stack { display: inline-flex; }
.face-stack img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; }
.face-stack img:first-child { margin-left: 0; }
.face-stack:empty { display: none; }
.start-chapter { margin-top: 3.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center; padding: 2rem 2.2rem; border-radius: 26px; background: var(--grad-brand); color: rgba(255,255,255,.78); position: relative; overflow: hidden; }
.start-chapter::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(207,162,51,.28), transparent 65%); pointer-events: none; }
.start-chapter h2 { color: #fff; font-size: 1.6rem; margin-bottom: .35rem; }
.start-chapter p { margin: 0; max-width: 620px; }
.start-chapter__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--grad-gold); color: var(--brand-900); font-size: 1.6rem; }
.start-chapter .btn-gold { position: relative; z-index: 1; }

/* Chapter page */
.chapter-hero { position: relative; overflow: hidden; background: var(--grad-brand); color: rgba(255,255,255,.78); padding: 3rem 0 2.6rem; }
.chapter-hero.has-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(34,10,15,.95) 0%, rgba(34,10,15,.82) 45%, rgba(34,10,15,.45) 100%); }
.chapter-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter-hero__flag { position: absolute; right: 4vw; bottom: -2.5rem; font-size: clamp(8rem, 18vw, 15rem); line-height: 1; opacity: .12; filter: grayscale(.3); z-index: 1; pointer-events: none; transform: rotate(-8deg); }
.chapter-hero__inner { position: relative; z-index: 2; }
.chapter-hero .crumbs { display: flex; gap: .6rem; font-size: .9rem; margin-bottom: 1.4rem; }
.chapter-hero .crumbs a { color: var(--gold-300); }
.chapter-hero h1 { color: #fff; font-size: clamp(2.4rem, 1.7rem + 3vw, 4.2rem); margin: .1rem 0 .4rem; }
.chapter-hero__loc { font-size: 1.05rem; margin-bottom: 1rem; }
.chapter-hero__loc i { color: var(--gold-400); margin-right: .3rem; }
.chapter-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.6rem; }
.chapter-hero__faces { position: absolute; right: 0; top: 50%; transform: translateY(-40%); }
.chapter-h { font-size: 1.6rem; margin-bottom: 1rem; }
.chapter-events, .chapter-members { margin-top: 3rem; }
.ch-events { display: grid; gap: .8rem; margin-top: 1.2rem; }
.ch-event { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ch-event:hover { transform: translateX(4px); box-shadow: var(--shadow-md); color: var(--ink); }
.ch-event .date-badge { flex: none; }
.ch-event strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.ch-event small { color: var(--muted); }
.ch-event > i { margin-left: auto; color: var(--brand-500); }
.muted-note { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--ivory); color: var(--muted); }
.muted-note i { color: var(--gold-600); margin-right: .3rem; }
.chapter-side { position: sticky; top: 110px; display: grid; gap: 1.2rem; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem; }
.side-card__label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); margin-bottom: 1rem; }
.leader-card__row { display: flex; align-items: center; gap: 1rem; }
.leader-card__row img, .leader-card__ph { width: 72px; height: 90px; object-fit: cover; border-radius: 16px; flex: none; }
.leader-card__ph { display: grid; place-items: center; background: var(--grad-brand); color: var(--gold-300); font-family: var(--font-display); font-size: 1.5rem; }
.leader-card strong { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.leader-card small { color: var(--muted); }
.side-facts { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .9rem; }
.side-facts li { display: flex; gap: .8rem; font-size: .92rem; }
.side-facts li > i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ivory); color: var(--brand-600); }
.side-facts li .fa-whatsapp { color: #128c4b; }
.side-facts b { display: block; color: var(--ink); font-size: .84rem; }
.set-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.set-chips a { display: inline-flex; align-items: baseline; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; background: var(--ivory); color: var(--brand-700); font-family: var(--font-display); font-weight: 700; transition: all .25s; }
.set-chips a small { font-family: var(--font-body); font-size: .72rem; color: var(--muted); font-weight: 700; }
.set-chips a:hover { background: var(--brand-600); color: #fff; }
.set-chips a:hover small { color: var(--gold-300); }

/* Contact */
.contact-card { background: #fff; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); position: relative; }
.contact-card__head { margin-bottom: 1.4rem; }
.contact-card__head h2 { font-size: 1.9rem; margin-bottom: .2rem; }
.contact-card__head p { color: var(--muted); margin: 0; }
.to-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; padding: .5rem .6rem .5rem .9rem; border-radius: 999px; background: #fdf3e1; color: #6b4d12; font-size: .88rem; }
.to-chip a { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #6b4d12; }
.to-chip a:hover { background: rgba(0,0,0,.06); }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--plain textarea { padding: 1rem 1.1rem; resize: vertical; min-height: 150px; line-height: 1.6; }
.field textarea.is-invalid { border-color: var(--crimson) !important; }
.char-count { display: block; text-align: right; font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.contact-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
.small-print { font-size: .82rem; color: var(--muted); margin: 0; max-width: 340px; }
.small-print i { color: var(--gold-600); }
.contact-done { text-align: center; padding: 2.5rem 1rem; animation: doneIn .6s var(--ease); }
.contact-done__icon { width: 92px; height: 92px; margin: 0 auto 1.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--grad-gold); color: var(--brand-900); font-size: 2.2rem; box-shadow: 0 0 0 12px rgba(207,162,51,.15), var(--shadow-gold); animation: popIn .7s var(--ease); }
.contact-done h2 { font-size: 2rem; }
.contact-done p { color: var(--text); max-width: 440px; margin: 0 auto 1.6rem; }
@keyframes doneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { transform: scale(.4); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.contact-closed { text-align: center; padding: 3rem 1rem; }
.contact-closed > i { font-size: 2.4rem; color: var(--gold-500); margin-bottom: 1rem; }
.reach-list { display: grid; gap: .8rem; }
.reach { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.reach:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.reach > i { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--grad-brand); color: var(--gold-300); font-size: 1.1rem; }
.reach--wa > i { background: linear-gradient(135deg, #25d366, #128c4b); color: #fff; }
.reach small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reach b { font-size: .98rem; word-break: break-word; }
.map-frame { position: relative; margin-top: 1rem; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--ivory); aspect-ratio: 4 / 3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.map-frame a { position: absolute; left: 12px; bottom: 12px; padding: .55rem .9rem; border-radius: 999px; background: #fff; box-shadow: var(--shadow-md); font-weight: 700; font-size: .85rem; }
.faq { margin-top: clamp(4rem, 3rem + 4vw, 6rem); }
.faq__list { max-width: 860px; margin: 0 auto; display: grid; gap: .8rem; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: box-shadow .3s; }
.faq__item[open] { box-shadow: var(--shadow-md); border-color: transparent; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.15rem 1.4rem; font-weight: 700; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ivory); color: var(--brand-600); transition: transform .35s var(--ease), background .3s; }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--gold-400); color: var(--brand-900); }
.faq__item > div { padding: 0 1.4rem 1.2rem; color: var(--text); }
.faq__item > div p { margin-bottom: .6rem; }

/* Stories */
.story-hero { position: relative; max-width: 960px; margin: 0 auto 3.5rem; text-align: center; padding: 1rem 1rem 0; }
.story-hero__mark { font-size: 3rem; color: var(--gold-400); margin-bottom: 1.2rem; }
.story-hero blockquote { font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.45; color: var(--ink); font-weight: 500; margin-bottom: 1.8rem; }
.story-hero figcaption { display: inline-flex; align-items: center; gap: 1rem; text-align: left; }
.story-hero figcaption img, .story-hero .avatar-initials { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.story-hero strong { display: block; font-size: 1.05rem; color: var(--ink); }
.story-hero small { color: var(--muted); }
.story-wall { columns: 3 320px; column-gap: 1.5rem; }
.story-card { break-inside: avoid; margin-bottom: 1.5rem; height: auto; }
.story-card blockquote { font-size: 1.08rem; }
.story-cta { margin-top: 2.5rem; }

/* Member dashboard additions */
.story-pill { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }
.story-pill--gold { background: #fdf3e1; color: #8a6414; }
.story-pill--green { background: #e3f4e8; color: #1d7a3e; }
.story-pill--muted { background: var(--ivory); color: var(--muted); }
.consent-row { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; color: var(--text); cursor: pointer; }
.consent-row input { margin-top: .25rem; accent-color: var(--brand-600); }
.f-select { flex: 1; min-width: 0; padding: .75rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: .92rem; color: var(--ink); }
.chapter-mini { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: 16px; background: var(--ivory); color: var(--ink); transition: background .25s; }
.chapter-mini:hover { background: #f3ebe0; color: var(--ink); }
.chapter-mini__flag { width: 48px; height: 48px; flex: none; display: grid; place-items: center; font-size: 1.6rem; border-radius: 14px; background: #fff; }
.chapter-mini strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.chapter-mini small { display: block; color: var(--muted); font-size: .8rem; }
.chapter-mini__next { color: #8a6414 !important; font-weight: 700; margin-top: .2rem; }
.chapter-mini > i { margin-left: auto; color: var(--brand-500); }

@media (max-width: 991.98px) {
  .chapter-side { position: static; }
  .chapter-hero__faces { display: none; }
  .start-chapter { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 575.98px) {
  .chapters-toolbar .name-search { min-width: 0; width: 100%; max-width: none; }
  .chapter-grid { grid-template-columns: 1fr; }
  .start-chapter { padding: 1.6rem; }
  .contact-card__foot .btn-gold { width: 100%; }
  .ch-event { padding: .8rem; }
  .story-wall { columns: 1; }
}

/* =====================================================================
   Update 7 — Site search
   ===================================================================== */
.search-overlay { justify-content: flex-start; padding-top: clamp(80px, 16vh, 180px); }
.search-overlay__form { position: relative; }
.search-overlay__spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--gold-400); opacity: 0; animation: spin .8s linear infinite; flex: none; }
.search-overlay__form.is-loading .search-overlay__spin { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.search-suggest { width: min(760px, 100%); margin-top: 1rem; max-height: min(60vh, 520px); overflow-y: auto; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.search-suggest.is-open { opacity: 1; transform: none; pointer-events: auto; }
.search-suggest:empty { display: none; }
.ss-item { display: flex; align-items: center; gap: .9rem; padding: .75rem 1.1rem; color: var(--ink); border-bottom: 1px solid var(--line); transition: background .2s; }
.ss-item:hover, .ss-item.is-active { background: #fdf6ea; color: var(--ink); }
.ss-item.is-active { box-shadow: inset 3px 0 0 var(--gold-500); }
.ss-media { width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--ivory); color: var(--brand-600); }
.ss-media img { width: 100%; height: 100%; object-fit: cover; }
.ss-media.is-portrait { height: 52px; width: 42px; }
.ss-media.is-initials { background: var(--grad-brand); color: var(--gold-300); font-weight: 800; font-size: .8rem; }
.ss-media.is-flag { font-size: 1.5rem; }
.ss-text { min-width: 0; flex: 1; }
.ss-text b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-text small { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-item em { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); background: var(--ivory); padding: .25rem .55rem; border-radius: 999px; flex: none; }
.ss-all { display: flex; justify-content: center; align-items: center; gap: .5rem; padding: .9rem; font-weight: 700; color: var(--brand-700); }
.ss-all:hover { background: var(--ivory); }
.ss-empty { padding: 1.2rem 1.3rem; color: var(--muted); }
.ss-empty i { color: var(--gold-500); margin-right: .3rem; }
mark { background: rgba(240,215,143,.55); color: inherit; padding: 0 .1em; border-radius: 3px; }

.big-search { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; max-width: 760px; margin-top: 1.8rem; padding: .45rem .45rem .45rem 1.3rem; border-radius: 999px; background: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.big-search > i { color: var(--brand-600); font-size: 1.1rem; }
.big-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.08rem; font-weight: 600; color: var(--ink); padding: .7rem .2rem; background: transparent; }
.big-search .btn-gold { padding: .9rem 1.6rem; }
.search-tabs { margin-bottom: 1.8rem; }
.search-tabs a i { margin-right: .25rem; font-size: .82rem; opacity: .8; }
.set-hit { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.4rem; margin-bottom: 1.6rem; border-radius: 22px; background: var(--grad-brand); color: rgba(255,255,255,.75); box-shadow: var(--shadow-md); transition: transform .35s var(--ease); flex-wrap: wrap; }
.set-hit:hover { transform: translateY(-3px); color: rgba(255,255,255,.75); }
.set-hit__year { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--gold-400); width: 80px; }
.set-hit small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.set-hit strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
.set-hit em { font-style: normal; font-size: .9rem; }
.set-hit .btn-gold { margin-left: auto; }
.search-group + .search-group { margin-top: 2.6rem; }
.search-group__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.search-group__head h2 { font-size: 1.35rem; display: flex; align-items: center; gap: .6rem; margin: 0; }
.search-group__head h2 i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--ivory); color: var(--brand-600); font-size: .9rem; }
.search-group__head h2 small { font-family: var(--font-body); font-size: .78rem; font-weight: 800; color: var(--muted); }
.sr-list { display: grid; gap: .75rem; }
.sr-list--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sr { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--text); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.sr:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; color: var(--text); }
.sr__thumb { width: 92px; height: 66px; flex: none; border-radius: 12px; overflow: hidden; background: var(--ivory); display: grid; place-items: center; }
.sr__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr__thumb--portrait { width: 60px; height: 74px; }
.sr__thumb--round { width: 60px; height: 60px; border-radius: 50%; }
.sr__thumb--initials { background: var(--grad-brand); color: var(--gold-300); font-family: var(--font-display); font-size: 1.3rem; }
.sr__thumb--icon { color: var(--brand-600); font-size: 1.4rem; width: 60px; height: 60px; }
.sr__thumb--flag { font-size: 2rem; width: 60px; height: 60px; }
.sr__body { min-width: 0; flex: 1; display: grid; gap: .2rem; }
.sr__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sr__badge { font-style: normal; font-family: var(--font-body); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6414; background: #fdf3e1; padding: .2rem .5rem; border-radius: 999px; vertical-align: middle; }
.sr__snip { font-size: .9rem; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr__meta { font-size: .8rem; color: var(--muted); }
.sr__meta i { color: var(--brand-500); margin-right: .2rem; }
.sr__go { color: var(--brand-500); transition: transform .3s var(--ease); }
.sr:hover .sr__go { transform: translateX(4px); }
.search-start h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.search-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.search-tips a { display: grid; gap: .2rem; padding: 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
.search-tips a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.search-tips i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--grad-gold); color: var(--brand-900); margin-bottom: .6rem; }
.search-tips small { color: var(--muted); }
@media (max-width: 575.98px) {
  .big-search { padding-left: 1rem; }
  .big-search .btn-gold { padding: .85rem 1.1rem; }
  .sr { padding: .85rem; gap: .8rem; }
  .sr__thumb { width: 64px; height: 56px; }
  .sr__go { display: none; }
  .sr-list--grid { grid-template-columns: 1fr; }
  .set-hit .btn-gold { margin-left: 0; width: 100%; }
  .ss-item em { display: none; }
}

/* =====================================================================
   Update 8 — Cinematic hero carousel
   ===================================================================== */
.hero--cine { position: relative; background: var(--brand-900); }
.hero--cine .hero-copy > * { animation: none; }
.cine { --dur: 1150ms; --ease-cine: cubic-bezier(.77, 0, .18, 1); --dir: 1; position: relative; height: clamp(560px, calc(100vh - 118px), 880px); height: clamp(560px, calc(100svh - 118px), 880px); overflow: hidden; isolation: isolate; outline: 0; touch-action: pan-y; user-select: none; background: var(--brand-900); }
.cine.fx-fade { --dur: 900ms; }
.cine__slide { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; visibility: hidden; }
.cine__slide.is-active { visibility: visible; z-index: 3; }
.cine__slide.is-leaving { visibility: visible; z-index: 2; }
.cine__slide--empty { background: radial-gradient(ellipse at 70% 30%, var(--brand-600), var(--brand-900) 70%); }

/* imagery: fast settle, then slow Ken Burns; parallax follows the mouse */
.cine__media { position: absolute; inset: -2.5%; overflow: hidden; transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.cine__media picture, .cine__media img { display: block; width: 100%; height: 100%; }
.cine__media img { object-fit: cover; object-position: center; transform: scale(1.2); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter 1s ease; will-change: transform; }
.cine.is-ready .cine__slide.is-active .cine__media img { transform: scale(1.02); transition: transform 8s cubic-bezier(.12, .6, .25, 1), filter 1s ease; }
.cine__slide.is-leaving .cine__media img { transform: scale(1.1); filter: brightness(.45) saturate(.8); transition: transform var(--dur) var(--ease-cine), filter var(--dur) ease; }
.cine__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(34,10,15, calc(var(--overlay) + .18)) 0%, rgba(34,10,15, calc(var(--overlay) * .75)) 40%, rgba(34,10,15, calc(var(--overlay) * .1)) 75%, transparent 100%),
  linear-gradient(0deg, rgba(20,6,9,.85) 0%, rgba(20,6,9,.3) 20%, transparent 42%),
  radial-gradient(ellipse at 15% 85%, rgba(207,162,51,.16), transparent 50%); }
.hero-slide--center .cine__shade { background: radial-gradient(ellipse at center, rgba(34,10,15, calc(var(--overlay) * .9)) 0%, rgba(34,10,15, calc(var(--overlay) + .1)) 100%), linear-gradient(0deg, rgba(20,6,9,.9), transparent 45%); }
.hero-slide--right .cine__shade { transform: scaleX(-1); }

/* transitions */
.fx-wipe .cine__slide.is-entering { animation: cineWipe var(--dur) var(--ease-cine) both; }
@keyframes cineWipe {
  from { clip-path: inset(0 calc(max(0, -1 * var(--dir)) * 100%) 0 calc(max(0, var(--dir)) * 100%)); }
  to   { clip-path: inset(0 0 0 0); }
}
.fx-wipe .cine__slide.is-entering .cine__media { animation: cineDrift var(--dur) var(--ease-cine) both; }
@keyframes cineDrift { from { translate: calc(var(--dir) * 18%) 0; } to { translate: 0 0; } }
.fx-wipe .cine__slide.is-leaving .cine__media { translate: calc(var(--dir) * -10%) 0; transition: translate var(--dur) var(--ease-cine), transform 1.2s; }
.cine__wipe { position: absolute; top: -10%; bottom: -10%; left: 0; width: 16vw; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(240,215,143,.0) 10%, rgba(224,187,85,.55) 48%, rgba(255,240,200,.85) 52%, rgba(207,162,51,.0) 90%, transparent);
  transform: translateX(110vw) skewX(-14deg); mix-blend-mode: screen; }
.fx-wipe.is-moving .cine__wipe { animation: cineSweep var(--dur) var(--ease-cine) both; }
@keyframes cineSweep {
  0%   { opacity: 0; transform: translateX(calc(50vw + var(--dir) * 60vw)) skewX(-14deg); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(50vw - var(--dir) * 70vw)) skewX(-14deg); }
}
.fx-slide .cine__slide.is-entering { animation: cineSlideIn var(--dur) var(--ease-cine) both; box-shadow: -40px 0 80px rgba(0,0,0,.45); }
@keyframes cineSlideIn { from { transform: translateX(calc(var(--dir) * 100%)); } to { transform: none; } }
.fx-slide .cine__slide.is-leaving { transform: translateX(calc(var(--dir) * -28%)); transition: transform var(--dur) var(--ease-cine); }
.fx-fade .cine__slide.is-entering { animation: cineFade var(--dur) ease both; }
@keyframes cineFade { from { opacity: 0; } to { opacity: 1; } }

/* content reveals */
.cine__content { position: relative; z-index: 5; width: 100%; padding-top: 2rem; padding-bottom: 150px; }
.cine .hero-copy { max-width: 780px; }
.cine .hero-title { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.03em; margin: 1.3rem 0 1.2rem; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.hero-title .w > span { display: inline-block; transform: translate3d(0, 108%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform .95s cubic-bezier(.2, .9, .2, 1); transition-delay: calc(var(--w) * 55ms + 380ms); }
.hero-title .text-gold-grad { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.hero-title .text-gold-grad .w > span { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .06em; }
.cine.is-ready .cine__slide.is-active .hero-title .w > span { transform: none; }
.cine__slide.is-leaving .hero-title .w > span { transform: translate3d(0, -108%, 0); transition-duration: .55s; transition-delay: calc(var(--w) * 18ms); transition-timing-function: cubic-bezier(.7, 0, .84, 0); }
.cine-in { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .9, .2, 1); transition-delay: calc(var(--d) * 130ms + 250ms); }
.cine.is-ready .cine__slide.is-active .cine-in { opacity: 1; transform: none; }
.cine__slide.is-leaving .cine-in { opacity: 0; transform: translate3d(0, -14px, 0); transition-duration: .4s; transition-delay: 0s; }
.cine .hero-sub { font-size: clamp(1.02rem, .95rem + .45vw, 1.28rem); max-width: 600px; }
.cine .hero-eyebrow { background: rgba(255,255,255,.08); border-color: rgba(224,187,85,.4); }

/* controls */
.cine__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 0 0 30px; pointer-events: none; }
.cine__bar { display: flex; align-items: flex-end; gap: 2.2rem; pointer-events: auto; }
.cine__count { display: flex; align-items: baseline; gap: .45rem; font-family: var(--font-display); color: rgba(255,255,255,.55); line-height: 1; }
.cine__num { display: inline-block; overflow: hidden; height: 1em; font-size: 3rem; }
.cine__cur { display: inline-block; color: #fff; font-weight: 600; min-width: 2ch; }
.cine__cur.roll { animation: cineRoll .7s cubic-bezier(.2, .9, .2, 1); }
@keyframes cineRoll { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.cine__of { font-size: 1rem; }
.cine__pager { display: flex; gap: 1rem; flex: 1; max-width: 620px; }
.cine__dot { flex: 1; min-width: 0; padding: .4rem 0; border: 0; background: none; text-align: left; color: rgba(255,255,255,.55); cursor: pointer; transition: color .3s; }
.cine__dot:hover, .cine__dot.is-active { color: #fff; }
.cine__dot-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .55rem; }
.cine__dot-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.cine__dot-bar i { display: block; height: 100%; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; }
.cine__nav { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.cine__arrow { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: all .35s var(--ease); }
.cine__arrow:hover { background: #fff; color: var(--brand-800); transform: translateX(-3px); }
.cine__next { display: flex; align-items: center; gap: .9rem; padding: .45rem 1.2rem .45rem .45rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(20,6,9,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; cursor: pointer; text-align: left; transition: background .35s, transform .35s var(--ease); max-width: 300px; }
.cine__next:hover { background: rgba(20,6,9,.6); transform: translateY(-2px); }
.cine__next-thumb { position: relative; width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.cine__next-thumb img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; object-fit: cover; opacity: 0; transform: scale(1.3); transition: opacity .6s, transform .9s var(--ease); }
.cine__next-thumb img.is-on { opacity: 1; transform: none; }
.cine__next-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cine__next-thumb circle { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 2.5; }
.cine__next-thumb .cine__ring { stroke: var(--gold-400); stroke-linecap: round; }
.cine__next-thumb > i { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(20,6,9,.55); font-size: .75rem; transition: background .3s, color .3s; }
.cine__next:hover .cine__next-thumb > i { background: var(--gold-400); color: var(--brand-900); }
.cine__next-text { min-width: 0; }
.cine__next-text small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.cine__next-text b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.cine__pause { position: absolute; top: 22px; right: 22px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(20,6,9,.3); color: #fff; font-size: .78rem; cursor: pointer; backdrop-filter: blur(8px); opacity: .7; transition: opacity .3s, background .3s; }
.cine__pause:hover, .cine__pause:focus-visible { opacity: 1; background: rgba(20,6,9,.6); }
.cine__scroll { position: absolute; right: clamp(16px, 2.2vw, 34px); top: 50%; z-index: 6; width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255,255,255,.45); transform: translateY(-50%); }
.cine__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold-400); animation: cineScroll 1.8s ease-in-out infinite; }
@keyframes cineScroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Impact band (replaces the overlapping stats card) */
.impact { position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.impact::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-gold); }
.impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.impact__item { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 1rem; padding: 2.1rem 1.6rem 1.9rem; color: var(--text); transition: background .35s; overflow: hidden; }
.impact__item + .impact__item::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--line); }
.impact__item:hover { background: var(--ivory); color: var(--text); }
.impact__icon { grid-row: span 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(207,162,51,.12); color: var(--gold-600); font-size: 1.25rem; transition: background .35s, color .35s, transform .5s var(--ease); }
.impact__item:hover .impact__icon { background: var(--brand-600); color: var(--gold-300); transform: rotate(-6deg) scale(1.05); }
.impact__item strong { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; color: var(--brand-900); }
.impact__label { color: var(--muted); font-size: .86rem; font-weight: 600; margin-top: .3rem; }
.impact__go { grid-column: 2; margin-top: .7rem; font-size: .8rem; font-weight: 800; color: var(--brand-600); opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s var(--ease); }
.impact__item:hover .impact__go, .impact__item:focus-visible .impact__go { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .cine__dot-label { display: none; }
  .cine__pager { max-width: 260px; gap: .5rem; }
  .cine__next-text { display: none; }
  .cine__next { padding: .3rem; }
  .cine__scroll { display: none; }
  .impact__grid { grid-template-columns: repeat(2, 1fr); }
  .impact__item:nth-child(3)::before { display: none; }
  .impact__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .impact__go { opacity: 1; transform: none; }
}
@media (max-width: 767.98px) {
  .cine { height: min(700px, calc(100svh - 72px)); min-height: 540px; }
  .cine__content { padding-bottom: 120px; }
  .cine .hero-title { font-size: clamp(2.1rem, 1.3rem + 5vw, 3rem); }
  .cine .hero-sub { font-size: 1rem; margin-bottom: 1.6rem; }
  .cine .hero-ctas .btn-lg-pill { padding: .9rem 1.3rem; font-size: .9rem; }
  .cine__ui { padding-bottom: 20px; }
  .cine__bar { gap: 1rem; }
  .cine__num { font-size: 2.2rem; }
  .cine__arrow { width: 46px; height: 46px; }
  .cine__next-thumb { width: 50px; height: 50px; }
  .cine__pause { top: 14px; right: 14px; }
  .impact__item { grid-template-columns: 1fr; padding: 1.4rem 1rem; text-align: left; }
  .impact__icon { grid-row: auto; width: 42px; height: 42px; font-size: 1rem; margin-bottom: .7rem; border-radius: 12px; }
  .impact__go { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cine__media, .cine__media img, .hero-title .w > span, .cine-in { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .cine__scroll span { animation: none; }
}

/* Update 8 — Graduation sets page */
.sets-hero { position: relative; overflow: hidden; padding: 3.6rem 0 4.2rem; background: radial-gradient(ellipse at 85% 20%, rgba(207,162,51,.22), transparent 55%), var(--grad-brand); color: rgba(255,255,255,.78); }
.sets-hero__years { position: absolute; right: -1vw; bottom: -4vw; display: flex; flex-direction: column; align-items: flex-end; line-height: .82; font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 15vw, 15rem); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(224,187,85,.16); pointer-events: none; user-select: none; }
.sets-hero__years span:last-child { -webkit-text-stroke-color: rgba(224,187,85,.26); }
.sets-hero__inner { position: relative; z-index: 1; }
.sets-hero .crumbs { display: flex; gap: .6rem; font-size: .9rem; margin-bottom: 1.6rem; }
.sets-hero .crumbs a { color: var(--gold-300); }
.sets-hero h1 { color: #fff; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.04; margin: .2rem 0 1rem; }
.sets-hero__lead { font-size: 1.1rem; max-width: 600px; margin-bottom: 1.8rem; }
.sets-hero__search .set-search { max-width: 620px; }
.sets-showcase { position: relative; margin-top: -2.4rem; z-index: 2; padding-bottom: .5rem; }
.sets-showcase .marquee__row { padding: .7rem 0; }
.top-sets { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: center; padding: 2.2rem; margin-bottom: 3.5rem; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.top-sets__head h2 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom: .5rem; }
.top-sets__head p { color: var(--muted); margin: 0; }
.top-sets__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.top-sets__list a { display: grid; grid-template-columns: 30px 64px 1fr auto 56px; align-items: center; gap: 1rem; padding: .7rem .9rem; border-radius: 16px; color: var(--ink); transition: background .25s, transform .3s var(--ease); }
.top-sets__list a:hover { background: var(--ivory); transform: translateX(4px); color: var(--ink); }
.top-sets__rank { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ivory); font-weight: 800; font-size: .82rem; color: var(--muted); }
.top-sets__list li:first-child .top-sets__rank { background: var(--grad-gold); color: var(--brand-900); }
.top-sets__year { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--brand-600); }
.top-sets__body strong { display: block; font-size: .95rem; margin-bottom: .4rem; }
.top-sets__bar { display: block; height: 6px; border-radius: 999px; background: var(--ivory); overflow: hidden; }
.top-sets__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-600), var(--crimson)); }
.top-sets__n { font-family: var(--font-display); font-size: 1.35rem; text-align: right; }
.sets-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.sets-toolbar__title { font-size: 1.6rem; margin: 0 auto 0 0; }
.sets-toolbar__title small { font-family: var(--font-body); font-size: .85rem; font-weight: 800; color: var(--muted); }
.decade-chips button small { font-weight: 700; opacity: .6; margin-left: .2rem; }
.sets-sort { position: relative; display: inline-flex; align-items: center; }
.sets-sort i { position: absolute; left: 14px; color: var(--brand-600); pointer-events: none; }
.sets-sort select { appearance: none; -webkit-appearance: none; padding: .6rem 2rem .6rem 2.4rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 700; font-size: .88rem; color: var(--ink); cursor: pointer; }
@media (max-width: 991.98px) {
  .top-sets { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.4rem; }
  .sets-toolbar__title { width: 100%; }
}
@media (max-width: 575.98px) {
  .top-sets__list a { grid-template-columns: 26px 48px 1fr 40px; gap: .6rem; padding: .6rem .4rem; }
  .top-sets__list .face-stack { display: none; }
  .top-sets__year { font-size: 1.5rem; }
  .sets-hero { padding: 2.6rem 0 3.6rem; }
}
/* keep the crest/wordmark from being squeezed by the longer menu */
.site-nav .brand { flex-shrink: 0; }
.nav-links { flex-shrink: 1; min-width: 0; white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .nav-links > a, .nav-drop__btn { padding: .5rem .45rem; font-size: .86rem; }
  .brand__text strong { font-size: 1.2rem; }
}
.set-hero__motto { font-family: var(--font-display); font-style: italic; color: rgba(255,255,255,.75); margin: -.4rem 0 .9rem; }
.set-about { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 1.6rem 1.8rem; margin-bottom: 2.4rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.set-about__text p { margin: 0; color: var(--text); }
.set-about__text .eyebrow { margin-bottom: .5rem; }
.set-about__side { display: grid; gap: .8rem; justify-items: start; }
.set-about__rep { display: flex; align-items: center; gap: .8rem; }
.set-about__rep i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--ivory); color: var(--brand-600); }
.set-about__rep small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.set-about__rep b { color: var(--ink); }
@media (max-width: 767.98px) { .set-about { grid-template-columns: 1fr; padding: 1.3rem; } }