/* Black Belt Infographic — giovannielabs.ai/karate/ */

:root {
  --bg: #0a0e14;
  --bg-2: #0f1620;
  --ink: #f5f1e8;
  --ink-dim: rgba(245, 241, 232, 0.6);
  --line: rgba(245, 241, 232, 0.12);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(ellipse at top, #131c2a 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; }

/* Nav */
.navbar {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(10, 14, 20, 0.7);
  border-bottom: 1px solid var(--line);
}
.nav-container {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.4rem; font-weight: 500;
  text-decoration: none;
}
.nav-logo span { color: #F5C518; }
.nav-menu { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.nav-link { text-decoration: none; font-size: 0.92rem; opacity: 0.8; }
.nav-link:hover { opacity: 1; }
.nav-link.nav-game {
  background: linear-gradient(135deg, rgba(245,197,24,0.18), rgba(245,197,24,0.06));
  border: 1px solid rgba(245,197,24,0.45);
  border-radius: 999px;
  padding: 6px 12px;
  opacity: 1;
  color: #F5C518;
  letter-spacing: 0.02em;
  transition: transform 150ms, background 200ms;
}
.nav-link.nav-game:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(245,197,24,0.30), rgba(245,197,24,0.10));
}

/* Hero */
.hero {
  position: relative;
  padding: 96px 24px 80px;
  text-align: center;
  overflow: hidden;
  /* dojo-floor warmth: a gentle radial light suggests a single overhead lamp */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(245, 197, 24, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
}

/* Thin gold horizontal line at the bottom of the hero — visual echo of a
   black belt knotted across the page. Sits above the filter chips. */
.hero-belt {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: clamp(80px, 18vw, 220px);
  height: 2px;
  background: linear-gradient(90deg, transparent, #F5C518 50%, transparent);
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.4);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.kicker {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 10px;
}
.hero h1 {
  /* Bebas Neue gets us close to Netflix Sans Bold / Novecento — condensed,
     bold, poster-display feel. All-caps by design. */
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6rem);
  margin: 0 0 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}
.subtitle {
  font-size: 1.05rem; line-height: 1.55;
  color: var(--ink-dim); max-width: 560px; margin: 0 auto;
}

/* Lineage (founders) */
.lineage {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 24px;
}
.lineage-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: center;
}
.lineage-figure {
  text-align: center;
  max-width: 150px;
}
.lineage-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(245, 197, 24, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  background: #1a1a1a;
}
.lineage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) sepia(18%) contrast(1.02);
  display: block;
}
.lineage-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin: 12px 0 2px;
  letter-spacing: 0.02em;
}
.lineage-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
@media (max-width: 560px) {
  .lineage { padding: 8px 16px 20px; }
  .lineage-row { gap: 12px; }
  .lineage-title { font-size: 0.7rem; letter-spacing: 0.06em; }
}

/* About */
.about {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 0;
  text-align: center;
}
.about p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.18rem;
  line-height: 1.6;
  color: #ffffff;
  margin: 0;
}

/* Filters */
.filters {
  max-width: 1280px; margin: 0 auto;
  padding: 20px 24px 8px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.filter-block {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
}
.filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-family: var(--sans);
}
.filter-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.chip {
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.chip:hover { border-color: rgba(245, 241, 232, 0.35); }
/* Text-only chips (orgs without a logo, like Tabata Sensei) wear the org's
   color as their text color so the brand identity reads at a glance. */
.chip.chip-text {
  padding: 8px 16px;
  color: var(--chip-color, var(--ink));
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.chip-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  filter: brightness(1.05);
}
.chip.active {
  color: #0a0e14;
  border-color: transparent;
  font-weight: 500;
}
.chip.active .chip-logo { filter: none; }

.filter-row.secondary {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: center;
}
.filter-row.secondary label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-dim);
}
.filter-row.secondary select {
  font-family: var(--sans); font-size: 0.92rem;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 8px;
  min-width: 130px;
}
.reset-btn {
  font-family: var(--sans); font-size: 0.85rem;
  padding: 8px 14px;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
  align-self: flex-end;
}
.reset-btn:hover { color: var(--ink); }

/* Big stat above the stage — total count of belts matching active filters.
   Updates live as filters change. The number itself uses Bebas Neue (same
   as the H1) so it lives in the same typographic register as the headline. */
.stat-display {
  text-align: center;
  margin: 24px auto 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-number {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.95;
  color: #F5C518;
  letter-spacing: 0.02em;
  transition: color 200ms;
}
.stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-family: var(--sans);
}

/* Stage = ball playground */
.stage {
  position: relative;
  width: 100%;
  height: min(70vh, 720px);
  margin: 16px auto 0;
  max-width: 1400px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Each ball.
   The ring is a conic-gradient with a radial mask so it shows up as a ring
   instead of a filled disc. With one organization, the gradient is a single
   color all the way around. With multiple organizations, the ring is split
   evenly between every org the person holds rank in. */
.ball {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 26px 2px var(--ring-glow, rgba(245, 197, 24, 0.55));
  transition: opacity 400ms, transform 200ms;
  will-change: transform;
  /* Stop the page from scrolling when a finger drags a ball */
  touch-action: none;
}
.ball::before {
  /* Conic-gradient ring. The mask uses `closest-side` so 100% maps to the
     box edge (not the corner) — without it, the ring eats into the face. */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--ring-gradient, conic-gradient(#F5C518 0deg 360deg));
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  pointer-events: none;
}
.ball::after {
  /* gentle top-light gradient = "luminous orb" feel */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}
.ball:hover { transform: scale(1.06); }
.ball.dimmed { opacity: 0.12; cursor: default; }
.ball.dimmed:hover { transform: none; }
/* Lifted feel while dragging — the ball is glued to the finger, the
   transition is killed so motion is 1:1, and the glow swells a hair. */
.ball.dragging {
  cursor: grabbing;
  transition: none;
  z-index: 5;
  filter: brightness(1.05);
  box-shadow: 0 0 36px 4px var(--ring-glow, rgba(245, 197, 24, 0.65));
}

/* Placeholder orb shown when a person has no photo yet — initials in serif
   on a deep dojo gradient. Same ring + glow as a photo orb, so it reads as
   "person known, photo pending" rather than "broken image". */
.ball-placeholder {
  background: linear-gradient(135deg, #1d2535 0%, #0a0e14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: rgba(245, 241, 232, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modal-photo.placeholder {
  background: linear-gradient(135deg, #1d2535 0%, #0a0e14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.6rem;
  color: rgba(245, 241, 232, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legend {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin: 16px 0 8px;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5, 8, 13, 0.78);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fade 200ms ease-out;
}
.modal-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 460px; width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px;
  position: relative;
  animation: rise 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink); border: none;
  font-size: 1.5rem; cursor: pointer;
  line-height: 1;
}
.modal-close:hover { background: rgba(255,255,255,0.08); }
.modal-photo {
  position: relative;
  width: 140px; height: 140px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 0 30px var(--ring-glow, rgba(245, 197, 24, 0.5));
  margin: 0 auto 20px;
}
.modal-photo::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--ring-gradient, conic-gradient(#F5C518 0deg 360deg));
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  pointer-events: none;
}
.modal h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 2rem; margin: 0 0 6px;
  text-align: center;
}
/* Optional poetic title under the name, e.g. "The son of Funakoshi".
   Italic serif keeps the editorial register. */
.modal-epithet {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  text-align: center;
  color: rgba(245, 197, 24, 0.85);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}
.modal-epithet[hidden] { display: none; }
.modal-epithet-line {
  display: block;
  line-height: 1.35;
}
.modal-subtitle {
  text-align: center;
  color: var(--ink-dim);
  margin: 0 0 24px;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.modal-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 20px;
  margin: 0 0 24px;
}
.modal-details dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  align-self: center;
}
.modal-details dd {
  margin: 0;
  font-size: 1rem;
}
.country-flag-img {
  display: inline-block;
  width: 1.2em;
  height: 0.85em;
  vertical-align: -0.12em;
  border-radius: 1px;
  object-fit: cover;
  margin-right: 0.15em;
}
.country-chip {
  display: inline-block;
  white-space: nowrap;
}
/* Custom country dropdown — replaces native <select> so image-based flags
   (East Turkistan SVG) can render alongside emoji flags in the option list. */
.cs { position: relative; display: inline-block; min-width: 160px; }
.cs-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border: 1px solid rgba(245,241,232,0.18);
  border-radius: 8px;
  font-family: inherit; font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.cs-trigger:hover { border-color: rgba(245,197,24,0.45); }
.cs-trigger[aria-expanded="true"] { border-color: var(--gold); }
.cs-flag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px;
  font-size: 1rem;
}
.cs-flag .country-flag-img { width: 22px; height: 14px; }
.cs-flag .university-logo-img {
  width: 22px; height: 22px;
  object-fit: contain;
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  padding: 1px;
}
.cs-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-chevron { font-size: 0.7rem; color: var(--ink-dim); }
.cs-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 30;
  margin: 0; padding: 4px;
  list-style: none;
  max-height: 300px; overflow-y: auto;
  background: rgba(20,20,22,0.98);
  border: 1px solid rgba(245,241,232,0.18);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  min-width: 220px;
}
.cs-panel[hidden] { display: none; }
.cs-panel li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
}
.cs-panel li:hover { background: rgba(245,197,24,0.10); }
.cs-panel li[aria-selected="true"] {
  background: rgba(245,197,24,0.16);
  color: var(--gold);
}

/* Ranks list inside the modal */
.modal-section { margin-top: 8px; }
.modal-section-title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 12px;
  font-weight: 500;
}
.modal-ranks {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.modal-ranks li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  /* Thicker left border whose color is set inline per row from the rank's
     color, echoing the ball's ring color back into the rank ladder. */
  border-left-width: 5px;
  border-radius: 12px;
}
.rank-logo {
  width: 44px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}
.rank-crest {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.rank-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* allow text to wrap on narrow screens */
}
.rank-headline {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rank-dan {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.rank-meta {
  font-size: 0.85rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

/* Rank rows that have a scanned certificate get a pointer cursor, a soft
   hover lift, and a small document icon on the right. The icon is the only
   affordance — clicking anywhere on the row opens the certificate lightbox. */
.modal-ranks li.has-cert {
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.modal-ranks li.has-cert:hover,
.modal-ranks li.has-cert:focus-visible {
  background: rgba(245, 197, 24, 0.06);
  border-color: rgba(245, 197, 24, 0.45);
  outline: none;
}
.rank-cert-cue {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-dim);
  opacity: 0.7;
  flex-shrink: 0;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.modal-ranks li.has-cert:hover .rank-cert-cue,
.modal-ranks li.has-cert:focus-visible .rank-cert-cue {
  color: #F5C518;
  opacity: 1;
}
.rank-cert-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Accolades — non-rank recognitions (awards, honors). Visual: a small
   landscape thumbnail on the left and stacked text on the right. Click
   opens the full image in the existing certificate lightbox. */
.modal-accolades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-accolades li.accolade-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #F5C518;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.modal-accolades li.accolade-item:hover,
.modal-accolades li.accolade-item:focus-visible {
  background: rgba(245, 197, 24, 0.06);
  border-color: rgba(245, 197, 24, 0.45);
  outline: none;
}
.accolade-thumb {
  width: 88px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #1a1a1a;
}
.accolade-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.accolade-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.25;
}
.accolade-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
@media (max-width: 480px) {
  .accolade-thumb { width: 72px; height: 54px; }
  .accolade-title { font-size: 1rem; }
}

/* Certificate lightbox — sits above the person modal at z-index 1100.
   Backdrop is darker/heavier than the person modal so the cert reads as the
   foreground subject. The image scales to viewport with a small caption. */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  animation: certFadeIn 0.18s ease;
}
.cert-lightbox[hidden] { display: none; }
@keyframes certFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cert-figure {
  margin: 0;
  max-width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cert-figure img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 197, 24, 0.15);
  background: #1a1a1a;
}
.cert-caption {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  text-align: center;
}
.cert-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cert-close:hover {
  background: rgba(245, 197, 24, 0.15);
  border-color: #F5C518;
}

/* University logos inline with the modal university field. A person can
   have multiple universities, so each one is wrapped in .uni-item and
   rendered as logo + name; multiple items wrap on small screens. */
#modal-university {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.uni-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.uni-logo {
  height: 22px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 3px;
  padding: 2px 4px;
}

/* Footer */
.page-footer {
  text-align: center;
  padding: 32px 24px;
  font-size: 0.85rem;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.page-footer a { color: var(--ink); text-decoration: none; }
.page-footer a:hover { color: #F5C518; }

/* Mobile */
@media (max-width: 640px) {
  /* On mobile keep the nav row but only show the Globe + Game pills —
     Home/Work links would compete with the logo at 390px. Globe and Game
     are the two cross-page entry points visitors actually need. */
  .nav-menu { display: flex; gap: 10px; }
  /* Hide all nav items by default on mobile, then re-show the last two
     (Globe + Game). Avoids depending on :has() support. */
  .nav-menu li { display: none; }
  .nav-menu li:nth-last-child(1),
  .nav-menu li:nth-last-child(2) { display: list-item; }
  .nav-link.nav-game { padding: 6px 10px; font-size: 0.82rem; }
  .nav-container { padding: 14px 18px; }

  /* Hero: smaller padding, smaller H1 floor so "BLACK BELT LINEAGE" doesn't
     overflow on a 390px viewport. */
  .hero { padding: 40px 20px 32px; }
  .hero h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); letter-spacing: 0.02em; }
  .subtitle { font-size: 0.95rem; }
  .hero-belt { width: clamp(60px, 30vw, 120px); }

  /* Filter chips: tighter gaps, smaller logos, room for serif Tabata text. */
  .filters { padding: 16px 18px 6px; gap: 14px; }
  .filter-row { gap: 8px; }
  .chip { min-height: 36px; padding: 4px 10px; }
  .chip-logo { height: 24px; max-width: 50px; }
  .chip.chip-text { padding: 6px 12px; font-size: 0.92rem; }
  .filter-label { font-size: 0.65rem; letter-spacing: 0.16em; }

  /* Secondary filters stack into a vertical column. */
  .filter-row.secondary {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 10px;
  }
  .filter-row.secondary label { font-size: 0.7rem; }
  .filter-row.secondary select { min-width: 100%; padding: 8px 10px; font-size: 0.95rem; }
  .reset-btn { align-self: stretch; padding: 10px; }

  /* Stat display: smaller on mobile so it doesn't dominate. */
  .stat-display { margin: 16px auto 4px; }
  .stat-number { font-size: clamp(3rem, 12vw, 4.5rem); }
  .stat-label { font-size: 0.7rem; letter-spacing: 0.18em; }

  /* Stage: shorter so it doesn't push the modal trigger off-screen. */
  .stage { height: 56vh; min-height: 380px; }
  .ball { width: 72px; height: 72px; }

  /* Modal: tighter padding, allow grid columns to shrink so long
     university names like "Boston University" don't blow out. */
  .modal { padding: 22px; }
  .modal h2 { font-size: 1.6rem; }
  .modal-photo { width: 110px; height: 110px; }
  .modal-details { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 14px; font-size: 0.95rem; }
  .modal-details dt { font-size: 0.65rem; }
  .modal-ranks li { padding: 12px 14px; gap: 12px; }
  .rank-logo, .rank-crest { width: 38px; height: 38px; }
  .rank-headline { font-size: 1.1rem; gap: 8px; }
  .rank-meta { font-size: 0.8rem; }
  .uni-logo { height: 20px; max-width: 60px; }
  /* Hide the "Certificate" label on mobile — the icon alone is the cue. */
  .rank-cert-label { display: none; }
  .cert-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}