/* ==========================================================================
   Fatima Sarwar — portfolio v2
   Dark editorial single page. Tokens first, then one block per section.
   ========================================================================== */

:root {
  --void: #0b110c;
  --surface: #111a12;
  --surface-2: #172118;
  --line: #243026;
  --line-soft: #1b251d;

  --acid: #d6f45a;
  --acid-dim: #aec94a;
  --mint: #8fe0b8;

  --paper: #f5f3ea;
  --haze: #a9b4a7;
  --haze-dim: #76827a;

  --sans: 'DM Sans', sans-serif;
  --display: Manrope, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'DM Mono', monospace;

  --pad: clamp(20px, 5.5vw, 88px);
  --measure: 1240px;
  --ease: cubic-bezier(.22, .68, .18, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 2px; }

/* ---------- shared atoms ---------------------------------------------- */

.tag {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  color: var(--haze);
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tag i {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--acid);
}
.tag i.pulse { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 #d6f45a55; }
  60% { box-shadow: 0 0 0 9px #d6f45a00; }
}

.h-display {
  font: 700 clamp(44px, 5.6vw, 82px)/.94 var(--display);
  letter-spacing: -.045em;
}
.h-display em {
  font: 400 1.06em/.94 var(--serif);
  letter-spacing: -.02em;
  color: var(--acid);
}

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: 100px;
  font: 600 13px var(--display);
  letter-spacing: -.01em;
  transition: transform .35s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn i { font-style: normal; font-size: 15px; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--acid); color: #16210f; }
.btn-primary:hover { background: #e4ff74; }
.btn-primary:hover i { transform: translateY(3px); }
.btn-ghost { border-color: var(--line); color: var(--paper); }
.btn-ghost:hover { border-color: var(--acid); color: var(--acid); }
.btn-ghost:hover i { transform: translate(3px, -3px); }

/* cards that lift on hover and carry a cursor-tracked rim light */
.lift {
  position: relative;
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.lift:hover { transform: translateY(-4px); border-color: #35452f; }

/* ---------- film grain + scroll progress ------------------------------ */

.grain {
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  height: 2px; pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--acid-dim), var(--acid));
  box-shadow: 0 0 12px #d6f45a66;
}

/* cursor-tracked glow, parked inside .spotlight sections */
.spotlight { position: relative; isolation: isolate; }
.spotlight > .glow {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0;
  transition: opacity .6s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), #d6f45a14, transparent 70%);
}
.spotlight:hover > .glow { opacity: 1; }

/* ================================ NAV ================================= */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  height: 76px; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: height .4s var(--ease), background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  height: 62px;
  background: #0b110cd9;
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

/* Wordmark: the same sans + serif-italic pairing as the hero headline, so the
   header is a small echo of the h1 rather than an unrelated monogram. */
.wordmark {
  width: max-content;
  font: 700 19px var(--display);
  letter-spacing: -.05em;
}
.wordmark em {
  margin-left: .22em;
  font: 400 1.14em var(--serif); font-style: italic;
  letter-spacing: -.02em;
  color: var(--acid);
}

.nav-links { display: flex; gap: 6px; }
.nav-links a {
  position: relative;
  padding: 8px 14px;
  border-radius: 100px;
  color: var(--haze);
  font-size: 13px;
  transition: color .3s, background .3s;
}
.nav-links a:hover { color: var(--paper); background: #ffffff0a; }
.nav-links a.is-current { color: var(--acid); background: #d6f45a14; }

.nav-cta {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  transition: border-color .3s, color .3s;
}
.nav-cta i { font-style: normal; color: var(--acid); }
.nav-cta:hover { border-color: var(--acid); color: var(--acid); }

/* ================================ HERO ================================ */

.hero {
  position: relative;
  min-height: 100svh;
  padding: 150px var(--pad) 90px;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(#ffffff07 1px, transparent 1px),
    linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(120% 90% at 70% 40%, #000 10%, transparent 72%);
}

.hero-grid {
  width: 100%; max-width: var(--measure); margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr .98fr;
  align-items: center; gap: clamp(20px, 4vw, 60px);
}

.hero-copy { position: relative; z-index: 2; }

.hero-title {
  margin: 26px 0 32px;
  font: 800 clamp(54px, 7.6vw, 112px)/.84 var(--display);
  letter-spacing: -.065em;
}
.ht-line { display: block; }
.ht-sans span {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(4deg);
  animation: letter-in .9s var(--ease) forwards;
}
.ht-sans span:nth-child(1) { animation-delay: .05s; }
.ht-sans span:nth-child(2) { animation-delay: .11s; }
.ht-sans span:nth-child(3) { animation-delay: .17s; }
.ht-sans span:nth-child(4) { animation-delay: .23s; }
.ht-sans span:nth-child(5) { animation-delay: .29s; }
.ht-sans span:nth-child(6) { animation-delay: .35s; }
@keyframes letter-in { to { opacity: 1; transform: none; } }

.ht-serif {
  margin-left: .42em;
  opacity: 0;
  animation: rise-in 1.1s .42s var(--ease) forwards;
}
.ht-serif em {
  font: 400 1.1em/.82 var(--serif);
  letter-spacing: -.025em;
  color: var(--acid);
}
.ht-serif .dot { color: var(--mint); font-weight: inherit; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(.3em); }
  to { opacity: 1; transform: none; }
}

.hero-role {
  max-width: 44ch;
  margin: 0;
  color: var(--haze);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.7;
  text-wrap: pretty;
  opacity: 0;
  animation: rise-in 1s .62s var(--ease) forwards;
}
.hero-role strong { color: var(--paper); font-weight: 500; }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 36px;
  opacity: 0;
  animation: rise-in 1s .78s var(--ease) forwards;
}

/* --- hero visual: tooth, orbits, halo --- */

.hero-visual {
  position: relative;
  min-height: min(62vh, 560px);
  display: grid; place-items: center;
  perspective: 1200px;
}
.halo, .orbit {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.halo {
  width: min(40vw, 460px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #d6f45a1f, #d6f45a08 55%, transparent 72%);
}
.orbit { border: 1px solid #d6f45a2e; border-radius: 50%; }
.orbit-a {
  width: min(44vw, 520px); height: min(15vw, 170px);
  animation: orbit-a 26s linear infinite;
}
@keyframes orbit-a {
  from { transform: translate(-50%, -50%) rotate(-22deg); }
  to { transform: translate(-50%, -50%) rotate(338deg); }
}

.tilt {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .5s var(--ease);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- hero tooth: depth comes from the split orbit, the curved wireframe,
   the travelling gloss and a shadow that answers the float ---- */
.tooth-float { animation: tooth-float 7s ease-in-out infinite; }
@keyframes tooth-float {
  0%, 100% { transform: translateY(6px); }
  50% { transform: translateY(-12px); }
}
.tooth {
  display: block;
  /* the explicit width leaves slack inside the wrapper at narrow viewports, and
     a block element would sit flush left in it */
  margin-inline: auto;
  width: min(100%, 440px); height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 40px #00000073);
  animation: tooth-spin 16s ease-in-out infinite;
}
@keyframes tooth-spin {
  0%, 100% { transform: rotateY(-15deg); }
  50% { transform: rotateY(15deg); }
}

.tooth-shadow {
  fill: #000; opacity: .5; filter: blur(12px);
  transform-box: fill-box; transform-origin: center;
  animation: tooth-contact 7s ease-in-out infinite;
}
@keyframes tooth-contact {
  0%, 100% { transform: scale(1); opacity: .52; }
  50% { transform: scale(.88); opacity: .3; }
}

.tooth-body { fill: url(#enamel); }
.edge { fill: none; stroke: #fbfff0; stroke-width: 1.5; stroke-linejoin: round; opacity: .85; }
.rim { fill: none; stroke: url(#rim); stroke-width: 4.5; stroke-linejoin: round; }
.tooth-root { pointer-events: none; }

.gloss {
  opacity: .5;
  transform-box: fill-box; transform-origin: center;
  animation: gloss-drift 16s ease-in-out infinite;
}
@keyframes gloss-drift {
  0%, 100% { transform: translateX(-26px) scale(.94); opacity: .38; }
  50% { transform: translateX(42px) scale(1.06); opacity: .6; }
}

.sweep { animation: tooth-sweep 9s 2s ease-in-out infinite; }
@keyframes tooth-sweep {
  0%, 62% { transform: translateX(0); opacity: 0; }
  68% { opacity: .9; }
  88% { transform: translateX(600px); opacity: 0; }
  100% { transform: translateX(600px); opacity: 0; }
}

.ring { fill: none; stroke-linecap: round; }
.ring-back { stroke: #d6f45a2b; stroke-width: 1.4; }
.ring-front { stroke: #d6f45a66; stroke-width: 1.8; }

.node {
  fill: #eaff9a;
  filter: drop-shadow(0 0 8px #d6f45a);
  offset-path: path("M59.8 361.8 A200 66 -18 0 1 440.2 238.2 A200 66 -18 0 1 59.8 361.8");
  offset-rotate: 0deg;
  animation: node-travel 16s linear infinite, node-depth 16s linear infinite;
}
.node-back { r: 5.5; opacity: 0; }
.node-front { animation-delay: -8s, -8s; }
@keyframes node-travel {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
/* each copy only shows on the half of the ring it belongs to */
@keyframes node-depth {
  0%, 49.9% { opacity: 0; }
  50%, 99.9% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tooth-float, .tooth, .tooth-shadow, .gloss, .sweep, .node { animation: none; }
  .node-back { opacity: 0; }
  .node-front { opacity: 1; offset-distance: 72%; }
}

.scroll-hint {
  position: absolute; left: var(--pad); bottom: 38px;
  display: flex; align-items: center; gap: 12px;
  color: var(--haze-dim);
  font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.scroll-hint i {
  display: block; width: 54px; height: 1px;
  background: linear-gradient(90deg, var(--acid), transparent);
  animation: sweep 2.4s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { transform: scaleX(.35); transform-origin: left; opacity: .5; }
  55% { transform: scaleX(1); opacity: 1; }
}

/* =============================== ABOUT ================================ */

.about {
  padding: clamp(64px, 8vw, 112px) var(--pad);
  border-top: 1px solid var(--line-soft);
}
.about-inner {
  max-width: var(--measure); margin: 0 auto;
  display: grid; grid-template-columns: minmax(160px, .34fr) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.about-body { max-width: 62ch; }
.about-body p {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.68;
  color: var(--haze);
  text-wrap: pretty;
}
.about-body p + p { margin-top: 20px; }
.about-body strong { color: var(--paper); font-weight: 500; }

@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================== JOURNEY =============================== */

.journey { padding: clamp(40px, 6vw, 80px) var(--pad) clamp(80px, 10vw, 140px); }
.journey-inner {
  max-width: var(--measure); margin: 0 auto;
  display: grid; grid-template-columns: minmax(260px, .78fr) 1.22fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.journey-aside { position: sticky; top: 124px; }
.journey-aside .h-display { margin: 24px 0 22px; }
.journey-blurb {
  max-width: 34ch; margin: 0;
  color: var(--haze);
  font-size: 14px; line-height: 1.75;
}

.scan-rail {
  display: flex; align-items: center; gap: 16px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.rail-tooth { width: 62px; height: 82px; overflow: visible; }
.rail-outline { fill: #ffffff06; stroke: #33432d; stroke-width: 12; }
.rail-fill {
  fill: var(--acid);
  transform-box: fill-box; transform-origin: bottom;
  transform: scaleY(var(--scan, 0));
  transition: transform .25s linear;
}
.rail-read { color: var(--haze-dim); font: 500 11px var(--mono); letter-spacing: .1em; }
.rail-read b { color: var(--acid); font-weight: 500; font-variant-numeric: tabular-nums; }

.jgroup { margin-bottom: 44px; }
.jgroup-head {
  display: flex; align-items: center; gap: 12px;
  /* not sticky: with only three groups it bought nothing and sliced the
     card scrolling underneath it in half */
  margin: 0 0 14px;
  padding: 2px 0 12px;
  font: 600 13px var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.jgroup-head::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--acid);
}

.jrow {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto 58px;
  align-items: center; gap: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(130deg, #121b13, #0e150f);
}
.jrow + .jrow { margin-top: 10px; }
.jrow-date {
  color: var(--haze-dim);
  font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.jrow-now { color: var(--mint); }
/* two distinct stints in one row: stacked so they never read as a range */
.jrow-date-stack { line-height: 1.9; }
.jrow-main h4 {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font: 600 17px var(--display); letter-spacing: -.025em;
}
.jrow-main .chip {
  padding: 3px 8px;
  border: 1px solid #35452f; border-radius: 100px;
  color: var(--acid-dim);
  font: 500 9px var(--mono); letter-spacing: .1em;
}
.jrow-main p { margin: 5px 0 0; color: var(--haze); font-size: 13px; line-height: 1.5; }
.jrow-place {
  color: var(--haze-dim);
  font: 400 11px var(--mono); letter-spacing: .03em;
  text-align: right;
}
.jrow-logo {
  display: grid; place-items: center;
  width: 58px; height: 52px; padding: 6px;
  border: 1px solid #ffffff14; border-radius: 10px;
  background: #f7f6f1;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s;
}
/* width/height rather than max-*: a percentage max-height does not resolve
   against an auto-sized grid row, so the img keeps its height attribute. */
.jrow-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jrow:hover .jrow-logo { transform: scale(1.07); box-shadow: 0 10px 22px #0008; }

/* logo slot for entries with no brand asset: monogram instead of an image */
.jrow-logo.is-mark {
  background: #0d140e;
  border-color: var(--line);
  color: var(--acid-dim);
  font: 500 11px var(--mono);
  letter-spacing: .06em;
}

/* =============================== ARCADE =============================== */

.arcade {
  padding: clamp(70px, 9vw, 120px) var(--pad) clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.arcade-head { max-width: var(--measure); margin: 0 auto 40px; }
.arcade-head .h-display { margin: 24px 0 20px; }
.arcade-blurb {
  max-width: 52ch; margin: 0;
  color: var(--haze); font-size: 15px; line-height: 1.75;
}

.cabinet {
  max-width: 1020px; margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, #19231a, #0f170f);
  box-shadow: 0 50px 90px -30px #000c, inset 0 1px 0 #ffffff0d;
}
.cab-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 6px 8px 14px;
}
.cab-name {
  color: var(--haze);
  font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.cab-hud { display: flex; flex-wrap: wrap; gap: 6px; }
.cab-hud span {
  padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 100px;
  background: #0d140e;
  color: var(--haze-dim);
  font: 400 10px var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.cab-hud b {
  margin-left: 5px;
  color: var(--acid); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cab-screen {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fbfcf9;
  box-shadow: inset 0 0 0 1px #ffffff14, 0 0 50px -14px #d6f45a2e;
}
.cab-screen canvas {
  display: block; width: 100%; height: auto;
  background: #fbfcf9;
  touch-action: none;
}

.cab-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 8px 4px;
}
.cab-foot p { margin: 0; color: var(--haze); font-size: 13px; line-height: 1.5; }
.cab-buttons { display: flex; gap: 8px; flex: none; }
.cab-buttons button {
  padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--paper);
  font: 600 12px var(--display);
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.cab-buttons button i { font-style: normal; }
.cab-buttons button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--acid); }
.cab-buttons #game-start {
  background: var(--acid); border-color: var(--acid); color: #16210f;
}
.cab-buttons #game-start:hover { background: #e4ff74; }
.cab-buttons button:disabled { opacity: .4; cursor: not-allowed; }

.cab-keys {
  margin: 10px 0 0; padding: 0 8px;
  color: var(--haze-dim);
  font: 400 10px var(--mono); letter-spacing: .06em;
}

/* score entry dialog over the screen */
.score-entry[hidden] { display: none; }
.score-entry {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: min(360px, calc(100% - 28px));
  padding: 26px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line); border-radius: 16px;
  background: #0f170f;
  box-shadow: 0 30px 70px #000b;
}
.score-entry .tag { color: var(--haze-dim); font-size: 10px; }
.score-entry h3 {
  margin: 16px 0 8px;
  font: 700 26px/1.1 var(--display); letter-spacing: -.045em;
  color: var(--paper);
}
.score-entry label { display: block; margin: 0 0 10px; color: var(--haze); font-size: 12px; }
.score-entry > div { display: flex; gap: 8px; }
.score-entry input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #0b110c; color: var(--paper);
  font: 13px var(--sans);
}
.score-entry input::placeholder { color: var(--haze-dim); }
.score-entry button[type=submit] {
  padding: 12px 18px;
  border: 0; border-radius: 8px;
  background: var(--acid); color: #16210f;
  font: 600 12px var(--display); cursor: pointer;
}
.score-entry .score-skip {
  display: block; margin: 12px 0 0 auto; padding: 4px 0;
  border: 0; background: transparent; color: var(--haze-dim);
  font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* leaderboard */
.board {
  max-width: 1020px; margin: 26px auto 0;
  padding: 18px 20px;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: #0f170f;
}
.board summary {
  width: max-content; cursor: pointer; list-style: none;
  color: var(--haze);
  font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.board summary::-webkit-details-marker { display: none; }
.board summary::after { content: ' +'; color: var(--acid); }
.board[open] summary::after { content: ' −'; }
.board ol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 32px;
  margin: 16px 0 0; padding: 0; list-style: none;
  counter-reset: lb;
}
.board li {
  counter-increment: lb;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--haze);
  font-size: 13px;
}
.board li::before {
  content: counter(lb, decimal-leading-zero);
  color: var(--haze-dim); font: 400 10px var(--mono);
}
.board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.board li b { color: var(--acid); font: 500 11px var(--mono); }

/* ============================== CONTACT =============================== */

.contact {
  padding: clamp(90px, 13vw, 180px) var(--pad);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.contact .tag { justify-content: center; }
.contact-title {
  margin: 28px 0 40px;
  font: 700 clamp(44px, 6.8vw, 96px)/.9 var(--display);
  letter-spacing: -.06em;
}
.contact-title em {
  font: 400 1.08em var(--serif); font-style: italic;
  letter-spacing: -.03em; color: var(--acid);
}

.contact-btn { margin: 4px auto 0; }

.contact-where {
  margin: clamp(44px, 6vw, 72px) 0 0;
  color: var(--haze-dim);
  font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase;
}

/* =============================== FOOTER =============================== */

.foot {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 26px var(--pad);
  border-top: 1px solid var(--line-soft);
  background: var(--void);
}
.foot .wordmark { margin-right: auto; font-size: 17px; }
.foot span, .foot small { color: var(--haze-dim); font: 400 11px var(--mono); letter-spacing: .05em; }

/* ============================== REVEALS =============================== */

.reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-up.is-in { opacity: 1; transform: none; }

/* ============================= RESPONSIVE ============================= */

/* The journey needs the full width sooner than the hero does: at ~1024 the
   two-column timeline squeezed row titles onto three lines. */
@media (max-width: 1080px) {
  .journey-inner { grid-template-columns: 1fr; }
  .journey-aside { position: static; }
  .scan-rail { display: none; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-visual { order: -1; min-height: 44vh; }
  .tooth { width: min(72%, 320px); }
  .hero { padding-top: 120px; min-height: 0; }
}

@media (max-width: 860px) {
  .nav { height: 64px; }
  .nav-links { display: none; }
  .nav.is-stuck { height: 58px; }
  .jrow {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 6px 16px;
    padding: 18px;
  }
  .jrow-date { grid-column: 1; }
  .jrow-logo { grid-column: 2; grid-row: 1 / span 3; width: 52px; height: 48px; }
  .jrow-main { grid-column: 1; }
  .jrow-place { grid-column: 1; text-align: left; }
  .cabinet { padding: 10px; border-radius: 16px; }
  .cab-foot { flex-direction: column; align-items: flex-start; }
  .cab-buttons { width: 100%; justify-content: flex-end; }
  .foot { gap: 10px; }
  .foot span { order: 3; width: 100%; }
}

@media (max-width: 640px) {
  /* On a phone the decorative tooth was taking 44vh above the name, pushing the
     headline past halfway and the buttons below the fold. Copy comes first here
     and the tooth is sized to what is left. */
  .hero { padding-top: 94px; padding-bottom: 54px; }
  .hero-grid { gap: 26px; }
  .hero-visual { order: 0; min-height: 0; }
  .tooth { width: min(58%, 232px); }
  .hero-title { margin: 20px 0 22px; }
  .scroll-hint { display: none; }
}

@media (max-width: 560px) {
  /* keep the wordmark clear of the contact pill on narrow screens */
  .wordmark { font-size: 16px; }
  .nav-cta { padding: 8px 13px; font-size: 12px; }
  .hero-title { margin: 22px 0 26px; }
  .ht-serif { margin-left: 0; }
  .cab-hud span { font-size: 9px; padding: 6px 9px; }
}

@media (max-width: 380px) {
  /* at the narrowest widths the pill keeps only its arrow */
  .nav-cta span { display: none; }
  .nav-cta { padding: 8px 11px; }
}

/* Landscape tablets and 720p laptops are wide but short: trim the hero's
   vertical padding so the call to action stays above the fold. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding-top: 104px; padding-bottom: 56px; min-height: 0; }
  .hero-visual { min-height: 0; }
  .tooth { width: min(100%, 330px); }
}

/* Phone landscape: ~414px of height cannot hold the headline, the paragraph,
   the buttons AND a decorative tooth. The content wins; the tooth is dropped. */
@media (max-height: 560px) {
  .hero { padding-top: 78px; padding-bottom: 30px; min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 14px; }
  .hero-visual { display: none; }
  .hero-title { margin: 10px 0 12px; font-size: clamp(32px, 5.4vw, 50px); }
  .hero-role { font-size: 13px; max-width: 60ch; }
  .hero-actions { margin-top: 18px; }
  .scroll-hint { display: none; }
}

/* ========================== REDUCED MOTION ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ht-sans span, .ht-serif, .hero-role, .hero-actions { opacity: 1; transform: none; }
  .reveal-up { opacity: 1; transform: none; }
}

/* ====================== LEADERBOARD ADMIN (private) =================== */

.manage-page { min-height: 100vh; display: flex; flex-direction: column; }
.manage-page .nav { position: static; }
.manage-page .nav-cta { cursor: default; color: var(--haze-dim); }

.manage-panel {
  flex: 1;
  width: min(760px, calc(100% - 40px));
  margin: clamp(48px, 9vh, 104px) auto;
}
.manage-panel .h-display { margin: 24px 0 20px; }
.manage-copy { max-width: 52ch; color: var(--haze); font-size: 14px; line-height: 1.75; }

.manage-status {
  margin: 30px 0 14px;
  color: var(--haze);
  font: 400 11px var(--mono); letter-spacing: .08em;
}
.manage-status[data-tone="good"] { color: var(--acid); }
.manage-status[data-tone="bad"] { color: #ffb4ab; }

.manage-rows {
  margin: 0 0 26px; padding: 0; list-style: none;
  border-top: 1px solid var(--line-soft);
}
.manage-rows li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.manage-rank { color: var(--haze-dim); font: 400 10px var(--mono); }
.manage-rows strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-rows b { color: var(--acid); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; }
.manage-empty { display: block !important; color: var(--haze-dim); padding: 18px 4px; }

.manage-remove {
  padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--haze);
  font: 500 11px var(--display); cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.manage-remove:hover:not(:disabled) { border-color: #8c3831; color: #ffb4ab; background: #2a1513; }

.manage-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ghost-btn, .danger-btn {
  padding: 12px 20px;
  border-radius: 100px;
  font: 600 12px var(--display);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.ghost-btn { border: 1px solid var(--line); background: transparent; color: var(--paper); }
.ghost-btn:hover:not(:disabled) { border-color: var(--acid); color: var(--acid); }
.danger-btn { border: 1px solid #7c2f2a; background: #2a1513; color: #ffb4ab; }
.danger-btn:hover:not(:disabled) { background: #8c3831; border-color: #8c3831; color: #fff; }
.ghost-btn:disabled, .danger-btn:disabled, .manage-remove:disabled { opacity: .45; cursor: not-allowed; }

.manage-page .foot { margin-top: auto; }

@media (max-width: 560px) {
  .manage-rows li { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 8px; }
  .manage-remove { grid-column: 2 / -1; justify-self: start; }
}

/* =============================== 404 ================================== */

.notfound-page { min-height: 100svh; display: grid; place-items: center; }
.notfound { padding: var(--pad); text-align: center; max-width: 46ch; }
.notfound .tag { justify-content: center; }
.notfound-title {
  margin: 26px 0 18px;
  font: 700 clamp(48px, 9vw, 104px)/.9 var(--display);
  letter-spacing: -.06em;
}
.notfound-title em {
  font: 400 1.08em var(--serif); font-style: italic;
  letter-spacing: -.03em; color: var(--acid);
}
.notfound-copy { margin: 0 0 32px; color: var(--haze); font-size: 15px; line-height: 1.7; }