/* ==========================================================================
   Route 30 Promotions — /assets/css/style.css
   Direction: "The Drop". One file, design system first, then page blocks.

   Rules carried over from the Route 30 store prototype and the Big Smoke build:
   - Gold (#ABA000) is an accent, about one hit per screen. Never body copy.
   - Light-on-dark text sits in the 7-13:1 band. Pure white on near-black
     (~19:1) blooms at the glyph edges, so body copy is a warm off-white.
   - No inline style="" in the templates: style-src is 'self' only.
   - Nothing is hidden by CSS waiting for JS. Reveals use gsap.from(), so the
     resting state is the visible one.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --
   Archivo, variable weight 100-900, latin subset. Self-hosted (from the
   Fontsource build, OFL — see assets/fonts/archivo-OFL.txt), so there is no
   third-party font request and font-src stays 'self'. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-latin-wght-normal.woff2) format('woff2-variations'),
      url(../fonts/archivo-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Load-bearing, both learned on Big Smoke: <picture> must not take a box,
   and a height attribute must not stretch an image whose rule sets width. */
picture{display:contents}
img{max-width:100%;height:auto;display:block}

:root{
  --ink:#0A0A0A;          /* page */
  --ink-2:#111111;        /* raised band */
  --ink-3:#161616;        /* panels, plates */
  --line:#262626;         /* hairlines */
  --line-2:#3A3A3A;       /* stronger rules, tag borders */

  --head:#F2F0EA;         /* headlines only (24px+): 17.4:1, large enough not to bloom */
  --strong:#DEDCD5;       /* small emphasis, values, buttons: 14.4:1, under the 15:1 ceiling */
  --text:#CBC9C2;         /* body: ~12:1 on --ink */
  --muted:#8E8C86;        /* labels, meta: ~6:1 on --ink */

  --gold:#ABA000;         /* the one accent, ~7.3:1 on --ink */
  --gold-soft:#D6CC4A;    /* placeholder marks only */
  --err:#FF8A80;          /* form errors, ~8:1 on --ink-3 */

  --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1240px;
  --gutter:clamp(16px,4vw,32px);
  --nav-h:76px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3{margin:0;color:var(--head);font-weight:900}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
section[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);
  padding:12px 16px;font-weight:800;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* Placeholder for content Manu has not supplied yet. Deliberately visible. */
.tbd{color:var(--gold-soft);border-bottom:1px dashed var(--gold);font-weight:inherit;
  letter-spacing:normal;text-transform:none;font-size:inherit}

/* --------------------------------------------------------------- type --- */
.h2{font-size:clamp(40px,6vw,84px);line-height:.9;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.h3{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sect-head{margin-bottom:clamp(36px,5vw,56px)}
.sect-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:clamp(36px,5vw,56px)}
.sect-note{color:var(--muted);font-size:15px}

/* ------------------------------------------------------------- buttons ---
   Bracket labels from the store prototype. The fill sweeps in from the left
   on hover (transform only, so it is compositor-cheap). */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  font:800 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}

.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold::before{background:var(--head)}
/* Below ~20px, light type past 15:1 blooms (Big Smoke lesson), so small
   emphasis uses --strong (14.4:1); --head is for headline sizes only. */
.btn-line{border-color:var(--strong);color:var(--strong)}
.btn-line::before{background:var(--head)}
.btn-line:hover,.btn-line:focus-visible{color:var(--ink)}
.btn-white{background:var(--head);color:var(--ink);border:0}
.btn-white::before{background:var(--gold)}

/* ------------------------------------------------------- announce + nav -- */
.announce{border-bottom:1px solid var(--line);text-align:center;padding:11px var(--gutter)}
.announce a{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.announce a:hover{color:var(--head)}

.nav{position:sticky;top:0;z-index:90;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background-color .35s var(--ease)}
.nav.solid{background:rgba(10,10,10,.94)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav-links{display:flex;gap:28px}
.nav-links a{position:relative;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--text);padding:6px 0;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a.here{color:var(--head)}
.nav-links a:hover::after,.nav-links a.here::after{transform:scaleX(1);transform-origin:left}
.nav-mark{display:block;line-height:0}
.nav-logo{height:58px;width:auto}
.nav-end{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.nav-cta{min-height:42px;padding:0 16px;font-size:12px}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);background:none;cursor:pointer;
  position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--head);transition:transform .35s var(--ease)}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.drawer{position:fixed;inset:var(--nav-h) 0 0 0;z-index:80;background:var(--ink);
  padding:40px var(--gutter);display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-12px);visibility:hidden;
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
.drawer.open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-size:clamp(34px,10vw,56px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  color:var(--head);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.drawer nav a:hover{color:var(--gold)}
.drawer-meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  :root{--nav-h:66px}
  .nav-links{display:none}
  .burger{display:block}
  .nav-logo{height:46px}
  .nav-in{grid-template-columns:auto 1fr;}
  .nav-mark{grid-column:1}
  .nav-end{grid-column:2}
}
@media (max-width:520px){ .nav-cta{display:none} }

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-3);border-bottom:1px solid var(--line)}
.hero-plate{position:absolute;inset:0}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.55)}
/* the three ring ropes */
.rope{position:absolute;left:-2%;right:-2%;height:2px;background:#2C2C2C;transform-origin:left center;
  box-shadow:0 10px 24px rgba(0,0,0,.6)}
.rope-1{top:30%}
.rope-2{top:44%}
.rope-3{top:58%}
/* one slow gold light pass, the only gold on the plate */
.sweep{position:absolute;inset:-40%;
  background:radial-gradient(closest-side,rgba(171,160,0,.16),rgba(171,160,0,0) 70%);
  width:60%;height:120%;left:-30%;top:-10%;
  animation:sweep 14s var(--ease) infinite alternate}
@keyframes sweep{from{transform:translate3d(0,0,0)}to{transform:translate3d(150%,10%,0)}}
.grain{position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.85),rgba(10,10,10,0))}

.hero-in{position:relative;z-index:2;width:100%;padding-block:0 clamp(48px,8vw,88px);display:flex;flex-direction:column;gap:24px}
.hero-meta{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#B9B7B0}
.hero-title{font-size:clamp(56px,11vw,168px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase;
  max-width:11ch;text-wrap:balance}
.hero-title .line-mask{padding-bottom:.04em}
.hero-sub{max-width:46ch;font-size:clamp(16px,1.6vw,19px);color:var(--text)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* fight-night hero ------------------------------------------------------
   Desktop: headline on the plate at left, the photo on the right fading into
   the plate, the result along the foot. Nothing is set over the busy part of
   the photo (Big Smoke's caption lesson: average contrast lies on a busy shot).
   Phone: photo on top, headline rising off its faded bottom edge. */
.hero-fight{flex-direction:column;align-items:stretch;
  /* the result bar lands on the fold: viewport minus announce bar and nav */
  min-height:clamp(620px,calc(100svh - var(--nav-h) - 50px),900px)}
.hero-fight .hero-in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding-block:clamp(72px,10vw,120px) clamp(40px,5vw,64px)}
.hero-main{display:flex;flex-direction:column;gap:24px;min-width:0;max-width:580px}
.hero-fight .hero-sub{max-width:42ch}
.hero-fight .hero-title{font-size:clamp(56px,7.4vw,124px);max-width:none}
.hero-title .vs{font-size:.42em;letter-spacing:0;color:var(--muted);vertical-align:.32em;margin:0 .06em}
.hero-fight::after{display:none}

.has-photo .hero-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:62%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 6%,rgba(0,0,0,.55) 22%,#000 42%);
          mask-image:linear-gradient(to right,transparent 6%,rgba(0,0,0,.55) 22%,#000 42%)}
/* 8% taller than its frame, overhanging the bottom: the scroll drift lifts it
   by up to 6.5%, so the foot never shows a gap and the gloves stay in frame */
.has-photo .hero-photo img{position:absolute;left:0;top:0;width:100%;height:108%;object-fit:cover;object-position:52% 0;filter:none;transform-origin:50% 30%}
/* the foot of the photo sinks into the plate so the result bar has a clean edge */
.has-photo .hero-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to top,var(--ink-3),rgba(22,22,22,0))}
.photo-credit{position:absolute;z-index:3;top:14px;right:var(--gutter);margin:0;padding:5px 9px;
  background:var(--ink);color:#B9B7B0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* the result, one strip along the bottom of the hero */
.result-bar{position:relative;z-index:3;border-top:1px solid var(--line-2);background:rgba(10,10,10,.94)}
.bout-bar{margin:0 auto;display:grid;grid-template-columns:1fr 1fr .97fr 1.08fr .82fr .96fr}
.bout-bar > div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 20px;border-left:1px solid var(--line)}
.bout-bar > div:first-child{padding-left:0;border-left:0}
.bout-bar dt{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bout-bar dd{margin:0;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.bout-bar dd b{font-size:15px;font-weight:800;line-height:1.3;color:var(--strong)}
.bout-bar dd span{font-size:13px;line-height:1.35;color:var(--muted)}
.bout-bar .bb-head dd b{font-size:17px;font-weight:900}

@media (max-width:1024px){
  .has-photo .hero-photo{width:60%}
  .hero-main{max-width:440px}
  .hero-fight .hero-title{font-size:clamp(56px,8vw,84px)}
  .bout-bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bout-bar > div:nth-child(3n+1){padding-left:0;border-left:0}
  .bout-bar > div:nth-child(n+4){border-top:1px solid var(--line)}
}
/* stacked from portrait tablet down: photo on top, copy below, never over it */
@media (max-width:860px){
  .hero-fight{min-height:auto}
  /* the photo carries its own ring; the plate's ropes and glow would only cut through the copy */
  .has-photo .rope,.has-photo .sweep{display:none}
  .has-photo .hero-photo{position:relative;order:-1;width:100%;aspect-ratio:4/4.6;max-height:78svh;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .has-photo .hero-photo::after{display:none}
  .has-photo .hero-in{padding-top:0;margin-top:-56px}
  .hero-main{max-width:none}
  .has-photo .hero-photo img{object-position:47% 0}
}
@media (max-width:640px){
  /* result on its own row, then two columns: 2|3, 4|5, 6 */
  .bout-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bout-bar > div,.bout-bar > div:nth-child(3n+1),.bout-bar > div:nth-child(n+4){padding:14px 0;border-left:0;border-top:1px solid var(--line)}
  .bout-bar > div:nth-child(odd):not(:first-child){padding-left:16px;border-left:1px solid var(--line)}
  .bout-bar > .bb-head{grid-column:1 / -1;border-top:0}
}

/* proclamation band */
.proclaim{background:var(--ink-2);border-bottom:1px solid var(--line)}
.proclaim-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(28px,5vw,64px);padding-block:clamp(36px,5vw,56px)}
.proclaim-date{font-size:clamp(64px,9vw,120px);font-weight:900;line-height:.85;letter-spacing:-.04em;color:var(--gold);font-variant-numeric:tabular-nums}
.proclaim-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:10px;max-width:68ch}
.proclaim-h{font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.015em;text-transform:uppercase}
.proclaim-copy p{color:var(--text)}

/* --------------------------------------------------------------- ticker -- */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink)}
.ticker-track{display:flex;width:max-content;padding:16px 0;white-space:nowrap;
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--strong)}
/* Each copy carries its own trailing gap, so shifting by exactly one copy
   (-50% with two copies) loops without a jump. */
.ticker-group{display:flex;gap:28px;padding-right:28px}
.ticker-track i{font-style:normal;color:#4A4A4A}

/* -------------------------------------------------------------- sections - */
.sect{padding-block:clamp(72px,10vw,128px);border-bottom:1px solid var(--line)}

/* legacy */
.legacy-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.legacy .h2{font-size:clamp(36px,4.6vw,66px)}
.legacy-copy{display:flex;flex-direction:column;gap:18px;font-size:clamp(17px,1.5vw,19px);max-width:52ch}
.facts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(12px,3vw,32px)}
.facts li{padding:24px 24px 0 0;display:flex;flex-direction:column;gap:4px}
.facts li + li{padding-left:24px;border-left:1px solid var(--line)}
.facts b{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--strong);line-height:1.15}
.facts span{font-size:14px;color:var(--muted)}

/* roster */
.fighter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.fighter + .fighter{margin-top:clamp(56px,8vw,96px)}
.fighter-photo{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--ink-3);border:1px solid var(--line);overflow:hidden}
.fighter-photo img{width:100%;height:100%;object-fit:cover}
.photo-tbd{position:absolute;inset:auto 0 24px 0;text-align:center;font-size:13px}
.fighter-body{display:flex;flex-direction:column;gap:24px;min-width:0}
.fighter-name{font-size:clamp(48px,7vw,104px);line-height:.88;letter-spacing:-.03em;text-transform:uppercase}
.fighter-nick{font-size:20px;font-weight:700;color:var(--strong)}
.tape{margin:0;border-top:1px solid var(--line)}
.tape div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.tape dt{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tape dd{margin:0;font-size:17px;font-weight:800;color:var(--strong);text-align:right;font-variant-numeric:tabular-nums}
.fighter-bio{max-width:52ch}
.fighter-links{display:flex;flex-wrap:wrap;gap:12px}

/* clips: tap-to-play facades. The iframe only exists after a tap. */
.clip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.clip{display:flex;flex-direction:column;gap:12px;min-width:0}
.clip-frame{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--ink-3);border:1px solid var(--line);overflow:hidden}
.clip-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;color:var(--head)}
.clip-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.72);transform:scale(1.02);
  transition:transform .8s var(--ease),filter .5s var(--ease)}
.clip-img.broken{display:none}
.clip-icon{position:absolute;inset:0;display:grid;place-items:center;transition:color .3s,transform .5s var(--ease)}
.clip-icon svg{width:56px;height:56px}
.clip-play:hover .clip-img,.clip-play:focus-visible .clip-img{transform:scale(1.07);filter:grayscale(0) brightness(.9)}
.clip-play:hover .clip-icon,.clip-play:focus-visible .clip-icon{color:var(--gold);transform:scale(1.08)}
.clip-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-frame.loading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform-origin:left;animation:load 1.2s var(--ease) infinite}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.clip-title{font-size:16px;font-weight:800;line-height:1.3;color:var(--strong)}
/* the featured clip takes a 2x2 block: the newest fight leads the grid */
.clip-feature{grid-column:span 2;grid-row:span 2}
.clip-feature .clip-frame{flex:1 1 auto;aspect-ratio:auto;min-height:0}
.clip-feature .clip-title{font-size:clamp(20px,2vw,26px)}
.clip-feature .clip-icon svg{width:84px;height:84px}
.clip-meta{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.clip-meta a{color:var(--muted);text-decoration-color:var(--line-2);text-underline-offset:3px}
.clip-meta a:hover{color:var(--head)}

/* events */
.ev-list{border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:center;gap:12px 32px;
  padding:24px 12px;margin:0 -12px;border-bottom:1px solid var(--line);transition:background-color .3s}
.ev:hover{background:var(--ink-2)}
.ev-date{font-size:24px;font-weight:900;color:var(--head);font-variant-numeric:tabular-nums}
.ev-next .ev-date{color:var(--gold)}
.ev-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-main b{font-size:20px;font-weight:800;color:var(--strong);line-height:1.25}
.ev-main span{font-size:15px;color:var(--muted)}
.ev-tag{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--strong);
  border:1px solid var(--line-2);padding:11px 14px;white-space:nowrap}
.ev-tag.ev-past{border-color:transparent;color:var(--muted)}
a.ev-tag{text-decoration:none;transition:color .25s,border-color .25s}
a.ev-tag:hover,a.ev-tag:focus-visible{color:var(--gold);border-color:var(--gold)}
.clip[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.ev-cta{min-height:42px}

.press{margin-top:clamp(56px,7vw,80px);display:flex;flex-direction:column;gap:20px}
.press-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.press-list b,.press-list a{font-size:17px;font-weight:700;color:var(--strong);text-decoration:none}
.press-list a:hover{color:var(--gold)}
.press-list span{font-size:14px;color:var(--muted)}

/* sponsors: static row in the Standard build */
.sponsors{border-bottom:1px solid var(--line)}
.sponsors-in{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding-block:48px}
.sponsors-h{flex:0 0 180px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.sponsor-row{flex:1 1 560px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sponsor-row li{height:76px;border:1px solid var(--line);display:grid;place-items:center;padding:12px;font-size:12px;text-align:center}
.sponsor-row img{max-height:44px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.8;transition:filter .3s,opacity .3s}
.sponsor-row a:hover img{filter:none;opacity:1}

/* contact */
.contact-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,80px);align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.contact-copy .h2{font-size:clamp(36px,4.4vw,60px)}
.contact-copy > p{max-width:42ch}
.contact-lines{border-top:1px solid var(--line)}
.contact-lines li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.contact-lines li > span:first-child{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-lines a{color:var(--strong);text-decoration:none;overflow-wrap:anywhere;text-align:right}
.contact-lines a:hover{color:var(--gold)}

.form{display:flex;flex-direction:column;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field label i{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--muted);margin-left:6px}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink-3);border:1px solid #333;color:var(--strong);
  font:400 16px/1.4 var(--font);padding:14px;border-radius:0;
  transition:border-color .25s,box-shadow .25s}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(171,160,0,.22)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err)}
.errmsg{min-height:18px;font-size:13px;color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form-status{font-size:15px;color:var(--text)}
.form-status.ok{color:var(--strong)}
.form-status.bad{color:var(--strong);border-left:2px solid var(--gold);padding-left:10px}

/* footer */
.foot{padding-block:56px 32px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.foot-mark img{width:96px}
.foot-cols{display:flex;flex-direction:column;gap:12px}
.foot-line{color:var(--strong);font-weight:700}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.foot-links a{color:var(--text);text-decoration:none}
.foot-links a:hover{color:var(--gold)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:40px;padding-top:20px;
  border-top:1px solid var(--line);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ----------------------------------------------------------- responsive -- */
@media (max-width:1100px){
  .clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip-feature{grid-row:span 1}
  .clip-feature .clip-frame{aspect-ratio:16/9}
}
@media (max-width:860px){
  .legacy-in,.fighter,.contact-in{grid-template-columns:minmax(0,1fr)}
  .fighter-photo{max-width:440px}
  .sponsor-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* four facts as a 2x2 */
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(odd){padding-left:0;border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line);margin-top:24px}
}
@media (max-width:640px){
  body{font-size:16px}
  /* the plate is atmosphere; on a phone it should not push the copy down */
  .hero{min-height:auto}
  .hero-in{padding-top:clamp(88px,22vw,120px)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts li,.facts li + li,.facts li:nth-child(n){padding:18px 0 0;border-left:0;margin-top:0;border-top:0}
  .ev{grid-template-columns:minmax(0,1fr);gap:6px}
  .ev-tag{justify-self:start;margin-top:8px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .sponsor-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsors-h{flex-basis:100%}
}
@media (max-width:560px){
  .clip-grid{grid-template-columns:minmax(0,1fr)}
  .clip-feature{grid-column:span 1}
}

/* ---------------------------------------------------------------- motion - */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .sweep{animation:none}
}

/* ---------------------------------------------------------------- 404 --- */
.notfound{min-height:calc(100svh - var(--nav-h) - 160px);display:flex;align-items:center}
.notfound-in{width:100%}
.notfound .h2{margin:14px 0 18px}
.notfound-sub{max-width:52ch;color:var(--text);margin-bottom:28px}