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

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #ffd082;
  font-family: 'Geist', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Make BODY the explicit scroll container so snap fires on the same element
   that's actually scrolling. Lock its height to the dynamic viewport so the
   snap window matches the visible area exactly (no URL-bar overflow). */
html { height: 100%; overflow: hidden; }
body {
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;   /* kill rubber-band peeks of neighbors */
}

.credits-page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

/* ── ambient amber backdrop ── */
.bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(255, 170, 60, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(255, 200, 90, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255, 170, 60, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── code rain (very subtle, behind content) ── */
.code-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.code-rain::after {
  /* lighter vignette so more of the rain reads at load. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(0,0,0,0.42) 85%, #000 100%);
  pointer-events: none;
}
.code-col {
  position: absolute;
  top: 0;
  /* Width chosen to fit the longest snippet line so nothing is truncated. */
  width: 30em;
  white-space: pre;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.55;
  /* Lighter face — the density of the side strips carries the visibility. */
  color: rgba(255, 208, 130, 0.55);
  text-shadow: 0 0 6px rgba(255, 170, 60, 0.14);
  will-change: transform;
  animation: codeRain linear infinite;
}
@keyframes codeRain {
  from { transform: translate3d(0, -100%, 0); }
  to   { transform: translate3d(0, 100vh, 0); }
}

/* Stage opacity — slightly down from before; the new density is what carries
   the readability, not raw brightness. */
.code-rain-stage { opacity: 0.36; }

@media (max-width: 768px) {
  .code-col { font-size: 11px; line-height: 1.5; width: 24em; }
  .code-rain-stage { opacity: 0.24; }
}

/* ── top-left title ── */
.credits-title {
  position: absolute;
  top: clamp(28px, 4vw, 56px);
  left: clamp(24px, 4vw, 64px);
  margin: 0;
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #ffd082;
  max-width: min(58vw, 720px);
  z-index: 10;
}

/* ── bottom-right brand (terminal monospace) — sits above the scroll cue ── */
.credits-brand {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(86px, 9vh, 120px);
  margin: 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #ffd082;
  text-align: right;
  z-index: 10;
}

.credits-brand::before {
  content: '> ';
  opacity: 0.55;
}

.brand-six {
  color: #ffffff;
}

/* ── home link top-right ── */
.home-link {
  position: fixed;
  top: clamp(20px, 2.5vw, 32px);
  right: clamp(20px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 208, 130, 0.65);
  text-decoration: none;
  border: 1px solid rgba(255, 208, 130, 0.22);
  padding: 9px 16px;
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  z-index: 60;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}
.home-link:hover {
  color: #ffd082;
  border-color: rgba(255, 208, 130, 0.6);
  background: rgba(255, 208, 130, 0.06);
}

/* ── center logo ── */
.logo-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.logo-mark {
  position: relative;
  width: clamp(220px, 32vw, 440px);
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  /* On phones the absolute-positioned text was pinned to the corners with a
     big empty zone around the centered logo. Switch the page to a flex column
     so title + logo + brand pack toward the middle as one composition. */
  .credits-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(12px, 2.5vh, 24px);
    padding: clamp(28px, 5vh, 56px) clamp(18px, 4vw, 36px);
  }
  .credits-title,
  .credits-brand,
  .logo-stage {
    position: relative;
    inset: auto;
    top: auto; left: auto; right: auto; bottom: auto;
  }
  .credits-title {
    align-self: flex-start;
    font-size: clamp(3.2rem, 15vw, 5.4rem);
  }
  .credits-brand {
    align-self: flex-end;
    font-size: clamp(2.4rem, 12vw, 4.4rem);
  }
  .logo-stage {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .logo-mark { width: clamp(190px, 54vw, 320px); }
}

@media (max-width: 480px) {
  .credits-page {
    gap: clamp(10px, 2vh, 18px);
    padding: clamp(22px, 4vh, 40px) 18px;
  }
  .credits-title { font-size: clamp(2.8rem, 14.5vw, 4.2rem); }
  .credits-brand { font-size: clamp(2rem, 11vw, 3.2rem); }
  .home-link {
    padding: 7px 12px;
    font-size: 10px;
    letter-spacing: 0.10em;
  }
  .logo-mark { width: clamp(170px, 58vw, 250px); }
}

/* ═══════════════════════════ TEAM SECTION ═══════════════════════════ */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 30px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 208, 130, 0.6);
  text-decoration: none;
  border: 1px solid rgba(255, 208, 130, 0.20);
  padding: 10px 16px 8px;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 12;
  cursor: pointer;
  animation: cueBob 2.4s ease-in-out infinite;
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.scroll-cue:hover {
  color: #ffd082;
  border-color: rgba(255, 208, 130, 0.55);
  background: rgba(255, 208, 130, 0.06);
}
@keyframes cueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

.team-section {
  position: relative;
  z-index: 5;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: clamp(40px, 6vh, 80px) clamp(20px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;          /* vertically centred composition */
  gap: clamp(28px, 4.5vh, 52px);
  overflow: hidden;
}

/* Names list sections (Executive Board / Event Heads / etc.). Hidden by
   default — JS reveals one (and scrolls to it) when the matching card is
   clicked. Internal overflow is scrollable + contained so a long roster
   (Event Heads has ~15 names) stays inside this one snap panel without
   bleeding into the neighbouring section. */
.team-list-section {
  display: none;
  position: relative;
  z-index: 5;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: clamp(70px, 11vh, 120px) clamp(20px, 5vw, 80px) clamp(36px, 5vh, 70px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.team-list-section.visible { display: flex; }

/* Inner wrapper holds heading + roster. `margin: auto 0` makes it absorb
   leftover vertical space, so short rosters (2 names) sit perfectly
   centred inside the panel instead of clinging to the top with a big
   empty zone below. When the roster overflows (Event Heads, 13 cards),
   the auto margins collapse to 0 and the section scrolls naturally. */
.team-list-inner {
  width: 100%;
  max-width: 1000px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.8vh, 36px);
}

/* Orphan card: when the 2-col grid has an odd number of cards, the last
   one would otherwise sit alone in the left column. Promote it to span
   both columns and centre it, so the row reads symmetrically. */
.credits-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: calc(50% - clamp(5px, 0.65vw, 9px));
  width: 100%;
}

.team-list-heading {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: rgba(255, 208, 130, 0.92);
  margin: 0;
  text-align: center;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.team-list-heading em {
  font-style: italic;
  color: #ffd082;
}

.team-list-back {
  position: absolute;
  top: clamp(20px, 3vh, 32px);
  left: clamp(20px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 208, 130, 0.6);
  text-decoration: none;
  border: 1px solid rgba(255, 208, 130, 0.2);
  padding: 8px 14px;
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  z-index: 12;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}
.team-list-back:hover {
  color: #ffd082;
  border-color: rgba(255, 208, 130, 0.55);
  background: rgba(255, 208, 130, 0.06);
}

.team-heading {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  color: rgba(255, 208, 130, 0.82);
  margin: 0;
  text-align: center;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

/* 4 cards in a single row on desktop — equal-width columns so headings,
   eyebrows, and descriptions all sit on the same baselines across the row. */
.team-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.5vw, 22px);
  width: 100%;
  max-width: 1180px;
  align-items: stretch;
}
.team-tab { grid-column: span 1; }
@media (max-width: 1024px) {
  .team-tabs { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}

.team-tab {
  font-family: inherit;
  color: inherit;
  text-decoration: none;        /* it's an <a> — no underline */
  text-align: left;
  background: rgba(20, 14, 6, 0.4);
  border: 1px solid rgba(255, 208, 130, 0.18);
  border-radius: 4px;
  padding: clamp(18px, 2.2vw, 28px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.32s ease, background 0.32s ease, transform 0.32s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.team-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 210, 130, 0.05) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.team-tab:hover {
  border-color: rgba(255, 208, 130, 0.45);
  transform: translateY(-2px);
}
.team-tab:hover::after { transform: translateX(110%); }
.team-tab.active {
  border-color: rgba(255, 208, 130, 0.7);
  background: rgba(255, 208, 130, 0.06);
  box-shadow: 0 0 32px rgba(255, 170, 60, 0.10);
}

.team-tab-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 208, 130, 0.45);
  margin: 0 0 10px 0;
}
.team-tab-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: #ffd082;
  margin: 0 0 10px 0;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.team-tab-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.7rem, 0.85vw, 0.82rem);
  color: rgba(255, 208, 130, 0.55);
  line-height: 1.6;
  margin: 0;
}

.team-panels {
  width: 100%;
  max-width: 820px;
  position: relative;
}
.team-panel { display: none; }
.team-panel.active {
  display: block;
  animation: panelFade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes panelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════ Roster: decrypting cipher-cards (static notches, no tilt) ══════ */
.credits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
  width: 100%;
  max-width: 960px;
}

.credits-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  min-height: clamp(64px, 7vh, 80px);
  padding: clamp(12px, 1.4vh, 18px) clamp(18px, 2vw, 26px);
  background: linear-gradient(180deg, rgba(22, 15, 6, 0.32), rgba(8, 6, 2, 0.52));
  border: 1px solid rgba(255, 208, 130, 0.10);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.32s ease, background 0.32s ease;
}

/* corner notches — top-left + bottom-right, static (do not expand on hover) */
.credits-list li::before,
.credits-list li::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transition: border-color 0.28s ease;
}
.credits-list li::before {
  top: 8px;
  left: 8px;
  border-top: 1px solid rgba(255, 208, 130, 0.30);
  border-left: 1px solid rgba(255, 208, 130, 0.30);
}
.credits-list li::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 1px solid rgba(255, 208, 130, 0.30);
  border-right: 1px solid rgba(255, 208, 130, 0.30);
}

.credits-list li:hover {
  border-color: rgba(255, 208, 130, 0.55);
  background: linear-gradient(180deg, rgba(40, 26, 10, 0.55), rgba(12, 8, 3, 0.68));
  box-shadow: 0 0 32px rgba(255, 170, 60, 0.08);
}
.credits-list li:hover::before,
.credits-list li:hover::after {
  border-color: rgba(255, 208, 130, 0.7);
}

.cell-id {
  position: absolute;
  top: clamp(8px, 1vh, 12px);
  right: clamp(12px, 1.6vw, 20px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255, 208, 130, 0.32);
  text-transform: uppercase;
  pointer-events: none;
}

/* "CORE" badge — sits in the bottom-left corner of a credit cell,
   marking founding-member status. Same terminal font as cell-id but
   a touch brighter so the tag reads as a category, not an index. */
.cell-core {
  position: absolute;
  bottom: clamp(8px, 1vh, 12px);
  left: clamp(18px, 2vw, 26px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(255, 208, 130, 0.58);
  text-transform: uppercase;
  pointer-events: none;
}

/* Event label (used in the Event-Heads roster). Sits above the head's name
   in Lora italic so the typography pair mirrors the events.html style. */
.cell-event {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  color: rgba(255, 208, 130, 0.55);
  letter-spacing: 0.005em;
  margin: 0 0 2px 0;
  padding-right: 48px;   /* clear the absolute cell-id in top-right */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}

.credit-name {
  display: block;
  width: 100%;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.96rem, 1.18vw, 1.18rem);
  color: #ffd082;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding-right: 26px;   /* leave room for the top-right id tag */
}
.credit-name::before {
  content: '> ';
  color: rgba(255, 208, 130, 0.42);
}
/* A second name on the same card (dual-head events) — slightly tighter spacing. */
.credit-name + .credit-name { margin-top: 1px; }

.team-placeholder {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: rgba(255, 208, 130, 0.45);
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(255, 208, 130, 0.18);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .team-section,
  .team-list-section {
    padding: clamp(48px, 7.5vh, 90px) clamp(18px, 4vw, 32px) clamp(22px, 4vh, 48px);
    gap: clamp(14px, 2.4vh, 26px);
  }
  .team-heading { font-size: clamp(1.1rem, 3.8vw, 1.5rem); }
  /* 5 cards: 2-col grid → 2+2+1, with the final card spanning the full row. */
  .team-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 480px;
  }
  .team-tab { grid-column: span 1; }
  .team-tab { padding: clamp(11px, 2.8vw, 16px); }
  .team-tab-title { font-size: clamp(0.98rem, 3.8vw, 1.18rem); margin-bottom: 6px; }
  .team-tab-desc { font-size: clamp(0.66rem, 2.3vw, 0.76rem); line-height: 1.4; }
  .team-tab-eyebrow { font-size: 8.5px; margin-bottom: 6px; }
  .team-list-heading { font-size: clamp(1.15rem, 4.5vw, 1.7rem); }
  .credits-list {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 460px;
  }
  /* In 1-col mode the orphan rule must not narrow the final card. */
  .credits-list li:last-child:nth-child(odd) {
    max-width: none;
    width: 100%;
    grid-column: auto;
    justify-self: stretch;
  }
  .credits-list li { min-height: 58px; padding: 12px 16px; }
  .credit-name { font-size: clamp(0.95rem, 3.6vw, 1.05rem); padding-right: 36px; }
  .cell-id { font-size: 8.5px; }
}
@media (max-width: 480px) {
  .credit-name { font-size: 0.98rem; letter-spacing: 0; }
  .team-list-back { padding: 6px 10px; font-size: 9px; }
  .team-tab-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}