/* =====================================================================
   Smile For All — Public Website Design System (Website Rebuild, Phase 1)
   ---------------------------------------------------------------------
   Signature element: a hand-stitched "running stitch" line — SFA's own
   flagship program is sewing-skills training, and their old tagline was
   "Stitching a Brighter Future." The stitch motif carries that literally:
   it's the divider between sections, the underline that draws itself under
   the hero headline, and the connecting thread running through the
   Achievements → Currently Working On timeline on the Projects page.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Color — Royal Blue unified with the SOP admin's own brand blue
     (#1a2ec8), so the public site and the internal platform now share
     one visual identity instead of two different blues. Gold/leaf kept
     only as minor accents (thread motif, small highlights) -- Royal Blue
     carries the brand now. */
  --paper:      #F7F8FB;
  --paper-alt:  #EEF1F8;
  --ink:        #14203D;
  --ink-soft:   #4E5872;
  --ink-faint:  #7C86A0;
  --brand:      #1a2ec8;
  --brand-deep: #111f8f;
  --brand-bright: #2f5fff;
  --brand-tint: #EFF4FF;
  --gold:       #C98A2B;
  --gold-soft:  #E9C88A;
  --leaf:       #2C6E4F;
  --border:     #DCE1EE;
  --green:      #2f9a3a;
  --red:        #d2232a;
  --white:      #FFFFFF;

  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1600px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(175deg, #EEF1FA 0%, #F7F8FB 22%, #FBF9F4 55%, #F3F0FA 100%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 0.4em; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.08; font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.35; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
}

/* Container: width scales with the viewport instead of hitting a fixed
   1120px wall -- on large monitors (1440px+) the old fixed box left big
   empty gutters on both sides. Padding is now percentage-based (clamped
   so it doesn't get silly on mobile or ultra-wide screens) and the
   ceiling is raised well past the old value, so the page actually fills
   more of a big screen while still keeping paragraph/hero text from
   stretching edge-to-edge unreadably on 4K/ultra-wide displays. */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px); box-sizing: border-box; }
.section { padding: 64px 0; }
.section-alt { background: linear-gradient(120deg, #EBF0FC 0%, #F3EFE7 100%); }
.section-dark {
  color: #EAEEFA;
  background: linear-gradient(120deg, var(--brand-deep), #16296B, var(--brand-deep));
  background-size: 200% 200%;
  animation: gentle-gradient-shift 14s ease infinite;
}
@keyframes gentle-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) { .section-dark { animation: none; } }
.section-dark h2, .section-dark p { color: #EAEEFA; }
.section-dark .ink-soft { color: #B9C3E4; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 640px; }

/* ---------------------------------------------------------------- Header */
.top-alert-bar { display: block; background: #b3261e; }
.top-alert-inner { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; color: #fff; font-size: 0.76rem; font-weight: 600; text-align: center; }
.top-alert-inner strong { font-weight: 800; }
.top-alert-bar:hover .top-alert-inner { background: rgba(255,255,255,0.06); }
@media (max-width: 640px) { .top-alert-inner { font-size: 0.7rem; gap: 4px; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px -6px rgba(20,32,61,0.12);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled {
  background: var(--brand-deep);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(11,22,56,0.45);
}
.site-header.is-scrolled .nav-links > li > a { color: rgba(255,255,255,0.85); }
.site-header.is-scrolled .nav-links > li > a:hover, .site-header.is-scrolled .nav-links > li > a.active { color: #fff; }
.site-header.is-scrolled .search-open-btn { color: rgba(255,255,255,0.85); }
.site-header.is-scrolled .search-open-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.site-header.is-scrolled .staff-login-link { color: #fff; border-color: rgba(255,255,255,0.35); }
.site-header.is-scrolled .staff-login-link:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.12); }
.site-header.is-scrolled .bar { padding: 10px 0; transition: padding .25s ease; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; }
.brand-mark { display: flex; align-items: center; flex-shrink: 0; margin-left: 28px; }
.brand-mark img { height: 72px; width: auto; display: block; transition: height .25s ease; }
.site-header.is-scrolled .brand-mark img { height: 58px; }
.brand-mark img.brand-logo-scrolled { display: none; }
.site-header.is-scrolled .brand-mark img.brand-logo-default { display: none; }
.site-header.is-scrolled .brand-mark img.brand-logo-scrolled { display: block; }
.brand-mark .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }

/* Nav links: a clearer active-page indicator (small underline bar that
   grows in on hover/active, not just a color change) -- and the
   dropdown flyout gets a real open/close transition instead of an
   instant display:none/block snap. */
.nav-links { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.nav-links a { font-weight: 800; font-size: 1rem; color: var(--ink-soft); position: relative; padding: 6px 2px; }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-links a::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: -2px; height: 2px;
  background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links li.has-dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  padding-top: 14px; z-index: 60; min-width: 170px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.dropdown-menu-panel {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 32px -16px rgba(20,32,61,0.3); padding: 8px;
}
.nav-links li.has-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.dropdown-menu-panel a::after { display: none; } /* no underline indicator inside the flyout, it's a different affordance there */
.dropdown-menu-panel a:hover { background: var(--brand-tint); color: var(--brand); }

/* Mega-menu variant: used only for dropdowns with many children (About)
   -- grouped into labeled columns instead of one long vertical list. */
.dropdown-menu-mega { left: 0; transform: translateX(-18%) translateY(-6px); }
.nav-links li.has-dropdown:hover .dropdown-menu-mega { transform: translateX(-18%) translateY(0); }
.dropdown-menu-panel-mega { display: flex; gap: 28px; padding: 20px 24px; min-width: 420px; }
.mega-col { display: flex; flex-direction: column; min-width: 170px; }
.mega-col-title {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gold); padding: 4px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.mega-col a { padding: 8px 12px; }
@media (prefers-reduced-motion: reduce) { .dropdown-menu, .brand-mark img { transition: none; } }

.nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; white-space: nowrap; }
.staff-login-link {
  display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.staff-login-link:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.search-open-btn { background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 6px; display: flex; border-radius: 50%; transition: background .15s ease, color .15s ease; }
.search-open-btn:hover { color: var(--brand); background: var(--brand-tint); }

/* ---------------------------------------------------------------- Search popup (Item 7) */
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16,32,61,0.55); backdrop-filter: blur(2px);
  padding: 10vh 20px 0;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-modal {
  max-width: 640px; margin: 0 auto; background: var(--white); border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4); overflow: hidden;
  transform: translateY(-14px) scale(0.98); transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.search-overlay.is-open .search-modal { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .search-overlay, .search-modal { transition: none; } }
.search-input-row { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); color: var(--ink-faint); }
.search-input-row input { flex: 1; border: none; outline: none; font-size: 1.05rem; font-family: var(--font-body); color: var(--ink); background: transparent; }
.search-input-row button { background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 6px; border-radius: 50%; transition: background .15s ease, color .15s ease; }
.search-input-row button:hover { color: var(--brand); background: var(--brand-tint); }
#site-search-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.search-result-item { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.search-result-item:hover { background: var(--paper-alt); }
.search-result-item .type-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); }
.search-result-item .title { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 2px 0 4px; }
.search-result-item .excerpt { font-size: 0.88rem; color: var(--ink-faint); }
.search-empty-state { padding: 30px 20px; text-align: center; color: var(--ink-faint); font-size: 0.92rem; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 50%; transition: background .15s ease; }
.nav-toggle:hover { background: var(--brand-tint); }
.nav-toggle:active, .search-open-btn:active { transform: scale(0.9); }
.nav-toggle svg { width: 24px; height: 24px; transition: transform .15s ease; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  border: 1.5px solid transparent; cursor: pointer; transition: all 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: 0 10px 22px -8px rgba(26,46,200,.55); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #B27822; color: #fff; }
.btn-outline { border-color: var(--border); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-outline-light { border-color: rgba(255,255,255,0.35); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ---------------------------------------------------------------- Hero */
.hero {
  padding: 96px 0 84px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-bright) 100%);
  background-size: 220% 220%;
  animation: hero-gradient-drift 18s ease infinite;
}
@keyframes hero-gradient-drift {
  0% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
/* Soft floating gradient orbs -- decorative only, purely CSS, no imagery
   to load. Slow, subtle drift (never spins/bounces) so it reads as
   "premium ambient motion", not a flashy effect. */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
  animation: hero-orb-drift 22s ease-in-out infinite;
}
.hero::before {
  width: 420px; height: 420px; top: -140px; right: -80px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
}
.hero::after {
  width: 320px; height: 320px; bottom: -120px; left: -60px;
  background: radial-gradient(circle, rgba(120,150,255,0.35) 0%, rgba(120,150,255,0) 70%);
  animation-delay: -9s;
}
@keyframes hero-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 26px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } .hero::before, .hero::after { animation: none; } }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1, .hero .hero-grid > div:first-child { color: #fff; }
.hero .lede { color: #DCE4FB; }
.hero .hero-cta .btn-primary { background: #fff; color: var(--brand); }
.hero .hero-cta .btn-primary:hover { background: var(--gold-soft); color: var(--brand-deep); box-shadow: 0 10px 26px -8px rgba(0,0,0,.35); }
.hero .hero-quote-card:not(.has-photo) {
  background: rgba(255,255,255,0.94); backdrop-filter: blur(6px);
  box-shadow: 0 24px 48px -20px rgba(8,16,50,0.45);
}

/* ---------------------------------------------------------------- Hero image slider (Phase 1) */
.hero-slider { position: relative; height: 78vh; min-height: 480px; max-height: 720px; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease; display: flex; align-items: center;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,25,55,0.42) 0%, rgba(15,25,55,0.30) 55%, rgba(15,25,55,0.12) 100%); }
.hero-slide-content { position: relative; z-index: 2; max-width: 620px; color: #fff; }
.hero-slide-content h1 { color: #fff; }
.hero-slide-content .lede { color: #E7ECFB; margin: 16px 0 26px; }
.hero-slide.is-dark-text .hero-slide-content h1 { color: var(--ink); }
.hero-slide.is-dark-text .hero-slide-content .lede { color: var(--ink-soft); }
.hero-slide.is-dark-text .hero-slide-overlay { background: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.12) 100%); }
.hero-slider-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 3; }
.hero-slider-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); background: transparent; cursor: pointer; padding: 0; }
.hero-slider-dot.is-active { background: #fff; border-color: #fff; }
@media (max-width: 720px) {
  .hero-slider { height: 62vh; min-height: 380px; }
  .hero-slide-content { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero h1 { position: relative; display: inline-block; }
.hero-stitch-underline { width: 100%; max-width: 420px; height: 14px; margin-top: 6px; }
.hero-visual {
  aspect-ratio: 4/5; border-radius: 28px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-deep) 60%, #0B1B45 100%);
}
.hero-visual .stitch-pattern-overlay { position: absolute; inset: 0; opacity: 0.5; }
.hero-visual .visual-badge {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 16px;
  padding: 16px 18px; color: #fff;
}
.visual-badge .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.visual-badge .lbl { font-size: 0.78rem; color: #CBD5F5; text-transform: uppercase; letter-spacing: 0.08em; }

.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Stats strip */
.stats-strip { padding: 46px 0; }
.stats-thread { position: relative; }
.stats-thread .stitch-divider { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 0; }
.stats-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-row-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bn-gloss { font-size: 0.82em; font-weight: 400; color: var(--ink-faint); }
.stat-bead {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 20px; text-align: center;
  box-shadow: 0 10px 26px -16px rgba(26,46,200,0.18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-bead:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgba(26,46,200,0.32); border-color: var(--brand-tint); }
.stat-bead .num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; background: linear-gradient(120deg, var(--brand), var(--brand-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-bead .lbl { font-size: 0.82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.stat-bead.inline-left { text-align: left; display: inline-block; margin-top: 10px; }
.heading-sm { font-size: 1.3rem; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.btn-chip { padding: 8px 18px; font-size: 0.85rem; }
.cell-sub { font-size: 0.9rem; color: var(--ink-soft); }
.card-pad-24 { padding: 24px; }
.mb-14 { margin-bottom: 14px; }
.step-heading { margin: 22px 0 14px; }
.tag-inline { margin-bottom: 0; vertical-align: middle; }
.tag-flat { margin-bottom: 0; }
.detail-cover { width: 100%; border-radius: var(--radius); margin-bottom: 28px; }
.mb-28 { margin-bottom: 28px; }
.card-pad-22 { padding: 22px; margin-bottom: 28px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.mb-12 { margin-bottom: 12px; }
.text-ink { color: var(--ink); }
.card-pad-22-tint { padding: 22px; margin-bottom: 28px; background: var(--paper-alt); }
.divider-block { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 12px; }
.story-img { width: 100%; border-radius: var(--radius); margin: 14px 0; }
.mt-32 { margin-top: 32px; }
.icon-line { display: flex; align-items: center; gap: 5px; }
.photo-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-tile { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; }
.lightbox-trigger { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; border: none; padding: 0; cursor: zoom-in; background: none; }
.photo-zoom-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.event-cover-wrap { border-radius: 16px; overflow: hidden; max-height: 420px; }
.line-loose { line-height: 2; }
.pill-chip { display: inline-block; margin: 2px 4px 2px 0; }
.flex-between { display: flex; justify-content: space-between; }
.max-w-760 { max-width: 760px; }
.m-0 { margin: 0; }
.partner-logo-box { object-fit: contain; background: #fff; padding: 20px; }
.card-block { display: block; }
.mt-16 { margin-top: 16px; }
.center-cta-50 { text-align: center; margin-top: 50px; }

/* ---------------------------------------------------------------- Cards / grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 32px -14px rgba(26,46,200,.35); }
.card-media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--brand) 0%, var(--leaf) 100%); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .placeholder-stitch { position: absolute; inset: 0; opacity: 0.55; }
.card-body { padding: 22px; }
.card-body h3 { margin-bottom: 8px; }

/* ---------------------------------------------------------- Olympiad cards */
.olympiad-card { overflow: hidden; display: flex; flex-direction: column; border-color: var(--border); }
.olympiad-card:hover { border-color: var(--brand); box-shadow: 0 12px 28px rgba(26,46,200,0.1); }
.olympiad-card-banner {
  height: 148px; background-size: cover; background-position: center;
  background-color: var(--brand-deep);
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.olympiad-card-banner-fallback-icon { color: rgba(255,255,255,0.9); }
.olympiad-card-banner-fallback { color: rgba(255,255,255,0.85); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.olympiad-card-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.32; margin: 2px 0 6px; color: var(--ink); font-weight: 700; }
.olympiad-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 3em; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 4px;
}
.olympiad-card-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px;
  margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.olympiad-stat { display: flex; flex-direction: column; gap: 2px; }
.olympiad-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; }
.olympiad-stat-value { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.tag-result-published { background: linear-gradient(90deg, #E8F8EC, #DDF3E4); color: var(--green); font-weight: 800; }
.olympiad-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.olympiad-card-actions .btn-arrow { display: inline-block; transition: transform 0.2s ease; }
.olympiad-card-actions .btn:hover .btn-arrow { transform: translateX(3px); }
.btn.is-disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-meta-row .card-tag { margin-bottom: 0; }
.card-excerpt-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em; }
.card-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.tag-achieve { background: #E4EEE8; color: var(--leaf); }
.tag-ongoing { background: #FCEFDA; color: var(--gold); }
.tag-pinned { background: var(--brand-tint); color: var(--brand); }
.tag-donor-wish { background: var(--brand-tint); color: var(--brand); }
.tag-muted { background: var(--paper-alt); color: var(--ink-faint); }
.tag-beneficiary-wish { background: var(--brand); color: #fff; }
.notice-card { border-left: 3px solid var(--brand); }

/* ---------------------------------------------------------------- Founder panel */
.founder-panel {
  max-width: 760px; margin: 0 auto; text-align: center; padding: 56px 40px; border-radius: 24px;
  background: linear-gradient(150deg, var(--brand-deep) 0%, var(--brand) 100%);
  position: relative; overflow: hidden;
}
.founder-panel::before {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; top: -100px; left: -80px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
}
.founder-panel .eyebrow { color: var(--gold-soft); position: relative; }
.founder-panel .quote-mark { font-family: var(--font-display); font-size: 3.2rem; color: var(--gold-soft); opacity: 0.6; line-height: 1; margin-bottom: -8px; position: relative; }
.founder-panel .founder-quote { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: #fff; line-height: 1.55; margin-bottom: 26px; position: relative; }
@media (max-width: 720px) { .founder-panel { padding: 40px 22px; } }
.card-meta { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--ink-faint); margin-top: 10px; }

/* ---------------------------------------------------------------- Timeline (Achievements <-> Currently Working) */
.work-track { position: relative; padding-top: 10px; }
.work-track .stitch-divider { margin-bottom: 44px; }
.track-label { display: flex; align-items: center; gap: 12px; margin: 8px 0 22px; }
.track-label h2 { margin: 0; }
.track-label .stitch-divider { flex: 1; height: 10px; }

/* ---------------------------------------------------------------- CTA band */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: 16px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.cta-band::before, .cta-band::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0;
  animation: hero-orb-drift 20s ease-in-out infinite;
}
.cta-band::before { width: 300px; height: 300px; top: -100px; left: 8%; background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%); }
.cta-band::after { width: 260px; height: 260px; bottom: -100px; right: 10%; background: radial-gradient(circle, rgba(201,138,43,0.28) 0%, rgba(201,138,43,0) 70%); animation-delay: -7s; }
.cta-band .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cta-band::before, .cta-band::after { animation: none; } }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: linear-gradient(160deg, var(--brand-deep) 0%, #0B1638 100%); color: #C4CBE0; padding: 60px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 0.95rem; margin-bottom: 16px; }
.site-footer a { color: #C4CBE0; transition: color .15s ease; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.footer-brand { display: flex; align-items: center; color: #fff; margin-bottom: 14px; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.footer-brand img { height: 42px; width: 42px; object-fit: contain; flex-shrink: 0; }
.footer-tagline { color: #A9B2CE; max-width: 320px; }
.link-inherit { color: inherit; }
.pagination-center { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 36px; }
.pagination-label { color: var(--ink-faint); font-size: 0.88rem; }

/* Homepage (Phase 19) -- utility classes replacing what were previously
   repeated inline style="" attributes (the "card reveal" link wrapper
   alone was duplicated 4 times with identical inline styles). */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-18 { margin-top: 18px; }
.mb-8 { margin-bottom: 8px; }
.text-center { text-align: center; }
.center-cta { text-align: center; margin-top: 30px; }
.center-cta-lg { text-align: center; margin-top: 36px; }
.card-link { display: block; color: inherit; }
.section-tight { padding: 44px 0 56px; }
.intro-block { max-width: 640px; margin-bottom: 34px; }
.quote-italic { font-family: var(--font-display); font-style: italic; color: var(--ink-faint); font-size: 0.95rem; margin-bottom: 22px; }
.hero-wave { width: 100%; height: 100%; opacity: 0.5; }
.progress-note { margin: 10px 0 0; font-size: 0.88rem; color: var(--ink-faint); }
.founder-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.founder-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.4); }
.founder-avatar-fallback { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: #fff; border: 2px solid rgba(255,255,255,0.4); }
.founder-info { text-align: left; }
.founder-name { font-weight: 700; color: #fff; }
.founder-title { font-size: 0.85rem; color: #B9C3E4; }

/* Phase 20 -- About/Join/Contact/Verify pages */
.align-start { align-items: start; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-34 { margin-top: 34px; }
.mb-2 { margin-bottom: 2px; }
.mb-34 { margin-bottom: 34px; }
.coming-soon { margin-top: 20px; color: var(--ink-faint); }
.team-avatar { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; display: block; box-shadow: 0 8px 22px -10px rgba(20,32,61,0.35); }
.team-avatar-fallback { width: 132px; height: 132px; border-radius: 50%; background: var(--paper-alt); margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.6rem; color: var(--brand); }
.team-role { color: var(--ink-faint); margin: 0 0 6px; }
.team-bio { font-size: 0.9rem; margin: 0; }
.section-pt-20 { padding-top: 20px; }
.container-narrow { max-width: 640px; }
.card-center-pad { padding: 28px; text-align: center; }
.mb-10 { margin-bottom: 10px; }
.mt-10 { margin-top: 10px; }
.card-pad { padding: 28px; }
.toggle-row { display: flex; gap: 10px; margin-bottom: 24px; }
.toggle-btn { flex: 1; justify-content: center; }
.flash-error { background: #FBEAF0; color: #72243E; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; }
.hint-text { font-size: 0.85rem; color: var(--ink-faint); margin-top: 4px; }
.hint-text.is-error { color: #b3261e; }
.btn-block { width: 100%; justify-content: center; margin-top: 4px; }
.mb-26 { margin-bottom: 26px; }
.mt-26 { margin-top: 26px; }
.map-card { padding: 6px; }
.map-frame-wrap { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; }
.iframe-borderless { border: 0; display: block; }

/* Verify / Verify Member -- shared "search + result card" pattern */
.section-no-top { padding-top: 0; }
.container-sm { max-width: 560px; }
.container-xs { max-width: 480px; }
.verify-search { display: flex; gap: 10px; margin-bottom: 22px; }
.verify-input { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid #d8dcee; font-size: 14px; }
.result-card { border-left: 4px solid transparent; }
.result-card.is-valid { border-left-color: var(--green); }
.result-card.is-invalid { border-left-color: var(--red); }
.result-heading.is-valid { color: var(--green); }
.result-heading.is-invalid { color: var(--red); }
.member-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.result-name { font-size: 1.15rem; font-weight: 700; margin-top: 6px; }
.text-faint { color: var(--ink-faint); }
.container-md { max-width: 760px; }
.post-cover-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 40px; }
.article-body { font-size: 1.05rem; }
.article-center { max-width: 760px; margin: 0 auto; }
.mb-40 { margin-bottom: 40px; }
.img-cover-fill { width: 100%; height: 100%; object-fit: cover; }
.notice-list { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.notice-card-pad { padding: 24px 26px; }
.mb-6 { margin-bottom: 6px; }
.mb-12-tight { margin: 0 0 12px; }
.section-pt-10 { padding-top: 10px; }
.mb-20 { margin-bottom: 20px; }
.section-divider-heading { margin: 50px 0 20px; }
.card-link-faded { display: block; color: inherit; opacity: 0.85; }
.container-lg { max-width: 820px; }
.container-full { max-width: 1240px; }

/* ---------------------------------------------------------- Public Banners */
.banner-wrap { margin: 0; }
.banner-width-container .banner-media { max-width: var(--container); margin: 0 auto; }
.banner-width-full .banner-media { width: 100%; }
.banner-media {
  position: relative; display: block; overflow: hidden;
  width: 100%; text-decoration: none;
}
.banner-media picture, .banner-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,28,0.55), rgba(10,14,28,0.15)); }

/* Classic: just the image, no extra chrome. */
.banner-theme-classic.banner-width-container { padding: 0 clamp(20px, 5vw, 80px); }
.banner-theme-classic .banner-media { border-radius: 0; }

/* Hero: title/subtitle/button overlaid, bottom-anchored. */
.banner-theme-hero.banner-width-container { padding: 0 clamp(20px, 5vw, 80px); }
.banner-theme-hero .banner-media { border-radius: 12px; }
.banner-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 20px clamp(20px, 4vw, 48px); color: #fff;
}
.banner-hero-content h2 { color: #fff; font-size: clamp(1.3rem, 3vw, 2rem); margin-bottom: 4px; }
.banner-hero-content p { color: rgba(255,255,255,0.9); margin-bottom: 12px; font-size: 0.95rem; }
.banner-hero-btn { display: inline-flex; }

/* Card: inset, rounded, shadow, small tag ribbon. */
.banner-theme-card { padding: 20px clamp(20px, 5vw, 80px); }
.banner-theme-card.banner-width-full { padding: 20px; }
.banner-theme-card .banner-media { border-radius: 16px; box-shadow: 0 16px 34px -18px rgba(20,32,61,0.35); }
.banner-card-tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--gold); color: #3a2a00; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; border-radius: 999px;
}

@media (max-width: 640px) {
  .banner-hero-content { padding: 14px 18px; }
  .banner-hero-content h2 { font-size: 1.15rem; }
  .banner-hero-content p { font-size: 0.85rem; margin-bottom: 8px; }
}
.gallery-placeholder { border: 1.5px dashed var(--border); border-radius: 12px; padding: 40px 20px; text-align: center; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gallery-placeholder svg { opacity: 0.6; }
.event-cover { width: 100%; border-radius: 16px; margin-bottom: 26px; }
.event-info-box { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 26px; padding: 18px 22px; background: var(--paper-alt); border-radius: 12px; }
.event-info-value { margin: 6px 0 0; font-weight: 600; }
.mb-30 { margin-bottom: 30px; }
.map-embed-wrap { border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: #8590B0; }
.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { border-color: var(--gold); }
.social-row.on-light a { border-color: var(--border); color: var(--brand); }

/* ---------------------------------------------------------------- Page header (About / Contact / Projects) */
.page-header { padding: 60px 0 20px; }
.page-header .eyebrow { margin-bottom: 10px; }
.breadcrumb { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--brand); }

/* ---------------------------------------------------------------- Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-item .icon { width: 42px; height: 42px; border-radius: 12px; background: var(--paper-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); }
.contact-item .lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 2px; }

/* ---------------------------------------------------------------- Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.grid-3 > .reveal:nth-child(2), .video-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid-3 > .reveal:nth-child(3), .video-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid-2 > .reveal:nth-child(2) { transition-delay: 0.1s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Public form controls */
.site-form { display: flex; flex-direction: column; gap: 20px; }
.site-form .field-group { display: flex; flex-direction: column; gap: 6px; }
.field-error { color: var(--red, #d2232a); font-size: 0.8rem; font-weight: 600; }
.site-form input.has-error, .site-form select.has-error, .site-form textarea.has-error { border-color: var(--red, #d2232a); }
.site-form.wide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
.site-form.wide-grid .field-group.span-2,
.site-form.wide-grid h3,
.site-form.wide-grid .declaration-box,
.site-form.wide-grid .disclaimer-box,
.site-form.wide-grid .flash-error,
.site-form.wide-grid .hp-field,
.site-form.wide-grid button[type="submit"] { grid-column: 1 / -1; }
@media (max-width: 720px) { .site-form.wide-grid { grid-template-columns: 1fr; } }
.site-form label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.site-form label .optional { font-weight: 400; color: var(--ink-faint); }
.site-form label .req { color: #b3261e; font-weight: 700; }
.checkbox-line { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.9rem; cursor: pointer; }
.checkbox-line input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; }
.declaration-box { background: var(--paper-alt); border-radius: 12px; }
.disclaimer-box { border-left: 3px solid var(--brand); padding: 14px 18px; background: var(--paper-alt); border-radius: 0 8px 8px 0; }

/* ---------------------------------------------------------- Resources page */
.resource-list { display: flex; flex-direction: column; gap: 12px; }
.resource-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--paper-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px;
}
.resource-title { font-weight: 700; color: var(--ink); }
.resource-meta { font-size: 0.82rem; color: var(--ink-faint); margin-top: 2px; }
.resource-desc { font-size: 0.88rem; color: var(--ink-soft); margin-top: 6px; }
.resource-download-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .resource-card { flex-direction: column; align-items: flex-start; }
  .resource-download-btn { align-self: stretch; text-align: center; }
}
.site-form input[type="text"],
.site-form input[type="email"],
.site-form input[type="tel"],
.site-form input[type="number"],
.site-form input[type="url"],
.site-form select,
.site-form textarea {
  width: 100%; padding: 13px 16px; font-size: 0.98rem; font-family: var(--font-body);
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); color: var(--ink);
  transition: border-color 0.15s ease;
}
.site-form input:focus, .site-form select:focus, .site-form textarea:focus {
  outline: none; border-color: var(--brand);
}
.site-form input[type="file"] {
  width: 100%; padding: 12px; border: 1.5px dashed var(--border); border-radius: 10px;
  background: var(--paper-alt); font-size: 0.9rem; color: var(--ink-soft);
}
.site-form .hint-text { font-size: 0.82rem; color: var(--ink-faint); margin-top: -2px; }
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- Hero quote card (replaces the corporate gradient panel) */
.hero-quote-card {
  background: var(--paper-alt); border-left: 4px solid var(--gold); border-radius: 4px 18px 18px 4px;
  position: relative;
}
.hero-quote-card .hqc-content { padding: 36px 32px; position: relative; z-index: 2; }
@media (max-width: 720px) {
  .brand-mark img { height: 44px; }
}
.hero-quote-dots { position: relative; z-index: 2; display: flex; gap: 8px; padding: 0 32px 26px; }
.hero-quote-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6); background: transparent; cursor: pointer; padding: 0; }
.hero-quote-card:not(.has-photo) .hero-quote-dot { border-color: rgba(20,32,61,0.35); }
.hero-quote-dot.is-active { background: currentColor; }
.hero-quote-card.has-photo .hero-quote-dot.is-active { background: #fff; border-color: #fff; }
.hero-quote-card:not(.has-photo) .hero-quote-dot.is-active { background: var(--brand); border-color: var(--brand); }
.hero-quote-card .quote-mark { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--gold); opacity: 0.5; margin-bottom: -10px; }
.hero-quote-card p { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink); line-height: 1.5; margin-bottom: 18px; }
.hero-quote-card .attribution { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.hero-quote-card .attribution .role { font-weight: 400; color: var(--ink-faint); }

/* Photo-background variant: a real testimonial photo behind the quote, with a
   dark gradient overlay so the (now light-colored) text stays readable, and a
   slow Ken-Burns zoom for a touch of life without being distracting. */
.hero-quote-card.has-photo {
  border-left: none; border-radius: 20px; overflow: hidden; min-height: 440px;
  display: flex; align-items: flex-end;
}
.hero-quote-card.has-photo .hqc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: hero-kenburns 16s ease-in-out infinite alternate;
}
.hero-quote-card.has-photo .hqc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(16,32,61,0.1) 0%, rgba(16,32,61,0.55) 55%, rgba(12,24,50,0.94) 100%);
}
.hero-quote-card.has-photo .quote-mark { color: var(--gold-soft); opacity: 0.85; }
.hero-quote-card.has-photo p { color: #fff; }
.hero-quote-card.has-photo .attribution { color: #EAEEFA; }
.hero-quote-card.has-photo .attribution .role { color: #B9C3E4; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-quote-card.has-photo .hqc-bg { animation: none; } }

/* ---------------------------------------------------------------- Editorial story feature (breaks the card-grid rhythm) */
.story-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: center; }
.story-feature .photo-frame {
  aspect-ratio: 4/5; border-radius: 18px; background: linear-gradient(160deg, var(--leaf) 0%, var(--brand-deep) 100%);
  position: relative; overflow: hidden;
}
.story-feature blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink); line-height: 1.45; margin: 0 0 20px; }
.story-feature .attribution { font-weight: 700; color: var(--brand); }
.story-feature .attribution .role { font-weight: 400; color: var(--ink-faint); display: block; font-size: 0.85rem; margin-top: 2px; }

/* ---------------------------------------------------------------- Video showcase */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------------------------------------------------------- Olympiad Story Page */
.story-hero {
  height: 340px; background-size: cover; background-position: center;
  background-color: var(--brand); background-image: linear-gradient(135deg, var(--brand), var(--brand-deep));
  display: flex; align-items: flex-end;
}
.story-hero-overlay { width: 100%; padding: 40px 0; background: linear-gradient(0deg, rgba(10,14,28,0.65), rgba(10,14,28,0.1)); }
.story-stat-big { font-size: 3rem; font-weight: 800; color: var(--brand); font-family: var(--font-display); }
.story-stat-label { color: var(--ink-soft); font-weight: 600; }
.mb-24 { margin-bottom: 24px; }

.achievement-card { text-align: center; }
.achievement-photo { position: relative; width: 100%; aspect-ratio: 1; background: var(--paper-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.achievement-photo img { width: 100%; height: 100%; object-fit: cover; }
.achievement-photo-fallback { font-size: 2.4rem; font-weight: 800; color: var(--ink-faint); }
.achievement-rank-badge {
  position: absolute; top: 10px; left: 10px; background: var(--gold); color: #3a2a00;
  font-weight: 800; font-size: 0.85rem; padding: 4px 10px; border-radius: 999px;
}

.story-gallery-public-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.story-gallery-public-item { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; }
.story-gallery-public-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.story-gallery-public-item:hover img { transform: scale(1.05); }

.video-embed-wrap { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.materials-list { display: flex; flex-direction: column; gap: 16px; }
.material-card { max-width: 640px; }
.material-title { font-size: 1.05rem; margin-bottom: 12px; }
.material-pdf-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-24 { margin-top: 24px; }

.attendance-qr-card { max-width: 380px; margin: 0 auto; }
.attendance-qr-holder { width: 220px; height: 220px; margin: 0 auto; }
.attendance-qr-holder svg { width: 100%; height: 100%; }
.attendance-qr-verified { text-align: center; }
.attendance-qr-check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-tint, #e6f4e8); color: var(--green, #2f9a3a); font-size: 1.6rem; }

@media (max-width: 720px) {
  .story-hero { height: 220px; }
}
.video-card { border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: 0 14px 30px -16px rgba(20,32,61,.35); transition: transform .2s ease, box-shadow .2s ease; }
.video-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(26,46,200,.4); }
.video-thumb { position: relative; aspect-ratio: 16/9; cursor: pointer; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.video-thumb:hover img { transform: scale(1.06); }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,25,55,.55) 0%, rgba(15,25,55,0) 45%); pointer-events: none; }
.video-thumb .play-btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;
}
.video-thumb .play-btn span {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease;
  animation: gentle-pulse 2.6s ease-in-out infinite;
}
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .video-thumb .play-btn span { animation: none; } .video-thumb:hover img { transform: none; } }
.video-thumb:hover .play-btn span { transform: scale(1.1); background: #fff; }
.video-thumb .play-btn svg { width: 20px; height: 20px; color: var(--brand); margin-left: 3px; }
.video-card .video-caption { padding: 12px 14px 14px; color: #EAEEFA; font-size: 0.92rem; font-weight: 700; }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* ---------------------------------------------------------------- Partner logo strip */
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 42px; margin-top: 24px; }
.partner-strip img { height: 44px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: all 0.2s ease; }
.partner-strip a:hover img, .partner-strip img:hover { filter: grayscale(0); opacity: 1; }
.partner-strip-humble { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px; margin-top: 16px; }
.partner-strip-humble img { height: 60px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(0.3); opacity: 0.85; transition: all 0.2s ease; }
.partner-strip-humble img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
@media (max-width: 640px) {
  .partner-strip-humble { gap: 28px; }
  .partner-strip-humble img { height: 42px; max-width: 130px; }
}

/* ---------------------------------------------------------------- Filter bar (Phase 4) */
.filter-bar { margin-bottom: 30px; }
.filter-bar form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filter-bar select {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--white);
  font-family: var(--font-body); font-size: 0.88rem; color: var(--ink); cursor: pointer;
}
.filter-clear { font-size: 0.85rem; color: var(--ink-faint); text-decoration: underline; }
.filter-clear:hover { color: var(--brand); }

/* ---------------------------------------------------------------- Timeline (Phase 3, About page) */
.timeline { position: relative; max-width: 720px; margin: 0 auto; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 34px; padding-left: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -30px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--gold); }
.timeline-year { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: 0.95rem; margin-bottom: 4px; }
.timeline-body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.timeline-body p { color: var(--ink-faint); font-size: 0.92rem; margin: 0; }

/* ---------------------------------------------------------------- Gallery lightbox (Phase 2) */
.lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(10,14,28,0.94); }
.lightbox-overlay.is-open { display: flex; align-items: center; justify-content: center; }
.lightbox-content { max-width: 90vw; max-height: 88vh; text-align: center; }
.lightbox-content img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.lightbox-caption { color: #E7ECFB; margin-top: 14px; font-size: 0.92rem; }
.lightbox-close { position: absolute; top: 22px; right: 26px; background: none; border: none; color: #fff; cursor: pointer; padding: 8px; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; cursor: pointer; padding: 10px; border-radius: 50%; }
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }

/* Notice Preview Modal — a light card overlay (unlike the dark photo
   lightbox above), since this shows text content that needs to stay
   readable. */
.notice-modal-overlay { display: none; position: fixed; inset: 0; z-index: 250; background: rgba(10,14,28,0.55); align-items: center; justify-content: center; padding: 20px; }
.notice-modal-overlay.is-open { display: flex; }
.notice-modal-box { background: var(--paper); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 36px; position: relative; }
.notice-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 8px; line-height: 1; }
.notice-modal-close:hover { color: var(--ink); }
.notice-modal-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.notice-modal-box h2 { margin-bottom: 18px; padding-right: 28px; }
@media (max-width: 640px) { .notice-modal-box { padding: 26px 20px; } }
.notice-summary-card { display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.notice-excerpt { color: var(--ink-soft); margin: 0 0 10px; }
.notice-read-more { color: var(--brand); font-weight: 600; font-size: 0.9rem; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) {
  .lightbox-nav { padding: 6px; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
}
/* ---------------------------------------------------------------- Rich text content (Notices, CR-12) */
.notice-rich-content { color: var(--ink-soft); line-height: 1.7; }
.notice-rich-content p { margin: 0 0 12px; }
.notice-rich-content h1, .notice-rich-content h2, .notice-rich-content h3, .notice-rich-content h4 { font-family: var(--font-display); color: var(--ink); margin: 18px 0 8px; }
.notice-rich-content ul, .notice-rich-content ol { margin: 0 0 12px; padding-left: 22px; }
.notice-rich-content blockquote { border-left: 3px solid var(--gold); margin: 0 0 12px; padding-left: 14px; font-style: italic; color: var(--ink-faint); }
.notice-rich-content a { color: var(--brand); text-decoration: underline; }
.notice-rich-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.notice-rich-content .ql-align-center { text-align: center; }
.notice-rich-content .ql-align-right { text-align: right; }
.notice-rich-content .ql-align-justify { text-align: justify; }

/* ---------------------------------------------------------------- Campaign progress bar */
.progress-track { height: 10px; border-radius: 999px; background: var(--paper-alt); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-bright)); border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.8,.3,1); }
.progress-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-faint); margin-top: 8px; }
.payment-channel { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.payment-channel .method { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.payment-channel .num { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  .hero-grid, .contact-grid, .story-feature { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .grid-3, .video-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links, .nav-actions .btn-outline, .staff-login-link { display: none; }
  .nav-toggle { display: block; }
  .section { padding: 60px 0; }
  .grid-3, .grid-2, .video-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Hero/founder/CTA: keep the Royal Blue impact but scale the decorative
     motion down so it never feels heavy or causes overflow on a small
     screen -- the "powerful hero" requirement still holds, just tuned
     for the viewport. */
  .hero { padding: 64px 0 52px; }
  .hero::before { width: 220px; height: 220px; top: -80px; right: -60px; }
  .hero::after { width: 180px; height: 180px; bottom: -70px; left: -50px; }
  .founder-panel { border-radius: 18px; }
  .founder-panel .founder-quote { font-size: 1.15rem; }
  .cta-band::before, .cta-band::after { width: 160px; height: 160px; }
}

/* Mobile nav drawer */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 60; background: var(--brand-deep); color: #fff; padding: 24px; overflow-y: auto; }
.mobile-nav.is-open { display: block; animation: mobile-nav-in .22s ease; }
@keyframes mobile-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mobile-nav.is-open { animation: none; } }
.mobile-nav ul { list-style: none; padding: 0; margin: 60px 0 0; display: flex; flex-direction: column; gap: 6px; }
.mobile-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-nav > ul > li:last-child { border-bottom: none; }
.mobile-nav > ul > li > a { display: block; padding: 16px 4px; color: #fff; font-family: var(--font-display); font-size: 1.35rem; }
.mobile-nav .close-btn { position: absolute; top: 24px; right: 24px; background: none; border: none; color: #fff; cursor: pointer; padding: 6px; border-radius: 50%; transition: background .15s ease, transform .15s ease; }
.mobile-nav .close-btn:hover { background: rgba(255,255,255,0.12); }
.mobile-nav .close-btn:active { transform: scale(0.9); }

/* Accordion-style sub-menu, matching the same <details>/<summary> pattern
   used elsewhere in the app (admin sidebar, public FAQ page) -- one
   consistent, JS-free interaction language across the whole site. */
.mobile-nav-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; cursor: pointer; }
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary::marker { content: ''; }
.mobile-nav-group summary a { color: #fff; font-family: var(--font-display); font-size: 1.35rem; padding: 2px 0; flex: 1; }
.mobile-nav-caret { color: var(--gold-soft); font-size: 1.1rem; transition: transform .2s ease; padding: 10px; margin: -10px; }
.mobile-nav-group details[open] .mobile-nav-caret { transform: rotate(180deg); }
.mobile-nav-sub { list-style: none; margin: 0 0 10px; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-sub a { display: block; padding: 11px 12px; color: #D8DFF8; font-family: var(--font-body); font-size: 1rem; font-weight: 600; border-radius: 8px; }
.mobile-nav-sub a:active { background: rgba(255,255,255,0.08); }
.mobile-nav-login { margin-top: 14px; padding-top: 14px !important; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: none !important; }
.mobile-nav-login a { color: var(--gold-soft) !important; font-size: 1.1rem !important; }

/* ---------- FAQs accordion (native <details>, no JS) ---------- */
.faq-item{
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq-item summary{
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::marker{ content: ''; }
.faq-item summary::after{
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--brand);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.faq-item[open] summary::after{ content: '−'; }
.faq-item summary:hover{ color: var(--brand); }
.faq-answer{
  margin-top: 12px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- Phase C: casual image-copy deterrent ----------
   Text stays selectable everywhere (contact info, addresses, etc. --
   disabling that site-wide is bad for accessibility and normal visitors
   for very little real benefit). Images get a visual "no-drag" cursor to
   match the right-click/drag prevention in site.js. */
img{ -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* Clean print layout -- applies site-wide (not just News), so a plain
   Ctrl+P from any page gives a readable printout instead of the full
   site chrome. Anything marked .no-print (the Print button itself,
   mobile nav, etc.) is hidden; decorative/marketing sections
   (alt-background and dark CTA bands) are dropped since they add no
   value on paper. */
@media print {
  .site-header, .site-footer, .mobile-nav, .no-print,
  .section-alt, .section-dark, .breadcrumb { display: none !important; }
  body { color: #000; background: #fff; }
  .container { max-width: 100% !important; padding: 0 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .post-cover-wrap { aspect-ratio: auto; max-height: 320px; break-inside: avoid; }
  .notice-rich-content { break-inside: avoid-column; }
}