/*
 * UFC Analytics — Event page ("Fight Telemetry") stylesheet.
 * Ported from the approved DesignSync concept (option-a-telemetry.html).
 * Everything is scoped under .event-tel so it can never leak into the rest
 * of the site, which otherwise uses Tailwind + globals.css conventions.
 */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/event-kit/fonts/bigshoulders-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/event-kit/fonts/plexsans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/event-kit/fonts/plexsans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Event JetBrains Mono";
  src: url("/event-kit/fonts/jbmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Event JetBrains Mono";
  src: url("/event-kit/fonts/jbmono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ── tokens ──────────────────────────────────────────────────────────── */
.event-tel {
  --ground: #0a0d12;
  --panel: #12161d;
  --panel-2: #171c25;
  --line: #232a36;
  --ink: #e6eaf0;
  --ink-dim: #8b96a8;
  --neutral: #6b7686;
  --fall: #ff4d5e;
  --fall-dim: rgba(255, 77, 94, 0.14);
  --disp: "Big Shoulders Display", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --mono: "Event JetBrains Mono", monospace;

  /* accent library — five hue pairs (primary + soft tint) kept clear of the
     fixed signal colours below (KO coral, SUB blue, title gold, fall coral)
     so a highlight is never mistaken for a finish/title/danger cue. One pair
     drives every general highlight/pill/label via --rise/--rise-soft; which
     pair is active is repointed per event (see lib/event-theme.ts) so the
     site doesn't read as one flat colour on every event page. */
  --acc-cyan: #3ddbd9;
  --acc-cyan-soft: #9ff0ee;
  --acc-azure: #4c9cff;
  --acc-azure-soft: #aacbff;
  --acc-emerald: #2fd98a;
  --acc-emerald-soft: #93f0c3;
  --acc-lime: #a6db3d;
  --acc-lime-soft: #d7f0a0;
  --acc-magenta: #e23d9e;
  --acc-magenta-soft: #f3a0d2;

  --rise: var(--acc-cyan);
  --rise-soft: var(--acc-cyan-soft);
  --rise-glow: color-mix(in oklab, var(--rise) 45%, transparent);
  --rise-dim: color-mix(in oklab, var(--rise) 14%, transparent);

  --ko: #ff4d5e;
  --ko-glow: rgba(255, 77, 94, 0.35);
  --ko-dim: rgba(255, 77, 94, 0.09);
  --sub: #7b93ff;
  --sub-glow: rgba(123, 147, 255, 0.4);
  --sub-dim: rgba(123, 147, 255, 0.14);
  --title-c: #e0a82e;
  --title-glow: rgba(224, 168, 46, 0.4);

  /* fight-outcome semantics (win/loss/draw/nc) — deliberately separate from
     the --acc-* decorative accent library and from --ko/--sub/--title-c,
     since these mean something fixed (good/bad/inconclusive) regardless of
     which accent hue or finish type is active on a given page. */
  --win: #3ecf6e;
  --win-glow: rgba(62, 207, 110, 0.4);
  --loss: #ff4d5e;
  --loss-glow: rgba(255, 77, 94, 0.4);
  --outcome-draw: #e8a23d;
  --outcome-draw-glow: rgba(232, 162, 61, 0.4);

  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
.event-tel ::selection {
  background: var(--rise);
  color: var(--ground);
}
.event-tel a {
  color: inherit;
}

/* faint scanline texture — the one deliberate "broadcast" texture */
.event-tel {
  position: relative;
}
.event-tel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  background: repeating-linear-gradient(to bottom, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.event-tel .wide {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (max-width: 640px) {
  .event-tel .wide {
    padding-inline: 1rem;
  }
}

/* breaks a section out to the edges of the site's <main> content column
   (escaping just its px-4/1rem padding) from inside the max-w-7xl centered
   container — used only by .hero and .readout. Deliberately NOT 100vw:
   viewport units overshoot by the scrollbar's width and either clip content
   or force a horizontal scrollbar, so this stays relative to the parent
   instead. It doesn't reach true browser-edge on very wide screens, but is
   exact and scrollbar-safe at every width. */
.event-tel .bleed {
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
}

/* ── back link (replaces the concept's masthead — the real site header
   already provides top-level nav, so this is just a lightweight return link) ── */
.event-tel .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 1.5rem 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.event-tel .back-link:hover {
  color: var(--rise);
}

/* ── hero ── */
.event-tel .hero {
  position: relative;
  min-height: 56svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.event-tel .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.event-tel .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.25) brightness(0.42);
}
.event-tel .hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 18, 0.15) 0%, rgba(10, 13, 18, 0.55) 55%, var(--ground) 97%),
    linear-gradient(100deg, color-mix(in oklab, var(--rise) 16%, transparent), transparent 55%);
}
.event-tel .hero-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2.5rem 1.5rem 2rem;
}
.event-tel .hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rise);
  margin: 0 0 0.6rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.event-tel .hero-eyebrow .sep {
  color: var(--line);
}
.event-tel h1 {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 6.6vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.event-tel .fighter-hero {
  min-height: 0;
  align-items: stretch;
  overflow: visible;
  background: linear-gradient(160deg, var(--panel), var(--ground) 75%);
  border-bottom: 1px solid var(--line);
  padding: 2.75rem 0 0;
}
.event-tel .fighter-hero-inner {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
/* no frame/box — the photo's own bottom edge sits flush with the hero's
   bottom edge (which is where the readout gauges begin, since .fighter-hero
   carries no bottom padding of its own — only .fighter-hero-body does). */
.event-tel .fighter-portrait {
  flex: none;
}
.event-tel .fighter-portrait img {
  display: block;
  height: 19rem;
  width: auto;
  /* the source photo is a transparent-background cutout, so a filter
     drop-shadow (which follows the alpha channel) hugs the fighter's
     actual silhouette instead of tracing the image's rectangular box
     the way box-shadow would. */
  filter: drop-shadow(0 0 10px var(--rise-glow)) drop-shadow(0 0 28px var(--rise-glow));
}
.event-tel .fighter-hero-body {
  flex: 1;
  min-width: 16rem;
  padding-bottom: 2.75rem;
}
.event-tel .fighter-nickname {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rise);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  margin: 0.3rem 0 0;
}
.event-tel .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
}
.event-tel .meta-pill {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-dim);
  background: var(--panel-2);
}
.event-tel .meta-pill strong {
  color: var(--ink);
  font-weight: 700;
}
.event-tel .meta-pill.record {
  border-color: var(--rise);
  color: var(--rise);
  font-weight: 700;
}
.event-tel .hero-meta {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
}

/* ── readout strip: up to 6 gauges, horizontally scrollable on small screens ── */
.event-tel .readout {
  border-block: 1px solid var(--line);
  background: var(--panel);
  overflow-x: auto;
}
.event-tel .readout-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
}
/* 6 equal columns only once there's genuinely room — at ~768px each tile is
   ~111px and values like "101h 32m ▲8.0%" wrap mid-figure. Below this the
   row stays horizontally scrollable with a sane minimum tile width. */
@media (min-width: 920px) {
  .event-tel .readout-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
}
.event-tel .gauge {
  padding: 1.1rem 1.15rem;
  border-right: 1px solid var(--line);
}
.event-tel .gauge:last-child {
  border-right: none;
}
.event-tel .gauge .g-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.event-tel .gauge .g-value {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
}
.event-tel .gauge .g-delta {
  font-size: 0.72rem;
  font-weight: 700;
}
.event-tel .gauge .g-delta.up {
  color: var(--rise);
}
.event-tel .gauge .g-delta.down {
  color: var(--fall);
}
.event-tel .gauge .g-bar {
  height: 3px;
  margin-top: 0.6rem;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.event-tel .gauge .g-bar > i {
  display: block;
  height: 100%;
  background: var(--rise);
  transform-origin: left;
}
.event-tel .gauge.is-down .g-bar > i {
  background: var(--fall);
}
@media (prefers-reduced-motion: reduce) {
  .event-tel .g-bar > i {
    animation: none !important;
    transform: none !important;
  }
}

/* ── transcript: the analysis narrative as an annotated readout log ── */
.event-tel .transcript {
  padding: 3.5rem 0 1rem;
}
.event-tel .transcript-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.event-tel .transcript-head .tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--rise);
  background: var(--rise-dim);
  border: 1px solid var(--rise);
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.08em;
}
.event-tel .transcript-head h2 {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: 0.01em;
}
.event-tel .log {
  display: grid;
  gap: 0;
}
.event-tel .log-line {
  display: grid;
  grid-template-columns: 6.75rem 1fr;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.event-tel .log-line:last-child {
  border-bottom: 1px solid var(--line);
}
.event-tel .log-ts {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--rise-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 0.18rem;
}
.event-tel .log-body p {
  margin: 0;
  line-height: 1.62;
  color: var(--ink);
  font-size: 0.98rem;
}
.event-tel .log-body strong {
  color: var(--rise);
  font-weight: 600;
}
@media (max-width: 560px) {
  .event-tel .log-line {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* ── fight cards ─────────────────────────────────────────────────────────
   Hierarchy: main event (hero) > rest of main card (large) > undercard
   (compact). Method-specific treatments are ADDITIVE, not exclusive:
   --title is always the outer frame (gold, rarest signal); --ko/--sub glow
   inward from the method tag. A title-fight KO gets both at once. */
.event-tel .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 1.1rem;
}
.event-tel .section-head h2 {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: 0.01em;
}
.event-tel .section-head .count {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--rise-soft) 35%, var(--ink-dim));
}

.event-tel .cardblock {
  padding-top: 1.5rem;
}
.event-tel .divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 3rem 0 1.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rise-soft) 45%, var(--neutral));
}
.event-tel .divider::before,
.event-tel .divider::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}

/* timeline — a continuous vertical line (on .historylist, positioned to
   pass through every dot's center) with a small glowing dot + stacked
   "Mon / YYYY" label alongside each fight card. */
.event-tel .historylist {
  position: relative;
}
.event-tel .historylist::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(var(--rise), color-mix(in oklab, var(--rise) 25%, transparent));
  opacity: 0.55;
}
.event-tel .timeline-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.event-tel .timeline-row .fcard {
  flex: 1;
  min-width: 0;
}
.event-tel .timeline-node {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 3.6rem;
}
.event-tel .timeline-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--rise);
  box-shadow: 0 0 8px var(--rise-glow);
}
.event-tel .timeline-date {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 700px) {
  .event-tel .historylist::before {
    display: none;
  }
  .event-tel .timeline-row {
    flex-direction: row;
    align-items: center;
  }
  .event-tel .timeline-node {
    width: 3.6rem;
  }
}

.event-tel .fcard {
  display: block;
  position: relative;
  background: var(--panel);
  border-radius: 4px;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.event-tel .fcard:hover {
  border-color: color-mix(in oklab, var(--rise) 40%, var(--line));
}
.event-tel .fcard .wc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.event-tel .fcard .wc {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rise-soft) 45%, var(--neutral));
}
/* title fight whose gold top band is suppressed (fighter history pages,
   where the outcome band owns that slot) — the bout name still carries the
   gold, just as an inline pill instead of a full-width band. */
.event-tel .fcard .wc.wc-title {
  background: var(--title-c);
  color: #241a02;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}
.event-tel .fcard .badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}
.event-tel .fcard .badge.title {
  background: var(--title-c);
  color: #241a02;
}

/* top band — full width, flush against the card's top edge (breaks out of
   the card's own padding via negative margins). Two variants share this
   geometry and are mutually exclusive, since both claim the same slot:
     .title-band   — gold, carries the weight-class text on title fights
     .outcome-band — win/loss/draw/nc, on a fighter's own history page
   In both cases the card's border is recolored to match (see below) so
   there's no seam between the band and the card edge. */
.event-tel .fcard .title-band,
.event-tel .fcard .outcome-band {
  margin: -1.25rem -1.25rem 0.85rem;
  padding: 0.3rem 1.25rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.event-tel .fcard .title-band {
  background: var(--title-c);
  color: #241a02;
}
.event-tel .fcard.is-title {
  border-color: var(--title-c);
}
.event-tel .fcard .badge.ko {
  background: var(--ko-dim);
  color: var(--ko);
  border: 1px solid rgba(255, 77, 94, 0.3);
}
.event-tel .fcard .badge.sub {
  background: var(--sub-dim);
  color: var(--sub);
  border: 1px solid rgba(123, 147, 255, 0.35);
}

.event-tel .matchup {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
.event-tel .fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  flex: 1;
}
.event-tel .fighter img,
.event-tel .fighter .ph {
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
  filter: contrast(1.08);
  border: 2px solid var(--line);
  transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.event-tel .fighter .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 900;
  color: var(--ink-dim);
}
.event-tel .fighter .fname {
  font-weight: 600;
  margin-top: 0.5rem;
  line-height: 1.2;
}
.event-tel .fighter .frec {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  margin-top: 0.15rem;
}
.event-tel .vsmark {
  font-family: var(--disp);
  font-weight: 900;
  color: var(--ink-dim);
  flex: none;
}

/* win / loss / draw / nc markers */
.event-tel .fighter .result-tag {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}
.event-tel .fighter.winner img,
.event-tel .fighter.winner .ph {
  box-shadow: 0 0 0 3px var(--rise), 0 0 18px var(--rise-glow);
  border-color: transparent;
}
.event-tel .fighter.winner .fname {
  color: var(--ink);
}
.event-tel .fighter.winner .result-tag {
  background: var(--rise);
  color: var(--ground);
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
}
.event-tel .fighter.loser img,
.event-tel .fighter.loser .ph {
  opacity: 0.82;
  filter: contrast(1.02) brightness(0.82) saturate(0.7);
}
.event-tel .fighter.loser .fname {
  color: var(--ink-dim);
}
.event-tel .fighter.loser .result-tag {
  color: var(--neutral);
}
.event-tel .fighter.draw .fname {
  color: var(--ink);
}
.event-tel .fighter.draw .result-tag {
  color: var(--title-c);
}

.event-tel .result-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--mono);
}
.event-tel .finish-row {
  margin-top: 0.65rem;
}
.event-tel .finish-row .badge {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.45rem 0.5rem;
}

/* main event: hero card */
.event-tel .fcard.main-event {
  padding: 2rem 1.75rem 1.75rem;
  border-width: 2px;
  border-color: color-mix(in oklab, var(--ink) 30%, var(--line));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.event-tel .fcard.main-event .fighter img,
.event-tel .fcard.main-event .fighter .ph {
  width: 7.5rem;
  height: 7.5rem;
}
.event-tel .fcard.main-event .fighter .fname {
  font-size: 1.15rem;
}
.event-tel .fcard.main-event .vsmark {
  font-size: 2rem;
  margin-top: 2.75rem;
}
.event-tel .fcard.main-event .result-row {
  margin-top: 1.5rem;
  font-size: 1rem;
}
.event-tel .fcard.main-event .result-row .method {
  font-weight: 700;
  font-size: 1.15rem;
}
.event-tel .fcard.main-event.is-title {
  border-color: var(--title-c);
  box-shadow: 0 0 40px var(--title-glow);
}
.event-tel .fcard.main-event .title-band,
.event-tel .fcard.main-event .outcome-band {
  margin: -2rem -1.75rem 1.1rem;
  padding: 0.4rem 1.75rem;
  font-size: 0.78rem;
}
.event-tel .fcard.main-event.is-ko {
  background: linear-gradient(160deg, var(--ko-dim), var(--panel) 60%);
}
.event-tel .fcard.main-event.is-sub {
  background: linear-gradient(160deg, var(--sub-dim), var(--panel) 60%);
}
.event-tel .fcard.main-event.is-ko::before,
.event-tel .fcard.main-event.is-sub::before {
  width: 5.6rem;
  height: 5.6rem;
}
.event-tel .fcard.main-event.is-ko::after,
.event-tel .fcard.main-event.is-sub::after {
  top: 1.12rem;
  right: -0.08rem;
  width: 3.9rem;
  font-size: 1.5rem;
}

/* finish flag — a solid triangle filling the card's top-right corner,
   reading KO or SUB. Anchored to the CARD corner itself (not a fighter
   photo) so it can never drift out of alignment; sized per tier below.
   Shape (::before) and label (::after) are separate elements because the
   label rotates 45° to run parallel to the triangle's hypotenuse while
   the triangle itself must stay unrotated (clip-path is corner-anchored). */
.event-tel .fcard.is-ko::before,
.event-tel .fcard.is-sub::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}
.event-tel .fcard.is-ko::before {
  background: var(--ko);
}
.event-tel .fcard.is-sub::before {
  background: var(--sub);
}
.event-tel .fcard.is-ko::after,
.event-tel .fcard.is-sub::after {
  position: absolute;
  z-index: 3;
  top: 0.86rem;
  right: 0.1rem;
  width: 2.47rem;
  text-align: center;
  line-height: 1;
  transform: rotate(45deg);
  pointer-events: none;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}
.event-tel .fcard.is-ko::after {
  content: "KO";
  color: #1a0505;
}
.event-tel .fcard.is-sub::after {
  content: "SUB";
  color: #0d0a1f;
}
.event-tel .fcard.is-ko .wc-row,
.event-tel .fcard.is-sub .wc-row {
  padding-right: 2.1rem;
}
.event-tel .undergrid .fcard.is-ko .wc-row,
.event-tel .undergrid .fcard.is-sub .wc-row {
  padding-right: 1.6rem;
}

/* a title fight that ALSO finished by KO/SUB gets both treatments at once
   (additive, not exclusive) — the corner triangle stays pinned to the very
   top-right corner (top:0) and layers on top of the title-band (the band
   is a static in-flow element, the triangle an absolutely-positioned
   pseudo-element with z-index, so it naturally paints above it). */

/* rest of main card: large grid */
.event-tel .maingrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 700px) {
  .event-tel .maingrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.event-tel .maingrid .fighter img,
.event-tel .maingrid .fighter .ph {
  width: 4.75rem;
  height: 4.75rem;
}
.event-tel .maingrid .fighter .fname {
  font-size: 0.92rem;
}
.event-tel .maingrid .vsmark {
  font-size: 1.15rem;
  margin-top: 1.8rem;
}
.event-tel .maingrid .result-row {
  margin-top: 1rem;
  font-size: 0.8rem;
}
.event-tel .maingrid .result-row .method {
  font-weight: 700;
  font-size: 0.92rem;
}
.event-tel .maingrid .fcard.is-title {
  box-shadow: 0 0 24px var(--title-glow);
}
/* single-column variant of .maingrid (same fighter/vsmark/result-row sizing,
   just one full-width row per fight instead of a 2-up grid) — used for the
   fighter page's year-grouped fight history */
.event-tel .maingrid.historylist {
  grid-template-columns: 1fr;
}

/* undercard: compact grid */
.event-tel .undergrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 1.25rem;
}
@media (min-width: 560px) {
  .event-tel .undergrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .event-tel .undergrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.event-tel .undergrid .fcard {
  padding: 0.95rem 1rem;
  border-color: color-mix(in oklab, var(--line) 55%, transparent);
  background: color-mix(in oklab, var(--panel) 85%, var(--ground));
}
.event-tel .undergrid .fcard.is-title {
  border-color: var(--title-c);
  box-shadow: 0 0 16px var(--title-glow);
}
.event-tel .undergrid .fcard .title-band,
.event-tel .undergrid .fcard .outcome-band {
  margin: -0.95rem -1rem 0.65rem;
  padding: 0.24rem 1rem;
  font-size: 0.52rem;
}
.event-tel .undergrid .fcard.is-ko::before,
.event-tel .undergrid .fcard.is-sub::before {
  width: 3.1rem;
  height: 3.1rem;
}
.event-tel .undergrid .fcard.is-ko::after,
.event-tel .undergrid .fcard.is-sub::after {
  top: 0.63rem;
  right: 0;
  width: 2.08rem;
  font-size: 0.8rem;
}
.event-tel .undergrid .fighter img,
.event-tel .undergrid .fighter .ph {
  width: 3.9rem;
  height: 3.9rem;
}
.event-tel .undergrid .fighter .fname {
  font-size: 0.78rem;
}
.event-tel .undergrid .fighter .frec {
  font-size: 0.62rem;
}
.event-tel .undergrid .vsmark {
  font-size: 0.8rem;
  margin-top: 1.55rem;
}
.event-tel .undergrid .result-row {
  margin-top: 0.7rem;
  font-size: 0.68rem;
}
.event-tel .undergrid .result-row .method {
  font-weight: 700;
  font-size: 0.78rem;
}
.event-tel .undergrid .wc-row {
  margin-bottom: 0.5rem;
}

.event-tel .foot {
  border-top: 1px solid var(--line);
  padding: 1.5rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--neutral);
  letter-spacing: 0.04em;
}

/* ── fight page ───────────────────────────────────────────────────────── */
/* no bottom padding: the fighter cutouts sit hard against the hero's
   bottom edge, which is exactly where the readout gauge strip begins
   (same technique as the fighter page hero). */
.event-tel .fight-hero {
  /* base .hero is a flex row; this hero stacks (belt over content) */
  display: block;
  min-height: 0;
  overflow: visible;
  background: linear-gradient(160deg, var(--panel), var(--ground) 75%);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0 0;
}
/* linked event name, tinted in the page accent so it reads as a link
   rather than a label */
.event-tel .event-chip {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--rise) 45%, transparent);
  border-radius: 3px;
  background: var(--rise-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rise-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.event-tel .event-chip:hover {
  border-color: var(--rise);
  background: color-mix(in oklab, var(--rise) 22%, transparent);
  color: var(--rise);
}
/* standalone gold pill — same look as .fcard .badge.title, but usable
   outside a fight card (the fight page's hero isn't a card). */
.event-tel .title-pill {
  background: var(--title-c);
  color: #241a02;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
.event-tel .bonus-pill {
  border: 1px solid var(--title-c);
  color: var(--title-c);
  padding: 0.18rem 0.6rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
/* the stage: [fighter] [result] [fighter], all bottom-aligned so the
   photos land flush on the hero's bottom edge. Names sit ABOVE the photos
   (there's no room below them), and the result reads between the two. */
.event-tel .fight-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
}
.event-tel .fight-stage .fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}
/* fixed min-height keeps one- and two-line names from shifting the photos
   relative to each other */
.event-tel .fight-stage .fname {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  min-height: 2.9rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* result tag overlays the photo's lower third rather than sitting above it */
.event-tel .fight-stage .photo {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.event-tel .fight-stage .result-tag {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  padding: 0.34rem 0.85rem;
  border-radius: 2px;
}
/* Solid backing so each tag stays legible over the photo, using the same
   semantic win/loss/draw colours as the fighter page's outcome bands
   (NOT the per-page --rise accent, which varies fight to fight). */
/* padding repeated here because the base `.fighter.winner .result-tag`
   rule is (0,4,0) and outranks the shared tag rule above, which left WIN
   with tighter padding than LOSS */
.event-tel .fight-stage .fighter.winner .result-tag {
  background: var(--win);
  color: var(--ground);
  padding: 0.34rem 0.85rem;
}
.event-tel .fight-stage .fighter.loser .result-tag {
  background: var(--loss);
  color: #2a0508;
}
.event-tel .fight-stage .fighter.draw .result-tag,
.event-tel .fight-stage .fighter.nc .result-tag {
  background: var(--outcome-draw);
  color: #2a1a02;
}
/* :not(.cutout) matters — a bare `.fight-stage .fighter img` selector ties
   on specificity with `.fight-hero .cutout img` and whichever comes later
   wins, which silently forced cutouts to a square. */
.event-tel .fight-stage .photo:not(.cutout) img,
.event-tel .fight-stage .photo:not(.cutout) .ph {
  width: 8.5rem;
  height: 8.5rem;
}
.event-tel .fight-stage .fighter .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--ink-dim);
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--line);
}
/* full-body cutouts — used only when BOTH fighters have one, so the hero
   never mixes a cutout against a circular headshot (~1/3 of fighters have
   no full_body_url). Alpha-following drop-shadow glow, as on the fighter
   page, since these are transparent-background PNGs. */
.event-tel .fight-hero .cutout {
  line-height: 0;
}
.event-tel .fight-hero .cutout img {
  height: 19rem;
  width: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
}
/* headshot fallback: same cutout treatment, just shorter — a head at
   full-body height would tower */
.event-tel .fight-stage.heads .cutout img {
  height: 11rem;
}
.event-tel .fight-hero .fighter.winner .cutout img {
  box-shadow: none;
  filter: drop-shadow(0 0 10px var(--rise-glow)) drop-shadow(0 0 28px var(--rise-glow));
}
.event-tel .fight-hero .fighter.loser .cutout img,
.event-tel .fight-hero .fighter.draw .cutout img,
.event-tel .fight-hero .fighter.nc .cutout img {
  opacity: 1;
  filter: brightness(0.85) saturate(0.75) drop-shadow(0 0 18px rgba(0, 0, 0, 0.55));
}

/* VS sits between the two fighters. They're bottom-aligned, so it's lifted
   to roughly the middle of the photos — by a different amount for tall
   cutouts than for circular headshots. */
/* centre column between the fighters: VS with the bout name beneath it.
   The lift that used to sit on .vsmark lives on the wrapper now. */
.event-tel .stage-centre {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 3rem;
}
.event-tel .fight-stage.cutouts .stage-centre {
  margin-bottom: 7rem;
}
.event-tel .fight-stage .vsmark {
  font-size: 2.25rem;
}
.event-tel .stage-centre .wc-label {
  max-width: 11rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in oklab, var(--rise-soft) 45%, var(--neutral));
  white-space: normal;
}
/* belt sits in the centre column on title fights, sized to match the bout
   label beneath it */
.event-tel .stage-centre .belt {
  width: 11rem;
  margin-bottom: 0;
}
.event-tel .stage-centre .belt img {
  width: 100%;
  max-width: none;
}
/* the scheduled-round count reads as a qualifier on the bout name */
.event-tel .stage-centre .rounds-line {
  color: var(--neutral);
}
/* must follow .wc-label: same 3-class specificity, and the gold pill needs
   its dark ink back rather than the muted label colour above */
.event-tel .stage-centre .title-pill {
  color: #241a02;
  font-weight: 700;
  padding: 0.32rem 0.7rem;
}

/* result strip — sits directly under the fighters (who bottom-align onto
   it) and above the gauge strip, so the hero itself stays uncluttered */
.event-tel .resultstrip {
  border-block: 1px solid var(--line);
  background: var(--panel-2);
}
/* two rows: the result, then all the bout context (event, weight class,
   scheduled rounds, bonuses, date) — the hero above stays just belt +
   fighters. */
.event-tel .result-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding-block: 1rem;
  font-family: var(--mono);
  text-align: center;
}
.event-tel .result-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
}
.event-tel .context-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rise-soft) 45%, var(--neutral));
}
.event-tel .context-line .date {
  color: var(--neutral);
}
.event-tel .result-inner .method {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.event-tel .result-inner .timing {
  font-size: 0.95rem;
  color: var(--ink-dim);
}
.event-tel .result-inner .detail {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rise-soft) 50%, var(--neutral));
}
.event-tel .result-inner .ref {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral);
}
.event-tel .result-inner .sub-link {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rise);
}

@media (max-width: 760px) {
  /* On narrow screens the fighters get as much size as possible: the
     centre column is lifted out of the flow and floated on top, so the two
     photos can use the full width and overlap each other underneath it. */
  .event-tel .fight-stage {
    position: relative;
    gap: 0;
  }
  .event-tel .fight-stage .fighter {
    position: relative;
    z-index: 1;
  }
  .event-tel .stage-centre {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 3.4rem;
    transform: translateX(-50%);
    margin-bottom: 0;
  }
  /* max-width:none overrides Tailwind preflight's `img{max-width:100%}`,
     which was capping each photo to its flex column and letterboxing it.
     Freed, they size from their height and overlap under the centre. */
  .event-tel .fight-hero .cutout img {
    height: 18.5rem;
    max-width: none;
  }
  .event-tel .fight-stage .fname {
    font-size: 0.95rem;
    min-height: 2.4rem;
  }
  .event-tel .fight-stage .photo:not(.cutout) img,
  .event-tel .fight-stage .photo:not(.cutout) .ph {
    width: 8rem;
    height: 8rem;
  }
  .event-tel .fight-stage .vsmark {
    font-size: 1.4rem;
  }
  .event-tel .stage-centre {
    margin-bottom: 2rem;
    gap: 0.5rem;
  }
  .event-tel .fight-stage.cutouts .stage-centre {
    margin-bottom: 3.6rem;
  }
  /* keep the centre column narrower than the fighter columns, or the bout
     name squeezes the photos (it was 112px vs 108px each at 375px) */
  .event-tel .stage-centre .wc-label {
    max-width: 5.2rem;
    font-size: 0.48rem;
    line-height: 1.35;
    letter-spacing: 0.06em;
  }
  .event-tel .stage-centre .title-pill {
    padding: 0.25rem 0.4rem;
  }
  /* the photos are only ~96px wide here, so the desktop tag size would
     swamp them */
  .event-tel .fight-stage .result-tag {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    padding: 0.24rem 0.55rem;
  }
  /* at the centre column's mobile width the belt is ~83px — too small for
     any of its detail to read, so it's dropped and the gold title pill
     carries the signal on its own */
  .event-tel .stage-centre .belt {
    display: none;
  }
}

/* championship belt banner — title fights only. Centred and capped near
   the asset's native 700px so it never upscales into blur; shrinks freely
   below that on narrow screens. */
.event-tel .belt {
  line-height: 0;
  margin-bottom: 1.25rem;
  text-align: center;
}
.event-tel .belt img {
  display: inline-block;
  width: 60%;
  max-width: 44rem;
  height: auto;
}
@media (max-width: 760px) {
  .event-tel .belt img {
    width: 85%;
  }
}

/* head-to-head stat bars */
.event-tel .h2h {
  display: grid;
  gap: 1.05rem;
  margin-top: 1.25rem;
}
.event-tel .h2h-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.event-tel .h2h-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}
.event-tel .h2h-val {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--neutral);
  min-width: 4.5rem;
}
.event-tel .h2h-val:last-child {
  text-align: right;
}
.event-tel .h2h-val.lead {
  color: var(--ink);
  font-weight: 700;
}
.event-tel .h2h-bar {
  display: flex;
  gap: 3px;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel-2);
}
.event-tel .h2h-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.event-tel .h2h-bar .seg-accent {
  background: var(--rise);
  box-shadow: 0 0 10px var(--rise-glow);
}
.event-tel .h2h-bar .seg-dim {
  background: var(--neutral);
}

/* round-by-round cards */
.event-tel .roundgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 800px) {
  .event-tel .roundgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.event-tel .roundcard {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  padding: 1.1rem 1.2rem 1.3rem;
}
.event-tel .roundcard .round-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  padding-bottom: 0.6rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}
.event-tel .roundcard .round-head .round-note {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* judges' scorecards */
.event-tel .scorecards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1.25rem;
}
@media (min-width: 700px) {
  .event-tel .scorecards {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Scorecards are a physical artefact from outside the fight — an official
   form filled in at cageside — not part of the telemetry. So they step off
   the page's palette entirely: paper stock and ink, no accent colour. The
   mono face is kept deliberately (real scorecards are printed forms), with
   a ruled baseline standing in for the handwritten line. */
.event-tel .scorecard {
  /* sc- prefixed so they don't shadow the global --ink token */
  --sc-paper: #e9e5db;
  --sc-ink: #16150f;
  --sc-ink-soft: #6f6a5d;
  --sc-rule: #c3bcab;
  border: 1px solid var(--sc-rule);
  border-radius: 2px;
  background: var(--sc-paper);
  padding: 0.85rem 1.1rem 1rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.event-tel .scorecard .judge {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--sc-rule);
  text-align: center;
}
.event-tel .scorecard .scores {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.event-tel .scorecard .score {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-soft);
  line-height: 1;
}
.event-tel .scorecard .score.lead {
  color: var(--sc-ink);
}
/* the ruled line the scores are written on */
.event-tel .scorecard .dash {
  flex: 1;
  height: 0;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--sc-rule);
}
.event-tel .scorecard .card-note {
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-align: center;
}

/* ── year pages ───────────────────────────────────────────────────────── */
/* No photography exists for a year, so the hero is purely typographic —
   the numeral itself is the image. */
.event-tel .year-hero {
  display: block;
  min-height: 0;
  overflow: visible;
  background: linear-gradient(160deg, var(--panel), var(--ground) 75%);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0 2.25rem;
}
.event-tel .year-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}
.event-tel .yearnum {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.event-tel .yearnav-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid color-mix(in oklab, var(--rise) 40%, transparent);
  border-radius: 50%;
  background: var(--rise-dim);
  color: var(--rise-soft);
  font-size: 1.2rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.event-tel .yearnav-link:hover {
  border-color: var(--rise);
  background: color-mix(in oklab, var(--rise) 22%, transparent);
  color: var(--rise);
}
.event-tel .yearnav-link.is-off {
  visibility: hidden;
}
.event-tel .year-meta {
  margin-top: 1.15rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* gauge tiles as a standalone grid (the readout strip is a single row;
   this is the same tile in a wrapping grid for secondary stat blocks) */
.event-tel .gaugegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.event-tel .gaugegrid .gauge,
.event-tel .gaugegrid .gauge:last-child {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

/* ranked bar list (e.g. submissions used in a year) */
.event-tel .ranklist {
  display: grid;
  gap: 1px;
  margin-top: 1.25rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.event-tel .rankrow {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--panel);
  text-decoration: none;
  transition: background 0.15s ease;
}
.event-tel .rankrow:hover {
  background: var(--panel-2);
}
.event-tel .rankrow .rank {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--neutral);
  text-align: right;
}
/* both are <span>s inside a grid cell — inline boxes ignore height and
   block margins, so they need blockifying for the bar to render at all */
.event-tel .rankrow .rname {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  text-transform: capitalize;
}
.event-tel .rankrow .rvariants {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral);
  text-transform: uppercase;
}
.event-tel .rankrow .rbar {
  display: block;
  height: 4px;
  margin-top: 0.4rem;
  background: var(--panel-2);
  border-radius: 2px;
  overflow: hidden;
}
.event-tel .rankrow .rbar > i {
  display: block;
  height: 100%;
  background: var(--rise);
  box-shadow: 0 0 10px var(--rise-glow);
}
.event-tel .rankrow .rcount {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* compact event cards (a year's events). All the inner elements are
   <span>s inside an <a>, so they need blockifying to stack. */
.event-tel .eventgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.event-tel .eventcard {
  display: block;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.event-tel .eventcard:hover {
  border-color: color-mix(in oklab, var(--rise) 45%, var(--line));
}
.event-tel .eventcard .ec-img {
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--panel-2);
}
.event-tel .eventcard .ec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.event-tel .eventcard:hover .ec-img img {
  transform: scale(1.04);
}
.event-tel .eventcard .ec-body {
  display: block;
  padding: 0.7rem 0.85rem 0.85rem;
}
.event-tel .eventcard .ec-date {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--rise-soft) 45%, var(--neutral));
}
.event-tel .eventcard .ec-name {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
}
.event-tel .eventcard .ec-meta {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral);
}

/* year navigation (events index) */
.event-tel .yearnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.event-tel .yearnav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.8rem;
  border: 1px solid color-mix(in oklab, var(--rise) 40%, transparent);
  border-radius: 3px;
  background: var(--rise-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rise-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.event-tel .yearnav-btn:hover {
  border-color: var(--rise);
  background: color-mix(in oklab, var(--rise) 22%, transparent);
  color: var(--rise);
}
.event-tel .yearnav-btn.is-off {
  border-color: var(--line);
  background: transparent;
  color: var(--neutral);
  opacity: 0.5;
  pointer-events: none;
}
/* color-scheme keeps the native dropdown dark to match the page */
.event-tel .yearnav-select {
  color-scheme: dark;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--ink);
}
.event-tel .yearnav-select:focus {
  outline: none;
  border-color: var(--rise);
}

/* years index */
.event-tel .yeargrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.9rem;
  margin-top: 1.25rem;
}
.event-tel .yearcard {
  display: block;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  padding: 1.1rem 1.2rem 1.2rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.event-tel .yearcard:hover {
  border-color: color-mix(in oklab, var(--rise) 45%, var(--line));
}
.event-tel .yearcard .yc-year {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}
.event-tel .yearcard .yc-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.9rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-tel .yearcard .yc-rows dt {
  color: var(--neutral);
  margin: 0;
}
.event-tel .yearcard .yc-rows dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.event-tel .yearcard .yc-rows dd.ko {
  color: var(--ko);
}
.event-tel .yearcard .yc-rows dd.sub {
  color: var(--sub);
}

/* ── submission pages ─────────────────────────────────────────────────── */
.event-tel .sub-hero {
  display: block;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel), var(--ground) 75%);
  border-bottom: 1px solid var(--line);
  padding: 2.75rem 0 2.5rem;
}
.event-tel .sub-hero .hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.event-tel .sub-hero .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(0.4);
}
.event-tel .sub-hero .hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 18, 0.4) 0%, var(--ground) 97%),
    linear-gradient(100deg, color-mix(in oklab, var(--rise) 18%, transparent), transparent 55%);
}
.event-tel .sub-hero > .wide {
  position: relative;
  z-index: 1;
}
.event-tel .subname {
  margin: 0;
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

/* ranked list with a fighter face */
.event-tel .ranklist.faces .rankrow {
  grid-template-columns: 1.75rem auto 1fr auto;
}
.event-tel .rankrow .rface {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.event-tel .rankrow .rface img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-tel .rankrow .rface.is-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--ink-dim);
}
/* highlight the row for the submission being viewed */
.event-tel .rankrow.is-current {
  background: var(--rise-dim);
}
.event-tel .rankrow.is-current .rname {
  color: var(--rise);
  font-weight: 600;
}

/* text-only finish list — deliberately no avatars: these lists run to
   hundreds of rows and two images each is what made this page slow */
.event-tel .finishlist {
  display: grid;
  gap: 1px;
  margin-top: 1.25rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.event-tel .finishrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 0.65rem 1rem;
  background: var(--panel);
  text-decoration: none;
  transition: background 0.15s ease;
}
.event-tel .finishrow:hover {
  background: var(--panel-2);
}
.event-tel .finishrow .fnames {
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.event-tel .finishrow .fnames .win {
  color: var(--win);
  font-weight: 600;
}
.event-tel .finishrow .fdetail {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral);
}
.event-tel .finishrow .fwhen {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--neutral);
  text-align: right;
  white-space: nowrap;
}
.event-tel .listnote {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral);
  text-align: center;
}
.event-tel .chartwrap {
  margin-top: 1.25rem;
  padding: 1rem 0.5rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

/* ── outcome colours (win / loss / draw / no-contest) ─────────────────────
   Deliberately placed at the END of the file: the card border-color rules
   below tie on specificity (3 classes) with the tier rules that also set
   border-color (.fcard.main-event, .undergrid .fcard), so source order is
   what makes the outcome colour win. Keep these last. */
.event-tel .fcard.outcome-winner {
  border-color: var(--win);
}
.event-tel .fcard.outcome-winner .outcome-band {
  background: var(--win);
  color: var(--ground);
}
.event-tel .fcard.outcome-loser {
  border-color: var(--loss);
}
.event-tel .fcard.outcome-loser .outcome-band {
  background: var(--loss);
  color: #2a0508;
}
.event-tel .fcard.outcome-draw,
.event-tel .fcard.outcome-nc {
  border-color: var(--outcome-draw);
}
.event-tel .fcard.outcome-draw .outcome-band,
.event-tel .fcard.outcome-nc .outcome-band {
  background: var(--outcome-draw);
  color: #2a1a02;
}

/* ── Related insights ────────────────────────────────────────────────────
   Stories that declare a reference to whatever page this is. Each carries
   its own story accent in --sc, so a strip of them reads as a set of
   distinct pieces rather than a list of links. */
.event-tel .related-insights {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.event-tel .related-insights .ri-head {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rise);
}
.event-tel .related-insights .ri-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-tel .related-insights .ri-item {
  position: relative;
  display: block;
  padding: 1.1rem 1.1rem 1.2rem 1.35rem;
  text-decoration: none;
  background: linear-gradient(
    100deg,
    color-mix(in oklab, var(--sc) 14%, transparent),
    transparent 70%
  );
  transition: background 0.15s ease;
}
/* a leaning wedge in the story's own colour, in place of a card border */
.event-tel .related-insights .ri-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 0.4rem;
  background: var(--sc);
  clip-path: polygon(0 0, 100% 7%, 100% 93%, 0 100%);
}
.event-tel .related-insights .ri-item:hover {
  background: linear-gradient(
    100deg,
    color-mix(in oklab, var(--sc) 24%, transparent),
    transparent 74%
  );
}
.event-tel .related-insights .ri-title {
  display: block;
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}
.event-tel .related-insights .ri-dek {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.event-tel .related-insights .ri-go {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc);
}