/* ===================================================== subpages */
/* Note: .subpage padding-top is set in the shader-banner section below. */
.page-foot-note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ----- legal / prose document ----- */
.doc {
  max-width: 46rem;
  padding-bottom: 40px;
}
.doc section {
  margin-bottom: 48px;
}
/* hairline between numbered chapters — same separation language as the
   section kickers on the marketing pages */
.doc section + section {
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.doc h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.doc h2 .n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  letter-spacing: 0.1em;
}
.doc h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 10px;
}
.doc p {
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.doc ul {
  margin: 0 0 14px 0;
  padding-left: 22px;
  color: var(--ink-soft);
}
.doc li {
  margin-bottom: 8px;
}
.doc a {
  color: var(--signal);
  text-underline-offset: 3px;
}
.doc .todo {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  background: #ecdca0;
  color: #5a4a10;
  font-size: 0.85em;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* ----- team ----- */
.team-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.member {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.member:hover {
  transform: translateY(-5px);
  border-color: #d2d2cd;
  z-index: 1;
  box-shadow: 0 24px 50px rgba(20, 20, 19, 0.1);
}

.member .photo {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint, #e9e9e5);
  border-bottom: 1px solid var(--hairline);
}

.member .photo .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.member:hover .photo .portrait {
  transform: scale(1.035);
}
.member .photo .tag {
  z-index: 2;
}

.member .photo .glyph {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1;
  font-size: clamp(3rem, 9vw, 5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20, 20, 19, 0.2);
  transition:
    -webkit-text-stroke-color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.member:hover .photo .glyph {
  -webkit-text-stroke-color: var(--signal);
  transform: scale(1.07);
}
.member .photo .tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  background: rgba(244, 244, 242, 0.85);
  padding: 3px 8px;
}

.member .info {
  padding: 22px 22px 24px;
}
.member .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.member .role {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.member .bio {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.member .links {
  margin-top: 16px;
  padding-top: 14px;
  display: flex;
  gap: 18px;
  border-top: 1px solid var(--hairline);
}
.member .links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.member .links a:hover {
  color: var(--signal);
}
.member .accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.member:hover .accent {
  transform: scaleX(1);
}

/* open-roles CTA panel */
.team-cta {
  margin-top: 48px;
  padding: 40px;
  border: 1px solid var(--hairline);
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 700px) {
  .team-cta {
    grid-template-columns: 1fr auto;
    gap: 40px;
    padding: 48px;
  }
}
.team-cta .eyebrow {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  color: var(--grey);
  letter-spacing: 0.2em;
}
.team-cta h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
}
.team-cta p {
  margin-top: 12px;
  max-width: 38rem;
  color: var(--ink-soft);
}
.team-cta .btn {
  white-space: nowrap;
}

.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover {
  background: var(--ink-soft);
}

.team-note {
  margin-top: 28px;
  font-size: 13px;
  color: var(--grey);
}

/* ---- numbered step timeline (volunteering: how to become a volunteer) ---- */
.steps {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 8px;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 26px;
  padding: 0 0 40px;
}
.step:last-child {
  padding-bottom: 0;
}
/* connecting line running down behind the nodes */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.step-n {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--signal-soft);
  background: var(--surface);
  border: 1px solid var(--line);
}
.step-body {
  padding-top: 5px;
}
.step-body .step-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 8px;
}
.step-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  letter-spacing: -0.02em;
}
.step-body p {
  margin-top: 10px;
  max-width: 46rem;
  color: var(--txt-soft);
}
.step-body .step-meta {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--txt-dim);
}
.step-body .step-meta a {
  color: var(--signal-soft);
  text-decoration: none;
}
.step-body .step-meta a:hover {
  text-decoration: underline;
}

/* ---- feature cards (builders: what you get) ---- */
.feature-cards {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 820px) {
  .feature-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.fcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 30px 28px;
  transition:
    border-color 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.fcard:hover {
  border-color: var(--signal);
  transform: translateY(-3px);
}
.fcard .fkicker .fnum {
  transition: color 0.25s ease;
}
.fcard:hover .fkicker .fnum {
  color: var(--signal);
}
.fcard .fkicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.fcard .fkicker .fnum {
  color: var(--signal-soft);
}
.fcard h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.fcard p {
  margin-top: 14px;
  color: var(--txt-soft);
  flex: 1;
}
.fcard .fmeta {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--txt-dim);
}
@media (prefers-reduced-motion: reduce) {
  .fcard:hover {
    transform: none;
  }
}

/* back link on subpages */
.back {
  display: inline-block;
  margin-bottom: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.back:hover {
  color: var(--ink);
}

/* ===================================================== shader banner (association pages) */
.subpage {
  padding-top: 0;
}
.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: flex-end;
  min-height: 44vh;
  padding-top: 128px;
}
@media (min-width: 768px) {
  .page-banner {
    min-height: 50vh;
    padding-top: 148px;
  }
}
.dither-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.page-banner .banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 19, 0.5),
    rgba(20, 20, 19, 0.22) 45%,
    rgba(20, 20, 19, 0.82)
  );
}
.banner-inner {
  position: relative;
  width: 100%;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .banner-inner {
    padding-bottom: 64px;
  }
}
.page-banner .back {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 26px;
}
.page-banner .back:hover {
  color: #fff;
}
.page-banner .eyebrow {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.6);
}
.page-banner h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.page-banner .lede {
  margin-top: 22px;
  max-width: 42rem;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.page-banner .page-foot-note {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.5);
}
.banner-cta {
  margin-top: 30px;
}
@media (min-width: 768px) {
  .banner-cta {
    margin-top: 36px;
  }
}
.subpage-body {
  padding-top: 72px;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  .subpage-body {
    padding-top: 96px;
  }
}

/* The numbered section dividers used to provide the break here; restore a
   clear gap between the lead section and the step timeline / feature cards. */
.subpage-body .steps,
.subpage-body .feature-cards + .cols {
  margin-top: 56px;
}
@media (min-width: 768px) {
  .subpage-body .steps,
  .subpage-body .feature-cards + .cols {
    margin-top: 80px;
  }
}

/* ===================================================== home: richer sections */

/* mid-page dithering accent band (matches the banner shader) */
.accent-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 42vh;
  padding: 96px 0;
}
.accent-band .banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(20, 20, 19, 0.72),
    rgba(20, 20, 19, 0.28) 60%,
    rgba(20, 20, 19, 0.65)
  );
}
.accent-inner {
  position: relative;
  width: 100%;
}
.accent-quote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.2vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
.accent-quote .em {
  color: #9aa6ff;
}

/* "more coming" event row */
.event.event-soon {
  align-items: center;
}
.event.event-soon .desc {
  margin: 0;
  color: var(--grey);
}

/* =====================================================================
     DARK THEME OVERRIDES — these win over the light-palette defaults
     defined earlier (tokens themselves now live in the single :root above).
     ===================================================================== */

/* soft body copy across sections */
.cols p,
.events-intro,
.doc p,
.doc ul,
.doc li,
.team-cta p,
.dark .body {
  color: var(--txt-soft);
}
.member .name {
  color: var(--txt);
}
.member .bio {
  color: var(--txt-soft);
}

/* eyebrows */
.eyebrow {
  border-top-color: var(--line);
  color: var(--txt-dim);
}

/* events list */
.event-list {
  border-top-color: var(--line);
}
.event {
  border-bottom-color: var(--line);
}
.event .idx,
.event .partners,
.status {
  color: var(--txt-dim);
}
.status .dot {
  background: var(--line);
}
.status .dot.up {
  background: var(--signal);
}

/* community role chips */
.roles li {
  border-color: var(--line);
  color: var(--txt-soft);
}
.roles li:hover {
  border-color: var(--txt);
  color: var(--txt);
}

/* quiet underlined links */
.link-quiet {
  text-decoration-color: var(--line);
}

/* the ink button would disappear on dark — make it the accent */
.btn-ink {
  background: var(--signal);
  color: #fff;
}
.btn-ink:hover {
  background: var(--signal-soft);
}

/* accent band highlight */
.accent-quote .em {
  color: var(--signal-soft);
}

/* subpage prose */
.back {
  color: var(--txt-dim);
}
.back:hover {
  color: var(--txt);
}
.doc h2 .n {
  color: var(--txt-dim);
}
.doc a {
  color: var(--signal-soft);
}
.doc .todo {
  background: #2a2410;
  color: #e7cf7a;
}

/* team cards */
.member {
  background: var(--surface);
  border-color: var(--line);
}
.member:hover {
  border-color: #3a3a3d;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
.member .photo {
  background: var(--surface-2);
  border-bottom-color: var(--line);
}
.member .photo .glyph {
  -webkit-text-stroke-color: rgba(241, 241, 238, 0.2);
}
.member .photo .tag {
  background: rgba(12, 12, 13, 0.72);
  color: var(--txt-dim);
}
.member .links {
  border-top-color: var(--line);
}
.member .links a {
  color: var(--txt-soft);
}
.member .links a:hover {
  color: var(--signal-soft);
}
.team-cta {
  border-color: var(--line);
}
.team-cta h3 {
  color: var(--txt);
}
.team-note {
  color: var(--txt-dim);
}

/* footer unified with the page background */
footer {
  background: var(--bg);
}

/* ---------- THE MOVEMENT — globe centrepiece + floating callouts ------
   A "Region: Earth"-style composition: centred title/subtitle, then the
   interactive dotted globe (reused from the About hero) oversized and
   cropped at the section's bottom edge, with two accent callouts pinned
   over it. Stacks to a single column on mobile. */
.movement {
  overflow: hidden;
}
.movement .wrap {
  position: relative;
}
.movement-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
}
.movement-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1rem + 2.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.movement-sub {
  margin: 20px auto 0;
  max-width: 40rem;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--txt-soft);
}
.movement-sub .em {
  color: var(--txt);
}

/* globe stage — the canvas is a full square with the sphere centred in it;
   the stage is exactly half as tall (aspect 2/1) and clips the lower half,
   so the sphere is always cut precisely at its equator at any resolution.
   That flat edge then sits flush on the divider below (no gap). */
.movement-globe {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 20px auto 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .movement-globe {
    margin-top: 8px;
  }
}
.movement-globe canvas[data-globe] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  cursor: grab;
  touch-action: none;
}
.movement-globe canvas[data-globe]:active {
  cursor: grabbing;
}

/* ---------- the space / the people — alternating media + text blocks
   below the globe. The first block's top hairline is the divider the
   globe's equator rests on, so it carries no gap above it.
   Each block leads with its text on mobile; on desktop they zig-zag with
   the text column pinned to the top of the image. */
.features {
  margin-top: 0;
}
.feature {
  display: grid;
  gap: 30px;
  align-items: start;
  padding: 60px 0;
  border-top: 1px solid var(--line);
}
.feature:last-child {
  padding-bottom: 28px;
}
@media (max-width: 859px) {
  .feature .feature-body {
    order: 0;
  }
  .feature .feature-media {
    order: 1;
  }
}
@media (min-width: 860px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 84px;
    padding: 96px 0;
    align-items: center;
  }
  .feature:last-child {
    padding-bottom: 40px;
  }
  .feature .feature-body {
    align-self: start;
    padding-top: 8px;
  }
}
.feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--txt-dim);
}
.feature-kicker .k-num {
  color: var(--signal);
}
.feature-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line);
}
.feature-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.feature-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin: 24px 0 4px;
  background: var(--signal);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .js .feature-rule {
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  .js .feature.is-visible .feature-rule {
    transform: scaleX(1);
  }
}
.feature-list {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 31rem;
}
.feature-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-soft);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.56em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.13);
}
.feature-list a {
  color: var(--signal-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.feature-list a:hover {
  color: var(--signal);
}

/* .feature-media / .media-tag remain — reused by the About page gallery */
.feature-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    rgba(139, 92, 246, 0.16),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.feature-media:hover img {
  transform: scale(1.04);
}
.feature-media:hover::after {
  opacity: 1;
}
.media-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  padding: 6px 11px;
  color: var(--txt);
  font-size: 10px;
  background: rgba(12, 12, 13, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}
@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .media-tag {
    background: rgba(12, 12, 13, 0.82);
  }
}

.movement-cta {
  margin-top: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

/* =====================================================================
     ABOUT PAGE  — stylized hero with the animated globe + supporting
     sections. Built entirely on the existing tokens / type system.
     ===================================================================== */

/* ----- hero (matches the dithered dark banners on other pages) ----- */
.about-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  padding-top: 116px;
  padding-bottom: 56px;
}
@media (min-width: 768px) {
  .about-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 140px;
  }
}
.about-hero .banner-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 19, 0.55),
    rgba(20, 20, 19, 0.28) 45%,
    rgba(20, 20, 19, 0.85)
  );
}
.about-hero .hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.about-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 920px) {
  .about-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

.about-hero-copy {
  max-width: 38rem;
}
.about-hero .back {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}
.about-hero .back:hover {
  color: #fff;
}
.about-hero .eyebrow {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.22em;
}
.about-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.about-hero .lede {
  margin-top: 22px;
  max-width: 40rem;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.about-hero .ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* interactive globe stage */
.about-hero-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-hero .globe-wrap {
  position: relative;
  width: min(80vw, 400px);
  aspect-ratio: 1 / 1;
}
@media (min-width: 920px) {
  .about-hero .globe-wrap {
    width: min(46vw, 560px);
  }
}
/* darken the textured banner right behind the globe so the dots read cleanly */
.about-hero .globe-wrap::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(10, 10, 12, 0.85) 42%,
    rgba(10, 10, 12, 0.4) 64%,
    transparent 76%
  );
}
.about-hero .globe-wrap canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.about-hero .globe-wrap canvas:active {
  cursor: grabbing;
}
.about-hero .globe-hint {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.34);
  letter-spacing: 0.18em;
}

@media (max-width: 919px) {
  .about-hero-copy {
    max-width: none;
  }
  .about-hero-stage {
    margin-top: 8px;
  }
  /* crop the globe at its center so the next section cuts it in half */
  .about-hero {
    padding-bottom: 0;
  }
  .about-hero .globe-wrap {
    margin-bottom: calc(min(80vw, 400px) / -2);
  }
  .about-hero .globe-hint {
    display: none;
  }
  .about-hero .hero-fade {
    display: none;
  }
}

/* ----- about page: home-page aligned sections, keeping the globe hero intact ----- */
.about-intro {
  padding-top: 112px;
}
section.about-intro {
  padding-bottom: 32px;
}
section.about-movement {
  padding-top: 64px;
}
@media (min-width: 768px) {
  .about-intro {
    padding-top: 140px;
  }
  section.about-intro {
    padding-bottom: 44px;
  }
  section.about-movement {
    padding-top: 84px;
  }
}

/* tighten the gap between "Designed to travel" and "Questions, answered" */
section.about-network {
  padding-bottom: 36px;
}
section.about-faq {
  padding-top: 60px;
}
@media (min-width: 768px) {
  section.about-network {
    padding-bottom: 52px;
  }
  section.about-faq {
    padding-top: 80px;
  }
}

.about-cols .statement,
.about-network .statement,
.about-join .statement {
  max-width: 18ch;
}

.about-copy p,
.network-lede {
  margin-top: 0;
  color: var(--txt-soft);
  font-size: 17px;
  line-height: 1.68;
}
.about-copy p + p {
  margin-top: 22px;
}

/* section 01 — refined supporting column + accent under the statement */
.about-intro .stmt-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 30px;
  background: var(--signal);
}
.about-copy .copy-label {
  margin: 0 0 16px;
  color: var(--txt-dim);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.about-copy .about-copy-lead {
  margin-top: 0;
  color: var(--txt);
  font-size: 19px;
  line-height: 1.6;
}

.about-movement .lead-statement {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.about-movement .lead-sub {
  margin-top: 22px;
  max-width: 46rem;
  font-size: 17px;
  line-height: 1.6;
  color: var(--txt-soft);
}

/* section 02 — pillar cards (reuse .feature-cards / .fcard) + image pair */
.about-pillars {
  margin-top: 44px;
}
/* keep the card text aligned to the top (don't let the kicker/copy stretch) */
.about-pillars .fcard p {
  flex: 0 0 auto;
}
.about-gallery {
  margin-top: 16px;
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .about-gallery {
    grid-template-columns: 1fr 1fr;
  }
}
.about-gallery .feature-media img {
  aspect-ratio: 16 / 10;
}

/* section — FAQ accordion (native <details>, styled to match) */
.about-faq .faq-head {
  margin-bottom: 44px;
}
.about-faq .faq-head .statement {
  max-width: 16ch;
}
.about-faq .faq-lede {
  margin-top: 18px;
  max-width: 42rem;
  font-size: 17px;
  line-height: 1.6;
  color: var(--txt-soft);
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--txt);
  transition: color 0.2s ease;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q::marker {
  content: "";
}
.faq-q:hover {
  color: #fff;
}
.faq-item[open] .faq-q {
  color: #fff;
}
.faq-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--signal-soft);
}
.faq-icon::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq-icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon::after {
  transform: translateX(-50%) scaleY(0);
}
.faq-a {
  padding: 0 44px 28px 0;
  max-width: 66ch;
  color: var(--txt-soft);
}
.faq-a p {
  font-size: 16px;
  line-height: 1.7;
}
.faq-a a {
  color: var(--signal-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-a a:hover {
  color: var(--signal);
}
@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a {
    animation: faqReveal 0.35s ease;
  }
}

.about-belief {
  min-height: 48vh;
  margin: 18px 0 0;
}
.about-belief .belief-kicker {
  margin-bottom: 22px;
  color: rgba(244, 244, 242, 0.54);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.about-belief .accent-quote {
  max-width: 21ch;
}

.about-network-grid {
  display: grid;
  gap: 48px;
  align-items: start;
}
@media (min-width: 920px) {
  .about-network-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 84px;
  }
}

.about-network .network-lede {
  margin-top: 28px;
  max-width: 40rem;
}

.about-rows {
  border-top: 1px solid var(--line);
}
.about-row {
  display: grid;
  gap: 14px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .about-row {
    grid-template-columns: 64px minmax(160px, 0.55fr) 1fr;
    gap: 28px;
    align-items: baseline;
  }
}
.about-row span {
  color: var(--signal);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.about-row h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.about-row p {
  color: var(--txt-soft);
  line-height: 1.62;
}

.about-join {
  margin-top: 0;
  padding-top: 112px;
  padding-bottom: 128px;
}
.about-final-ctas {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* current nav item (About page) */
.nav ul a[aria-current="page"] {
  color: #fff;
}

/* =====================================================================
   VOLUNTEERING PAGE — scoped polish (team + volunteering merged page).
   Namespaced under .volunteering so no other subpage is affected.
   ===================================================================== */

.volunteering .subpage-body {
  padding-top: 60px;
}
@media (min-width: 768px) {
  .volunteering .subpage-body {
    padding-top: 80px;
  }
}

/* chapter kickers now carry the separation between the merged sections
   (team -> why -> roles); the chapters themselves sit close to their kicker */
.volunteering .cols {
  margin-top: 0;
}
.volunteering .subpage-body > .section-kicker + .event-list {
  margin-top: 0;
}
.volunteering .roles {
  margin-top: 26px;
}

.volunteering .vol-team-band {
  position: relative;
  isolation: isolate;
  padding-bottom: 40px;
}
.volunteering .vol-team-band::before {
  content: "";
  position: absolute;
  top: -60px;
  bottom: -10%;
  left: 50%;
  z-index: 0;
  width: 100vw;
  pointer-events: none;
  background-color: #0c0c0c;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.065) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  background-position: center top;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
}
/* cursor spotlight — mirrors the 100vw dotted backdrop above, revealed in a
   soft pool around the pointer (see the alumni equivalent for the mechanics) */
@media (hover: hover) and (pointer: fine) {
  .volunteering .vol-team-band::after {
    content: "";
    position: absolute;
    top: -60px;
    bottom: -10%;
    left: 50%;
    z-index: 0;
    width: 100vw;
    pointer-events: none;
    transform: translateX(-50%);
    background-image:
      radial-gradient(rgba(190, 165, 255, 0.72) 1px, transparent 1px),
      radial-gradient(
        260px 260px at var(--mx, -300px) var(--my, -300px),
        rgba(139, 92, 246, 0.13),
        transparent 70%
      );
    background-size:
      24px 24px,
      100% 100%;
    background-position:
      center top,
      0 0;
    opacity: 0;
    /* intersect the cursor pool with the backdrop's bottom fade so the
       spotlight dies out toward the band's edges */
    -webkit-mask-image:
      radial-gradient(
        230px 230px at var(--mx, -300px) var(--my, -300px),
        #000 0%,
        rgba(0, 0, 0, 0.35) 44%,
        transparent 72%
      ),
      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(
        230px 230px at var(--mx, -300px) var(--my, -300px),
        #000 0%,
        rgba(0, 0, 0, 0.35) 44%,
        transparent 72%
      ),
      linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    mask-composite: intersect;
    transition: opacity 0.4s ease;
  }
  .volunteering .vol-team-band.is-spot::after {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .volunteering .vol-team-band::after {
    display: none;
  }
}

.volunteering .vol-team-band > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .volunteering .vol-team-band::before,
  .volunteering .vol-team-band::after {
    top: -80px;
  }
}

/* volunteering team cards: portrait tile with bottom glass label */
.volunteering .team-grid {
  margin-top: 48px;
  column-gap: 24px;
  row-gap: 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .volunteering .team-grid {
    margin-top: 64px;
  }
}
@media (min-width: 960px) {
  .volunteering .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 42px;
    align-items: start;
  }
}
.volunteering .vol-team-apply {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.volunteering .vol-team-apply-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 34px;
  padding: 8px 14px;
  color: var(--txt);
  text-decoration: none;
  background: rgba(18, 18, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
}
.volunteering .vol-team-apply-link:hover,
.volunteering .vol-team-apply-link:focus-visible {
  text-decoration: none;
}
.volunteering .vol-team-apply-link:hover {
  transform: translateY(-2px);
  background: rgba(24, 24, 24, 0.9);
  border-color: rgba(255, 255, 255, 0.34);
}
.volunteering .vol-team-apply-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--signal);
}
.volunteering .vol-team-apply-sep {
  width: 1px;
  height: 14px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.24);
}
.volunteering .vol-team-apply-action {
  color: rgba(241, 241, 238, 0.38);
  transition: color 0.25s ease;
}
.volunteering .vol-team-apply-link:hover .vol-team-apply-action,
.volunteering .vol-team-apply-link:focus-visible .vol-team-apply-action {
  color: #fff;
}
.volunteering .member {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  rotate: var(--tilt, 0deg);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
.volunteering .member:nth-of-type(1) {
  --tilt: -0.2deg;
}
.volunteering .member:nth-of-type(2) {
  --tilt: 0.15deg;
}
.volunteering .member:nth-of-type(3) {
  --tilt: -0.1deg;
}
.volunteering .member:nth-of-type(4) {
  --tilt: 0.18deg;
}
.volunteering .member:nth-of-type(5) {
  --tilt: -0.14deg;
}
.volunteering .member:nth-of-type(6) {
  --tilt: 0.1deg;
}
@media (min-width: 960px) {
  .volunteering .member:nth-of-type(2),
  .volunteering .member:nth-of-type(6) {
    margin-top: 16px;
  }
  .volunteering .member:nth-of-type(3) {
    margin-top: 4px;
  }
  .volunteering .member:nth-of-type(4) {
    margin-top: 18px;
  }
}
/* same very slow, very small idle levitation as the alumni cards, staggered
   so each drifts independently (see the cardFloat keyframe) */
@media (prefers-reduced-motion: no-preference) {
  .volunteering .member {
    animation: cardFloat 8s ease-in-out infinite;
  }
  .volunteering .member:nth-of-type(2) {
    animation-duration: 8.7s;
    animation-delay: -2.2s;
  }
  .volunteering .member:nth-of-type(3) {
    animation-duration: 7.6s;
    animation-delay: -4.5s;
  }
  .volunteering .member:nth-of-type(4) {
    animation-duration: 9.1s;
    animation-delay: -6.4s;
  }
  .volunteering .member:nth-of-type(5) {
    animation-duration: 8.3s;
    animation-delay: -1.4s;
  }
  .volunteering .member:nth-of-type(6) {
    animation-duration: 7.8s;
    animation-delay: -3.6s;
  }
}
.volunteering .member:hover {
  transform: translateY(-6px);
  rotate: 0deg;
  border-color: rgba(255, 255, 255, 0.18);
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.38));
  animation-play-state: paused;
}
.volunteering .member .photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1.18;
  background-color: #181818;
  background-image:
    radial-gradient(
      circle at 50% 32%,
      rgba(255, 255, 255, 0.12),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(0, 0, 0, 0.12)
    );
  border: 0;
  border-radius: 0;
}
.volunteering .member .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(0, 0, 0, 0.18)
  );
  mix-blend-mode: soft-light;
  opacity: 0.42;
}
.volunteering .member > a.photo::before {
  content: "↗";
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  color: rgba(241, 241, 238, 0.72);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.volunteering .member:hover > a.photo::before {
  color: var(--signal-soft);
  transform: translate(2px, -2px);
}
.volunteering .member > a.photo.no-arrow::before {
  content: none;
}
.volunteering .member .photo .portrait {
  z-index: 1;
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: luminosity;
  opacity: 0.96;
}
.volunteering .member:hover .photo .portrait {
  filter: grayscale(0) contrast(1);
  mix-blend-mode: normal;
  opacity: 1;
  transform: scale(1.015);
}
.volunteering .member .photo .tag {
  left: 12px;
  top: 12px;
  bottom: auto;
  z-index: 3;
  padding: 0;
  background: transparent;
  color: rgba(241, 241, 238, 0.58);
}
.volunteering .member .info {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  pointer-events: auto;
  background: rgba(30, 30, 30, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.volunteering .member .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: #fff;
}
.volunteering .member .role {
  order: 2;
  margin-top: 6px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
}
.volunteering .member .bio {
  order: 3;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.58);
}
.volunteering .member .links {
  order: 4;
  margin-top: 10px;
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.volunteering .member .links a {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.volunteering .member .links a:hover {
  color: #fff;
}
.volunteering .member .accent {
  display: none;
}

/* the "Four steps" header that sits above the timeline */
.volunteering .vol-head {
  margin-top: 80px;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .volunteering .vol-head {
    margin-top: 104px;
  }
}
.volunteering .vol-head .statement {
  max-width: 20ch;
}

/* ---- four steps, rebuilt as a 2x2 card grid --------------------------
   Each step is a panel with a big outlined stage number that echoes the
   team-card glyphs and lights violet on hover. */
.volunteering .subpage-body .steps {
  margin-top: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .volunteering .subpage-body .steps {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
.volunteering .step {
  position: relative;
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 28px 28px 30px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}
.volunteering .step:hover {
  transform: translateY(-3px);
  border-color: #3a3a3d;
}
/* drop the old connecting timeline line */
.volunteering .step::before {
  content: none;
}
/* big outlined stage number, parked top-right */
.volunteering .step-n {
  position: absolute;
  top: 14px;
  right: 22px;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 241, 238, 0.14);
  transition: -webkit-text-stroke-color 0.35s ease;
  z-index: 0;
}
.volunteering .step:hover .step-n {
  -webkit-text-stroke-color: var(--signal);
}
.volunteering .step-body {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-right: 38px; /* keep text clear of the ghost number */
}
.volunteering .step-body .step-kicker {
  color: var(--signal-soft);
  margin-bottom: 10px;
}
.volunteering .step-body h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
}
.volunteering .step-body p {
  max-width: none;
}
.volunteering .step-body .step-meta {
  margin-top: 16px;
}


/* ===================================================== builders: alumni cards */
/* Floating cards on a tinted band — each with a photo placeholder, name and
   role. Cards drift on a slow idle bob (staggered) and lift on hover. */
.alumni {
  position: relative;
  isolation: isolate;
  margin-top: 64px;
  padding: 72px 0 96px;
  background-color: #0c0c0c;
}
.alumni::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* neutral dotted grid, isolated so it can fade at the section edges */
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.065) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
}
/* Cursor spotlight (desktop pointer only): a soft pool of brighter dots
   follows the cursor. JS feeds the pointer position in as --mx / --my and
   toggles .is-spot on enter/leave; without JS the layer stays invisible. */
@media (hover: hover) and (pointer: fine) {
  .alumni::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(190, 165, 255, 0.72) 1px, transparent 1px),
      radial-gradient(
        260px 260px at var(--mx, -300px) var(--my, -300px),
        rgba(139, 92, 246, 0.13),
        transparent 70%
      );
    background-size:
      24px 24px,
      100% 100%;
    background-position:
      center top,
      0 0;
    opacity: 0;
    /* intersect the cursor pool with the same top/bottom fade as the base
       dotted layer, so the spotlight dies out toward the grid's edges */
    -webkit-mask-image:
      radial-gradient(
        230px 230px at var(--mx, -300px) var(--my, -300px),
        #000 0%,
        rgba(0, 0, 0, 0.35) 44%,
        transparent 72%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%
      );
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(
        230px 230px at var(--mx, -300px) var(--my, -300px),
        #000 0%,
        rgba(0, 0, 0, 0.35) 44%,
        transparent 72%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%
      );
    mask-composite: intersect;
    transition: opacity 0.4s ease;
  }
  .alumni.is-spot::after {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .alumni::after {
    display: none;
  }
}

.alumni > .wrap {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .alumni {
    margin-top: 88px;
    padding: 96px 0 128px;
  }
}
.alumni .section-kicker::before {
  background: #333336;
}
.alumni-lede {
  margin-top: 18px;
  max-width: 34rem;
  color: var(--txt-soft);
}

/* --- the floating card grid --- */
.alumni-cards {
  list-style: none;
  margin-top: 48px;
  display: grid;
  column-gap: 24px;
  row-gap: 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .alumni-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  /* 8 tracks with each card spanning 2 is visually identical to a 4-column
     grid at the same gap — but it lets the trailing row of three
     (Miko / Elias / Hubertus) start half a column in, so it centers instead
     of hugging the left with an empty 4th cell. */
  .alumni-cards {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 42px;
  }
  .alumni-card {
    grid-column: span 2;
  }
  .alumni-card:nth-child(5) {
    grid-column: 2 / span 2;
  }
}
@media (min-width: 768px) {
  .alumni-cards {
    margin-top: 64px;
  }
}

.alumni-card {
  position: relative;
  overflow: hidden;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  rotate: var(--tilt, 0deg);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
/* nearly straight, with only a trace of hand-placed variation */
.alumni-card:nth-child(1) {
  --tilt: -0.2deg;
}
.alumni-card:nth-child(2) {
  --tilt: 0.15deg;
}
.alumni-card:nth-child(3) {
  --tilt: -0.1deg;
}
.alumni-card:nth-child(4) {
  --tilt: 0.18deg;
}
.alumni-card:nth-child(5) {
  --tilt: -0.14deg;
}
.alumni-card:nth-child(6) {
  --tilt: 0.1deg;
}
.alumni-card:nth-child(7) {
  --tilt: -0.2deg;
}
/* keep a light editorial stagger without breaking the clean grid rhythm */
@media (min-width: 960px) {
  .alumni-cards {
    align-items: start;
  }
  .alumni-card:nth-child(1) {
    margin-top: 0;
  }
  .alumni-card:nth-child(2) {
    margin-top: 16px;
  }
  .alumni-card:nth-child(3) {
    margin-top: 4px;
  }
  .alumni-card:nth-child(4) {
    margin-top: 18px;
  }
  .alumni-card:nth-child(5) {
    margin-top: 0;
  }
  .alumni-card:nth-child(6) {
    margin-top: 16px;
  }
  .alumni-card:nth-child(7) {
    margin-top: 4px;
  }
}
/* gentle idle bob — `translate` composes with the hover `transform` lift.
   Staggered timing so the cards drift independently, like they're floating. */
@media (prefers-reduced-motion: no-preference) {
  .alumni-card {
    animation: cardFloat 8s ease-in-out infinite;
  }
  .alumni-card:nth-child(2) {
    animation-duration: 8.7s;
    animation-delay: -2.2s;
  }
  .alumni-card:nth-child(3) {
    animation-duration: 7.6s;
    animation-delay: -4.5s;
  }
  .alumni-card:nth-child(4) {
    animation-duration: 9.1s;
    animation-delay: -6.4s;
  }
  .alumni-card:nth-child(5) {
    animation-duration: 8.3s;
    animation-delay: -1.4s;
  }
  .alumni-card:nth-child(6) {
    animation-duration: 7.8s;
    animation-delay: -3.6s;
  }
  .alumni-card:nth-child(7) {
    animation-duration: 8.8s;
    animation-delay: -5.5s;
  }
}
/* very slow, very small idle levitation. `translate` composes with the hover
   `transform` lift so the two never fight. Shared by alumni + team cards. */
@keyframes cardFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
.alumni-card:hover {
  transform: translateY(-6px);
  rotate: 0deg; /* straighten as it lifts */
  border-color: rgba(255, 255, 255, 0.18);
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.38));
  animation-play-state: paused;
  z-index: 1;
}

/* portrait panel — neutral placeholder until real alumni photos land */
.ac-photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1.18;
  background-color: #181818;
  background-image: radial-gradient(
      circle at 50% 32%,
      rgba(255, 255, 255, 0.12),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(0, 0, 0, 0.12)
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f1f1ee' fill-opacity='0.13'%3E%3Ccircle cx='12' cy='8.2' r='4.3'/%3E%3Cpath d='M3.6 21c0-4.6 3.76-8.4 8.4-8.4s8.4 3.8 8.4 8.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center 48%;
  background-size: cover, cover, 44% auto;
  border-radius: 0;
  transition:
    background-color 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ac-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(0, 0, 0, 0.18)
  );
  mix-blend-mode: soft-light;
  opacity: 0.42;
}
.ac-photo.has-photo {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(0, 0, 0, 0.12)
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f1f1ee' fill-opacity='0.13'%3E%3Ccircle cx='12' cy='8.2' r='4.3'/%3E%3Cpath d='M3.6 21c0-4.6 3.76-8.4 8.4-8.4s8.4 3.8 8.4 8.4z'/%3E%3C/svg%3E");
  background-position: center, center 48%;
  background-size: cover, 44% auto;
}
.ac-photo .portrait {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: luminosity;
  opacity: 0.96;
  transition:
    filter 0.35s ease,
    mix-blend-mode 0.35s ease,
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.alumni-card:hover .ac-photo .portrait {
  filter: grayscale(0) contrast(1);
  mix-blend-mode: normal;
  opacity: 1;
  transform: scale(1.015);
}
.alumni-card > a.ac-photo::before {
  content: "↗";
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  color: rgba(241, 241, 238, 0.72);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.alumni-card:hover > a.ac-photo::before {
  color: var(--signal-soft);
  transform: translate(2px, -2px);
}
.alumni-card:hover .ac-photo {
  background-color: #202020;
  transform: scale(1.015);
}
.ac-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  color: rgba(241, 241, 238, 0.58);
  font-size: 10px;
}
.ac-info {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 12px 14px 13px;
  background: rgba(30, 30, 30, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.ac-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: #fff;
}
.ac-role {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.78);
}
.alumni-card::after {
  content: none;
}

/* Mobile / cropped: the glass overlay crowds the small cards, so drop the
   text out of the photo and stack it in a solid panel underneath instead.
   Applies to the alumni cards and the volunteering team cards alike. */
@media (max-width: 599px) {
  .alumni-cards,
  .volunteering .team-grid {
    column-gap: 12px;
    row-gap: 18px;
  }

  .ac-photo,
  .volunteering .member .photo {
    aspect-ratio: 4 / 5;
  }

  .ac-info,
  .volunteering .member .info {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 11px 12px 13px;
    background: #1b1b1b;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ac-name,
  .volunteering .member .name {
    font-size: 0.98rem;
  }
  .ac-role,
  .volunteering .member .role {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  /* steady the compact grid — no idle float or hand-placed tilt at this size */
  .alumni-card,
  .volunteering .member {
    animation: none;
    rotate: 0deg;
  }

  /* collapsed alumni: preview the first two, reveal the rest via "See all" */
  .alumni-cards.is-collapsed .alumni-card:nth-child(n + 3) {
    display: none;
  }
  .alumni-cards.is-collapsed + .alumni-more {
    display: block;
  }
}

/* Narrow phones: drop to a single column so one card fills the row at a time. */
@media (max-width: 479px) {
  .alumni-cards,
  .volunteering .team-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

.alumni-foot {
  margin-top: 26px;
  color: var(--txt-dim);
  letter-spacing: 0.22em;
}

/* "See all" toggle — hidden unless the mobile collapsed state opts it in
   (see the max-width: 599px rule above); desktop and no-JS show every card. */
.alumni-more {
  display: none;
  margin-top: 22px;
}
.alumni-more-btn {
  display: block;
  width: 100%;
  padding: 15px 18px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.alumni-more-btn:hover,
.alumni-more-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/* the CTA that follows the full-bleed alumni band */
.alumni-after {
  padding-bottom: 24px;
}
.alumni-after .team-cta {
  margin-top: 0;
}