/* ==========================================================================
   Neorons — design system
   Modeled on unesco.org: flat white surfaces, institutional blue, bold
   grotesque headings, square corners, photography-led cards.
   Motion: entrance staggers, scroll reveals, count-ups — all gated behind
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --blue: #0077d4;
  --blue-deep: #005a9e;
  --dark: #0d1b2a;
  --ink: #161616;
  --gray: #555f6b;
  --gray-light: #f4f5f6;
  --line: #dfe3e6;

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --container: 1180px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Self-hosted fonts (eliminates Google Fonts third-party request) ---------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin-800.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-700.woff2") format("woff2");
}

/* Reset ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Keep anchored sections clear of the sticky header. */
[id] {
  scroll-margin-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--blue);
  color: #fff;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--blue-deep);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--dark);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus-visible {
  top: 12px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.narrow {
  max-width: 780px;
}

.section {
  padding: 88px 0;
}

/* Scroll-reveal system ------------------------------------------------------ */
/* .reveal on single elements; grids stagger via --reveal-delay set by JS.
   Hidden state is gated behind the .js class (set by main.js at load time)
   so content is always visible without JavaScript. Reveals run as keyframe
   animations so they never interfere with hover transitions. */

.js .reveal,
.js .pillar,
.js .event-card,
.js .district-card,
.js .impact-item {
  opacity: 0;
}

.is-revealed {
  animation: reveal-in 0.65s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0s);
}

/* Terminal state once the reveal has played: plain visibility, no animation,
   so display:none/re-show cycles (filters) never replay the entrance. */
.js .was-revealed {
  opacity: 1;
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Section labels ----------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
}

.eyebrow-light {
  color: #8ec4ee;
}

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.18s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--blue-deep);
}

.btn-ghost {
  color: #fff;
  border-color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-light {
  background: #fff;
  color: var(--dark);
}

.btn-light:hover {
  background: var(--gray-light);
}

/* Top bar ------------------------------------------------------------------ */

.topbar {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.topbar p {
  margin: 0;
  padding: 8px 16px;
}

.topbar strong {
  color: #fff;
  font-weight: 600;
}

/* Header ------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(13, 27, 42, 0.09);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding 0.25s ease;
}

.site-header.is-scrolled .header-inner {
  padding-top: 9px;
  padding-bottom: 9px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 34px;
  height: 34px;
  color: var(--blue);
  transition: transform 0.5s var(--ease-out);
}

.brand:hover .brand-mark {
  transform: rotate(45deg);
}

.brand-name {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  font-family: var(--font-head);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.25s var(--ease-out), color 0.18s ease;
}

.nav-menu a:hover {
  color: var(--blue);
  background-size: 100% 2px;
}

.nav-menu a.nav-cta {
  background-image: none;
  background-color: var(--blue);
  color: #fff;
  padding: 10px 20px;
  transition: background-color 0.18s ease;
}

.nav-menu a.nav-cta:hover {
  background-color: var(--blue-deep);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

/* Hero --------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 7s var(--ease-out);
}

body.is-loaded .hero-media img {
  transform: scale(1);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 18, 32, 0.88) 0%, rgba(6, 18, 32, 0.55) 55%, rgba(6, 18, 32, 0.25) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-top: 120px;
  padding-bottom: 120px;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: 0.5em;
}

.hero-lede {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin-bottom: 2em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Hero entrance: items rise in sequence once the page loads (JS only). */
.js .hero-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js .hero-item:nth-child(2) {
  transition-delay: 0.12s;
}

.js .hero-item:nth-child(3) {
  transition-delay: 0.24s;
}

body.is-loaded .hero-item {
  opacity: 1;
  transform: translateY(0);
}

/* Stats strip ---------------------------------------------------------------- */

.stats-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 36px;
  padding-bottom: 36px;
}

.stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: var(--blue);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  font-size: 0.92rem;
  color: var(--gray);
  margin-top: 4px;
}

/* Mission ------------------------------------------------------------------ */

.mission-statement {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
}

.mission-body {
  color: var(--gray);
  font-size: 1.08rem;
  margin-top: 1.4em;
}

.mission-body em {
  color: var(--ink);
  font-style: italic;
}

.mission-collab {
  margin-top: 1.6em;
  padding-left: 18px;
  border-left: 3px solid var(--blue);
  font-size: 0.98rem;
  color: var(--gray);
}

/* People / team ------------------------------------------------------------ */

.people {
  background: #fff;
}

.people {
  text-align: center;
}

.people .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 40px auto 0;
  max-width: 920px;
}

.team-card {
  text-align: center;
}

.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--gray-light);
  border: 3px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-initial {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue);
}

.team-name {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.team-role {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.team-bio {
  font-size: 0.92rem;
  color: var(--gray);
  margin: 0;
}

/* Voices ------------------------------------------------------------------- */

.voices {
  background: var(--blue-deep);
  color: #fff;
}

.voices h2 {
  color: #fff;
}

.voices .eyebrow {
  color: #8ec4ee;
}

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.voice-card {
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid rgba(255, 255, 255, 0.5);
  padding: 28px 24px;
}

.voice-quote {
  margin: 0 0 14px;
}

.voice-quote p {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

.voice-cite {
  display: block;
  font-style: normal;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 12px;
}

.voice-name {
  font-weight: 600;
  color: #fff;
}

.voice-event {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Pillars ------------------------------------------------------------------ */

.pillars {
  background: var(--gray-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  padding: 30px 28px;
  transition: box-shadow 0.2s ease;
}

.pillar:hover {
  box-shadow: 0 12px 30px rgba(13, 27, 42, 0.08);
}

.pillar-icon {
  width: 40px;
  height: 40px;
  color: var(--blue);
  margin-bottom: 18px;
}

.pillar h3 {
  font-size: 1.25rem;
}

.pillar p {
  color: var(--gray);
  font-size: 0.98rem;
  margin: 0;
}

/* Impact band -------------------------------------------------------------- */

.impact-band {
  background: var(--dark);
  color: #fff;
}

.impact-band h2 {
  color: #fff;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 44px;
}

.impact-number {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.impact-item {
  border-top: 3px solid var(--blue);
  padding-top: 18px;
}

.impact-label {
  display: block;
  margin-top: 10px;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* Methodology note --------------------------------------------------------- */

.methodology-note {
  margin-top: 32px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}

.methodology-note summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.methodology-note summary:hover {
  color: #fff;
}

.methodology-note p {
  margin-top: 10px;
  max-width: 680px;
  line-height: 1.6;
}

/* Events ------------------------------------------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.section-sub {
  color: var(--gray);
  max-width: 560px;
  margin: 0;
}

.narrow-sub {
  margin-bottom: 36px;
}

.event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--gray);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.filter-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 28px;
}

/* UNESCO-style card: photo on top, flat text block, "Read more" link. */
.event-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  cursor: pointer;
}

.event-card.is-hidden {
  display: none;
}

/* Cards re-entering after a filter change play a quick rise. */
.event-card.is-filtering {
  animation: card-in 0.4s var(--ease-out) both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-figure {
  margin: 0 0 18px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gray-light);
  position: relative;
}

/* Subtle blue overlay to unify placeholder photography */
.event-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 119, 212, 0.08);
  pointer-events: none;
}

.modal-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 119, 212, 0.06);
  pointer-events: none;
  z-index: 1;
}

.event-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.event-card:hover .event-figure img,
.event-card:focus-within .event-figure img {
  transform: scale(1.045);
}

.event-tag {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 8px;
}

.event-title {
  font-size: 1.22rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.event-link {
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}

.event-card:hover .event-link {
  color: var(--blue);
}

.event-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.event-meta {
  font-size: 0.88rem;
  color: var(--gray);
  margin-bottom: 10px;
}

.event-meta .event-district {
  color: var(--ink);
  font-weight: 600;
}

.event-blurb {
  font-size: 0.96rem;
  color: var(--gray);
  margin-bottom: 14px;
  flex-grow: 1;
}

.event-more {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
}

.event-more .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

.event-card:hover .event-more .arrow {
  transform: translateX(5px);
}

.event-card:hover .event-more {
  text-decoration: underline;
}

/* Featured event: full-width spotlight, image beside text. */
.event-card.is-featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  background: var(--gray-light);
  border: 1px solid var(--line);
}

.event-card.is-featured .event-figure {
  flex: 0 0 56%;
  aspect-ratio: auto;
  min-height: 340px;
  margin: 0;
}

.event-card.is-featured .event-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 34px;
}

.event-card.is-featured .event-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.event-card.is-featured .event-blurb {
  font-size: 1.02rem;
}

.featured-flag {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dark);
  align-self: flex-start;
  padding: 4px 10px;
  margin-bottom: 14px;
}

/* Event timeline ----------------------------------------------------------- */

.event-timeline {
  margin-bottom: 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.timeline-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
  position: relative;
  padding: 12px 0 0;
}

.timeline-track::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}

.timeline-dot {
  position: relative;
  flex: 1;
  min-width: 110px;
  background: none;
  border: none;
  padding: 0 8px;
  cursor: pointer;
  text-align: center;
}

.timeline-dot::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--blue);
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.timeline-dot:hover::before {
  transform: scale(1.3);
}

.timeline-dot.pillar-inclusion::before {
  background: #e07c24;
  box-shadow: 0 0 0 2px #e07c24;
}

.timeline-dot.pillar-ai::before {
  background: #2ea87e;
  box-shadow: 0 0 0 2px #2ea87e;
}

.timeline-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-date {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-title {
  font-size: 0.78rem;
  color: var(--ink);
  line-height: 1.3;
}

.timeline-dot:hover .timeline-title {
  color: var(--blue);
}

/* Upcoming event card ------------------------------------------------------ */

.event-card.is-upcoming {
  border: 2px dashed var(--line);
  background: var(--gray-light);
  opacity: 0.85;
}

.event-card.is-upcoming .event-tag::after {
  content: " \00B7  Coming soon";
  color: var(--gray);
  font-weight: 400;
}

/* Quote band ----------------------------------------------------------------- */

.quote-band {
  padding: 88px 0;
  background: var(--blue-deep);
  color: #fff;
}

.quote {
  margin: 0;
  position: relative;
  padding-left: 34px;
  border-left: 4px solid rgba(255, 255, 255, 0.7);
}

.quote p {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.8em;
}

.quote cite {
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Where we work ------------------------------------------------------------ */

.reach {
  background: var(--gray-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.district-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.district-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  padding: 20px 20px 16px;
  transition: box-shadow 0.2s ease;
}

.district-card:hover {
  box-shadow: 0 10px 24px rgba(13, 27, 42, 0.08);
}

.district-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
}

.district-state {
  display: block;
  font-size: 0.86rem;
  color: var(--gray);
  margin-top: 2px;
}

.district-count {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

/* CTA band ------------------------------------------------------------------ */

.cta-band {
  background: var(--dark);
  color: #fff;
}

.cta-band h2 {
  color: #fff;
}

.cta-band .eyebrow {
  color: #8ec4ee;
}

.cta-inner {
  text-align: center;
}

.cta-inner p {
  max-width: 560px;
  margin: 0 auto 2em;
  color: rgba(255, 255, 255, 0.85);
}

/* Contact form ------------------------------------------------------------- */

.contact-form {
  max-width: 560px;
  margin: 0 auto 1.5em;
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
}

.form-field .optional {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.cta-fallback {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.cta-fallback a {
  color: #fff;
}

/* Get involved ------------------------------------------------------------- */

.get-involved {
  background: var(--gray-light);
  border-top: 1px solid var(--line);
}

.involve-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
  max-width: 880px;
}

.involve-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  padding: 30px 28px;
}

.involve-card h3 {
  font-size: 1.15rem;
}

.involve-card p {
  color: var(--gray);
  font-size: 0.95rem;
  margin-bottom: 1.4em;
}

/* Footer --------------------------------------------------------------------- */

.site-footer {
  background: #081220;
  color: rgba(255, 255, 255, 0.75);
  padding: 60px 0 28px;
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-brand .brand-name {
  color: #fff;
  font-size: 1.3rem;
}

.footer-brand p {
  margin-top: 12px;
  max-width: 280px;
}

.footer-col h3 {
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.footer-wellbeing p {
  margin: 0;
  line-height: 1.6;
}

.footer-wellbeing strong {
  color: #fff;
}

.footer-legal {
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-legal p {
  margin: 0 0 4px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.65);
}

/* Modal ----------------------------------------------------------------------- */

/* iOS-safe scroll lock: main.js stores the scroll offset in body.style.top
   and restores it on close. */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 32, 0.72);
  animation: backdrop-in 0.3s ease both;
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(100%, 960px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 80px rgba(6, 18, 32, 0.4);
  animation: panel-in 0.42s var(--ease-out) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Exit: quicker than the entrance, finalized by JS after ~200ms. */
.modal.is-closing .modal-panel {
  animation: panel-out 0.2s ease both;
}

.modal.is-closing .modal-backdrop {
  animation: backdrop-out 0.2s ease both;
}

@keyframes panel-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Content scrolls; the close button stays pinned to the panel frame.
   The opacity transition supports the prev/next crossfade. */
.modal-content {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  transition: opacity 0.12s ease;
}

.modal-title:focus {
  outline: none;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--dark);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.modal-close:hover {
  background: var(--blue);
  transform: rotate(90deg);
}

.modal-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.modal-figure {
  margin: 0;
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--gray-light);
}

.modal-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-figure figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 10px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(6, 18, 32, 0.65);
}

.modal-figure figcaption a {
  color: inherit;
}

.modal-header {
  padding: 32px 44px 0;
}

.modal-header .event-tag {
  display: block;
}

.modal-title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 4px 0 8px;
}

.modal-meta {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gray);
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.modal-body {
  padding: 24px 44px 36px;
}

.modal-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.figure-chip {
  background: var(--gray-light);
  border-left: 3px solid var(--blue);
  padding: 12px 18px;
  min-width: 120px;
}

.figure-number {
  display: block;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}

.figure-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 2px;
}

.modal-paragraph {
  color: var(--ink);
  font-size: 1.02rem;
  margin-bottom: 1.2em;
}

.modal-subhead {
  font-size: 1.1rem;
  margin: 1.6em 0 0.7em;
}

.modal-highlights {
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal-highlights li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 0.98rem;
}

.modal-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 3px;
  background: var(--blue);
}

.modal-helpline {
  margin: 28px 0 0;
  padding: 14px 18px;
  background: var(--gray-light);
  border-left: 3px solid var(--blue);
  font-size: 0.94rem;
  color: var(--ink);
}

/* Prev/next navigation between events, inside the modal. */
.modal-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.modal-nav-btn {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  max-width: 46%;
  text-align: left;
}

.modal-nav-btn.is-next {
  text-align: right;
  margin-left: auto;
}

.modal-nav-btn:hover {
  text-decoration: underline;
}

.modal-nav-btn .modal-nav-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

/* Modal share buttons ------------------------------------------------------ */

.modal-share {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.share-btn {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: var(--gray-light);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.share-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}


/* Modal gallery thumbnails ------------------------------------------------- */

.modal-gallery {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  overflow-x: auto;
}

.gallery-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
  border-color: var(--blue);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modal partners/reflection ------------------------------------------------ */

.modal-partners {
  font-size: 0.92rem;
  color: var(--gray);
  margin-top: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.modal-partners strong {
  color: var(--ink);
}

.modal-reflection {
  font-style: italic;
  color: var(--gray);
}

/* Reduced motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .pillar,
  .js .event-card,
  .js .district-card,
  .js .impact-item,
  .js .hero-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .event-card,
  .event-figure img,
  .brand-mark,
  .modal-close,
  .event-more .arrow,
  .site-header,
  .header-inner,
  .skip-link,
  .nav-menu a,
  .filter-btn,
  .modal-content {
    transition: none;
  }

  .hero-media img {
    transform: none;
    transition: none;
  }

  .event-card:hover .event-figure img,
  .event-card:focus-within .event-figure img {
    transform: none;
  }

  .is-revealed,
  .modal-backdrop,
  .modal-panel,
  .modal.is-closing .modal-panel,
  .modal.is-closing .modal-backdrop,
  .event-card.is-filtering {
    animation: none;
  }

  .brand:hover .brand-mark,
  .modal-close:hover,
  .event-card:hover .event-more .arrow {
    transform: none;
  }
}

/* Responsive --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .section {
    padding: 64px 0;
  }

  .quote-band {
    padding: 64px 0;
  }

  .pillar-grid,
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .event-grid {
    grid-template-columns: 1fr 1fr;
  }

  .event-card.is-featured {
    flex-direction: column;
    gap: 0;
  }

  .event-card.is-featured .event-figure {
    flex: none;
    aspect-ratio: 3 / 2;
    min-height: 0;
    margin-bottom: 0;
  }

  .event-card.is-featured .event-text {
    padding: 24px;
  }

  .district-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-inner {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  /* Collapse the nav before it can crowd the brand on tablet widths. */
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu li {
    padding: 6px 0;
  }

  .nav-menu a.nav-cta {
    display: inline-block;
    text-align: center;
    margin-top: 8px;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .voices-grid {
    grid-template-columns: 1fr;
  }

  .involve-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .stats-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .pillar-grid,
  .impact-grid,
  .district-grid,
  .footer-grid,
  .event-grid {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 12px;
  }

  .modal-header {
    padding: 24px 24px 0;
  }

  .modal-body {
    padding: 20px 24px 28px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Subpage content ---------------------------------------------------------- */

.page-content h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.3em;
}

.page-content h2 {
  font-size: 1.2rem;
  margin-top: 2em;
}

.page-content ul {
  padding-left: 20px;
  margin-bottom: 1.2em;
}

.page-content li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.page-updated {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 2em;
}

/* Print --------------------------------------------------------------------- */

@media print {
  .reveal,
  .pillar,
  .event-card,
  .district-card,
  .impact-item,
  .hero-item,
  .team-card,
  .voice-card,
  .involve-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .featured-flag {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000;
  }

  .event-card.is-featured {
    background: none !important;
  }

  .quote {
    border-left-color: #000 !important;
  }

  .topbar,
  .nav-toggle,
  .nav-menu,
  .modal,
  .event-filters,
  .event-timeline,
  .hero-actions,
  .skip-link,
  .cta-band,
  .get-involved,
  .contact-form,
  .modal-share,
  .footer-social {
    display: none !important;
  }

  .hero,
  .impact-band,
  .cta-band,
  .voices,
  .quote-band,
  .site-footer {
    background: none !important;
    color: #000 !important;
  }

  .hero h1,
  .hero-lede,
  .impact-band h2,
  .cta-band h2,
  .voices h2,
  .impact-number,
  .quote p,
  .quote cite,
  .voice-quote p,
  .voice-cite,
  .footer-brand .brand-name,
  .footer-col h3 {
    color: #000 !important;
  }

  .hero-media {
    display: none;
  }

  .impact-label,
  .cta-band p,
  .site-footer,
  .footer-col a,
  .footer-legal,
  .voice-event,
  .voice-name {
    color: #333 !important;
  }

  .site-header {
    position: static;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Photo overlay not needed in print */
  .event-figure::after,
  .modal-figure::after {
    display: none;
  }
}

/* Scroll-driven motion ------------------------------------------------------ */
/* Progress bar, scrollspy, parallax, back-to-top. All elements are injected
   by js/main.js, so nothing here renders without JavaScript. */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Scrollspy: the section currently in view is marked in the nav. */
.nav-menu a.is-current {
  color: var(--blue);
  background-size: 100% 2px;
}

.nav-menu a.nav-cta.is-current {
  color: #fff;
}

/* Hero parallax layers get their transforms from JS (transform only,
   composited, no layout work). The media wrapper is translated rather than
   the img so the Ken Burns transition on the img is never interrupted. */
.hero-media,
.hero-inner {
  will-change: transform;
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border: none;
  background: var(--dark);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out), background 0.18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--blue);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
    transform: none;
  }

  .hero-media,
  .hero-inner {
    will-change: auto;
    transform: none !important;
  }
}

@media print {
  .scroll-progress,
  .back-to-top {
    display: none !important;
  }
}

/* Interactive India map ------------------------------------------------------ */

.map-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.india-map {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  min-height: 460px;
  overflow: hidden;
}

.india-svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}

.india-svg.is-panning {
  cursor: grabbing;
}

.map-outline path {
  fill: var(--gray-light);
  stroke: var(--dark);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Outline draws itself when the section scrolls into view (JS sets the
   dash metrics; this transition plays them out). */
.india-map.is-drawing .map-outline path {
  fill-opacity: 0;
  transition: stroke-dashoffset 1.6s var(--ease-out), fill-opacity 0.9s ease 1.1s;
}

.india-map.is-drawn .map-outline path {
  stroke-dashoffset: 0 !important;
  fill-opacity: 1;
}

/* Markers */
.map-marker {
  cursor: pointer;
  outline: none;
}

.map-marker .marker-dot {
  fill: var(--blue);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.map-marker .marker-pulse {
  fill: var(--blue);
  opacity: 0;
}

.india-map.markers-live .map-marker {
  animation: marker-pop 0.45s var(--ease-out) both;
  animation-delay: var(--marker-delay, 0s);
}

.india-map:not(.markers-live) .map-marker {
  opacity: 0;
}

@keyframes marker-pop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.india-map.markers-live .map-marker .marker-pulse {
  animation: marker-pulse 2.6s ease-out infinite;
  animation-delay: var(--marker-delay, 0s);
}

@keyframes marker-pulse {
  0% {
    opacity: 0.45;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(3.2);
  }
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

.map-marker .marker-pulse {
  transform-origin: center;
  transform-box: fill-box;
}

.map-marker:hover .marker-dot,
.map-marker:focus-visible .marker-dot,
.map-marker.is-active .marker-dot {
  fill: var(--dark);
}

.map-marker:focus-visible {
  outline: none;
}

.map-marker:focus-visible .marker-dot {
  stroke: var(--blue);
  stroke-width: 3;
}

/* Zoom controls */
.map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
  font-family: var(--font-head);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.map-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.map-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

/* Popover: docked info card explaining the selected event */
.map-popover {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  width: min(340px, calc(100% - 24px));
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  box-shadow: 0 14px 40px rgba(13, 27, 42, 0.18);
  padding: 18px 20px 16px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.map-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.map-popover .event-tag {
  margin-bottom: 4px;
}

.map-popover h3 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.map-popover .popover-meta {
  font-size: 0.84rem;
  color: var(--gray);
  margin: 0 0 8px;
}

.map-popover .popover-blurb {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0 0 12px;
}

.popover-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.popover-read {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-deep);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.popover-read:hover {
  text-decoration: underline;
}

.popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.popover-close:hover {
  color: var(--ink);
}

/* Location list beside the map */
.map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-list-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  padding: 12px 16px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}

.map-list-btn:hover {
  box-shadow: 0 8px 20px rgba(13, 27, 42, 0.09);
  transform: translateX(3px);
}

.map-list-btn .map-list-title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.map-list-btn:hover .map-list-title {
  color: var(--blue-deep);
}

.map-list-btn .map-list-place {
  display: block;
  font-size: 0.84rem;
  color: var(--gray);
  margin-top: 2px;
}

/* Card affordance for jumping to the map */
.event-more .map-hint {
  font-weight: 400;
  color: var(--gray);
}

@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr;
  }

  .india-map {
    min-height: 420px;
  }

  .map-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .map-list li {
    flex: 1 1 240px;
  }
}

@media (max-width: 640px) {
  .india-map {
    min-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .india-map.is-drawing .map-outline path {
    transition: none;
    stroke-dashoffset: 0 !important;
    fill-opacity: 1 !important;
  }

  .india-map.markers-live .map-marker,
  .india-map.markers-live .map-marker .marker-pulse {
    animation: none;
  }

  .india-map:not(.markers-live) .map-marker {
    opacity: 1;
  }

  .map-popover,
  .map-list-btn,
  .map-btn {
    transition: none;
  }

  .map-list-btn:hover {
    transform: none;
  }
}

@media print {
  .india-map {
    display: none !important;
  }

  .map-list-btn {
    border: 1px solid #999;
  }
}

/* Detailed map: internal state boundaries fade in after the outline draws. */
.map-states path {
  fill: none;
  stroke: #a7b4c0;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

.india-map.is-drawing .map-states {
  opacity: 0;
  transition: opacity 0.9s ease 1.2s;
}

.india-map.is-drawn .map-states {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .india-map.is-drawing .map-states {
    transition: none;
    opacity: 1;
  }
}

/* Supporters strip (renders only when NEORONS_SUPPORTERS has real entries) */
.supporters-strip {
  background: var(--gray-light);
  border-top: 1px solid var(--line);
  padding: 36px 0;
}

.supporters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--gray);
}

.supporters-list a {
  color: var(--gray);
  text-decoration: none;
}

.supporters-list a:hover {
  color: var(--blue-deep);
  text-decoration: underline;
}

/* Leaflet tile map ----------------------------------------------------------- */

.india-map {
  height: 580px;
  z-index: 0;
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.06), 0 10px 32px rgba(13, 27, 42, 0.07);
}

.leaflet-container {
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* Markers: blue dots for completed events, red for upcoming. */
.nmap-marker {
  background: none;
  border: none;
}

.nmap-dot {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--blue);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.18), 0 2px 6px rgba(13, 27, 42, 0.35);
  animation: nmap-pop 0.45s var(--ease-out) both;
}

.nmap-pulse {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0;
  animation: nmap-pulse 2.6s ease-out infinite;
}

.nmap-marker.is-upcoming .nmap-dot,
.nmap-marker.is-upcoming .nmap-pulse {
  background: #c62828;
}

@keyframes nmap-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nmap-pulse {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(2.8);
  }
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

/* Popups: square-cornered, institutional. */
.nmap-popup .leaflet-popup-content-wrapper {
  border-radius: 0;
  border-top: 4px solid var(--blue);
  box-shadow: 0 14px 40px rgba(13, 27, 42, 0.22);
}

.nmap-popup.is-upcoming .leaflet-popup-content-wrapper {
  border-top-color: #c62828;
}

.nmap-popup .leaflet-popup-content {
  margin: 16px 18px 14px;
  line-height: 1.5;
}

.nmap-popup-body .event-tag {
  margin: 0 0 4px;
}

.nmap-popup.is-upcoming .event-tag {
  color: #c62828;
}

.nmap-popup-body h3 {
  font-size: 1.02rem;
  margin: 0 0 4px;
}

.nmap-popup-body .popover-meta {
  font-size: 0.82rem;
  color: var(--gray);
  margin: 0 0 8px;
}

.nmap-popup-body .popover-blurb {
  font-size: 0.88rem;
  color: var(--gray);
  margin: 0 0 10px;
}

.nmap-popup-body .popover-read {
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--blue-deep);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nmap-popup-body .popover-read:hover {
  text-decoration: underline;
}

/* Legend */
.nmap-legend {
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px 12px;
  display: flex;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gray);
}

.nmap-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nmap-legend .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}

.nmap-legend .legend-dot.is-upcoming {
  background: #c62828;
}

/* Zoom control, square-cornered to match the design system */
.leaflet-control-zoom a {
  border-radius: 0 !important;
}

@media (max-width: 900px) {
  .india-map {
    height: 440px;
  }
}

@media (max-width: 640px) {
  .india-map {
    height: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nmap-dot,
  .nmap-pulse {
    animation: none;
  }

  .nmap-dot {
    opacity: 1;
  }

  .nmap-pulse {
    opacity: 0;
  }
}

/* Upcoming events section ---------------------------------------------------- */

.upcoming {
  background: var(--gray-light);
  border-top: 1px solid var(--line);
}

.eyebrow-red {
  color: #c62828;
}

.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.upcoming-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid #c62828;
  padding: 26px 26px 20px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.upcoming-card:hover {
  box-shadow: 0 12px 30px rgba(13, 27, 42, 0.09);
}

.upcoming-flag {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c62828;
  margin: 0 0 10px;
}

.upcoming-title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.upcoming-card .event-blurb {
  flex-grow: 1;
}

.upcoming-card:hover .event-link {
  color: var(--blue-deep);
}

/* "See it on the map" control (cards + upcoming cards) */
.event-locate {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-deep);
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  cursor: pointer;
  text-align: left;
}

.event-locate .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

.event-locate:hover {
  text-decoration: underline;
}

.event-locate:hover .arrow {
  transform: translateX(5px);
}

.event-locate:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Supporter logos (renders only with real, consented entries) */
.supporter-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.supporters-list a:hover .supporter-logo {
  filter: none;
  opacity: 1;
}

@media (max-width: 900px) {
  .upcoming-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-locate .arrow,
  .supporter-logo {
    transition: none;
  }

  .event-locate:hover .arrow {
    transform: none;
  }
}

/* Team headshots + advisory thanks ------------------------------------------ */

.team-avatar {
  width: 120px;
  height: 120px;
}

.team-avatar img {
  /* Bias the crop toward faces in portrait headshots. */
  object-position: center 30%;
}

.team-thanks {
  max-width: 680px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.98rem;
  color: var(--gray);
}