/* ==========================================================================
   GENESIS MUN 2.0 — unified stylesheet
   Design system: "The Dossier" — a diplomatic case-file aesthetic.
   Navy (#061935) and sand (#dcd1aa) alternate as background/accent across
   every section of every page. Bronze rules + a wax-seal emblem + a
   pennant/bunting seam motif carry the identity through the whole site.
   ========================================================================== */

:root {
  /* --- color tokens --- */
  --navy:        #061935;
  --navy-deep:   #030d1c;
  --navy-panel:  #0c2549;
  --sand:        #f5efdd;
  --sand-bright: #efe7c9;
  --ivory:       #f7f3e8;
  --bronze:      #dcd1aa;
  --bronze-dim:  rgba(179, 148, 90, 0.35);
  --ink-muted:   rgba(247, 243, 232, 0.62);
  --hairline:    rgba(220, 209, 170, 0.16);
  --ink-on-sand: rgba(6, 25, 53, 0.7);
  --hairline-on-sand: rgba(6, 25, 53, 0.18);

  /* --- type tokens --- */
  --f-display: 'Cinzel Decorative', serif;
  --f-heading: 'Cinzel', serif;
  --f-body:    'Cormorant Garamond', serif;
  --f-ui:      'Jost', sans-serif;

  /* --- layout tokens --- */
  --max: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--f-heading); letter-spacing: 0.02em; margin: 0; color: var(--sand-bright); font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--bronze-dim); }

/* ==========================================================================
   Seal emblem — recurring signature mark (wax-seal / compass rose)
   ========================================================================== */
.seal { color: var(--bronze); transition: color 0.3s ease, transform 0.3s ease; }
.seal circle, .seal path, .seal line { vector-effect: non-scaling-stroke; }

/* ==========================================================================
   Light (sand) section theme — used to alternate backgrounds on every page.
   Apply .section-light to any <section> to flip it to sand-bg/navy-ink.
   ========================================================================== */
.section-light {
  background: var(--sand);
  color: var(--navy);
}
.section-light .eyebrow { color: var(--navy); }
.section-light .eyebrow::before, .section-light .eyebrow::after { background: rgba(6, 25, 53, 0.3); }
.section-light h1, .section-light h2, .section-light h3 { color: var(--navy); }
.section-light p { color: var(--ink-on-sand); }
.section-light .seal { color: var(--navy); }
.section-light .divider { background: var(--hairline-on-sand); }

.section-light .pillars li { border-left-color: rgba(6, 25, 53, 0.35); }
.section-light .pillars strong { color: var(--navy); }
.section-light .pillars span { color: rgba(6, 25, 53, 0.6); }

.section-light .committee-card,
.section-light .team-card .team-photo,
.section-light .dossier,
.section-light .contact-card,
.section-light .info-card { border-color: rgba(6, 25, 53, 0.2); }
.section-light .committee-card { background: rgba(6, 25, 53, 0.03); }
.section-light .committee-card:hover,
.section-light .dossier:hover { border-color: var(--navy); background: rgba(6, 25, 53, 0.07); }
.section-light .committee-card.featured,
.section-light .dossier.featured { border-color: var(--navy); background: rgba(6, 25, 53, 0.09); }
.section-light .committee-card p,
.section-light .dossier p,
.section-light .contact-card p,
.section-light .team-post,
.section-light .info-card .value small { color: rgba(6, 25, 53, 0.6); }
.section-light .team-photo { background: rgba(6, 25, 53, 0.05); }
.section-light .form-panel,
.section-light .field input,
.section-light .field textarea { background: rgba(6, 25, 53, 0.04); border-color: rgba(6, 25, 53, 0.2); color: var(--navy); }
.section-light .field label { color: rgba(6, 25, 53, 0.55); }
.section-light .field input:focus, .section-light .field textarea:focus { border-color: var(--navy); }

/* ==========================================================================
   Pennant seam — bunting motif marking every color handoff between sections
   ========================================================================== */
.seam { display: flex; width: 100%; height: 30px; line-height: 0; }
.seam span {
  flex: 1 1 26px;
  min-width: 14px;
  max-width: 40px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: 0 2px;
}
.seam-dark-to-light span { background: var(--navy); }
.seam-dark-to-light { background: var(--sand); }
.seam-light-to-dark span { background: var(--sand); }
.seam-light-to-dark { background: var(--navy); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(3, 13, 28, 0.88);
  backdrop-filter: blur(10px);
  padding: 0.7rem 0;
  border-color: var(--hairline);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.brand-seal { height: 52px; width: auto; max-width: 160px; flex-shrink: 0; object-fit: contain; }
.brand-seal.small { height: 40px; width: auto; max-width: 130px; object-fit: contain; }

.hero-logo {
  height: clamp(84px, 13vw, 148px);
  width: auto;
  margin: 0 auto 1.6rem;
  display: block;
  filter: drop-shadow(0 0 40px rgba(220,209,170,0.22));
  opacity: 0;
  animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0s;
}
.brand-word {
  font-family: var(--f-heading);
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  letter-spacing: 0.1em;
  color: var(--sand-bright);
  white-space: nowrap;
}
.brand-word em { font-style: normal; color: var(--bronze); }
.brand-edition {
  font-family: var(--f-heading); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--bronze); border: 1px solid var(--bronze-dim); border-radius: 4px;
  padding: 0.25em 0.6em; flex-shrink: 0;
}

.site-nav { display: flex; gap: 2.1rem; }
.site-nav a {
  font-family: var(--f-ui);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s ease;
}
.site-nav a:hover, .site-nav a.active { color: var(--sand-bright); }
.site-nav a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--bronze);
}

.header-actions { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
.site-nav > .nav-register-mobile { display: none; }

.btn {
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85em 1.9em;
  border-radius: 6px;
  border: 1px solid var(--bronze);
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.btn-register { background: transparent; color: var(--sand-bright); }
.btn-register:hover { background: var(--bronze); color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(179,148,90,0.3); }
.btn-solid { background: var(--bronze); color: var(--navy-deep); border-color: var(--bronze); font-weight: 600; }
.btn-solid:hover { background: var(--sand-bright); border-color: var(--sand-bright); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(179,148,90,0.32); }
.btn-ghost { color: var(--sand); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--bronze); color: var(--sand-bright); transform: translateY(-2px); }
.section-light .btn-ghost { color: var(--navy); border-color: var(--hairline-on-sand); }
.section-light .btn-ghost:hover { border-color: var(--navy); }

.btn span.shine {
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn:hover span.shine { left: 130%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--sand-bright); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   Hero (homepage)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 8rem var(--gutter) 6rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(179,148,90,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.hero-globe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 130vw);
  height: min(920px, 130vw);
  opacity: 0.16;
  color: var(--sand);
}
.hero-globe-spin { width: 100%; height: 100%; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-particles i {
  position: absolute;
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0.5;
  animation: particle-float 9s ease-in-out infinite;
}
.hero-particles i:nth-child(1)  { top: 22%; left: 12%; animation-delay: 0s;   }
.hero-particles i:nth-child(2)  { top: 68%; left: 18%; animation-delay: 1.2s; }
.hero-particles i:nth-child(3)  { top: 34%; left: 82%; animation-delay: 2.4s; }
.hero-particles i:nth-child(4)  { top: 78%; left: 76%; animation-delay: 0.6s; }
.hero-particles i:nth-child(5)  { top: 15%; left: 55%; animation-delay: 3.1s; }
.hero-particles i:nth-child(6)  { top: 85%; left: 46%; animation-delay: 1.8s; }
.hero-particles i:nth-child(7)  { top: 50%; left: 8%;  animation-delay: 2.9s; }
.hero-particles i:nth-child(8)  { top: 40%; left: 92%; animation-delay: 0.9s; }
@keyframes particle-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  50%      { transform: translate(8px, -18px); opacity: 0.7; }
}

.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero-inner .eyebrow { margin-bottom: 1.6rem; }
.hero-title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 1.1;
  color: var(--sand-bright);
  text-shadow: 0 0 40px rgba(220,209,170,0.18);
}
.hero-title .accent { color: #e0c76f; }
.hero-sub {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-style: italic;
  color: var(--sand);
  margin: 1.4rem 0 2.4rem;
}
.hero-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem 1.2rem; margin-bottom: 2.6rem; font-family: var(--f-ui); }
.meta-chip {
  display: flex; align-items: center; gap: 0.55em;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sand);
  border: 1px solid var(--hairline);
  padding: 0.6em 1.1em;
  border-radius: 6px;
}
.meta-chip svg { width: 14px; height: 14px; color: var(--bronze); flex-shrink: 0; }
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero-inner .eyebrow, .hero-title, .hero-sub, .hero-meta, .hero-ctas {
  opacity: 0;
  animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-inner .eyebrow { animation-delay: 0.1s; }
.hero-title            { animation-delay: 0.25s; }
.hero-sub              { animation-delay: 0.45s; }
.hero-meta             { animation-delay: 0.62s; }
.hero-ctas             { animation-delay: 0.78s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.hero-tagline {
  font-family: var(--f-ui);
  font-size: clamp(0.85rem, 2vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0.6rem 0 1.6rem;
}
.stat-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem 1rem; margin-bottom: 2.2rem; }
.stat-chip {
  font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--bronze);
  padding: 0.55em 1.1em; border-radius: 4px;
}

/* ==========================================================================
   Venue section — separate, dedicated showcase (not merged with dates)
   ========================================================================== */
.venue-section { background: var(--navy-panel); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.venue-section.section-light { background: var(--sand); }
.venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.venue-copy .eyebrow { margin-bottom: 1rem; }
.venue-copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 1rem; }
.venue-copy p { font-size: clamp(1.02rem, 1.6vw, 1.15rem); }
.venue-highlights { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.venue-highlights li { display: flex; align-items: center; gap: 0.8rem; font-family: var(--f-ui); font-size: 0.92rem; color: var(--sand); }
.venue-highlights li svg { width: 18px; height: 18px; color: var(--bronze); flex-shrink: 0; }

.host-card {
  border: 1px solid var(--hairline);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  background: rgba(179,148,90,0.04);
}
.host-lockup { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.host-lockup img { height: 64px; width: auto; object-fit: contain; }
.host-lockup .x { font-family: var(--f-display); font-size: 1.4rem; color: var(--bronze-dim); }
.host-card h3 { font-family: var(--f-heading); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--sand-bright); margin-bottom: 0.5rem; }
.host-card p { font-size: 1rem; }
.section-light .host-card { background: rgba(6,25,53,0.04); border-color: rgba(6,25,53,0.2); }
.section-light .host-lockup .x { color: rgba(6,25,53,0.3); }
.section-light .venue-highlights li { color: var(--ink-on-sand); }

.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--f-ui); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--bronze), transparent); animation: pulse-line 2.4s ease-in-out infinite; }
@keyframes pulse-line { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ==========================================================================
   Ticker (homepage)
   ========================================================================== */
.ticker { background: var(--navy-deep); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; padding: 1.1rem 0; }
.ticker-track { display: flex; width: max-content; gap: 3rem; animation: ticker-scroll 34s linear infinite; }
.ticker-track span {
  font-family: var(--f-ui); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze); white-space: nowrap; display: flex; align-items: center; gap: 3rem;
}
.ticker-track span::after { content: "•"; color: var(--hairline); margin-left: 3rem; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ==========================================================================
   Page banner (interior pages) — mirrors hero's entrance animation
   ========================================================================== */
.page-banner {
  position: relative;
  padding: 10rem var(--gutter) 4.5rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(179,148,90,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 1px solid var(--hairline);
}
.page-banner .eyebrow, .page-banner h1, .page-banner p {
  opacity: 0;
  animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative; z-index: 1;
}
.page-banner .eyebrow { animation-delay: 0.1s; }
.page-banner h1 { animation-delay: 0.25s; }
.page-banner p { animation-delay: 0.42s; }
.page-banner h1 { font-family: var(--f-display); font-size: clamp(2rem, 6vw, 3.1rem); margin-top: 1rem; color: var(--sand-bright); }
.page-banner p { max-width: 560px; margin: 1.2rem auto 0; font-size: clamp(1rem, 2vw, 1.1rem); }

/* ==========================================================================
   Sections (generic)
   ========================================================================== */
section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-top: 0.9rem; }
.section-head p { margin-top: 1rem; font-size: clamp(1rem, 1.6vw, 1.1rem); }
.divider { border: none; height: 1px; background: var(--hairline); margin: 0; }

/* About */
.about { display: grid; grid-template-columns: 0.55fr 1.1fr 0.75fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.about-copy p { font-size: clamp(1.02rem, 1.6vw, 1.15rem); }
.about-mark { font-family: var(--f-display); font-size: 6rem; line-height: 0.8; color: rgba(6,25,53,0.16); user-select: none; }
.pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.pillars li { padding-left: 1.6rem; border-left: 1px solid var(--bronze-dim); }
.pillars strong { font-family: var(--f-heading); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--sand-bright); display: block; margin-bottom: 0.35rem; text-transform: uppercase; }
.pillars span { font-family: var(--f-ui); font-size: 0.92rem; color: var(--ink-muted); }

/* Dates & Venue */
.info-strip { background: var(--navy-panel); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.info-strip.section-light { background: var(--sand); border-color: rgba(6,25,53,0.18); }
.info-grid { display: grid; grid-template-columns:repeat(3,1fr); gap: 0; }
.info-card { padding: clamp(1.6rem, 3vw, 2.4rem) 1.4rem; text-align: center; border-left: 1px solid var(--hairline); transition: background 0.3s ease, transform 0.3s ease; }
.info-card:first-child { border-left: none; }
.info-card:hover { background: rgba(179,148,90,0.06); transform: translateY(-3px); }
.info-card .seal { width: 34px; height: 34px; margin: 0 auto 1rem; }
.info-card .label { font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.6rem; }
.info-card .value { font-family: var(--f-heading); font-size: clamp(1rem, 2vw, 1.15rem); color: var(--navy-panel); }
.info-card .value small { display: block; font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-muted); margin-top: 0.4rem; text-transform: none; }

/* Committee cards (shared building block) */
.committee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; }
.committee-row {
  display: flex; gap: 1.4rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--bronze) transparent;
  margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter);
}
.committee-row .committee-card { flex: 0 0 min(240px, 78vw); scroll-snap-align: start; }
.committee-card {
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3vw, 2rem) 1.6rem;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.committee-card:hover { border-color: var(--bronze); transform: translateY(-6px) rotate(-0.5deg); background: rgba(179,148,90,0.05); }
.committee-card .seal { width: 46px; height: 46px; margin: 0 auto 1.1rem; }
.committee-card h3 { font-size: 1.15rem; letter-spacing: 0.08em; }
.committee-card p { font-family: var(--f-ui); font-size: 0.85rem; margin-top: 0.6rem; color: var(--ink-muted); }
.committee-card.featured { border-color: var(--bronze); background: rgba(179,148,90,0.06); }

/* Final CTA band (reused on multiple pages) — split-screen premium layout */
.cta-band {
  position: relative;
  padding: 0;
  background: var(--navy-deep);
  border-top: 1px solid var(--hairline);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; top: 50%; right: 8%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(179,148,90,0.16), transparent 70%);
  transform: translateY(-50%);
  animation: glow-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(0.9); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.1); }
}
.cta-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center;
  max-width: var(--max); margin: 0 auto;
}
.cta-copy { padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); }
.cta-band h2 { font-family: var(--f-display); font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 1.1rem; }
.cta-band p { max-width: 460px; font-size: clamp(1rem, 1.8vw, 1.1rem); margin-bottom: 2rem; }
.cta-stats {
  border-left: 1px solid var(--hairline);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
}
.cta-stat { display: flex; align-items: baseline; gap: 0.9rem; }
.cta-stat .num { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--bronze); line-height: 1; }
.cta-stat .label { font-family: var(--f-ui); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); }
@media (prefers-reduced-motion: reduce) { .cta-band::before { animation: none; } }
@media (max-width: 800px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-stats { border-left: none; border-top: 1px solid var(--hairline); padding-top: 2rem; flex-direction: row; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); border-top: 1px solid var(--hairline); padding: 3.5rem 0 2.2rem; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--hairline); }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; }
.footer-brand p { font-family: var(--f-heading); font-size: 0.9rem; letter-spacing: 0.12em; color: var(--sand-bright); margin: 0; }
.footer-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-nav a { font-family: var(--f-ui); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); transition: color 0.25s ease; }
.footer-nav a:hover { color: var(--sand-bright); }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color 0.25s ease, transform 0.25s ease; }
.footer-social a:hover { border-color: var(--bronze); transform: translateY(-2px); }
.footer-social svg { width: 15px; height: 15px; color: var(--sand); }
.footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 1.6rem; font-family: var(--f-ui); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--ink-muted); }


/* ==========================================================================
   Our Story page — vision cards, impact cards, journey, closing quote
   ========================================================================== */

/* Our Vision — pillar cards */
.vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.vision-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: clamp(1.6rem, 3vw, 2rem);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.vision-card:hover { border-color: var(--bronze); transform: translateY(-6px); background: rgba(179,148,90,0.05); }
.vision-card .seal { width: 42px; height: 42px; margin: 0 auto 1rem; }
.vision-card h3 { font-size: 1.1rem; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.vision-card p { font-family: var(--f-ui); font-size: 0.9rem; margin: 0; }
.section-light .vision-card { border-color: rgba(6,25,53,0.2); }
.section-light .vision-card:hover { border-color: var(--navy); background: rgba(6,25,53,0.06); }

/* Our Impact — cards (sand section) */
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.4rem, 3vw, 1.8rem); }
.impact-card {
  border-left: 2px solid var(--bronze);
  padding: 0.3rem 0 0.3rem 1.6rem;
}
.impact-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.impact-card p { font-size: 1rem; margin: 0; }

/* The Journey Continues — two-column layout */
.journey-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.journey-grid h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.journey-grid p { font-size: clamp(1.02rem, 1.6vw, 1.15rem); }

/* Closing quote */
.story-quote { max-width: 720px; margin: 0 auto; text-align: center; position: relative; }
.story-quote-mark {
  display: block;
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: 0.6;
  color: rgba(6,25,53,0.18);
  margin-bottom: 0.5rem;
}
.story-quote p {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.story-quote-attribution {
  font-family: var(--f-ui); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze);
}

/* Responsive */
@media (max-width: 800px) {
  .journey-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}


/* ==========================================================================
   Team page
   ========================================================================== */
.team-tier { padding: clamp(3rem, 6vw, 5rem) 0; }
.team-tier .section-head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.team-tier .section-head.center { max-width: 640px; margin-left: auto; margin-right: auto; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(1.4rem, 3vw, 2rem); }
.leadership-grid {
  grid-template-columns: repeat(4, minmax(0, 210px));
  justify-content: center;
  max-width: 980px;
  margin: 0 auto;
  gap: clamp(2rem, 4vw, 3.2rem);
}
.team-card { text-align: center; transition: transform 0.35s ease; }
.team-card:hover { transform: translateY(-6px); }
.team-photo {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 10px;
  background: var(--navy-panel); border: 1px solid var(--bronze-dim);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 1.2rem; position: relative;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.team-card:hover .team-photo { border-color: var(--bronze); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform 0.5s ease; }
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-photo .initials { font-family: var(--f-heading); font-size: 1.6rem; color: var(--bronze); letter-spacing: 0.05em; }

/* Leadership cards — the focal point of the section */
.team-card.lead { position: relative; }
.team-card.lead .team-photo {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  border-width: 1px;
}
.team-card.lead .team-photo::before,
.team-card.lead .team-photo::after {
  content: ""; position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none;
  border-color: var(--bronze); opacity: 0.85;
}
.team-card.lead .team-photo::before { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.team-card.lead .team-photo::after { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; }
.team-card.lead .team-name { font-size: 1.2rem; margin-top: 0.3rem; }
.team-card.lead .team-post { font-size: 0.82rem; letter-spacing: 0.12em; }

.team-card.deputy { opacity: 0.92; }
.team-card.deputy .team-photo { border-style: dashed; }

/* Department blocks — a centered flanked heading, then a row of uniform cards */
.dept-block { margin-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.dept-block:last-child { margin-bottom: 0; }
.dept-heading {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  font-family: var(--f-heading); font-size: clamp(0.92rem, 1.6vw, 1.08rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand-bright); margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.dept-heading::before, .dept-heading::after { content: ""; flex: 1; max-width: 140px; height: 1px; background: var(--hairline); }
.section-light .dept-heading { color: var(--navy); }
.section-light .dept-heading::before, .section-light .dept-heading::after { background: rgba(6,25,53,0.18); }

.dept-team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.3rem, 3vw, 1.8rem); }
.dept-team-row .team-card { width: 100%; max-width: 190px; }

/* Developer credit — a small refined corner tag on the photo, not a ribbon */
.team-photo { position: relative; }
.dev-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--f-ui); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--sand-bright);
  border-radius: 4px; padding: 0.32em 0.6em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dev-tag svg { width: 9px; height: 9px; }
.team-card.developer .team-photo { border-color: var(--bronze); }
.team-card.developer .team-name { color: var(--bronze); }
.team-name { font-family: var(--f-heading); font-size: 1rem; letter-spacing: 0.04em; color: var(--sand-bright); margin-bottom: 0.3rem; }
.team-post { font-family: var(--f-ui); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); }
.section-light .team-name { color: var(--navy); }

/* ==========================================================================
   Committees page (full dossier list)
   ========================================================================== */
.committees-full { display: flex; flex-direction: column; gap: 1.1rem; }

.dossier {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.dossier:hover { border-color: var(--bronze); }
.dossier.featured { border-color: var(--bronze); background: rgba(179,148,90,0.05); }
.dossier.is-open { border-color: var(--bronze); }

.dossier-trigger {
  display: grid; grid-template-columns: 90px 1fr auto;
  align-items: center; gap: clamp(1.2rem, 3vw, 2rem);
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.4rem, 3vw, 2rem);
  font-family: inherit; color: inherit;
}
.dossier-seal { width: 72px; height: 72px; margin: 0 auto; }
.dossier-trigger h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.dossier-trigger .full-name { font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #b9b39f; display: block; }
.dossier-chevron { width: 30px; height: 30px; border: 1px solid var(--hairline); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s ease, border-color 0.3s ease; flex-shrink: 0; }
.dossier-chevron svg { width: 14px; height: 14px; transition: transform 0.4s ease; }
.dossier.is-open .dossier-chevron { border-color: var(--bronze); }
.dossier.is-open .dossier-chevron svg { transform: rotate(180deg); }
.section-light .dossier-chevron { border-color: var(--hairline-on-sand); }

.dossier-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.dossier.is-open .dossier-panel { grid-template-rows: 1fr; }
.dossier-panel-inner { overflow: hidden; }
.dossier-panel-content {
  padding: 0 clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.2rem) calc(90px + clamp(1.2rem, 3vw, 2rem));
}
.dossier-panel-content p.desc { font-size: clamp(1rem, 1.6vw, 1.08rem); margin: 0 0 1.2rem; }
.dossier-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.3rem; }
.meta-tag {
  font-family: var(--f-ui); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #b9b39f; border: 1px solid var(--bronze-dim); border-radius: 4px; padding: 0.4em 0.8em;
}
.dossier-agenda h4 {
  font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 0.7rem;
}
.section-light .dossier-agenda h4 { color: rgba(6,25,53,0.55); }
.dossier-agenda ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.dossier-agenda li { font-size: 0.98rem; padding-left: 1.2rem; position: relative; }
.dossier-agenda li::before { content: "—"; position: absolute; left: 0; color: var(--bronze); }

@media (max-width: 640px) {
  .dossier-trigger { grid-template-columns: 56px 1fr auto; gap: 1rem; }
  .dossier-seal { width: 48px; height: 48px; }
  .dossier-panel-content { padding-left: clamp(1.4rem, 3vw, 2rem); }
}
.edit-note { font-family: var(--f-ui); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.55; margin-top: 0.6rem; display: block; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.contact-cards { display: flex; flex-direction: column; gap: 1.6rem; }
.contact-card { border: 1px solid var(--hairline); padding: clamp(1.4rem, 3vw, 1.8rem); display: flex; gap: 1.2rem; align-items: flex-start; transition: transform 0.3s ease, border-color 0.3s ease; }
.contact-card:hover { transform: translateY(-4px); border-color: var(--bronze); }
.contact-card .seal { width: 30px; height: 30px; flex-shrink: 0; margin-top: 0.2rem; }
.contact-card h3 { font-family: var(--f-ui); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); margin-bottom: 0.5rem; }
.contact-card p { margin: 0; color: var(--sand); font-size: 1.05rem; }
.section-light .contact-card p { color: var(--ink-on-sand); }

.form-panel { border: 1px solid var(--hairline); padding: clamp(1.6rem, 4vw, 2.4rem); }
.form-panel h3 { font-family: var(--f-heading); font-size: 1.2rem; margin-bottom: 1.6rem; color: var(--sand-bright); }
.section-light .form-panel h3 { color: var(--navy); }
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-family: var(--f-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem; }
.field input, .field textarea {
  width: 100%; background: var(--navy-panel); border: 1px solid var(--hairline); color: var(--ivory);
  font-family: var(--f-body); font-size: 1.05rem; padding: 0.75em 0.9em; border-radius: 2px;
  transition: border-color 0.25s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
.field textarea { resize: vertical; min-height: 110px; }

/* Visible focus states throughout */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* ==========================================================================
   Announcements — homepage feed section
   ========================================================================== */
.announce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.4rem, 3vw, 1.8rem); }
.announce-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
  position: relative;
}
.announce-card:hover { border-color: var(--bronze); transform: translateY(-5px); background: rgba(179,148,90,0.05); }
.announce-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--f-ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bronze); border: 1px solid var(--bronze-dim); border-radius: 4px;
  padding: 0.3em 0.7em; margin-bottom: 1.1rem;
}
.announce-badge.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze);
  animation: pulse-line 2s ease-in-out infinite;
}
.announce-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.announce-card p { font-size: 0.98rem; margin-bottom: 0; }
.announce-card .btn { margin-top: 1.2rem; padding: 0.6em 1.3em; font-size: 0.7rem; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.team-grid > .reveal:nth-child(1), .committee-row > .reveal:nth-child(1), .committee-grid > .reveal:nth-child(1),
.committees-full > .reveal:nth-child(1), .contact-cards > .reveal:nth-child(1), .info-grid > .reveal:nth-child(1),
.pillars > .reveal:nth-child(1), .announce-grid > .reveal:nth-child(1), .dept-team-row > .reveal:nth-child(1) { transition-delay: 0s; }
.team-grid > .reveal:nth-child(2), .committee-row > .reveal:nth-child(2), .committee-grid > .reveal:nth-child(2),
.committees-full > .reveal:nth-child(2), .contact-cards > .reveal:nth-child(2), .info-grid > .reveal:nth-child(2),
.pillars > .reveal:nth-child(2), .announce-grid > .reveal:nth-child(2), .dept-team-row > .reveal:nth-child(2) { transition-delay: 0.08s; }
.team-grid > .reveal:nth-child(3), .committee-row > .reveal:nth-child(3), .committee-grid > .reveal:nth-child(3),
.committees-full > .reveal:nth-child(3), .contact-cards > .reveal:nth-child(3), .info-grid > .reveal:nth-child(3),
.pillars > .reveal:nth-child(3), .announce-grid > .reveal:nth-child(3), .dept-team-row > .reveal:nth-child(3) { transition-delay: 0.16s; }
.team-grid > .reveal:nth-child(4), .committee-row > .reveal:nth-child(4), .committee-grid > .reveal:nth-child(4),
.committees-full > .reveal:nth-child(4), .contact-cards > .reveal:nth-child(4), .info-grid > .reveal:nth-child(4),
.dept-team-row > .reveal:nth-child(4) { transition-delay: 0.24s; }
.team-grid > .reveal:nth-child(5), .committee-row > .reveal:nth-child(5), .committee-grid > .reveal:nth-child(5),
.committees-full > .reveal:nth-child(5), .dept-team-row > .reveal:nth-child(5) { transition-delay: 0.32s; }
.team-grid > .reveal:nth-child(n+6), .committee-row > .reveal:nth-child(n+6), .committee-grid > .reveal:nth-child(n+6),
.committees-full > .reveal:nth-child(n+6), .dept-team-row > .reveal:nth-child(n+6) { transition-delay: 0.4s; }

/* ==========================================================================
   Responsive — mobile, tablet, laptop, desktop, large screens
   ========================================================================== */

/* Large screens: give the canvas more breathing room */
@media (min-width: 1440px) {
  :root { --max: 1320px; }
  .hero-title { font-size: clamp(3.4rem, 6vw, 5.4rem); }
}

/* Laptop / small desktop */
@media (max-width: 1080px) {
  .about { grid-template-columns: 0.5fr 1fr; }
  .about-mark { grid-row: span 2; }
}

/* Tablet */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: 2.2rem; }
  .about-mark { display: none; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .info-card:nth-child(3) { border-left: none; }
  .info-card { border-bottom: 1px solid var(--hairline); }
  .section-light .info-card { border-bottom-color: var(--hairline-on-sand); }
  .contact-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .venue-grid { grid-template-columns: 1fr; gap: 2rem; }
  .leadership-grid { grid-template-columns: repeat(2, minmax(0, 210px)); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Mobile nav breakpoint */
@media (max-width: 760px) {
  .seam span { display: none;}
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn-register { display: none; }
  .site-header.menu-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy-deep);
    padding: 1.6rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--hairline);
    gap: 1.2rem;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
  }
  .site-header.menu-open .site-nav > .nav-register-mobile {
    display: block;
    margin-top: 0.6rem;
    width: 100%;
    text-align: center;
  }
  .info-grid { grid-template-columns: 1fr; }
  .info-card { border-left: none !important; border-bottom: 1px solid var(--hairline); }
  .info-card:last-child { border-bottom: none; }
  .section-light .info-card { border-bottom-color: var(--hairline-on-sand); }
}

/* Small phones */
@media (max-width: 480px) {
  .info-grid{grid-template-columns: none ;}
  .header-inner { gap: 0.6rem; }
  .brand-word { letter-spacing: 0.04em; }
  .seam span { display: none;}
  .committee-row { margin: 0 calc(var(--gutter) * -1); }
  .contact-card { flex-direction: column; align-items: center; text-align: center; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
  .brand-word { display: none; }
}