/* ==========================================================================
   Indian Food Festival Colorado
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
:root {
  --navy:        #15055B;
  --navy-deep:   #0B0230;
  --navy-soft:   #241468;
  --magenta:     #CB1183;
  --magenta-lit: #E8309F;
  /* Darker magenta for small text on light backgrounds — the brand magenta
     only reaches 4.4:1 on sand, just under the WCAG AA threshold. */
  --magenta-ink: #B00E72;
  --gold:        #FFC441;
  --gold-deep:   #E9A81C;
  --coral:       #FF7722;
  --cream:       #FFF7EC;
  --sand:        #F6E8D4;
  --sand-deep:   #EBD7BC;
  --ink:         #1B1233;
  --ink-soft:    #4A4166;
  --white:       #FFFFFF;

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.7vw, 2.85rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.9vw, 4rem);
  --step-5:  clamp(2.9rem, 1.9rem + 4.7vw, 5.6rem);

  /* Spacing scale — one source of truth. Before this, seven different
     clamp() values were doing the same section-header job. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  clamp(2.5rem, 4vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 7vw, 6rem);
  --space-3xl: clamp(5rem, 10vw, 8.5rem);

  /* Section rhythm.
     Sections are symmetric, so the gap a visitor actually sees between two
     sections is TWICE this value. At the old 108px that read as 216px of dead
     air and made headings look stranded. Sized so the seam lands near 150px on
     desktop, which is generous without feeling empty. */
  --section-pad:       clamp(3.25rem, 5.6vw, 4.75rem);
  --section-pad-tight: clamp(2.5rem, 4vw, 3.25rem);
  --head-gap:          clamp(2rem, 3.4vw, 2.9rem);

  /* Hairlines derived from the existing palette — no new colours */
  --line:      rgba(21, 5, 91, 0.12);
  --line-soft: rgba(21, 5, 91, 0.07);
  --line-dark: rgba(255, 255, 255, 0.16);

  --wrap: 1200px;
  --wrap-narrow: 780px;
  --wrap-text: 68ch;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Shared height for inline form controls so inputs and buttons align. */
  --control-h: 56px;

  --shadow-sm: 0 2px 8px rgba(21, 5, 91, 0.08);
  --shadow:    0 14px 40px -12px rgba(21, 5, 91, 0.22);
  --shadow-lg: 0 30px 70px -20px rgba(21, 5, 91, 0.35);

  /* ---- Motion system -------------------------------------------------
     Four durations, one easing curve, one lift distance. Before this the
     stylesheet had eight ad-hoc durations and five different hover offsets,
     which is what makes motion read as accidental rather than designed. */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out: quick, settles soft */
  --dur-xs:     140ms;   /* colour and opacity swaps */
  --dur-s:      220ms;   /* buttons, links, small controls */
  --dur-m:      340ms;   /* cards, panels, elevation */
  --dur-l:      560ms;   /* entrances and image scale */
  --lift:       -3px;    /* every hover elevation, without exception */
  --img-zoom:   1.035;   /* every image hover scale */
  --stagger:    70ms;    /* delay between siblings in a revealed group */
}

/* --------------------------------------------------------------- Reset  */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
/* Optical correction: the larger the type, the tighter it should track. */
.h-hero    { letter-spacing: -0.032em; line-height: 0.98; }
.h-section { letter-spacing: -0.024em; line-height: 1.06; }
.h-card    { letter-spacing: -0.012em; line-height: 1.22; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
/* Long unbroken strings — the contact email, URLs — must wrap rather than
   force the page wider than the viewport on narrow screens. */
p, li, a, h1, h2, h3, h4, dd, dt { overflow-wrap: break-word; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
/* Focus ring uses the brand gold with a navy inner edge so it stays visible
   on both the cream and navy surfaces. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(21, 5, 91, 0.35);
  border-radius: var(--radius-sm);
}
.section--navy :focus-visible,
.event-bar :focus-visible,
.newsletter :focus-visible,
.cta-band :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------- Layout */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: var(--section-pad-tight); }

/* One section-header component. Replaces seven hand-tuned inline clamps. */
.section-head { max-width: 62ch; margin-bottom: var(--head-gap); }
.section-head > :last-child { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .h-section { margin-bottom: 0.42em; }
.section-head .lede { margin-bottom: 0; }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--navy  { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.skip-link {
  position: absolute; left: 0.5rem; top: -100px; z-index: 999;
  background: var(--gold); color: var(--navy); font-weight: 700;
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top var(--dur-s) var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------- Typography  */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--ff-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta-ink);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--gold-deep); flex: none;
}
/* Gold on the dark surfaces — magenta on near-black navy only reaches 3.7:1,
   below the 4.5:1 WCAG AA threshold for this text size. */
.section--navy .eyebrow,
.event-bar .eyebrow,
.newsletter .eyebrow,
.cta-band .eyebrow,
.page-hero .eyebrow { color: var(--gold); }
.section--navy .eyebrow::before,
.event-bar .eyebrow::before,
.newsletter .eyebrow::before,
.cta-band .eyebrow::before,
.page-hero .eyebrow::before { background: var(--magenta-lit); }
/* Gold on magenta is only 3.3:1 — white clears AA at 5.3:1. */
.feature .eyebrow { color: var(--white); }
.feature .eyebrow::before { background: var(--gold); }

.h-hero    { font-size: var(--step-5); }
.h-section { font-size: var(--step-3); margin-bottom: 0.6em; }
.h-card    { font-size: var(--step-1); }
.lede {
  font-size: var(--step-1); line-height: 1.48; letter-spacing: -0.006em;
  color: var(--ink-soft); font-weight: 400; max-width: 54ch;
}
.section-head--center .lede { margin-inline: auto; }
/* Every dark surface, not just .section--navy — .event-bar, .newsletter and
   .cta-band are dark too and were inheriting near-black body text on navy. */
.section--navy .lede,
.event-bar .lede,
.newsletter .lede,
.cta-band .lede,
.page-hero .lede,
.feature .lede { color: rgba(255, 255, 255, 0.86); }
.text-center { text-align: center; }
.measure { max-width: 62ch; }
.measure-center { max-width: 62ch; margin-inline: auto; }

/* ------------------------------------------------------------- Buttons  */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--ff-body);
  font-weight: 700; font-size: var(--step-0); line-height: 1;
  padding: 1.05em 1.9em;
  border: 2px solid transparent; border-radius: 100px;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease),
              background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease),
              border-color var(--dur-s) var(--ease);
}
.btn:hover { transform: translateY(var(--lift)); }
.btn--primary { background: var(--magenta); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--magenta-lit); box-shadow: var(--shadow); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--white); }
.btn--outline { border-color: currentColor; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
/* Without these the outline button renders navy-on-navy — invisible. */
.section--navy .btn--outline,
.hero .btn--outline,
.event-bar .btn--outline,
.newsletter .btn--outline,
.cta-band .btn--outline,
.feature .btn--outline,
.page-hero .btn--outline { color: var(--white); }
.section--navy .btn--outline:hover,
.hero .btn--outline:hover,
.event-bar .btn--outline:hover,
.newsletter .btn--outline:hover,
.cta-band .btn--outline:hover,
.feature .btn--outline:hover,
.page-hero .btn--outline:hover {
  background: var(--white); color: var(--navy); border-color: var(--white);
}
.btn--sm { padding: 0.8em 1.4em; font-size: var(--step--1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.btn-row--center { justify-content: center; }
.btn-row--spaced { margin-top: var(--space-l); }
.btn--block { width: 100%; }
/* Keep every control at the 44px minimum touch target on small screens. */
@media (max-width: 900px) {
  .btn, .social-btn { min-height: 44px; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; text-decoration: none; color: var(--magenta-ink);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: gap var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.link-arrow:hover { gap: 0.85rem; border-bottom-color: var(--magenta-ink); }
.section--navy .link-arrow { color: var(--gold); }
.section--navy .link-arrow:hover { border-bottom-color: var(--gold); }

/* -------------------------------------------------------------- Header  */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 247, 236, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur-s) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.brand img { width: 46px; height: 46px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.02rem;
  color: var(--navy); letter-spacing: -0.01em;
}
.brand__sub {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--magenta-ink); font-weight: 700;
}

.nav { display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 1.5rem); }
.nav__list { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1.4rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--navy);
  padding: 0.45rem 0.2rem; position: relative; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--magenta);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-s) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--magenta-ink); font-weight: 700; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  background: var(--navy); border: 0; border-radius: 12px; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--white);
  border-radius: 2px; transition: transform var(--dur-s) var(--ease), opacity 0.2s linear;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(var(--lift)) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 74px 0 auto; z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility 0.25s;
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block; padding: 0.95rem 0.2rem; font-size: 1.08rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.1rem; width: 100%; }
}

/* ---------------------------------------------------------------- Hero  */
.hero {
  position: relative; isolation: isolate;
  color: var(--white);
  /* min-height does the framing; the bottom pad only has to clear the scroll
     cue, so it stays smaller than the top and keeps the seam in rhythm. */
  padding-block: clamp(4rem, 11vw, 8rem) clamp(3rem, 6vw, 4.5rem);
  display: grid; align-items: center;
  min-height: min(88vh, 780px);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 80% at 15% 20%, rgba(21, 5, 91, 0.86) 0%, rgba(21, 5, 91, 0.55) 45%, rgba(11, 2, 48, 0.72) 100%),
    linear-gradient(160deg, rgba(203, 17, 131, 0.35) 0%, transparent 55%);
}
.hero__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); max-width: 46rem; }
.hero__badge { width: clamp(72px, 12vw, 104px); height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35)); }
.hero__kicker {
  font-family: var(--ff-display); font-style: italic; font-weight: 500;
  font-size: var(--step-1); color: var(--gold); margin: 0;
}
.hero h1 { margin: 0; text-wrap: balance; }
.hero h1 em {
  font-style: normal; display: block; color: var(--gold);
}
.hero__lede { font-size: var(--step-1); line-height: 1.5; color: rgba(255,255,255,0.9); max-width: 40ch; margin: 0; }

.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-decoration: none;
}
/* A static rule, not a looping pulse — the eye should go to the headline. */
.hero__scroll span:last-child {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, rgba(255, 196, 65, 0.9), transparent);
}
.hero__scroll { transition: color var(--dur-s) var(--ease); }
.hero__scroll:hover { color: var(--gold); }
@media (max-width: 720px) { .hero__scroll { display: none; } }

.page-hero {
  position: relative; isolation: isolate;
  background: var(--navy); color: var(--white);
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16;
  background-image: radial-gradient(circle at 1px 1px, var(--gold) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 70% at 70% 0%, #000, transparent);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 0%, #000, transparent);
}
.page-hero h1 { font-size: var(--step-4); margin: 0 0 0.4em; text-wrap: balance; }
.page-hero .lede { max-width: 58ch; }

/* ------------------------------------------------------------ Breadcrumb */
.crumb { font-size: var(--step--1); color: rgba(255,255,255,0.6); margin-bottom: 1.2rem; }
.crumb a { color: var(--gold); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ------------------------------------------------------ Event details    */
.event-bar {
  background: var(--navy-deep); color: var(--white);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.event-bar__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.event-item { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.event-item > div, .contact-detail > div { min-width: 0; }
.event-item__icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255, 196, 65, 0.14);
  display: grid; place-items: center;
}
.event-item__icon img { width: 26px; height: 26px; }
.event-item__label {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin: 0 0 0.3rem;
}
.event-item__value { font-family: var(--ff-display); font-size: 1.12rem; font-weight: 600; margin: 0; line-height: 1.35; }
.event-item__note { font-size: var(--step--1); color: rgba(255,255,255,0.62); margin: 0.25rem 0 0; }

/* ------------------------------------------------------------ Split      */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 720px) { .split--reverse .split__media { order: 0; } }
.split__media { position: relative; }
/* Consistent editorial crop across every split image, rather than each one
   inheriting whatever aspect ratio its source file happened to have. */
.split__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__media--portrait img { aspect-ratio: 4 / 5; }
/* Portraits crop from the bottom, never the top — a centred crop on a seated
   subject takes the head off. */
.split__media--portrait img { object-position: 50% 18%; }
@media (max-width: 720px) {
  .split__media img { aspect-ratio: 3 / 2; }
  /* Portrait media keeps a near-square crop on phones. Forcing 3:2 here was
     cutting the top of the head off a 1:1 source. */
  .split__media--portrait img { aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------------------- Cards     */
.card-grid {
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease),
              border-color var(--dur-m) var(--ease);
}
.card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow);
  border-color: var(--line);
}
.card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease); }
.card:hover .card__media img { transform: scale(var(--img-zoom)); }
.card__body {
  padding: var(--space-m) var(--space-m) calc(var(--space-m) + 0.25rem);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.card__body h3 { margin: 0; }
.card__body p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------- Involve tiles   */
.involve-grid {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.involve {
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.involve:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); transform: translateY(var(--lift)); }
/* No 01/02/03 markers here: Vendors, Sponsors, Volunteers and Entrepreneurs
   are parallel ways to take part, not an ordered sequence, so numbering them
   would imply a progression that does not exist. */
.involve h3 { margin: 0; font-size: var(--step-1); }
.involve p { font-size: 0.95rem; color: rgba(255,255,255,0.75); margin: 0; flex: 1; }
.involve .link-arrow { margin-top: 0.4rem; align-self: flex-start; }

/* --------------------------------------------------------- Feature band  */
.feature {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--magenta); color: var(--white);
  border-radius: var(--radius-lg);
}
.feature__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.feature__body { padding: clamp(1.8rem, 4.5vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.feature h2 { color: var(--white); }
/* Eyebrow colour on magenta is set once, near the .eyebrow base rule —
   gold here would only reach 3.3:1. */
.feature__note {
  margin-top: 1.2rem; padding: 0.9rem 1.1rem;
  background: rgba(0,0,0,0.16); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; font-size: 0.95rem;
}

/* --------------------------------------------------------------- Stats   */
.stats {
  display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  text-align: center;
}
.stat {
  padding-block: var(--space-s);
  border-top: 1px solid var(--line-dark);
}
.stat__value {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: var(--gold); margin: 0 0 0.35rem;
}
.stat__label {
  font-size: 0.9rem; color: rgba(255,255,255,0.78); margin: 0;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------- Logo strips  */
/* Trust rail. Each logo gets an identical box and is fitted inside it, so a
   near-square mark and a very wide masthead read at the same optical weight.
   Sizing by height alone made the wide ones shrink to half the height of the
   square ones. All source files are transparent PNGs — no white boxes. */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.logo-strip img {
  height: clamp(38px, 4.6vw, 56px);
  width: 100%;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.88;
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.logo-strip img:hover { opacity: 1; transform: translateY(var(--lift)); }

/* Sponsors and the host mark sit a step larger — they are partners, not press
   mentions, and the hierarchy should say so. */
.logo-strip--color img {
  height: clamp(46px, 5.6vw, 68px);
  max-width: 190px;
  opacity: 1;
}

/* ------------------------------------------------------- Press marquee    */
/* A continuous left-to-right rail. The track is duplicated in the markup and
   translated by exactly -50%, so the loop is seamless. Pauses on hover and
   on focus so a keyboard user can read it, and stops entirely under
   reduced-motion, where it becomes a normal horizontal scroller. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-s);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 4vw, 3.5rem);
  animation: marqueeSlide 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.press-item {
  flex: none;
  width: clamp(190px, 20vw, 236px);
  display: grid;
  gap: var(--space-xs);
  justify-items: center;
  text-align: center;
  padding: var(--space-m) var(--space-s);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease),
              box-shadow var(--dur-m) var(--ease);
}
.press-item:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-sm); border-color: var(--line); }
.press-item img {
  height: 46px; width: 100%; max-width: 150px;
  object-fit: contain;
}
.press-item__kind {
  margin: 0;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--magenta-ink);
}
.press-item__name {
  margin: 0;
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.25; color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ------------------------------------------------------ Article cards     */
/* Real published coverage: outlet, date, headline, link. Distinct from the
   logo marquee, which is recognition rather than something to read. */
.article-grid {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.article-card {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--magenta);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease),
              border-left-color var(--dur-m) var(--ease);
}
.article-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow);
  border-left-color: var(--gold-deep);
}
.article-card__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline;
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
}
.article-card__outlet { color: var(--magenta-ink); }
.article-card__date   { color: var(--ink-soft); letter-spacing: 0.09em; }
.article-card__title {
  margin: 0;
  font-family: var(--ff-display); font-weight: 700;
  font-size: var(--step-1); line-height: 1.24; letter-spacing: -0.012em;
  color: var(--navy);
}
.article-card__excerpt { margin: 0; font-size: 0.95rem; color: var(--ink-soft); flex: 1; }
.article-card__cue {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 0.92rem; color: var(--magenta-ink);
  transition: gap var(--dur-s) var(--ease);
}
.article-card:hover .article-card__cue { gap: 0.8rem; }

.section--navy .article-card,
.cta-band .article-card { background: rgba(255,255,255,0.055); border-color: var(--line-dark); }
.section--navy .article-card__title { color: var(--white); }
.section--navy .article-card__excerpt { color: rgba(255,255,255,0.75); }
.section--navy .article-card__outlet,
.section--navy .article-card__cue { color: var(--gold); }
.section--navy .article-card__date { color: rgba(255,255,255,0.6); }

/* -------------------------------------------------------- Partners band   */
/* Label beside the rail rather than stacked above it — a different skeleton
   from the centred media section it follows, and it reclaims vertical space. */
.partners { display: grid; gap: var(--space-l); }
.partners__row {
  display: grid;
  grid-template-columns: minmax(120px, 168px) 1fr;
  gap: var(--space-m) var(--space-xl);
  align-items: center;
  padding-block: var(--space-m);
  border-top: 1px solid var(--line);
}
.partners__row:last-child { border-bottom: 1px solid var(--line); }
.partners__label {
  margin: 0;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; line-height: 1.5; color: var(--magenta-ink);
}
.partners .logo-strip { justify-items: start; justify-content: start; }
@media (max-width: 640px) {
  .partners__row { grid-template-columns: 1fr; gap: var(--space-s); }
  .partners .logo-strip { justify-items: center; }
}

/* ------------------------------------------------------------- Gallery   */
.gallery-grid {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  grid-auto-flow: dense;
}
.gallery-item {
  position: relative; margin: 0; padding: 0; overflow: hidden;
  border-radius: var(--radius); background: var(--sand-deep);
  border: 0; cursor: zoom-in; aspect-ratio: 1;
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease); }
.gallery-item:hover { box-shadow: var(--shadow); }
.gallery-item:hover img { transform: scale(var(--img-zoom)); }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 1 / 2.06; }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 2.06 / 1; }
@media (max-width: 560px) {
  .gallery-item--tall, .gallery-item--wide { grid-row: auto; grid-column: auto; aspect-ratio: 1; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(11, 2, 48, 0.94); padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 84vh; width: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,0.12); color: var(--white);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
  width: 48px; height: 48px; display: grid; place-items: center;
  cursor: pointer; font-size: 1.4rem; line-height: 1;
  transition: background var(--dur-s) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.28); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--prev { left: clamp(0.6rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(0.6rem, 3vw, 2rem); }
.lightbox__counter {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 0.85rem; letter-spacing: 0.1em;
}

/* ------------------------------------------------------------- Schedule  */
.schedule { display: grid; gap: 0; }
.schedule__row {
  display: grid; gap: clamp(0.5rem, 2vw, 2rem);
  grid-template-columns: minmax(140px, 200px) 1fr;
  padding-block: clamp(1.3rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.schedule__row:last-child { border-bottom: 1px solid var(--line); }
.schedule__time {
  font-family: var(--ff-display); font-weight: 700; font-size: var(--step-1);
  color: var(--magenta-ink); margin: 0;
}
.schedule__tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--navy);
  background: var(--gold); padding: 0.3em 0.7em; border-radius: 100px; margin-top: 0.5rem;
}
.schedule__body h3 { margin-bottom: 0.35rem; font-size: var(--step-1); }
.schedule__body p { margin: 0; color: var(--ink-soft); }
@media (max-width: 620px) { .schedule__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--ff-display); font-weight: 600; font-size: var(--step-1);
  color: var(--navy); padding: 1.25rem 0; line-height: 1.3;
}
.accordion__trigger:hover { color: var(--magenta-ink); }
.accordion__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid currentColor; display: grid; place-items: center; position: relative;
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.accordion__icon::before { width: 12px; height: 2px; }
.accordion__icon::after  { width: 2px; height: 12px; transition: transform var(--dur-s) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-m) var(--ease);
}
.accordion__panel > div { overflow: hidden; }
/* The trigger is wrapped in a heading for document outline, so the panel is not an
   adjacent sibling of the button — match on the item instead. */
.accordion__item.is-open > .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { padding-bottom: 1.4rem; color: var(--ink-soft); max-width: 68ch; margin: 0; }

/* ---------------------------------------------------------------- Forms  */
.form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.2rem; }
.field label {
  display: block; font-weight: 700; font-size: 0.92rem;
  margin-bottom: 0.45rem; color: var(--navy);
}
.field .req { color: var(--magenta-ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.85rem 1rem; background: var(--cream);
  border: 2px solid var(--sand-deep); border-radius: 12px;
  transition: border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--magenta); background: var(--white);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.form-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: 1rem; }

.newsletter { background: var(--navy-deep); color: var(--white); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.newsletter__form input {
  /* min-width:0 — a flex item defaults to min-width:auto and refuses to shrink
     below its intrinsic width, overflowing the viewport at 320px.
     Height is set explicitly rather than derived from padding + font metrics,
     so the fields and the Subscribe button line up exactly. */
  flex: 1 1 200px; min-width: 0; font-family: inherit; font-size: 1rem;
  min-height: var(--control-h); padding: 0 1.3rem; border-radius: 100px;
  border: 2px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); color: var(--white);
}
/* padding-block:0 — .btn centres its label with flex, so the shared height
   governs instead of the button's own vertical padding. */
.newsletter__form .btn { min-height: var(--control-h); padding-block: 0; }
.newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter__form input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.12); }

/* ------------------------------------------------------------ Contact    */
.contact-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.contact-detail {
  display: flex; gap: 1rem; align-items: flex-start; min-width: 0;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
.contact-detail__label {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--magenta-ink); margin: 0 0 0.25rem;
}
.contact-detail a { color: var(--navy); font-weight: 600; }

.social-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.social-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.25rem; border-radius: 100px;
  background: var(--navy); color: var(--white); text-decoration: none;
  font-weight: 600; font-size: 0.92rem;
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.social-btn:hover { background: var(--magenta); transform: translateY(var(--lift)); }
.social-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------- CTA    */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white); text-align: center;
  /* Uses the shared token so the seam above it matches every other section;
     a touch taller because it is the page's closing statement. */
  padding-block: calc(var(--section-pad) * 1.15);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35;
  background:
    radial-gradient(60% 90% at 20% 100%, rgba(203,17,131,0.55), transparent 60%),
    radial-gradient(50% 80% at 85% 0%, rgba(255,196,65,0.35), transparent 60%);
}
.cta-band h2 { font-size: var(--step-3); margin-bottom: 0.5em; text-wrap: balance; }
.cta-band .lede { margin-inline: auto; margin-bottom: 2rem; }

/* --------------------------------------------------------------- Footer  */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1.6fr 1fr 1fr;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { width: 72px; margin-bottom: 0.9rem; }
.footer-brand__name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.1;
  color: var(--white); margin: 0 0 0.15rem;
}
.footer-brand__sub {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 700; color: var(--gold); margin: 0 0 1rem;
}
.footer-brand__tagline {
  font-size: 0.95rem; max-width: 34ch;
  color: #C7B8E8; margin: 0;
}
.site-footer h3 {
  font-family: var(--ff-body); font-size: 0.74rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer-list a { text-decoration: none; font-size: 0.95rem; transition: color var(--dur-s) var(--ease); }
.footer-list a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between;
  font-size: 0.85rem; color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.72); }

.footer-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--gold); text-decoration: underline; }

/* ------------------------------------------------------- Media coverage  */
.media-grid {
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.media-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.9rem;
  border-top: 4px solid var(--magenta);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.media-card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.media-card__logo {
  height: 42px; width: auto; max-width: 170px;
  object-fit: contain; object-position: left center;
}
.media-card__outlet {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--magenta-ink); margin: 0;
}
.media-card h3 { margin: 0; font-size: var(--step-1); }
.media-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); flex: 1; }
/* Must out-specify `.media-card p` above, which would otherwise grey it out. */
.media-card p.media-card__outlet { color: var(--magenta-ink); flex: none; }

.press-quote {
  border-left: 4px solid var(--gold);
  padding: 0.4rem 0 0.4rem 1.4rem;
  font-family: var(--ff-display); font-style: italic;
  font-size: var(--step-1); line-height: 1.45; color: var(--navy);
}
.section--navy .press-quote { color: var(--white); }

/* ----------------------------------------------------------- Prose pages */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.4rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8rem; }
.prose ul { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--magenta-ink); font-weight: 600; }

/* ----------------------------------------------------------- Decorative  */
.divider-lotus { display: block; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); width: 54px; height: auto; }

/* --------------------------------------------------------------- Reveal  */
/* Deliberately understated: a 10px lift, one easing curve, one duration.
   A site that fades in continuously as you scroll reads as a template, so
   this is applied to section headers and one content group per section,
   never to every element.
   Only hide content when JS is present to un-hide it, or the page would
   render permanently blank if the script failed to load. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* A revealed group brings its children in on a short stagger, capped at the
   fifth child so a long grid never becomes a slow cascade.
   These use an animation, not a transition, on purpose: the children are
   cards that carry their own `transition` for hover, and setting `transition`
   here would override it — hover elevation would inherit the 560ms entrance
   timing and lose its shadow and border easing entirely. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.js .reveal-group > * { opacity: 0; }
.js .reveal-group.is-visible > * {
  /* opacity:1 is declared, not left to the animation's end state — if the
     animation never runs (backgrounded tab, animations unsupported) the
     children must still end up visible rather than stuck at zero. */
  opacity: 1;
  animation: riseIn var(--dur-l) var(--ease) both;
}
.js .reveal-group.is-visible > :nth-child(2) { animation-delay: var(--stagger); }
.js .reveal-group.is-visible > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.js .reveal-group.is-visible > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.js .reveal-group.is-visible > :nth-child(n + 5) { animation-delay: calc(var(--stagger) * 4); }

/* ------------------------------------------------------- Hero entrance    */
/* One orchestrated moment on load: each line arrives a beat after the one
   above it, walking the eye down to the buttons.
   Driven by a class and transitions rather than @keyframes. A keyframe with
   fill-mode:both never starts in a backgrounded tab, which left the hero
   stuck at opacity 0 until the tab was focused. A transition resolves to the
   visible state the moment the class lands, animated or not. */
.js .hero__inner > *,
.js .page-hero__intro > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.js .hero__inner.is-ready > *,
.js .page-hero__intro.is-ready > * { opacity: 1; transform: none; }

.js .hero__inner.is-ready > :nth-child(2) { transition-delay: 80ms; }
.js .hero__inner.is-ready > :nth-child(3) { transition-delay: 160ms; }
.js .hero__inner.is-ready > :nth-child(4) { transition-delay: 250ms; }
.js .hero__inner.is-ready > :nth-child(5) { transition-delay: 340ms; }

.js .page-hero__intro.is-ready > :nth-child(2) { transition-delay: 70ms; }
.js .page-hero__intro.is-ready > :nth-child(3) { transition-delay: 140ms; }
.js .page-hero__intro.is-ready > :nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-group > *,
  .js .reveal-group.is-visible > *,
  .js .hero__inner > *,
  .js .page-hero__intro > * {
    opacity: 1; transform: none; transition: none; animation: none;
  }
}

/* ------------------------------------------------ Component refinements   */
/* Replaces the last of the one-off inline styles so every page draws from
   the same system. */

.event-bar .h-section { margin-bottom: var(--space-m); }

.contact-detail p,
.event-item p,
.accordion__item h3,
.media-card h3,
.involve h3 { margin-bottom: 0; }

.contact-detail .event-item__icon { background: rgba(203, 17, 131, 0.1); }

.feature__sub {
  font-weight: 700; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.form-note--dark { color: rgba(255, 255, 255, 0.62); }

.schedule__tag--free  { background: var(--magenta); color: var(--white); }
.schedule__tag--close { background: var(--navy);    color: var(--white); }

/* Founder signature block */
.signature { margin: var(--space-l) 0 0; }
.signature figcaption { margin-top: var(--space-2xs); }
.signature__name {
  display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.01em; color: var(--navy);
}
.signature__role {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--magenta-ink); font-weight: 700;
}

/* Standalone centred pages (404, thank-you) */
.page-center {
  min-height: 68vh; display: grid; place-items: center; text-align: center;
}
.page-center--full { min-height: 100vh; }
.page-center__mark { margin: 0 auto var(--space-m); }

.footer-bottom--bare { margin-top: 0; border-top: 0; }

.contact-detail__meta { font-size: 0.92rem; color: var(--ink-soft); }
.contact-detail--first { margin-top: var(--space-l); }
.social-intro { font-size: 0.95rem; color: var(--ink-soft); }

/* ------------------------------------------------- Mobile, deliberately   */
@media (max-width: 720px) {
  /* Tighter vertical rhythm — desktop section padding reads as dead air on a
     phone, where the viewport does the framing for you. */
  :root {
    --section-pad:       clamp(3rem, 11vw, 4rem);
    --section-pad-tight: clamp(2.25rem, 8vw, 3rem);
    --head-gap:          clamp(1.75rem, 6vw, 2.25rem);
  }

  /* Primary actions become full-width bars: unmistakable targets, and they
     stop the two-button rows from breaking into a ragged stack. */
  .btn-row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .btn-row .btn { width: 100%; }
  .hero .btn-row { max-width: 22rem; }
  .cta-band .btn-row, .section-head--center + .btn-row { margin-inline: auto; max-width: 22rem; }

  /* Cards go wider and shorter — a 4:5 crop stacked vertically scrolls forever. */
  .card__media { aspect-ratio: 16 / 10; }
  .card__body { padding: var(--space-s) var(--space-s) var(--space-m); }

  /* Editorial images sit edge-to-edge rather than floating in a narrow column. */
  .split { gap: var(--space-l); }
  .split__media img { border-radius: var(--radius); }

  .feature__media img { min-height: 0; aspect-ratio: 3 / 2; }
  .feature__body { padding: var(--space-m) var(--space-s) var(--space-l); }

  .media-card, .involve { padding: var(--space-m) var(--space-s); }

  /* Two-up on phones so each mark keeps a usable size rather than shrinking to
     fit five across. Heights stay generous — these are credibility marks. */
  .logo-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--space-m); }
  .logo-strip img { height: clamp(34px, 9vw, 44px); max-width: 100%; }
  .logo-strip--color img { height: clamp(40px, 11vw, 54px); }

  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__form .btn { width: 100%; }
  /* flex-basis follows the main axis: in a column the inputs' `flex: 1 1 200px`
     basis becomes a 200px HEIGHT, not a width. Reset it here. */
  .newsletter__form input { flex: 0 0 auto; }

  .site-footer { padding-block: var(--space-2xl) var(--space-m); }
  .footer-bottom { flex-direction: column; gap: var(--space-2xs); }
}

@media (max-width: 900px) {
  /* Full-height nav sheet with room to breathe, not a cramped dropdown. */
  .nav { padding-block: var(--space-s) var(--space-l); }
  .nav__link { padding-block: 0.85rem; font-size: 1.05rem; letter-spacing: -0.01em; }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
}

/* --------------------------------------------------------------- Utils   */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--stack-space, 1.2rem); }
.mt-s  { margin-top: var(--space-s); }
.mt-m  { margin-top: var(--space-m); }
.mt-l  { margin-top: var(--space-l); }
.mt-lg { margin-top: var(--space-xl); }
.eyebrow--center { justify-content: center; }
/* Trust rails stack with a consistent gap instead of per-instance clamps. */
.logo-strip:not(:last-child) { margin-bottom: var(--space-xl); }
.logo-strip + .eyebrow { margin-top: 0; }
.badge-pill {
  display: inline-block; background: var(--gold); color: var(--navy);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45em 0.95em; border-radius: 100px;
}