/* ═══════════════════════════════════════════════════════════════════════════
   OVERCLOCK v2 — design system (rev 2)
   Brand: BLACK / WHITE / RED.
   Dark, angular, HUD-inspired. Fonts: Space Grotesk (display), Satoshi (body),
   Chakra Petch (numeric/tech labels).
   NOTE: --teal / --lime are legacy token names kept so existing view markup
   keeps working — they now resolve to the red / white accent pair.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap'); /* big bold flat numerals (.v9-tl-total) */

:root {
  --bg:        #0a0a0a;
  --bg-raise:  #101010;
  --bg-card:   #141414;
  --line:      rgba(255, 255, 255, 0.09);
  --line-hard: rgba(255, 255, 255, 0.18);
  --text:      #f4f4f4;
  --text-dim:  #a3a3a3;
  --text-mute: #616161;
  --red:       #e10600;
  --red-hi:    #ff2a33;   /* brighter red for text on black */
  --white:     #ffffff;
  --red-dim:   rgba(225, 6, 0, 0.14);
  --white-dim: rgba(255, 255, 255, 0.08);
  --grad:      linear-gradient(100deg, #ff2a33, #b00500);
  --purple-neon: #c724ff;  /* Tier 4 / World Championship accent */
  --purple-dim:  rgba(199, 36, 255, 0.14);
  --gold:        #e0aa3e;  /* leadership role accent */
  --gold-dim:    rgba(224, 170, 62, 0.14);
  /* legacy aliases used throughout view markup */
  --teal:      var(--red-hi);
  --lime:      var(--white);
  --teal-dim:  var(--red-dim);
  --lime-dim:  var(--white-dim);
  --font-display: 'Space Grotesk', 'Satoshi', sans-serif;
  --font-body:    'Satoshi', 'Poppins', sans-serif;
  --font-tech:    'Chakra Petch', monospace;
  --nav-h: 80px;
  --rail: clamp(20px, 5vw, 72px);
  --btn-ink: #ffffff;      /* text color on red fills */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) var(--bg); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Subtle grid backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 100%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

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

/* ── Typography helpers ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red-hi);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: '//'; color: var(--white); letter-spacing: 0; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tech { font-family: var(--font-tech); letter-spacing: 0.04em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--rail); }

section { position: relative; }

.section-pad { padding: clamp(72px, 10vw, 140px) 0; }

.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.05;
  margin-top: 14px;
}
.section-head p.sub { color: var(--text-dim); max-width: 640px; margin-top: 14px; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}
.nav.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--rail);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { height: 40px; width: auto; }
.nav-logo .nav-word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 18px;
  text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-family: var(--font-tech);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--red-hi); border-color: var(--line-hard); }
/* .nav-cta: kept as a hook class only - it renders identically to a plain
   .nav-links a now (no red button treatment), per request. */
.nav-cta {}
.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line-hard);
  color: var(--text);
  width: 42px; height: 42px;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 960px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 12px var(--rail) 24px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 10px; border-bottom: 1px solid var(--line); }
  .nav-burger { display: block; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-tech);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn-solid {
  background: var(--red);
  color: var(--btn-ink);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(225, 6, 0, 0.45); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-hard);
}
.btn-ghost:hover { border-color: var(--red-hi); color: var(--red-hi); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  transition: border-color 0.25s, transform 0.25s;
}
.card:hover { border-color: rgba(225, 6, 0, 0.55); }
.card-notch {
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.card .corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--red-hi);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 0.25s;
}
.card:hover .corner { opacity: 1; }
.corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* ── Stat blocks ────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat-cell {
  background: var(--bg-raise);
  padding: 34px 30px;
  position: relative;
  overflow: hidden;
}
.stat-cell::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.stat-cell:hover::after { transform: scaleX(1); }
.stat-cell .num {
  font-family: var(--font-tech);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.stat-cell .num .accent { color: var(--red-hi); }
.stat-cell .lbl {
  margin-top: 10px;
  font-family: var(--font-tech);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Compact variant for the roster career-timeline popup — same grid/cell
   structure, smaller footprint to fit inside the modal panel. */
.stat-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-bottom: 26px;
}
.stat-grid-compact .stat-cell { padding: 18px 16px; }
.stat-grid-compact .stat-cell .num { font-size: clamp(24px, 2.6vw, 32px); }
.stat-grid-compact .stat-cell .lbl { font-size: 10px; letter-spacing: 0.16em; margin-top: 6px; }

/* ── Ticker / marquee ───────────────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
  padding: 14px 0;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 48px; animation: ticker 30s linear infinite; }
.ticker span {
  font-family: var(--font-tech);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ticker span b { color: var(--red-hi); font-weight: 700; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Data tables (rev 2 — fixed formats) ────────────────────────────────
   . Cells wrap by default; only .tech / th stay on one line
   . No global min-width: tables shrink cleanly inside narrow columns.
     Add class "wide" for many-column tables → min-width + h-scroll.
   . Zebra striping + roomier rhythm for readability                     */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-hard);
  background: var(--bg-card);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
}
table.data.wide { min-width: 760px; }
table.data th {
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 2px solid var(--line-hard);
  background: var(--bg-raise);
  white-space: nowrap;
}
table.data td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text-dim);
  vertical-align: middle;
  white-space: normal;          /* wrap long award/event names */
  overflow-wrap: anywhere;
}
table.data td.tech, table.data td .tech { white-space: nowrap; }
table.data tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: rgba(255, 255, 255, 0.04); color: var(--text); }
table.data td.hero { color: var(--text); font-weight: 600; white-space: nowrap; }
table.data td .tech { color: var(--red-hi); }
.record-wlt { font-family: var(--font-tech); color: var(--text); white-space: nowrap; }
.record-wlt b { color: var(--red-hi); font-weight: 700; }
.record-wr {
  margin-left: 10px;
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  white-space: nowrap;
}
tr.row-us td,
table.data tbody tr.row-us:nth-child(even) td,
table.data tbody tr.row-us:hover td {
  background: var(--red-dim);
  color: var(--text);
  border-bottom-color: rgba(225, 6, 0, 0.35);
}
tr.row-us td:first-child { box-shadow: inset 3px 0 0 var(--red); }

.badge {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--line-hard);
  color: var(--text-dim);
  white-space: nowrap;
}
.badge.teal { color: var(--red-hi); border-color: rgba(225, 6, 0, 0.5); background: var(--red-dim); }
.badge.lime { color: var(--white); border-color: rgba(255, 255, 255, 0.4); background: var(--white-dim); }
.badge.purple { color: var(--purple-neon); border-color: rgba(199, 36, 255, 0.5); background: var(--purple-dim); text-shadow: 0 0 8px var(--purple-dim); }
.badge.gold { color: var(--gold); border-color: rgba(224, 170, 62, 0.5); background: var(--gold-dim); }

/* Custom tooltip: hover/focus popup for any badge with a data-tip attribute. */
.badge[data-tip], .v9-tl-award[data-tip] { position: relative; cursor: help; }
.badge[data-tip]::after, .v9-tl-award[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 230px;
  padding: 10px 12px;
  background: var(--bg-raise);
  border: 1px solid var(--line-hard);
  border-top: 2px solid currentColor;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.55;
  white-space: normal;
  text-align: left;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.badge[data-tip]::before, .v9-tl-award[data-tip]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--line-hard);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.badge[data-tip]:hover::after, .badge[data-tip]:focus::after,
.badge[data-tip]:hover::before, .badge[data-tip]:focus::before,
.v9-tl-award[data-tip]:hover::after, .v9-tl-award[data-tip]:focus::after,
.v9-tl-award[data-tip]:hover::before, .v9-tl-award[data-tip]:focus::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Narrow viewports: a centered tooltip near a screen edge overflows and gets
   clipped by body{overflow-x:hidden} - anchor to the badge's left edge and cap
   width against the viewport instead of centering. Placed after the rules
   above (same specificity) so it wins the cascade at this width, including
   overriding the :hover/:focus active-state transform. */
@media (max-width: 480px) {
  .badge[data-tip]::after, .v9-tl-award[data-tip]::after {
    left: 0;
    transform: translateY(4px);
    max-width: calc(100vw - 48px);
  }
  .badge[data-tip]::before, .v9-tl-award[data-tip]::before {
    left: 14px;
    transform: translateY(4px);
  }
  .badge[data-tip]:hover::after, .badge[data-tip]:focus::after,
  .v9-tl-award[data-tip]:hover::after, .v9-tl-award[data-tip]:focus::after {
    transform: translateY(0);
  }
  .badge[data-tip]:hover::before, .badge[data-tip]:focus::before,
  .v9-tl-award[data-tip]:hover::before, .v9-tl-award[data-tip]:focus::before {
    transform: translateY(0);
  }
}

/* ── Member / roster cards ──────────────────────────────────────────────── */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.member-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 26px 24px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.member-card:hover { border-color: rgba(225, 6, 0, 0.6); transform: translateY(-4px); }
.member-card::before {
  content: attr(data-index);
  position: absolute;
  top: 12px; right: 16px;
  font-family: var(--font-tech);
  font-size: 40px;
  font-weight: 700;
  color: rgba(255,255,255,0.05);
  line-height: 1;
}
.member-card .avatar {
  width: 64px; height: 64px;
  background: #0a0a0a;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  position: relative;
  isolation: isolate;
  margin-bottom: 18px;
}
.member-card h3 { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; }
.member-card .role {
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-hi);
  margin-top: 6px;
}
.member-card .meta { font-size: 13px; color: var(--text-mute); margin-top: 10px; }

.team-block { margin-bottom: clamp(44px, 6vw, 72px); }
.team-block-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.team-block-head h3 {
  font-family: var(--font-tech);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--text);
}
.team-block-head h3 .accent { color: var(--red-hi); }
.team-block-head .count { font-family: var(--font-tech); font-size: 12px; color: var(--text-mute); letter-spacing: 0.2em; }

/* ── Achievement / award-card grid ─────────────────────────────────────── */
.season-block { margin-bottom: clamp(40px, 5vw, 64px); }
.season-block-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.season-block-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  text-transform: uppercase;
}
.season-block-head p {
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.award-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.award-card {
  background: var(--bg-card);
  padding: 24px 22px;
  border-left: 3px solid var(--line-hard);
  transition: background 0.25s;
}
.award-card:hover { background: var(--bg-raise); }
.award-card .award-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.award-card .award-icon { width: 32px; height: 32px; object-fit: contain; flex: none; }
.award-card .award-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; }
.award-card .award-desc { font-size: 13px; line-height: 1.65; color: var(--text-dim); margin-bottom: 16px; }
.award-card .award-tier { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.award-card.tier-4 { border-left-color: var(--purple-neon); box-shadow: inset 0 0 24px var(--purple-dim); }
.award-card.tier-4 .award-tier { color: var(--purple-neon); text-shadow: 0 0 8px var(--purple-dim); }
.award-card.tier-3 { border-left-color: var(--red); }
.award-card.tier-3 .award-tier { color: var(--red-hi); }
.award-card.tier-2 { border-left-color: rgba(255, 255, 255, 0.35); }
.award-card.tier-2 .award-tier { color: var(--text-dim); }
.award-card.tier-1 { border-left-color: var(--line-hard); }
.award-card.tier-1 .award-tier { color: var(--text-mute); }

/* ── Year selector pills ────────────────────────────────────────────────── */
.year-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 40px; }
.year-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--font-tech);
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 9px 20px 8px;
  border: 1px solid var(--line-hard);
  color: var(--text-dim);
  transition: all 0.2s;
}
.year-tabs a:hover { color: var(--text); border-color: var(--text-dim); }
.year-tabs a .year-tab-game {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 400;
}
.year-tabs a.active {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  border-color: transparent;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.year-tabs a.active .year-tab-game { color: rgba(255, 255, 255, 0.75); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
header.hero,
section.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-bg video, .hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: saturate(0.4) contrast(1.1);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.75) 65%, var(--bg) 100%);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(52px, 10vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}
.hero .hero-sub {
  margin-top: 26px;
  max-width: 560px;
  color: var(--text-dim);
  font-size: clamp(15px, 1.6vw, 18px);
}
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero-meta {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--rail);
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.v2-footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 8vw, 120px);
  background: var(--bg-raise);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding: clamp(48px, 6vw, 80px) 0 40px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 {
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.footer-grid a { display: block; color: var(--text-dim); padding: 5px 0; font-size: 14.5px; transition: color 0.2s; }
.footer-grid a:hover { color: var(--red-hi); }
.footer-brand img { height: 52px; margin-bottom: 16px; }
.footer-brand p { color: var(--text-mute); font-size: 14px; max-width: 320px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── Reveal-on-scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s; }
.reveal.in { opacity: 1; transform: none; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
.divider-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── FAQ accordion (v9) ──────────────────────────────────────────────────── */
.v9-faq { max-width: 760px; }
.v9-faq-item { border-bottom: 1px solid var(--line); }
.v9-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.v9-faq-q:hover { color: var(--red-hi); }
.v9-faq-ico {
  flex: none;
  font-family: var(--font-tech);
  font-size: 20px;
  font-weight: 400;
  color: var(--red-hi);
  transition: transform 0.25s;
}
.v9-faq-item.open .v9-faq-ico { transform: rotate(45deg); }
.v9-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.v9-faq-item.open .v9-faq-a { max-height: 1000px; }
.v9-faq-a p { padding: 0 4px 24px; color: var(--text-dim); line-height: 1.7; }
.v9-faq-a a { color: var(--red-hi); text-decoration: underline; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.img-frame {
  position: relative;
  border: 1px solid var(--line-hard);
  padding: 10px;
}
.img-frame img { width: 100%; filter: saturate(0.85); }
.img-frame::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 26px; height: 26px;
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
}
.img-frame::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 26px; height: 26px;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
}

.empty-note {
  border: 1px dashed var(--line-hard);
  padding: 40px;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--font-tech);
  letter-spacing: 0.1em;
}

/* ── Career timeline popup (roster cards) ────────────────────────────── */
/* member-card is a <button> (career-timeline popup trigger) - buttons don't
   inherit ancestor text color the way an <a> did, so without this override
   names rendered in the browser's default black button-text color. */
.member-card {
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.v9-tl-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.v9-tl-modal.open { display: flex; }
.v9-tl-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}
.v9-tl-modal-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--line-hard);
  padding: 34px clamp(20px, 4vw, 42px) 40px;
}
.v9-tl-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-hard);
  background: transparent;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.v9-tl-modal-close:hover { border-color: var(--red-hi); color: var(--red-hi); }
.v9-tl-modal-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  padding-right: 40px;
  text-transform: uppercase;
}
.v9-tl-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.v9-tl-modal-empty { color: var(--text-mute); padding: 30px 0; font-family: var(--font-tech); letter-spacing: 0.08em; }
.v9-tl-modal-body table.data td[data-label="Roles"] { overflow-wrap: normal; word-break: normal; }
.v9-tl-modal-body table.data th:nth-child(1) { width: 15%; }
.v9-tl-modal-body table.data th:nth-child(2) { width: 12%; }
.v9-tl-modal-body table.data th:nth-child(3) { width: 16%; }
.v9-tl-modal-body table.data th:nth-child(4) { width: 57%; }
.v9-tl-awards-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.v9-tl-awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px 10px;
  flex: 1 1 auto;
}
.v9-tl-total {
  flex: none;
  font-family: 'Archivo', var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: rgba(225, 6, 0, 0.22);
  user-select: none;
  pointer-events: none;
}
@media (max-width: 640px) {
  .v9-tl-awards-row { flex-wrap: wrap; }
  .v9-tl-total { width: 100%; text-align: right; font-size: 30px; margin-top: 4px; }
}
.v9-tl-award {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line-hard);
  background: var(--bg);
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  min-width: 0;
  overflow: hidden;
}
.v9-tl-award img { width: 15px; height: 15px; object-fit: contain; flex: none; }
.v9-tl-award-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.v9-tl-award b { color: var(--red-hi); font-weight: 700; margin-left: 1px; flex: none; }
.v9-tl-award.wc {
  border-color: rgba(199, 36, 255, 0.4);
  background: var(--purple-dim);
  color: var(--purple-neon);
}
.v9-tl-award.wc b { color: var(--purple-neon); }

/* mobile: stack each row into a labeled card instead of relying on horizontal scroll.
   Covers both the roster popup's modal table AND the member portfolio's own standalone
   Career Timeline table (.v9-career-table - a scoped class, NOT the generic table.data.wide,
   since that class is shared by other pages' tables - events.php/awards.php/skills.php -
   that don't carry data-label attributes and would lose their headers with no replacement
   if this rule matched them too). */
@media (max-width: 640px) {
  .v9-tl-modal-panel { padding: 26px 18px 30px; }
  .v9-tl-modal-body table.data,
  .v9-tl-modal-body table.data tbody,
  .v9-tl-modal-body table.data tr,
  .v9-tl-modal-body table.data td,
  .v9-career-table,
  .v9-career-table tbody,
  .v9-career-table tr,
  .v9-career-table td {
    display: block;
    width: 100%;
  }
  .v9-tl-modal-body table.data,
  .v9-career-table { min-width: 0; }
  .v9-tl-modal-body table.data thead,
  .v9-career-table thead { display: none; }
  .v9-tl-modal-body table.data tr,
  .v9-career-table tr { border-bottom: 1px solid var(--line-hard); padding: 14px 0; }
  .v9-tl-modal-body table.data tr:last-child,
  .v9-career-table tr:last-child { border-bottom: none; }
  .v9-tl-modal-body table.data td,
  .v9-career-table td { border-bottom: none; padding: 4px 0; }
  .v9-tl-modal-body table.data td::before,
  .v9-career-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 3px;
  }
}