/* ============================================================================
   Alderwood Dance Spectrum Competition Team Booster Club
   Theme stylesheet — colors and motifs inspired by the club logo
   (teal, lavender, soft blue, sparkles, flowing ribbon curves).

   Most visual tweaks can be made just by changing the variables in :root below.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens (change these to re-theme the whole site)
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors pulled straight from the logo */
  --teal: #40c5ca;
  --teal-dark: #2a9ba0;
  --teal-deep: #1f7c81;
  --lavender: #aa9cd2;
  --lavender-dark: #8a78bd;
  --soft-blue: #8faccf;
  --soft-blue-dark: #6d90ba;

  /* A gentle warm accent to keep things inviting (used sparingly for donate CTAs) */
  --coral: #ff8f7a;
  --coral-dark: #f2705a;

  /* Warm neutrals */
  --cream: #fdf8f4;
  --cream-2: #f7eef6;
  --ink: #2f2a44;        /* deep plum-charcoal for text */
  --ink-soft: #5b5470;
  --muted: #8a8399;
  --line: #ece6f1;
  --white: #ffffff;

  /* Gradients */
  --grad-brand: linear-gradient(120deg, var(--teal) 0%, var(--soft-blue) 45%, var(--lavender) 100%);
  --grad-brand-soft: linear-gradient(120deg, #e7f8f8 0%, #eef3fb 50%, #f3eefb 100%);
  --grad-hero: linear-gradient(160deg, #eafafa 0%, #eef2fb 40%, #f6eefb 75%, #fdf1ee 100%);

  /* Typography */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing / shape */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(47, 42, 68, 0.08);
  --shadow: 0 14px 40px rgba(47, 42, 68, 0.12);
  --shadow-lg: 0 24px 60px rgba(47, 42, 68, 0.16);
  --container: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--teal-deep); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--lavender-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
p { margin: 0 0 1rem; }

/* ----------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(2.75rem, 5.5vw, 4.75rem); position: relative; }
/* Tight, consistent space above section headers (matches the Mission section) */
.section--flush-top { padding-top: 1rem; }
.section--tint { background: var(--grad-brand-soft); }
.section--cream { background: var(--cream); }
.section--plum { background: #2b2740; color: #efeaf7; }
.section--plum h2, .section--plum h3 { color: #fff; }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 640px; }

/* Eyebrow label above section titles */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 0.9rem;
}
.eyebrow::before { content: "✦"; color: var(--lavender-dark); font-size: 0.9rem; }
.eyebrow::after { content: "✦"; color: var(--lavender-dark); font-size: 0.9rem; }
.section--plum .eyebrow { color: #7fe0e4; }

.section-head { max-width: 680px; margin-bottom: 2.8rem; }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; }

.lead { font-size: 1.2rem; color: var(--ink-soft); }

/* Sparkle decoration */
.sparkle { color: var(--lavender); }
.text-teal { color: var(--teal-deep); }
.text-lav { color: var(--lavender-dark); }

/* ----------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--grad-brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.7rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--donate { --btn-bg: linear-gradient(120deg, var(--coral) 0%, #ff7fa6 100%); }
.btn--ghost {
  --btn-fg: var(--teal-deep);
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(64, 197, 202, 0.5);
}
.btn--ghost:hover { color: var(--teal-deep); background: rgba(64, 197, 202, 0.08); box-shadow: inset 0 0 0 2px var(--teal); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--teal-deep); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------------------
   5. Site header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 244, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { height: 54px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.brand__sub { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dark); font-weight: 800; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.98rem;
}
.nav__links a:hover { color: var(--ink); background: rgba(138, 120, 189, 0.12); }
.nav__links a.is-active { color: var(--teal-deep); background: rgba(64, 197, 202, 0.14); }
.nav__cta { display: flex; align-items: center; gap: 0.6rem; }
.nav__cta-mobile { display: none; }

.nav__toggle {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--ink);
}
.nav__toggle svg { width: 28px; height: 28px; }

/* ----------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--grad-hero);
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(138, 120, 189, 0.25);
  color: var(--lavender-dark);
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em;
  padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  margin-bottom: 1.3rem;
}
.hero h1 { margin-bottom: 1rem; }
.hero h1 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: 1.22rem; color: var(--ink-soft); max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }
.hero__stats { display: flex; gap: 2.2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero__stat .n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--teal-deep); line-height: 1; }
.hero__stat .l { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; letter-spacing: 0.04em; }

.hero__art {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__logo-card {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  width: 100%;
  max-width: 460px;
}
.hero__logo-card img { width: 100%; height: auto; }

/* Floating sparkles */
.floaty { position: absolute; color: var(--lavender); opacity: 0.85; animation: floaty 6s ease-in-out infinite; }
.floaty--2 { color: var(--teal); animation-delay: 1.5s; }
.floaty--3 { color: var(--soft-blue); animation-delay: 3s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .floaty { animation: none; }
  html { scroll-behavior: auto; }
}

/* Decorative blobs */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: 0; pointer-events: none; }
.blob--teal { background: var(--teal); }
.blob--lav { background: var(--lavender); }

/* ----------------------------------------------------------------------------
   7. Wave / ribbon dividers (echoes the logo's flowing arcs)
   -------------------------------------------------------------------------- */
.wave { display: block; width: 100%; height: auto; line-height: 0; }

/* ----------------------------------------------------------------------------
   8. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--teal-deep);
  margin-bottom: 1rem;
}
.card__icon svg { width: 28px; height: 28px; }

/* Feature list */
.features { margin-top: 1rem; }

/* ----------------------------------------------------------------------------
   9. Events
   -------------------------------------------------------------------------- */
.event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.5rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.event__date {
  flex-shrink: 0;
  width: 82px; text-align: center;
  background: var(--grad-brand);
  color: #fff; border-radius: var(--radius-sm);
  padding: 0.7rem 0.4rem;
  box-shadow: var(--shadow-sm);
}
.event__date .m { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.95; }
.event__date .d { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.event__body h3 { margin-bottom: 0.35rem; }
.event__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; color: var(--ink-soft); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; }
.event__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.event__meta svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--lavender-dark); }
.event__body p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.event__tag {
  align-self: start;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: var(--radius-pill);
  background: rgba(170, 156, 210, 0.16); color: var(--lavender-dark);
  white-space: nowrap;
}
.event__tag--fundraiser { background: rgba(255, 143, 122, 0.16); color: var(--coral-dark); }
.event__tag--competition { background: rgba(64, 197, 202, 0.16); color: var(--teal-deep); }
.event__tag--meeting { background: rgba(143, 172, 207, 0.18); color: var(--soft-blue-dark); }

/* Optional flyer image (only present when a row has a Flyer Image URL). */
.event--flyer { grid-template-columns: auto auto 1fr auto; }
.event__flyer {
  display: block;
  width: 96px; height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--cream, #f7f5f2);
  transition: transform 0.25s var(--ease);
}
.event__flyer:hover { transform: scale(1.04); }
.event__flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event__flyer { cursor: zoom-in; }

/* Full-size flyer overlay (opened by clicking a flyer thumbnail). */
.flyer-lb {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
.flyer-lb.is-open { opacity: 1; }
/* `display:grid` above would otherwise beat the hidden attribute's default
   `display:none`, leaving an invisible full-screen layer eating every click. */
.flyer-lb[hidden] { display: none; }
.flyer-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 24, 45, 0.82);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.flyer-lb__panel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  max-width: min(920px, 100%);
  max-height: 100%;
  transform: scale(0.97);
  transition: transform 0.22s var(--ease);
}
.flyer-lb.is-open .flyer-lb__panel { transform: scale(1); }
.flyer-lb__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: var(--white);
}
.flyer-lb__caption {
  margin: 0;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.flyer-lb__close {
  position: absolute; top: -0.6rem; right: -0.6rem;
  z-index: 1;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.18s var(--ease);
}
.flyer-lb__close:hover { transform: scale(1.08); }
.flyer-lb__close svg { width: 20px; height: 20px; }
body.has-lightbox { overflow: hidden; }
@media (max-width: 640px) {
  .flyer-lb__close { top: -0.4rem; right: -0.4rem; width: 38px; height: 38px; }
  .flyer-lb__img { max-height: calc(100vh - 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .flyer-lb, .flyer-lb__panel, .flyer-lb__close { transition: none; }
}

/* Optional "More info & sign-up" link (only when a row has a Link). */
.event__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.92rem; font-weight: 800;
  color: var(--teal-deep);
  text-decoration: none;
}
.event__link:hover { text-decoration: underline; }
.event__link svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.event__link:hover svg { transform: translateX(3px); }

/* Loading / empty / "coming soon" placeholder in place of the event list. */
.events-note {
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.6rem;
  text-align: center;
  color: var(--ink-soft);
}
.events-note p { margin: 0; }
.events-note__title {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
  color: var(--ink); margin-bottom: 0.4rem !important;
}
.events-note__spinner {
  display: inline-block; width: 26px; height: 26px;
  margin-bottom: 0.7rem;
  border: 3px solid rgba(64, 197, 202, 0.25);
  border-top-color: var(--teal-deep);
  border-radius: 50%;
  animation: events-spin 0.8s linear infinite;
}
@keyframes events-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .events-note__spinner { animation-duration: 2.4s; }
}

/* ----------------------------------------------------------------------------
   10. Team roster
   -------------------------------------------------------------------------- */
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.dancer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  display: flex; flex-direction: column;
}
.dancer:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.dancer__photo {
  aspect-ratio: 4 / 3;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.dancer__photo svg, .dancer__photo img { width: 100%; height: 100%; object-fit: cover; }
.dancer__level {
  position: absolute; top: 0.8rem; left: 0.8rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9); color: var(--teal-deep);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.dancer__body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.dancer__name { margin-bottom: 0.15rem; }
.dancer__role { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lavender-dark); margin-bottom: 0.7rem; }
.dancer__bio { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 1rem; }
.dancer__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-size: 0.75rem; font-weight: 800;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--cream-2); color: var(--lavender-dark);
}

/* ----------------------------------------------------------------------------
   11. Instagram-style gallery
   -------------------------------------------------------------------------- */
.ig-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.ig-handle { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 800; color: var(--ink); }
.ig-handle .ig-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-brand); display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm);
}
.ig-handle .ig-avatar svg { width: 26px; height: 26px; }
.ig-handle small { display: block; color: var(--muted); font-weight: 700; }

.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.ig-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  isolation: isolate;
}

/* Real photographs coming from the spreadsheet. */
.ig-tile--photo { background: rgba(143, 172, 207, 0.16); }
.ig-tile--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.ig-tile--photo:hover img { transform: scale(1.05); }

/* Instagram's own embedded posts, used for rows with no picture of their own.
   Their heights vary (carousels and long captions run taller), so they're laid
   out in columns that pack together rather than a grid that would leave gaps. */
.ig-embeds {
  column-count: 3;
  column-gap: 1.1rem;
}
.ig-embeds .instagram-media {
  margin: 0 0 1.1rem !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  break-inside: avoid;
}

.ig-tile__glyph { font-size: 2.1rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18)); }
.ig-tile__cap {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  padding: 0.9rem 0.8rem 0.7rem;
  font-size: 0.82rem; font-weight: 700;
  background: linear-gradient(to top, rgba(31, 28, 48, 0.72), transparent);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.ig-tile:hover .ig-tile__cap { opacity: 1; }
.ig-tile__badge {
  position: absolute; top: 0.6rem; right: 0.6rem;
  z-index: 2;
  background: rgba(255,255,255,0.9); color: var(--teal-deep);
  border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center;
}
.ig-tile__badge svg { width: 16px; height: 16px; }

.ig-note {
  margin-top: 1.6rem;
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: rgba(143, 172, 207, 0.12);
  border: 1px dashed rgba(109, 144, 186, 0.5);
  border-radius: var(--radius);
  padding: 1rem 1.2rem; color: var(--ink-soft); font-size: 0.92rem;
}
.ig-note strong { color: var(--ink); }
.ig-note svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--soft-blue-dark); margin-top: 2px; }

/* ----------------------------------------------------------------------------
   12. Donate
   -------------------------------------------------------------------------- */
.donate-cta {
  position: relative;
  background: var(--grad-brand);
  color: #fff; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  box-shadow: var(--shadow-lg);
}
.donate-cta h2 { color: #fff; }
.donate-cta p { color: rgba(255, 255, 255, 0.92); }
.donate-cta .btn--white { color: var(--teal-deep); }

.donate-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
.amount {
  border: 2px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 1rem 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: all 0.18s var(--ease);
  text-align: center;
}
.amount:hover { border-color: var(--teal); }
.amount.is-active { border-color: var(--teal); background: rgba(64, 197, 202, 0.1); color: var(--teal-deep); }
.amount small { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 800; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: 0.85rem 1rem;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--cream);
  transition: border-color 0.18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: #fff; }
.input-money { position: relative; }
.input-money span { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--ink-soft); }
.input-money input { padding-left: 2rem; }

.give-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; }
.give-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.give-list .tick {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.2); display: grid; place-items: center; color: #fff;
}
.give-list .tick svg { width: 16px; height: 16px; }

.tax-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-pill); padding: 0.5rem 1rem;
  font-weight: 800; font-size: 0.9rem; margin-bottom: 1.3rem;
}

/* Zeffy donation form embed */
.donate-card--embed { padding: clamp(1.2rem, 3vw, 1.8rem); max-width: 940px; margin-inline: auto; }
.zeffy-embed {
  position: relative;
  width: 100%;
  height: 920px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
}
.zeffy-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zeffy-fallback { text-align: center; }

/* Supporting info shown beneath the donation form */
.donate-info {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  align-items: start; margin-top: 2.4rem;
}

@media (max-width: 900px) {
  .zeffy-embed { height: 1050px; }
  .donate-info { grid-template-columns: 1fr; }
}

/* Employer donation-matching message (donate page + thank-you panel) */
.match {
  display: flex; gap: 1rem; align-items: flex-start; text-align: left;
  margin-top: 1.2rem; padding: 1.1rem 1.2rem;
  background: var(--grad-brand-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.match__icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,0.75); color: var(--teal-deep);
  display: grid; place-items: center;
}
.match__icon svg { width: 22px; height: 22px; }
.match__text { min-width: 0; }
.match h4 { margin: 0 0 0.3rem; font-size: 1.02rem; }
.match p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }
.match__find { margin-top: 0.7rem !important; font-size: 0.86rem !important; }
.match__name {
  margin-top: 0.35rem !important; font-weight: 800;
  color: var(--ink) !important; font-size: 0.9rem !important;
  overflow-wrap: anywhere;
}
.match__ein { display: block; font-weight: 600; color: var(--ink-soft); font-size: 0.84rem; }
.match--thanks { margin-top: 1.4rem; }

@media (max-width: 560px) {
  .match { flex-direction: column; gap: 0.75rem; padding: 1rem; }
}

.notice {
  font-size: 0.85rem; color: var(--ink-soft);
  background: var(--cream-2); border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem; margin-top: 1.2rem;
}

/* mock badge shown on placeholder interactive bits */
.mock-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral-dark); background: rgba(255, 143, 122, 0.15);
  border-radius: var(--radius-pill); padding: 0.25rem 0.65rem; vertical-align: middle;
}

/* ----------------------------------------------------------------------------
   13. About / info blocks
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list .ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-brand-soft); color: var(--teal-deep); display: grid; place-items: center;
}
.info-list .ico svg { width: 22px; height: 22px; }
.info-list h4 { margin: 0 0 0.15rem; }
.info-list p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.board-card { text-align: center; }
.board-card .avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1rem;
  background: var(--grad-brand); display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: #262238; color: #cbc4dd; padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #cbc4dd; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 88px; background: rgba(255,255,255,0.9); border-radius: var(--radius); padding: 0.6rem; }
.footer-brand p { margin-top: 1rem; font-size: 0.95rem; color: #a79fbf; max-width: 22rem; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2.6rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem;
  font-size: 0.85rem; color: #9990b3;
}

/* ----------------------------------------------------------------------------
   15. Small utilities
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 800; font-size: 0.85rem;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
  background: var(--cream-2); color: var(--lavender-dark);
}

/* Scroll-reveal (progressive enhancement).
   Content is fully visible without JS; only the ".js" class (set by an inline
   snippet in each page's <head>) enables the hidden-then-reveal behavior, so
   content is never stuck invisible if scripts fail. */
.reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 420px; margin-inline: auto; }
  .split { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .roster { grid-template-columns: repeat(2, 1fr); }
  .board-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-embeds { column-count: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__cta-mobile { display: block; }
  .nav__links {
    position: fixed; top: 0; right: 0; bottom: auto;
    height: 100vh;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    padding: 5rem 1.4rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { padding: 0.9rem 1rem; font-size: 1.05rem; }
  .nav.is-open .nav__toggle { position: relative; z-index: 120; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .roster { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-embeds { column-count: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .event { grid-template-columns: auto 1fr; }
  .event__tag { grid-column: 2; justify-self: start; }
  .event--flyer { grid-template-columns: auto 1fr; }
  .event--flyer .event__flyer { grid-column: 2; width: 100%; height: 150px; }
  .event--flyer .event__body { grid-column: 1 / -1; }
  .amount-grid { grid-template-columns: repeat(3, 1fr); }
  .hero__stats { gap: 1.4rem; }
  .brand__text { display: none; }
}

/* ----------------------------------------------------------------------------
   17. Full-width logo hero (dancing stars)
   Full-bleed banner shown under the top bar on the home page: the club logo
   sitting right on the gradient, with brand-colored sparkle stars that gently
   "dance" around and over it.
   -------------------------------------------------------------------------- */
.hero--logo { padding-top: 0; padding-bottom: 0; }
.logo-hero__stage {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding: clamp(0.5rem, 2vw, 1.4rem) 1rem;
  display: grid;
  justify-items: center;
  gap: 0;
}
.logo-hero__figure {
  position: relative;
  z-index: 2;
  width: clamp(208px, 60vw, 1200px);
}
.logo-hero__figure img { width: 100%; height: auto; display: block; }
.logo-hero__text {
  position: relative;
  z-index: 2;
  width: clamp(180px, 40vw, 780px);
  margin-top: clamp(-2.5rem, -2vw, -0.5rem);
}
.logo-hero__text img { width: 100%; height: auto; display: block; }

.hstar {
  position: absolute;
  z-index: 3;
  display: block;
  aspect-ratio: 1 / 1;
  color: var(--lavender);
  filter: drop-shadow(0 6px 10px rgba(47, 42, 68, 0.14));
  animation: hstar-dance 6s var(--ease) infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
.hstar svg { width: 100%; height: 100%; display: block; }

/* Sizes and positions are percentages of the figure, so the whole constellation
   scales and stays anchored to the dancers at any screen size. Kept at/below the
   figure top so no dead headroom is needed above the logo. */
.hstar--1 { width: 3.6%; top: 8%;     left: 12%;   color: var(--lavender-dark); animation-duration: 6.5s; }
.hstar--2 { width: 4.4%; top: 2%;     right: 30%;  color: var(--teal);          animation-duration: 7.6s; animation-delay: .6s; }
.hstar--3 { width: 2.6%; top: 36%;    right: 2%;   color: var(--soft-blue-dark); animation-duration: 5.4s; animation-delay: 1.2s; }
.hstar--4 { width: 3%;   bottom: -2%; left: 15%;   color: var(--soft-blue);      animation-duration: 6.8s; animation-delay: .3s; }
.hstar--5 { width: 3.8%; bottom: 8%;  right: 13%;  color: var(--lavender);       animation-duration: 7.1s; animation-delay: 1.5s; }
.hstar--6 { width: 2.4%; top: 30%;    left: 3%;    color: var(--teal-dark);      animation-duration: 5s;   animation-delay: .9s; }

@keyframes hstar-dance {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);      opacity: .82; }
  25%      { transform: translate3d(0, -6px, 0) rotate(10deg) scale(1.15); opacity: 1; }
  50%      { transform: translate3d(3px, -2px, 0) rotate(-6deg) scale(.92); opacity: .78; }
  75%      { transform: translate3d(-2px, -7px, 0) rotate(8deg) scale(1.1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hstar { animation: none; }
}

/* Center the welcome copy that now sits beneath the logo banner */
.hero__copy.center .hero__lead { margin-inline: auto; }
.hero__copy.center .hero__actions,
.hero__copy.center .hero__stats { justify-content: center; }

/* Mission intro: give the heading room to stay on one line on larger screens
   (widen its container a bit and ease the title size), while keeping the body
   paragraph at a comfortable reading width. */
.mission-intro .section-head { max-width: 840px; }
.mission-intro .section-head h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
.mission-intro .section-head p { max-width: 640px; margin-inline: auto; }

/* ----------------------------------------------------------------------------
   18. Sponsors
   -------------------------------------------------------------------------- */
.sponsors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

/* Centered variant for showing just a few sponsors (e.g. the home-page
   platinum preview), so 1–2 cards sit centered instead of hugging the left. */
.sponsors--center {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
}

/* Sponsors grouped by tier (used on the full Sponsors page). */
.sponsor-groups { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
.sponsor-group__title {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lavender-dark);
  margin: 0 0 1.2rem;
}
.sponsor-group__title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.sponsor {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sponsor:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.sponsor__logo {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  padding: 1.4rem;
  background: var(--grad-brand-soft);
  border-bottom: 1px solid var(--line);
}
.sponsor__logo img, .sponsor__logo svg { width: 100%; height: 100%; max-height: 132px; object-fit: contain; }
.sponsor__logo[aria-disabled="true"] { cursor: default; }
.sponsor__body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.sponsor__tier {
  align-self: flex-start;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  margin-bottom: 0.6rem;
  background: var(--cream-2); color: var(--lavender-dark);
}
.sponsor__tier--platinum { background: rgba(143, 172, 207, 0.18); color: var(--soft-blue-dark); }
.sponsor__tier--gold     { background: rgba(255, 143, 122, 0.16); color: var(--coral-dark); }
.sponsor__tier--silver   { background: rgba(138, 131, 153, 0.16); color: #6c6480; }
.sponsor__tier--community { background: rgba(64, 197, 202, 0.16);  color: var(--teal-deep); }
.sponsor__name { margin-bottom: 0.3rem; }
.sponsor__blurb { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 1rem; }
.sponsor__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 800; font-size: 0.95rem; color: var(--teal-deep);
}
.sponsor__link svg { width: 16px; height: 16px; }
.sponsor:hover .sponsor__link { color: var(--lavender-dark); }
.sponsor__link--muted { color: var(--muted); font-weight: 700; }

@media (max-width: 960px) {
  .sponsors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sponsors { grid-template-columns: 1fr; }
}