/* =========================================================
   NORTHEAST FIGHT PROMOTION site.css

   Palette from the NFP logo:
     #0F9A0F  primary green (the "P" and NORTHEAST)
     #4D9726  moss green (the New England map)
     #000000 / #FFFFFF

   Layout and type follow ufc.com: hard-edged rectangles,
   tight letter-spacing on headings, condensed bold display
   face, small caps meta lines, image-on-top cards.
   ========================================================= */

@import url("../fonts/fonts.css");

/* ---------- tokens ---------- */
:root {
  --bg: #000000;
  --panel: #0c0e0d;
  --panel-2: #141817;
  --panel-3: #1c2120;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);

  --green: #0f9a0f;
  --green-bright: #16c216;
  --green-glow: #2ce62c;
  --moss: #4d9726;

  --white: #ffffff;
  --text: #ffffff;
  --muted: #a4aca6;
  --muted-2: #757d78;

  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --nav-h: 72px;
  --nav-h-sm: 58px;
  --maxw: 1320px;
  --gutter: clamp(16px, 3.5vw, 48px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* gentler than --ease: eases in instead of darting, and settles long */
  --land: cubic-bezier(0.45, 0, 0.15, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--green); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #223022; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ---------- type ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0 0 0.45em;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 0.92; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.85rem); }
h4 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: #c2c9c4;
  max-width: 62ch;
}

.muted { color: var(--muted); }
.green { color: var(--green-bright); }

/* small caps meta line, the UFC "ATHLETES / 5 HOURS AGO" pattern */
.meta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta .sep { color: var(--green); margin: 0 8px; }
.meta strong { color: var(--green-bright); font-weight: 700; }

/* short accent bar, used above headings and card text */
.bar {
  display: block;
  width: 44px;
  height: 4px;
  background: var(--green);
  margin-bottom: 16px;
}
.bar--center { margin-inline: auto; }

.eyebrow {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 10px;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding: clamp(56px, 7vw, 96px) 0; }
.section--tight { padding: clamp(40px, 4.5vw, 64px) 0; }
.section--panel { background: var(--panel); }
.section--edge { border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.section-head h2 { margin-bottom: 0; }
.section-head .lede { margin-top: 12px; }

.grid { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   BUTTONS hard rectangles, no rounding, no cut corners
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  background: var(--green);
  color: #fff;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover { background: var(--green-bright); }

.btn--light { background: #fff; color: #101210; }
.btn--light:hover { background: var(--green-bright); color: #fff; }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn--ghost:hover { background: #fff; color: #101210; border-color: #fff; }

.btn--sm { padding: 11px 20px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* text link with a sliding underline */
.link-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.link-x::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.link-x:hover::after { transform: scaleX(1); transform-origin: left; }
.link-x .arw { transition: transform 0.3s var(--ease); }
.link-x:hover .arw { transform: translateX(5px); }

/* ---------- tags ---------- */
.tag {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--green);
  color: #fff;
}
.tag--outline { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-glow);
  margin-right: 8px;
  vertical-align: 1px;
  animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(44, 230, 44, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(44, 230, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(44, 230, 44, 0); }
}

/* =========================================================
   HEADER thin bar, nav left, logo centred, actions right
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--green);
  z-index: 200;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid transparent;
  transition: height 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-stuck {
  height: var(--nav-h-sm);
  background: #000;
  border-bottom-color: var(--line);
}

.nav {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative;
  display: block;
  padding: 10px 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d8ded9;
  transition: color 0.22s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: #fff; }

.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.brand img {
  height: 30px;
  width: auto;
  transition: height 0.3s var(--ease);
}
.is-stuck .brand img { height: 25px; }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

@media (max-width: 1120px) {
  .nav-links { display: none; }
  /* The mark stays absolutely centred here too. Dropping it back into flow made
     it sit hard left, which disagreed with the desktop header for no reason:
     with the links hidden there is nothing on the left for it to balance. */
  .nav-right .btn { display: none; }
}

/* burger */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  position: relative;
  border: 1px solid var(--line);
  transition: border-color 0.22s var(--ease);
}
.burger:hover { border-color: var(--green); }
.burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1120px) { .burger { display: block; } }

/* mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: #000;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease), opacity 0.25s 0.1s var(--ease), visibility 0s 0.45s;
}
.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s var(--ease), opacity 0.2s var(--ease), visibility 0s;
}
.mobile-menu li { border-bottom: 1px solid var(--line-soft); }
.mobile-menu a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1;
  transition: color 0.22s var(--ease), padding-left 0.25s var(--ease);
}
.mobile-menu a:hover { color: var(--green-bright); padding-left: 8px; }
.mobile-menu a .n {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--green);
  font-weight: 700;
}
.mobile-menu .m-foot { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }

body.menu-open { overflow: hidden; }

/* =========================================================
   INTRO the mark greets you, then hands off to the hero
   ========================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  /* never trap a click, even in the unlikely case the overlay survives */
  pointer-events: none;
  /* No-JS fallback: fade the whole overlay, mark included, so nothing is left
     stranded over the page. The JS path cancels this and drives the ground
     separately below. */
  animation: intro-fallback 700ms var(--ease) 1400ms forwards;
}
.intro--js { animation: none; }

/* The black ground is its own layer so it can dissolve while the mark stays
   fully opaque and keeps flying. Fading .intro itself would fade the mark
   with it, which is what made the old version read as a curtain lift. */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
}
.intro--js::before { transition: opacity 780ms var(--ease); }
.intro--js.is-done::before { opacity: 0; }

.intro-mark {
  position: relative;
  width: min(58vw, 420px);
  transform-origin: center center;
  will-change: transform;
  /* site.js loads at the end of body, so the page can paint before it runs.
     Starting hidden means the mark can never flash at full size first. */
  opacity: 0;
  animation: intro-logo-in 520ms var(--ease) 100ms forwards; /* no-JS path */
}

.intro-logo {
  /* nfp-logo-alpha.png carries the plate in its alpha channel, so the mark
     composites correctly over the page as it builds in underneath. No
     mix-blend-mode here: blending needs a black backdrop and the backdrop
     is precisely what goes away. */
  width: 100%;
}

/* The hero mark sits under .hero-media::after, which darkens it by roughly a
   quarter at its top and nearly two thirds at its foot. The flying mark is
   above everything and carries none of that, so handing over used to drop its
   lower half to a third of its brightness in one frame. This lays the same
   ramp onto the mark and fades it in across the flight, so the mark settles
   behind the vignette instead of snapping behind it. The stops are measured
   live in site.js because the panel and mark scale differently. Masked to the
   artwork so it tints the mark and not a rectangle around it. */
.intro-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, var(--vig-top, 0.23)) 0%,
    rgba(0, 0, 0, 0) var(--vig-mid, 36%),
    rgba(0, 0, 0, var(--vig-bot, 0.62)) 100%
  );
  -webkit-mask-image: url("../img/nfp-logo-alpha.png");
          mask-image: url("../img/nfp-logo-alpha.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.intro--js .intro-mark {
  animation: none;
  opacity: 0;
  transform: scale(0.94);
  /* --land eases in gently and settles long, so the mark falls into place
     rather than darting and then stopping dead */
  transition: opacity 520ms var(--ease), transform 950ms var(--land);
}
.intro--js.is-showing .intro-mark { opacity: 1; transform: scale(1); }

/* vignette arrives exactly as the mark lands */
.intro--js.is-done .intro-mark::after {
  opacity: 1;
  transition: opacity 950ms var(--land);
}

/* the last 200ms: the real hero logo is already in place underneath, so this
   dissolve only has to cover sub-pixel and antialiasing differences */
.intro--js.is-landed .intro-mark {
  opacity: 0;
  transition: opacity 200ms linear;
}

@keyframes intro-fallback {
  to { opacity: 0; visibility: hidden; }
}
@keyframes intro-logo-in {
  to { opacity: 1; }
}

/* ---------------------------------------------------------
   BOOT IN the page assembles itself as the mark flies home
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.is-booting .site-header,
  html.is-booting .hero-media,
  html.is-booting .hero-card,
  html.is-booting .rail,
  html.is-booting .fight-banner { opacity: 0; }

  /* The hero mark is the thing being flown into place, so it waits for the
     landing rather than building in with everything else. */
  html.intro-running .hero-media > img:not(.region) { opacity: 0; }

  html.is-built .hero-media   { animation: build-fade 700ms var(--ease) 0ms both; }
  html.is-built .site-header  { animation: build-fade 620ms var(--ease) 80ms both; }
  html.is-built .hero-card    { animation: build-rise 780ms var(--ease) 150ms both; }
  html.is-built .rail         { animation: build-rise 780ms var(--ease) 240ms both; }
  html.is-built .fight-banner { animation: build-rise 820ms var(--ease) 330ms both; }
}

@keyframes build-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes build-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* no intro at all when motion is not wanted, and no flash before JS runs */
@media (prefers-reduced-motion: reduce) {
  .intro { animation: none; opacity: 0; visibility: hidden; }
}

/* =========================================================
   HERO featured layout, image panel plus overlapping card
   ========================================================= */
.hero {
  position: relative;
  padding-top: var(--nav-h);
  background: #000;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
}
@media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.hero-main { position: relative; padding-bottom: 44px; }

.hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  /* min-height beats the ratio on a narrow screen, and aspect-ratio then runs
     backwards and derives the WIDTH from that height (320 x 16/9 = 569px),
     overflowing the column. width:100% pins the box to its container and lets
     min-height only ever make it taller. */
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(15, 154, 15, 0.42), transparent 62%),
    radial-gradient(70% 90% at 85% 90%, rgba(77, 151, 38, 0.28), transparent 60%),
    #070907;
}
.hero-media > img {
  position: relative;
  z-index: 2;
  width: min(46%, 380px);
  mix-blend-mode: screen;
  /* decorative, and it sits over the interactive map, so let hover through */
  pointer-events: none;
}
.hero-media .region {
  position: absolute;
  right: -4%;
  top: 50%;
  width: 46%;
  transform: translateY(-50%);
  opacity: 0.08;
  z-index: 1;
  will-change: transform;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 40%, rgba(0, 0, 0, 0.8));
  /* spans the whole panel above the map, so it would otherwise eat every hover */
  pointer-events: none;
}

/* ---------------------------------------------------------
   Interactive northeast map, home hero only
   --------------------------------------------------------- */
.hero-media .region.region-map {
  height: auto;
  /* The base tint lives in each state's fill rather than in an opacity on the
     svg. An element opacity would cap every state at the same ceiling, so a
     hovered one could never lift above its neighbours. */
  opacity: 1;
  overflow: visible;
}

.region-map .rm-state {
  fill: rgba(255, 255, 255, 0.1);
  /* The outlines are the affordance. Without them the map reads as one blob
     and there is nothing to tell you the states are separate things to point
     at. non-scaling-stroke keeps them a hairline at any rendered size. */
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 180ms var(--ease), stroke 180ms var(--ease),
              filter 180ms var(--ease);
}
.region-map .rm-state:hover {
  fill: rgba(44, 230, 44, 0.58);
  stroke: rgba(170, 255, 170, 0.95);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(44, 230, 44, 0.9));
}

@media (prefers-reduced-motion: reduce) {
  .region-map .rm-state { transition: none; }
}

.hero-card {
  position: relative;
  z-index: 4;
  margin: -76px 0 0 clamp(0px, 3vw, 48px);
  max-width: 720px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--panel-2);
  border-top: 4px solid var(--green);
}
@media (max-width: 720px) { .hero-card { margin-top: -40px; margin-left: 0; } }

.hero-card h1 { margin-bottom: 14px; }
.hero-card .lede { margin-bottom: 26px; }

/* top stories rail */
.rail {
  background: var(--panel-2);
  padding: clamp(22px, 2vw, 30px);
  border-left: 1px solid var(--line);
}
.rail h2 { font-size: 1.7rem; margin-bottom: 18px; }
.rail li { border-top: 1px solid var(--line); }
.rail li:last-child { border-bottom: 1px solid var(--line); }
.rail a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0;
  transition: background 0.22s var(--ease), padding-left 0.25s var(--ease);
}
.rail a:hover { background: rgba(255, 255, 255, 0.03); padding-left: 8px; }
.rail .n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--green);
}
.rail .k {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 3px;
}
.rail .t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.15;
  text-transform: uppercase;
}
.rail a:hover .t { color: var(--green-bright); }

/* page hero for interior pages */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(40px, 6vw, 84px)) 0 clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 8% 0%, rgba(15, 154, 15, 0.30), transparent 60%),
    #050705;
}
.page-hero .region {
  position: absolute;
  right: -3%;
  top: -18%;
  width: min(38vw, 520px);
  opacity: 0.07;
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); margin-bottom: 14px; }
.page-hero > .wrap { position: relative; z-index: 2; }

.crumbs {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: var(--muted-2);
  margin: 0 0 14px;
}
.crumbs a:hover { color: var(--green-bright); }
.crumbs span { color: var(--green); margin: 0 7px; }

/* =========================================================
   FIGHT BANNER the UFC "vs" block with a countdown box
   ========================================================= */
.fight-banner {
  position: relative;
  padding: clamp(40px, 5vw, 68px) 0 0;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(15, 154, 15, 0.26), transparent 62%),
    #090b09;
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
}
.fight-banner .region {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(78vw, 860px);
  transform: translate(-50%, -50%);
  opacity: 0.06;
  pointer-events: none;
}
.fight-banner .wrap { position: relative; }
.fight-banner .card-no {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 10px;
}
.fight-banner h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); margin-bottom: 12px; }
.fight-banner .where {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fight-banner .mark {
  width: min(190px, 40vw);
  margin: 0 auto 18px;
  mix-blend-mode: screen;
}
.fight-banner .btn-row { justify-content: center; margin-top: 26px; }
.fight-banner .shelf { height: clamp(46px, 5vw, 62px); }

/* countdown box, sits over the bottom edge of the banner */
.countdown {
  position: relative;
  z-index: 3;
  display: inline-flex;
  margin-bottom: clamp(-62px, -5vw, -46px);
  background: #000;
  border: 1px solid var(--line);
}
.countdown--inline { margin-bottom: 0; }
.cd-unit { padding: 14px 20px 12px; text-align: center; min-width: 84px; }
.cd-unit + .cd-unit { border-left: 1px solid var(--line); }
.cd-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (max-width: 520px) { .cd-unit { min-width: 62px; padding: 12px 12px 10px; } }

/* =========================================================
   EVENT ROWS the UFC events list
   ========================================================= */
.tabs {
  display: flex;
  align-items: baseline;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.tabs button {
  position: relative;
  padding: 0 0 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.22s var(--ease);
}
.tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.tabs button:hover { color: #d8ded9; }
.tabs button[aria-selected="true"] { color: #fff; }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.tabs .count {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 14px;
}

.event-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}
.event-row:first-of-type { border-top: 1px solid var(--line); }
.event-row:hover { background: rgba(255, 255, 255, 0.02); }
@media (max-width: 900px) {
  .event-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.event-art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 30% 20%, rgba(15, 154, 15, 0.34), transparent 62%),
    #0b0e0b;
}
.event-art img { width: 62%; mix-blend-mode: screen; }
.event-art .flag { position: absolute; top: 10px; left: 10px; }

.event-info h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 10px; }
.event-info .when {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d8ded9;
  margin-bottom: 8px;
}
.event-info .when i { color: var(--green); font-style: normal; margin: 0 8px; }
.event-info .venue { color: var(--muted); font-size: 0.95rem; margin: 0; }
.event-actions { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
@media (max-width: 900px) {
  .event-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

/* empty state panel */
.empty {
  padding: clamp(32px, 4vw, 56px);
  background: var(--panel-2);
  border-top: 4px solid var(--green);
  text-align: center;
}

/* =========================================================
   CARDS image on top, accent bar, meta line, headline
   ========================================================= */
.card {
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); background: var(--panel-3); }

.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 90% at 70% 15%, rgba(15, 154, 15, 0.30), transparent 62%),
    #0a0d0a;
}
.card-media img {
  width: 56%;
  mix-blend-mode: screen;
  transition: transform 0.5s var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }
.card-media .flag { position: absolute; top: 12px; left: 12px; }
.card-media .flag-r { position: absolute; top: 12px; right: 12px; }

.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body .bar { width: 36px; height: 3px; margin-bottom: 12px; }
.card-body .meta { margin-bottom: 8px; }
.card-body h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); margin-bottom: 10px; }
.card-body p { color: var(--muted); font-size: 0.95rem; }
.card-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }

/* =========================================================
   NUMBERED PANELS
   ========================================================= */
.panel {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--panel-2);
  border-top: 3px solid var(--green);
  transition: background 0.25s var(--ease);
}
.panel:hover { background: var(--panel-3); }
.panel .n {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--green);
  margin-bottom: 12px;
}
.panel h3 { font-size: 1.35rem; margin-bottom: 8px; }
.panel p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.panel .link-x { margin-top: 16px; }

/* stat strip */
.stat {
  text-align: center;
  padding: clamp(20px, 2.4vw, 30px) 14px;
  background: var(--panel-2);
}
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-bright);
}

/* =========================================================
   SPLIT BANDS
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 32% 24%, rgba(15, 154, 15, 0.30), transparent 62%),
    #0a0d0a;
}
.split-visual img { max-width: 62%; max-height: 78%; width: auto; mix-blend-mode: screen; }
.split-visual img.shape { max-width: 54%; max-height: 88%; mix-blend-mode: normal; }

.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: #c2c9c4;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--green-bright);
  border-bottom: 2px solid var(--green-bright);
  transform: rotate(-45deg);
}

/* =========================================================
   FORMS
   ========================================================= */
.form-panel {
  padding: clamp(22px, 2.6vw, 40px);
  background: var(--panel-2);
  border-top: 4px solid var(--green);
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  background: #0a0c0a;
  border: 1px solid var(--line);
  border-radius: 0;
  color: #fff;
  font-size: 0.98rem;
  appearance: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--green-bright) 50%),
                    linear-gradient(135deg, var(--green-bright) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--green); background: #0e120e; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: 0.85rem; color: var(--muted-2); margin-top: 12px; }

.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.signup input {
  flex: 1 1 240px;
  padding: 16px;
  background: #0a0c0a;
  border: 1px solid var(--line);
  border-radius: 0;
  color: #fff;
}
.signup input:focus { outline: none; border-color: var(--green); }

.form-success {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  margin-top: 14px;
  background: rgba(15, 154, 15, 0.16);
  border-left: 3px solid var(--green);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-success.is-on { display: flex; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  padding: clamp(48px, 6vw, 84px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 130% at 20% 0%, rgba(15, 154, 15, 0.28), transparent 60%),
    #060806;
}

/* =========================================================
   ACCORDION
   ========================================================= */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  text-transform: uppercase;
  transition: color 0.22s var(--ease);
}
.acc-q:hover { color: var(--green-bright); }
.acc-q .pm { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.acc-q .pm::before,
.acc-q .pm::after { content: ""; position: absolute; background: var(--green-bright); transition: transform 0.3s var(--ease); }
.acc-q .pm::before { left: 0; top: 7px; width: 16px; height: 2px; }
.acc-q .pm::after { left: 7px; top: 0; width: 2px; height: 16px; }
.acc-item.is-open .acc-q .pm::after { transform: rotate(90deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.acc-a > div { padding: 0 2px 22px; color: var(--muted); max-width: 72ch; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #050705;
  border-top: 1px solid var(--line);
  padding: clamp(44px, 5vw, 72px) 0 26px;
}
.f-top {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3.5vw, 54px);
}
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .f-grid { grid-template-columns: 1fr; } }

.f-grid h5 {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--green-bright);
  margin-bottom: 16px;
}
.f-grid li { margin-bottom: 9px; }
.f-grid a { color: #bfc6c0; transition: color 0.2s var(--ease); }
.f-grid a:hover { color: var(--green-bright); }
.f-brand { text-align: center; }
.f-brand p { margin-inline: auto; }
.f-logo { width: 118px; margin: 0 auto 16px; }

.socials { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }
.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.socials a:hover { background: var(--green); border-color: var(--green); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.f-bottom {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--muted-2);
}
.f-bottom a:hover { color: var(--green-bright); }

/* =========================================================
   MOTION
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
.is-in[data-reveal] { opacity: 1; transform: none; }


/* utility */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.narrow { max-width: 780px; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 26px; }
.mt-4 { margin-top: 38px; }
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 500;
  padding: 10px 16px;
  background: var(--green);
  transition: top 0.25s var(--ease);
}
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}