/* =========================================================
   SPORTS STRIKE — design tokens + component styles (v0.1)
   Palettes: data-p="volt" (default) | "red" | "gold"
   Themes:   data-theme="dark" (default) | "light"
   ========================================================= */

/* Ampersand only. Big Shoulders and Archivo draw a broken &; Inter does not. */
@font-face{
  font-family:"SS Ampersand";
  src:url("../fonts/ss-ampersand-400.woff2") format("woff2");
  font-weight:100 500; font-style:normal; font-display:swap;
  unicode-range:U+0026;
}
@font-face{
  font-family:"SS Ampersand";
  src:url("../fonts/ss-ampersand-700.woff2") format("woff2");
  font-weight:600 900; font-style:normal; font-display:swap;
  unicode-range:U+0026;
}
/* Size-adjusted system fallbacks. They sit after the real families, so they
   only draw while the WOFF2 files are still swapping in. */
@font-face{
  font-family:"Big Shoulders Display Fallback";
  src:local("Arial");
  size-adjust:88%; ascent-override:95%; descent-override:22%; line-gap-override:0%;
}
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial");
  size-adjust:107%; ascent-override:90%; descent-override:23%; line-gap-override:0%;
}

.ss{
  /* palette A — Volt (from the bolt mark) */
  --bg:#0B0C0A; --surface:#161814; --raised:#20231D; --hair:#2A2E26; --border:#6A7160;
  --text:#F3F5EE; --muted:#A3A999;
  --accent:#C9F202; --on-accent:#0B0C0A; --accent-ink:#C9F202;
  --live:#FF4242; --live-fill:#D91E2B; --on-live:#FFFFFF;
  --success:#5EE6B5; --focus:#C9F202;
  --scrim:rgba(11,12,10,.92);
  /* type. SS Ampersand is the Inter U+0026 subset only. It must not be the first
     name in theme.json: WordPress names every generated @font-face after that
     first family, which would publish Big Shoulders and Archivo as SS Ampersand. */
  --f-display:"SS Ampersand","Big Shoulders Display","Big Shoulders Display Fallback",sans-serif;
  --f-body:"SS Ampersand","Archivo","Archivo Fallback",sans-serif;
  --wp--preset--font-family--display:var(--f-display);
  --wp--preset--font-family--body:var(--f-body);
  /* spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* radius */
  --r0:0; --r1:2px; --r2:4px; --rp:999px;
  /* layout */
  --max:1280px; --gutter:clamp(16px,2vw,24px); --margin:clamp(16px,3vw,32px);
  background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ss[data-p="red"]{ --bg:#0C0B0B; --surface:#181515; --raised:#221E1E; --hair:#2E2929; --border:#6E6462;
  --text:#F6F2F1; --muted:#ADA4A2; --accent:#FF3345; --on-accent:#0C0B0B; --accent-ink:#FF3345;
  --live:#FF3345; --focus:#FF3345; --scrim:rgba(12,11,11,.92); }
.ss[data-p="gold"]{ --bg:#0D0C0A; --surface:#191712; --raised:#24211A; --hair:#302C25; --border:#6E6657;
  --text:#F7F3EA; --muted:#AEA697; --accent:#FFB31F; --on-accent:#0D0C0A; --accent-ink:#FFB31F;
  --live:#FF4A3D; --focus:#FFB31F; --scrim:rgba(13,12,10,.92); }
.ss[data-theme="light"]{ --bg:#F4F5EF; --surface:#FFFFFF; --raised:#E9EBE2; --hair:#DADDD2; --border:#7C8371;
  --text:#10120E; --muted:#596052; --accent-ink:#4A5A00; --live:#C62828; --live-fill:#C62828;
  --success:#0F7A55; --focus:#10120E; --scrim:rgba(244,245,239,.94); }
.ss[data-theme="light"][data-p="red"]{ --accent:#E0202F; --on-accent:#FFFFFF; --accent-ink:#B01325; }
.ss[data-theme="light"][data-p="gold"]{ --accent-ink:#7A4E00; }

.ss *{ box-sizing:border-box; }
.ss img{ max-width:100%; display:block; }
.ss a{ color:inherit; text-decoration:none; }
.ss a.link, .ss .prose p a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.ss :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.ss .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- type ---------- */
.ss .disp,.ss .h1,.ss .h2,.ss .h3,.ss .num{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:.005em; margin:0; text-wrap:balance; }
.ss .disp{ font-size:clamp(52px,7.4vw,112px); line-height:.88; }
.ss .h1{ font-size:clamp(40px,4.6vw,64px); line-height:.94; }
.ss .h2{ font-size:clamp(30px,3.2vw,44px); line-height:.98; font-weight:800; }
.ss .h3{ font-size:clamp(24px,2.2vw,30px); line-height:1.02; font-weight:800; }
.ss .h4{ font:700 clamp(18px,1.5vw,22px)/1.22 var(--f-display); margin:0; letter-spacing:-.005em; text-wrap:balance; }
.ss .h5{ font:700 clamp(15px,1.05vw,17px)/1.3 var(--f-body); margin:0; text-wrap:balance; }
.ss .h6{ font:800 13px/1.3 var(--f-body); margin:0; text-transform:uppercase; letter-spacing:.1em; }
.ss .lead{ font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--muted); margin:0; text-wrap:pretty; }
.ss .body{ font-size:18px; line-height:1.65; margin:0; text-wrap:pretty; }
.ss .small{ font-size:14px; line-height:1.45; }
.ss .cap{ font:700 12px/1.3 var(--f-body); text-transform:uppercase; letter-spacing:.09em; }
.ss .muted{ color:var(--muted); }
.ss .ink{ color:var(--accent-ink); }
.ss .num{ font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:0; }
.ss .tnum{ font-variant-numeric:tabular-nums; }

/* ---------- layout ---------- */
.ss .wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--margin); }
.ss .sec{ padding-block:clamp(40px,5vw,72px); }
.ss .sec.home-events{ padding-top:8px; }
.ss .sec + .sec{ border-top:1px solid var(--hair); }
.ss .stack{ display:flex; flex-direction:column; }
.ss .row{ display:flex; align-items:center; }
.ss .wrapr{ display:flex; flex-wrap:wrap; align-items:center; }
.ss .g{ display:grid; gap:var(--gutter); }
.ss .g-auto-220{ grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); }
.ss .g-auto-280{ grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); }
.ss .g-auto-340{ grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); }
.ss .split{ display:flex; flex-wrap:wrap; gap:clamp(24px,3vw,48px); align-items:flex-start; }
.ss .split > .main{ flex:999 1 560px; min-width:0; }
/* The side column has to be as tall as the story, or the sticky page list lets go once the cards end. */
.ss .split > .side{ flex:1 1 300px; min-width:0; align-self:stretch; }
.ss .side > .wp-block-ss-article-aside{ height:100%; }
.ss .hscroll{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin; }
.ss .hscroll > *{ scroll-snap-align:start; }

/* section head with the strike slash */
.ss .sh{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:var(--s5); flex-wrap:wrap; }
.ss .sh-t{ display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1 1 12rem; }
.ss .sh-t .h2{ min-width:0; overflow-wrap:break-word; }
.ss .slash{ width:14px; height:30px; background:var(--accent); transform:skewX(-18deg); flex:none; }
.ss .more{ font:700 14px/1 var(--f-body); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px; min-height:44px; }

/* ---------- media placeholders (swap for <img loading="lazy">) ---------- */
.ss .ph{ position:relative; overflow:hidden; background:
  repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent) 0 2px, transparent 2px 14px), var(--raised); }
.ss .ph::after{ content:attr(data-l); position:absolute; left:10px; bottom:8px; font:700 10px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); opacity:.85; }
.ss .r169{ aspect-ratio:16/9; } .ss .r45{ aspect-ratio:4/5; } .ss .r11{ aspect-ratio:1/1; } .ss .r916{ aspect-ratio:9/16; } .ss .r32{ aspect-ratio:3/2; }
.ss .card > .ph.r169 > img,.ss .cc .ph.r169 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss .scrim-b{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, var(--scrim) 100%); }

/* ---------- buttons ---------- */
.ss .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 22px; max-width:100%; text-align:center; text-wrap:balance;
  font:800 15px/1.15 var(--f-display); text-transform:uppercase; letter-spacing:.06em; border-radius:var(--r1);
  border:2px solid transparent; cursor:pointer; transition:background-color .15s, color .15s, border-color .15s, transform .1s; }
.ss .btn-sm{ min-height:44px; padding:8px 16px; font-size:13px; }
/* phones: buttons in a wrapping row go full width, so long labels keep their side padding */
@media (max-width:700px){ .ss .wrapr > .btn{ flex:1 1 100%; } }
.ss .btn-block{ width:100%; }
.ss .btn-primary{ background:var(--accent); color:var(--on-accent); }
.ss .btn-primary:hover,.ss .btn-primary.is-hover{ background:color-mix(in srgb, var(--accent) 86%, var(--text)); }
.ss .btn-primary:active,.ss .btn-primary.is-active{ transform:translateY(1px); background:color-mix(in srgb, var(--accent) 80%, var(--bg)); }
.ss .btn-secondary{ background:transparent; color:var(--text); border-color:var(--text); }
.ss .btn-secondary:hover,.ss .btn-secondary.is-hover{ background:var(--text); color:var(--bg); }
.ss .btn-ghost{ background:transparent; color:var(--text); padding-inline:12px; }
.ss .btn-ghost:hover,.ss .btn-ghost.is-hover{ background:var(--raised); }
.ss .btn-live{ background:var(--live-fill); color:var(--on-live); }
.ss .btn-live:hover,.ss .btn-live.is-hover{ background:color-mix(in srgb, var(--live-fill) 85%, #000); }
.ss .btn.is-focus{ outline:3px solid var(--focus); outline-offset:2px; }
.ss .btn:disabled,.ss .btn.is-disabled{ background:var(--raised); color:var(--muted); border-color:transparent; cursor:not-allowed; transform:none; }
.ss .ibtn{ width:44px; height:44px; display:inline-grid; place-items:center; border-radius:var(--r1); background:transparent; border:0; color:var(--text); cursor:pointer; }
.ss .ibtn:hover{ background:var(--raised); }
.ss .ico{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; flex:none; }

/* ---------- badges + tags ---------- */
.ss .badge{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 12px; font:800 12px/1 var(--f-body);
  letter-spacing:.1em; text-transform:uppercase; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); white-space:nowrap; }
.ss .b-live{ background:var(--live-fill); color:var(--on-live); }
.ss .b-results{ background:var(--text); color:var(--bg); }
.ss .b-preview{ background:var(--accent); color:var(--on-accent); }
.ss .b-title{ background:transparent; color:var(--accent-ink); box-shadow:inset 0 0 0 2px var(--accent-ink); clip-path:none; border-radius:var(--r1); }
.ss .b-neutral{ background:var(--raised); color:var(--text); }
.ss .b-career{ height:22px; padding:0 8px; font-size:11px; letter-spacing:.08em; }
.ss .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; animation:ss-pulse 1.4s ease-in-out infinite; }
@keyframes ss-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
@media (prefers-reduced-motion: reduce){ .ss .dot{ animation:none; } .ss *{ transition:none !important; } }
.ss .tag{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r1);
  font:700 13px/1 var(--f-body); letter-spacing:.04em; color:var(--text); }
.ss .bout-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:240px; }
.ss .tag-sport,.ss .tag-rules{ min-height:22px; height:auto; padding:3px 8px; font-size:11px; line-height:1.25; text-align:center; }
.ss .tag-rules{ letter-spacing:0; text-transform:none; font-weight:650; }
.ss .res-how .badge.b-results,.ss .bout .badge.b-results{ white-space:normal; height:auto; min-height:26px; padding-block:4px; text-align:center; letter-spacing:.04em; }
.ss .event-home-list{ display:flex; flex-direction:column; gap:8px; }
.ss .event-home{ display:grid; grid-template-columns:4.6rem 5.5rem minmax(0,1fr); gap:12px; align-items:center; padding:12px 14px; }
.ss .event-home-date{ font:800 15px/1.15 var(--f-display); }
.ss .event-home-logo{ width:80px; height:32px; object-fit:contain; object-position:left center; }
@media (max-width:700px){
  .ss .event-home{ grid-template-columns:4.4rem minmax(0,1fr); }
  .ss .event-home-logo{ grid-column:1; width:64px; height:28px; }
}
.ss .tag:hover{ border-color:var(--text); }
.ss .tag-promo{ border-color:transparent; background:var(--raised); text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
.ss .kicker{ font:800 12px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.ss .wl{ display:inline-grid; place-items:center; width:26px; height:26px; font:800 13px/1 var(--f-body); border-radius:var(--r1); flex:none; }
.ss .wl-w{ background:var(--accent); color:var(--on-accent); }
.ss .wl-l{ background:transparent; color:var(--live); box-shadow:inset 0 0 0 2px var(--live); }
.ss .wl-d{ background:var(--raised); color:var(--muted); }

/* flags (always paired with a 3-letter code) */
.ss .flag{ display:inline-block; width:22px; height:14px; flex:none; box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.ss .f-lv{ background:linear-gradient(#9E3039 0 40%, #fff 40% 60%, #9E3039 60%); }
.ss .f-pl{ background:linear-gradient(#fff 0 50%, #DC143C 50%); }
.ss .f-lt{ background:linear-gradient(#FDB913 0 33.3%, #006A44 33.3% 66.6%, #C1272D 66.6%); }
.ss .f-ee{ background:linear-gradient(#0072CE 0 33.3%, #000 33.3% 66.6%, #fff 66.6%); }
.ss .f-ie{ background:linear-gradient(90deg,#169B62 0 33.3%, #fff 33.3% 66.6%, #FF883E 66.6%); }
.ss .f-de{ background:linear-gradient(#000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%); }
.ss .f-se{ background:linear-gradient(90deg,transparent 0 30%,#FECC02 30% 45%,transparent 45%), linear-gradient(transparent 0 40%,#FECC02 40% 60%,transparent 60%), #006AA7; }
.ss .f-no{ background:linear-gradient(90deg,transparent 0 31%,#00205B 31% 38%,transparent 38%), linear-gradient(transparent 0 43%,#00205B 43% 57%,transparent 57%), linear-gradient(90deg,transparent 0 27%,#fff 27% 42%,transparent 42%), linear-gradient(transparent 0 36%,#fff 36% 64%,transparent 64%), #BA0C2F; }
.ss .f-gb{ background:linear-gradient(#C8102E,#C8102E) center/100% 18% no-repeat, linear-gradient(#C8102E,#C8102E) center/11% 100% no-repeat, linear-gradient(#fff,#fff) center/100% 32% no-repeat, linear-gradient(#fff,#fff) center/20% 100% no-repeat, linear-gradient(32deg,transparent 43%,#fff 43% 57%,transparent 57%), linear-gradient(-32deg,transparent 43%,#fff 43% 57%,transparent 57%), #012169; }
.ss .f-us{ background:linear-gradient(#3C3B6E,#3C3B6E) 0 0/44% 54% no-repeat, repeating-linear-gradient(#B22234 0 15.4%, #fff 15.4% 23.1%); }
.ss .f-xx{ background:var(--raised); }
.ss .nat{ display:inline-flex; align-items:center; gap:8px; font:700 13px/1 var(--f-body); letter-spacing:.06em; }

/* ---------- forms ---------- */
.ss .field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.ss .label{ font:700 14px/1.2 var(--f-body); }
.ss .input,.ss .select,.ss .textarea{ width:100%; min-height:48px; padding:0 16px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r1); font:400 17px/1.4 var(--f-body); }
.ss .textarea{ padding:14px 16px; min-height:calc(1.4em * 8 + 28px); resize:vertical; }
.ss .input::placeholder,.ss .textarea::placeholder{ color:var(--muted); opacity:1; }
.ss input[type="search"]::-webkit-search-decoration,
.ss input[type="search"]::-webkit-search-results-button,
.ss input[type="search"]::-webkit-search-results-decoration{ -webkit-appearance:none; display:none; }
.ss input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-right:0; cursor:pointer;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' stroke='%23000' stroke-width='1.7' stroke-linecap='square'/></svg>") center/16px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' stroke='%23000' stroke-width='1.7' stroke-linecap='square'/></svg>") center/16px no-repeat;
}
.ss .input:hover{ border-color:var(--text); }
.ss .input:focus,.ss .input.is-focus{ outline:3px solid var(--focus); outline-offset:0; border-color:var(--focus); }
.ss .input.is-error{ border-color:var(--live); box-shadow:inset 4px 0 0 var(--live); }
.ss .input.is-ok{ border-color:var(--success); }
.ss .help{ font-size:14px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.ss .help.err{ color:var(--live); font-weight:600; }
.ss .help.ok{ color:var(--success); font-weight:600; }
.ss .check{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.45; }
.ss .check input{ width:22px; height:22px; accent-color:var(--accent); flex:none; margin:1px 0 0; }
/* select with leading flag + custom chevron (native <select> kept for the phone picker) */
.ss .selwrap{ position:relative; display:block; }
.ss .selwrap .select{ appearance:none; -webkit-appearance:none; padding-left:50px; padding-right:48px; min-height:56px; font-weight:600; font-size:17px; cursor:pointer; background:var(--bg); }
.ss .selwrap .select:hover{ border-color:var(--text); }
.ss .selwrap .select:focus{ outline:3px solid var(--focus); outline-offset:0; border-color:var(--focus); }
.ss .selwrap .flag{ position:absolute; left:16px; top:50%; transform:translateY(-50%); pointer-events:none; }
.ss .selwrap .wtw-globe{ position:absolute; left:16px; top:50%; width:22px; height:22px; transform:translateY(-50%); pointer-events:none; display:grid; place-items:center; color:var(--text); }
.ss .selwrap .wtw-globe[hidden]{ display:none; }
.ss .selwrap .wtw-globe .ico{ width:22px; height:22px; }
.ss .selwrap .chev{ position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--accent-ink); }

/* ---------- forms ---------- */
.ss .ss-filter,.ss .ss-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:16px 18px; align-items:end; padding:22px 24px;
}
.ss .ss-form{ max-width:720px; padding:0; }
.ss .ss-filter .input,.ss .ss-filter .select,.ss .ss-filter .btn,.ss .ss-form .input,.ss .ss-form .textarea,.ss .ss-form .btn{ min-height:48px; }
.ss .ss-filter .btn,.ss .ss-form .btn{ padding:0 28px; }
.ss .selwrap.plain .select{ padding-left:16px; padding-right:44px; min-height:48px; font-weight:400; font-size:17px; background:var(--surface); }
.ss .ss-contact{ display:flex; flex-direction:column; gap:20px; max-width:720px; width:100%; }
.ss .ss-contact-form{ display:flex; flex-direction:column; gap:18px; }
.ss .ss-contact .ss-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.ss .ss-contact .textarea{ min-height:calc(1.4em * 8 + 28px); }
.ss .ss-form-ok{ margin:0; padding:16px 18px; background:var(--surface); border:1px solid var(--accent); color:var(--text); }
.ss .hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:700px){
  .ss .ss-contact .ss-row{ grid-template-columns:1fr; }
  .ss .ss-contact .ss-submit{ width:100%; }
}
.ss .select:focus,.ss .textarea:focus{ outline:3px solid var(--focus); outline-offset:0; border-color:var(--focus); }
@media (max-width:720px){
  .ss .ss-filter{ grid-template-columns:1fr; padding:16px; }
  .ss .ss-filter .btn{ width:100%; }
}
.ss .nl-fields{ gap:10px; }
.ss .nl-fields .label{ color:inherit; }
.ss .nl-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.ss .nl-email{ flex:1 1 220px; }
.ss .nl-form .label{ color:var(--on-accent); font-family:var(--f-body); }
.ss .nl-form .input{ width:100%; min-height:48px; background:transparent; color:var(--on-accent); border:2px solid var(--on-accent); font-family:var(--f-body); }
.ss .nl-form .input::placeholder{ color:var(--on-accent); opacity:.65; }
.ss .nl-form .input:focus{ outline:3px solid var(--on-accent); outline-offset:0; border-color:var(--on-accent); }
.ss .nl-form .btn{ min-height:48px; padding:0 22px; background:#0B0C0A; color:var(--accent); border:0; font-family:var(--f-display); }
.ss .nl-form .btn:disabled{ background:#0B0C0A; color:var(--accent); opacity:1; cursor:not-allowed; }
.ss .nl-form .btn.is-loading{ cursor:progress; opacity:.72; }
.ss .nl-form .input.is-error{ border-color:#0B0C0A; box-shadow:inset 4px 0 0 #0B0C0A; }
.ss .nl-form .nl-msg{ margin:0; font:700 15px/1.4 var(--f-body); color:var(--on-accent); }
.ss .nl-note{ margin:0; font-size:14px; line-height:1.45; }

/* ---------- fan features ---------- */

/* bout row = matchup + pick strip */
.ss .bout{ border-bottom:1px solid var(--hair); }
.ss .bout .mu{ border-bottom:0; }
.ss .pick{ display:flex; flex-direction:column; gap:10px; padding:0 0 16px; }
.ss .pick-btns{ display:flex; flex-wrap:wrap; gap:8px; }
/* equal widths when both fit; stack full-width when the panel is too narrow, never overflow */
.ss .pick-btns > *{ flex:1 1 0; min-width:fit-content; }
.ss .pickbtn{ min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r1); background:transparent; color:var(--text); font:700 14px/1.1 var(--f-body); cursor:pointer; }
.ss .pickbtn:hover{ border-color:var(--text); }
.ss .pickbtn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ss .crowd{ display:flex; height:8px; gap:2px; }
.ss .crowd i{ display:block; height:100%; }
.ss .crowd i:first-child{ background:var(--accent); }
.ss .crowd i:last-child{ background:var(--border); }
.ss .pick-meta{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.ss .pick-meta b{ color:var(--text); }
.ss .ok{ color:var(--success); font-weight:800; }
.ss .no{ color:var(--live); font-weight:800; }
.ss .note-live{ font-size:12px; font-weight:700; color:var(--live); }
.ss .note-info{ font-size:12px; font-weight:700; color:var(--accent-ink); }
.ss .clip{ display:inline-flex; align-items:center; gap:6px; min-height:32px; font:800 12px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }
.ss .clip i{ width:22px; height:22px; border-radius:50%; background:var(--accent); display:grid; place-items:center; }
.ss .clip i svg{ width:10px; height:10px; fill:var(--on-accent); margin-left:2px; }

/* timeline (weigh-ins & card changes) */
.ss .tl{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:6px 18px; padding:14px 0; border-bottom:1px solid var(--hair); }
.ss .tl time{ font:700 13px/1.4 var(--f-body); color:var(--muted); font-variant-numeric:tabular-nums; }
@media (max-width:700px){ .ss .tl{ grid-template-columns:1fr; } }

/* stat explanations */
.ss .tipbtn{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 4px; background:transparent; border:0; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.ss .tipbtn .q{ width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; font:800 10px/1 var(--f-body); }
.ss .tipbtn[aria-expanded="true"]{ color:var(--accent-ink); }
.ss .tip{ grid-column:1 / -1; justify-content:center !important; text-align:center; font:400 14px/1.5 var(--f-body) !important; color:var(--text); background:var(--raised); padding:12px 16px !important; border-bottom:1px solid var(--hair); }

/* modal + share cards */
.ss .modal{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.72); display:grid; place-items:center; padding:16px; }
.ss .sheet{ width:min(980px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--surface); border:1px solid var(--hair); }
.ss .sc{ position:relative; overflow:hidden; background:#0B0C0A; color:#F3F5EE; display:flex; flex-direction:column; justify-content:space-between; padding:22px; box-shadow:0 18px 48px rgba(0,0,0,.5); }
.ss .sc-916{ width:300px; aspect-ratio:9/16; }
.ss .sc-45{ width:340px; aspect-ratio:4/5; }
.ss .sc-11{ width:380px; aspect-ratio:1/1; }
.ss .sc .wm-line{ color:#F3F5EE; }

/* filter chips (Media page) */
.ss .chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.ss .chip{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid var(--border); border-radius:var(--rp); background:transparent; color:var(--text); font:700 14px/1 var(--f-body); cursor:pointer; white-space:nowrap; }
.ss .chip:hover{ border-color:var(--text); }
.ss .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ss .chip .n{ font-weight:600; opacity:.7; font-variant-numeric:tabular-nums; }

/* where-to-watch module */
.ss .wtw{ padding:0; display:flex; flex-direction:column; overflow:hidden; }
.ss .wtw-top{ padding:20px; display:flex; flex-direction:column; gap:16px; border-bottom:1px solid var(--hair); }
.ss .wtw-times{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding:16px; background:var(--raised); }
.ss .wtw-weigh{ grid-column:1 / -1; }
.ss .wtw-list{ list-style:none; margin:0; padding:0; }
.ss .wtw-list li + li{ border-top:1px solid var(--hair); }
.ss .wtw-row{ display:flex; align-items:center; gap:14px; min-height:68px; padding:12px 20px; transition:background-color .15s; }
.ss .wtw-name{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.ss .wtw-price,.ss .wtw-note{ font:500 13px/1.3 var(--f-body); }
.ss .wtw-row:hover{ background:var(--raised); }
.ss .wtw-type{ flex:none; display:grid; place-items:center; width:46px; height:28px; font:800 11px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; border-radius:var(--r1); }
.ss .t-tv{ background:var(--raised); color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }
.ss .t-ppv{ color:var(--accent-ink); box-shadow:inset 0 0 0 2px var(--accent-ink); }
.ss .t-free{ background:var(--accent); color:var(--on-accent); }
.ss .wtw-foot{ margin:0; padding:14px 20px; border-top:1px solid var(--hair); }
.ss .wtw-kicker{ margin:0; padding:16px 20px 0; font:800 12px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.ss .wtw-usual{ margin:0; padding:16px 20px 0; font:700 15px/1.45 var(--f-body); color:var(--text); }
.ss .wtw-usual time{ display:block; margin-top:4px; color:var(--muted); font-weight:600; }
.ss .wtw-go{ flex:none; color:var(--accent-ink); font:700 14px/1.2 var(--f-body); text-decoration:none; white-space:nowrap; }
.ss .wtw-go:hover{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:700px){
  .ss .wtw-row{ position:relative; }
  .ss .wtw-go{ min-height:44px; display:inline-flex; align-items:center; }
  .ss .wtw-go::after{ content:""; position:absolute; inset:0; }
}

.ss .inline-form{ display:flex; gap:8px; flex-wrap:wrap; }
.ss .inline-form .input{ flex:1 1 220px; }

/* ---------- surfaces ---------- */
.ss .panel{ background:var(--surface); border:1px solid var(--hair); }
.ss .correction-note{ display:flex; flex-direction:column; gap:8px; margin:8px 0 0; padding:16px 18px; background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--accent); }
.ss .correction-kicker{ margin:0; font:800 12px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.ss .correction-date{ margin:0; font:700 14px/1.3 var(--f-body); color:var(--muted); }
.ss .correction-text{ margin:0; font:400 16px/1.55 var(--f-body); color:var(--text); text-wrap:pretty; }
/* Hub grid marks sit in one top-right slot. The hub page logo stays .promo-logo. */
.ss .hub-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; min-height:120px; transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.ss .hub-card .h2{ font-size:clamp(34px,3vw,44px); color:var(--text); max-width:100%; }
/* 16px offset + 32px mark + 8px gap. The name starts under the mark so a 5-column card cannot run the word through the logo. */
.ss .hub-card.has-mark{ padding-top:56px; }
.ss .hub-card-foot{ margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.ss .hub-card-next b{ color:var(--text); }
.ss .how-watch{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 16px; }
.ss .how-watch .kicker{ margin:0; }
.ss .how-watch-body{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; font:700 15px/1.35 var(--f-body); }
.ss .how-watch-usual{ color:var(--muted); font-weight:600; }
.ss .how-watch a{ color:var(--accent-ink); }
.ss .wtw-soft{ margin:0; padding:0 20px 14px; }
.ss .wtw-foot a,.ss .wtw-soft a{ color:var(--accent-ink); }
.ss .hub-flags{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:5px; }
.ss .flag.hub-flag{ width:20px; height:14px; border-radius:2px; object-fit:cover; }
.ss .hub-flag-sep{ color:var(--muted); font:700 14px/1 var(--f-body); }
.ss .hub-hero .hub-title{ display:flex; flex-wrap:nowrap; align-items:center; gap:12px 16px; width:100%; min-width:0; }
.ss .hub-hero .hub-title-name{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; min-width:0; flex:1 1 auto; }
.ss .hub-hero .hub-title .disp{ width:auto; min-width:0; }
.ss .hub-hero .hub-title .hub-flags{ flex:none; }
.ss .hub-mark{ position:absolute; z-index:1; top:16px; right:16px; display:block; width:80px; height:32px; max-width:80px; max-height:32px; object-fit:contain; object-position:right center; pointer-events:none; }
.ss .hub-card:hover,
.ss .hub-card:focus-visible{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow:0 0 0 1px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 42%, transparent); }
.ss .hub-card:hover .h2,
.ss .hub-card:focus-visible .h2,
.ss .hub-card:hover .hub-mark,
.ss .hub-card:focus-visible .hub-mark{ opacity:1; color:var(--text); }
.ss .pad{ padding:clamp(16px,2vw,24px); }
.ss .notch{ clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.ss .hr{ height:1px; background:var(--hair); border:0; margin:0; }
.ss .elev-1{ box-shadow:0 1px 0 var(--hair), 0 8px 24px rgba(0,0,0,.28); }
.ss .elev-2{ box-shadow:0 18px 48px rgba(0,0,0,.5); }

/* athlete cards */
.ss .ath-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:stretch; }
.ss .ath-grid-side{ grid-template-columns:minmax(0,1fr); }
@media (min-width:800px){
  .ss .ath-grid:not(.ath-grid-side){ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:1100px){
  .ss .ath-grid:not(.ath-grid-side){ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
.ss .ath{ display:flex; flex-direction:column; height:100%; min-width:0; background:var(--surface); border:1px solid var(--hair); transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.ss .ath:hover,.ss .ath:focus-within{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow:0 0 0 1px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 42%, transparent); }
.ss .ath-hit{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; color:inherit; text-decoration:none; }
.ss .ath-shot{ position:relative; aspect-ratio:4/5; background:var(--raised); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.ss .ath-img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.ss .ath-img.is-cutout{ object-fit:contain; object-position:center bottom; width:auto; max-width:100%; height:92%; }
.ss .ath-ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted); }
.ss .ath-ph svg{ width:72px; height:auto; }
.ss .ath-badge,.ss .ath-mark{ position:absolute; top:10px; }
.ss .ath-badge{ left:10px; }
.ss .ath-mark{ right:10px; }
.ss .ath-rule{ height:1px; margin:0 16px; background:var(--hair); }
.ss .ath-body{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 12px 16px; flex:1 1 auto; }
.ss .ath-name{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(22px,1.6vw,28px); line-height:.95; text-align:center; }
.ss .ath-div,.ss .ath-flag{ display:flex; align-items:center; justify-content:center; gap:8px; font:700 13px/1.2 var(--f-body); }
.ss .ath-div .flag,.ss .ath-flag .flag{ width:20px; height:14px; }
.ss .ath-rec{ color:var(--muted); font:500 14px/1.3 var(--f-body); font-variant-numeric:tabular-nums; }
.ss .ath-social{ display:flex; justify-content:center; gap:8px; padding:0 12px 14px; }
.ss .ath-social a{ display:grid; place-items:center; width:32px; height:32px; color:var(--muted); }
.ss .ath-social a:hover{ color:var(--accent); }

/* ---------- cards ---------- */
.ss .card{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ss .card .h4,.ss .card .h5,.ss .card .h3{ transition:color .15s; }
.ss a.card:hover .h4,.ss a.card:hover .h5,.ss a.card:hover .h3,.ss a.card:hover .h2{ color:var(--accent-ink); }
.ss .meta{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:var(--muted); align-items:center; }
.ss .meta .sep{ width:3px; height:3px; background:var(--muted); border-radius:50%; }
.ss .cc{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start; padding-block:14px; border-bottom:1px solid var(--hair); }
.ss .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; }
.ss .play svg{ width:24px; height:24px; fill:currentColor; margin-left:4px; }
.ss .dur{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.8); color:#fff; font:700 12px/1 var(--f-body); padding:5px 7px; }
.ss .plat{ position:absolute; left:8px; top:8px; background:rgba(0,0,0,.8); color:#fff; font:800 11px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; padding:6px 8px; }

/* matchup (fight card) */
.ss .mu{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--hair); }
.ss .mu.mu-ath{ align-items:stretch; padding:16px 0 20px; }
.ss .mu.mu-ath .side{ width:100%; }
.ss .mu.mu-ath .vs{ justify-content:center; }
.ss .mu.win-l .side.r .ath-img,.ss .mu.win-r .side:not(.r) .ath-img{ filter:grayscale(1); opacity:.55; }
.ss .mu.win-l .side:not(.r) .ath,.ss .mu.win-r .side.r .ath{ box-shadow:0 0 0 2px var(--accent); }
.ss .mu .side{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ss .mu .side.r{ align-items:flex-end; text-align:right; }
.ss .mu .nm{ font:800 clamp(18px,1.6vw,22px)/1.1 var(--f-display); text-transform:uppercase; letter-spacing:.01em; font-size:clamp(20px,1.9vw,26px); }
.ss .mu .vs{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:88px; text-align:center; }
.ss .mu .vs b{ font:900 20px/1 var(--f-display); color:var(--accent-ink); }
.ss a.nm:hover{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; }
.ss .mu.win-l .side.r .nm,.ss .mu.win-r .side:not(.r) .nm{ color:var(--muted); }
/* fighter headshot in matchup rows: production = <img class="fav" src="…1:1 headshot…" width="64" height="64" loading="lazy" alt=""> */
.ss .fav{ display:block; flex:none; width:64px; height:64px; object-fit:cover; object-position:50% 20%; border-radius:var(--r1);
  background:var(--raised) url(../img/fav-ph.svg) center bottom / 92% no-repeat; box-shadow:inset 0 0 0 1px var(--hair); }
.ss .mu .who{ display:flex; align-items:center; gap:14px; min-width:0; }
.ss .mu .side.r .who{ flex-direction:row-reverse; }
.ss .mu .who-t{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ss .mu .side.r .who-t{ align-items:flex-end; text-align:right; }
.ss .mu.win-l .side.r .fav,.ss .mu.win-r .side:not(.r) .fav{ filter:grayscale(1); opacity:.5; }
.ss .mu.win-l .side:not(.r) .fav,.ss .mu.win-r .side.r .fav{ box-shadow:0 0 0 2px var(--accent); }
@media (max-width:700px){
  .ss .fav{ width:52px; height:52px; }
  .ss .mu .who{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ss .mu .side.r .who{ flex-direction:column; align-items:flex-end; }
}

/* tale of the tape */
.ss .tot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(96px,auto) minmax(0,1fr); }
.ss .tot > div{ padding:12px 0; border-bottom:1px solid var(--hair); display:flex; align-items:center; gap:8px; }
.ss .tot .a{ justify-content:flex-start; font:800 22px/1 var(--f-display); font-variant-numeric:tabular-nums; }
.ss .tot .b{ justify-content:flex-end; font:800 22px/1 var(--f-display); font-variant-numeric:tabular-nums; }
.ss .tot .k{ justify-content:center; font:700 12px/1.2 var(--f-body); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); text-align:center; }
.ss .adv{ font:800 10px/1 var(--f-body); letter-spacing:.08em; color:var(--on-accent); background:var(--accent); padding:4px 5px; }

/* tables */
.ss .tbl-wrap{ overflow-x:auto; border:1px solid var(--hair); }
.ss .tbl{ width:100%; border-collapse:collapse; font-size:15px; min-width:560px; }
.ss .tbl th{ text-align:left; font:800 12px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--hair); white-space:nowrap; }
.ss .tbl td{ padding:14px 16px; border-bottom:1px solid var(--hair); vertical-align:middle; }
.ss .tbl tr:last-child td{ border-bottom:0; }
.ss .tbl .w{ display:flex; align-items:center; gap:10px; font-weight:700; }
.ss #record .rec-method-more{ display:none; }
@media (max-width:700px){
  .ss #record .tbl-wrap{ overflow-x:clip; }
  .ss #record .tbl{ min-width:0; }
  .ss #record .tbl thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .ss #record .tbl,
  .ss #record .tbl tbody{ display:block; }
  .ss #record .tbl tr{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:10px; row-gap:4px; align-items:baseline; padding:12px 14px; border-bottom:1px solid var(--hair); }
  .ss #record .tbl tr[hidden]{ display:none; }
  .ss #record .tbl tr:last-child{ border-bottom:0; }
  .ss #record .tbl td{ display:block; padding:0; border:0; min-width:0; }
  .ss #record .tbl td.rec-res{ grid-column:1; grid-row:1; }
  .ss #record .tbl td.rec-opp{ grid-column:2; grid-row:1; overflow-wrap:anywhere; }
  .ss #record .tbl td.rec-method{ grid-column:3; grid-row:1; text-align:right; white-space:nowrap; }
  .ss #record .rec-method-more{ display:inline; }
  .ss #record .tbl td.rec-rd,
  .ss #record .tbl td.rec-time{ display:none; }
  .ss #record .tbl td.rec-event{ grid-column:1 / 3; grid-row:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:13px; }
  .ss #record .tbl td.rec-date{ grid-column:3; grid-row:2; text-align:right; white-space:nowrap; color:var(--muted); font-size:13px; }
}

/* countdown */
.ss .cd{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; container-type:inline-size; }
.ss .cd > div{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:clamp(16px,2vw,22px) 6px clamp(14px,1.6vw,18px); background:var(--bg); border:1px solid var(--hair); }
.ss .cd .cd-n{ position:relative; display:block; font:900 clamp(40px,22cqi,80px)/.86 var(--f-display); letter-spacing:.01em; font-variant-numeric:tabular-nums; color:var(--text);
  animation:ss-glitch-main 5.1s steps(1,end) infinite; }
/* clean digits at rest; two displaced slices (one in brand lime) appear only during the short glitch burst */
.ss .cd .cd-n::before,.ss .cd .cd-n::after{ content:attr(data-v); position:absolute; inset:0; pointer-events:none; background:var(--bg); }
.ss .cd .cd-n::before{ color:var(--accent); transform:translateX(-2px); clip-path:inset(50% 0 50% 0); animation:ss-glitch-a 5.1s steps(1,end) infinite; }
.ss .cd .cd-n::after{ color:var(--text); transform:translateX(2px); clip-path:inset(50% 0 50% 0); animation:ss-glitch-b 5.1s steps(1,end) infinite; }
.ss .cd > div:nth-child(2) .cd-n,.ss .cd > div:nth-child(2) .cd-n::before,.ss .cd > div:nth-child(2) .cd-n::after{ animation-delay:-1.7s; }
.ss .cd > div:nth-child(3) .cd-n,.ss .cd > div:nth-child(3) .cd-n::before,.ss .cd > div:nth-child(3) .cd-n::after{ animation-delay:-3.3s; }
.ss .cd > div:nth-child(4) .cd-n,.ss .cd > div:nth-child(4) .cd-n::before,.ss .cd > div:nth-child(4) .cd-n::after{ animation-duration:1.43s; }
@keyframes ss-glitch-main{ 0%,90.6%,100%{ text-shadow:none; transform:none; } 92%{ text-shadow:-3px 0 var(--accent); transform:translateX(1px); } 94.1%{ text-shadow:2px 0 var(--accent); transform:translateX(-1px); } 96.2%{ text-shadow:none; transform:none; } }
@keyframes ss-glitch-a{ 0%,90.6%,100%{ transform:translateX(-2px); clip-path:inset(50% 0 50% 0); } 92%{ transform:translateX(-7px); clip-path:inset(8% 0 72% 0); } 93.4%{ transform:translateX(5px); clip-path:inset(42% 0 38% 0); } 94.8%{ transform:translateX(-4px); clip-path:inset(70% 0 12% 0); } 96.2%{ transform:translateX(-2px); clip-path:inset(50% 0 50% 0); } }
@keyframes ss-glitch-b{ 0%,90.6%,100%{ transform:translateX(2px); clip-path:inset(50% 0 50% 0); } 92%{ transform:translateX(6px); clip-path:inset(30% 0 52% 0); } 93.4%{ transform:translateX(-5px); clip-path:inset(78% 0 6% 0); } 94.8%{ transform:translateX(4px); clip-path:inset(12% 0 74% 0); } 96.2%{ transform:translateX(2px); clip-path:inset(50% 0 50% 0); } }
@media (prefers-reduced-motion:reduce){ .ss .cd .cd-n,.ss .cd .cd-n::before,.ss .cd .cd-n::after{ animation:none; } }
.ss .cd:has(> div:nth-child(4)) .cd-n{ font-size:clamp(34px,16cqi,72px); }
.ss .cd .cd-l{ font:700 11px/1 var(--f-body); letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--muted); }

/* byline */
.ss .byline{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ss .av{ width:44px; height:44px; border-radius:50%; flex:none; object-fit:cover; background:#0B0C0A; }
.ss .byline-actions{ display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.ss .byline-actions .ibtn:hover,
.ss .byline-actions .ibtn:focus-visible,
.ss .byline-actions .ibtn:active{ color:var(--on-accent); background:var(--accent); }
.ss .like-btn{ display:inline-flex; flex-flow:row nowrap; align-items:center; justify-content:center; width:auto; min-width:44px; height:44px; padding-inline:10px; gap:6px; white-space:nowrap; }
.ss .like-btn.is-on{ color:var(--accent-ink); }
.ss .like-btn.is-on .ico{ fill:currentColor; }
.ss .like-n{ font:700 14px/1 var(--f-body); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ss .ico-fill{ fill:currentColor; stroke:none; }
.ss .fighters-credits{ margin:10px 0 0; }
@media (max-width:700px){
  .ss .byline{ align-items:flex-start; }
  .ss .byline-actions{ flex-basis:100%; margin-left:0; }
}

/* breadcrumbs: one line, the last crumb ellipsizes */
.ss .crumbs{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; min-width:0; max-width:100%; overflow:hidden; font-size:13px; color:var(--muted); }
.ss .crumbs a,
.ss .crumbs > span[aria-hidden]{ white-space:nowrap; flex:none; }
.ss .crumbs .crumb-last{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--text); }
.ss .crumbs a:hover{ color:var(--text); }

/* record bar */
.ss .rb{ height:10px; display:flex; gap:2px; }
.ss .rb i{ display:block; height:100%; }

/* ---------- wordmark (traced from the supplied logo; colour = currentColor) ---------- */
.ss .wm-line,.ss .wm-stack{ display:inline-block; flex:none; vertical-align:middle; background-color:currentColor; }
.ss .wm-line{ aspect-ratio:2595/175; height:17px; -webkit-mask:url(../img/wm-line.svg) center/contain no-repeat; mask:url(../img/wm-line.svg) center/contain no-repeat; }
.ss .wm-stack{ aspect-ratio:1354/334; height:80px; -webkit-mask:url(../img/wm-stack.svg) center/contain no-repeat; mask:url(../img/wm-stack.svg) center/contain no-repeat; }

/* ---------- header / nav ---------- */
.ss .hdr{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 94%, transparent); border-bottom:0; }
.ss .hdr::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ss .hdr-in{ display:flex; align-items:center; gap:20px; min-height:68px; }
.ss .brand{ display:flex; align-items:center; gap:10px; flex:none; min-height:44px; }
.ss .brand-mark{ display:inline-flex; align-items:center; color:var(--accent); line-height:0; }
.ss .hdr .bolt{ display:block; height:34px; width:auto; }
.ss .hdr .wm-line{ height:16px; }
.ss .hdr .live-search-input{ border:0; background:transparent; box-shadow:none; }
.ss .hdr .live-search-input:hover,
.ss .hdr .live-search-input:focus{ border:0; outline:3px solid var(--focus); outline-offset:2px; }
.ss .nav{ display:flex; gap:2px; flex:1; min-width:0; overflow:hidden; }
.ss .nav a{ display:flex; align-items:center; min-height:44px; padding:0 12px; font:700 14px/1 var(--f-body); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); white-space:nowrap; }
.ss .nav a:hover,.ss .nav a[aria-current]{ color:var(--text); }
.ss .nav a[aria-current]{ box-shadow:inset 0 -3px 0 var(--accent); }
.ss .hdr-r{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.ss .lang{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px; background:transparent; color:var(--text); border:1px solid var(--hair); border-radius:var(--r1); font:800 13px/1 var(--f-body); letter-spacing:.08em; cursor:pointer; }
.ss .ticker{ background:var(--live-fill); color:var(--on-live); }
.ss .ticker-in{ display:flex; align-items:center; gap:16px; min-height:44px; font:700 14px/1.2 var(--f-body); overflow:hidden; white-space:nowrap; }
.ss .only-m{ display:none !important; }
@media (max-width:1060px){ .ss .nav{ display:none; } .ss .only-m{ display:inline-grid !important; } .ss .only-d{ display:none !important; } }

/* mobile sticky bar (fight night) — never covers content more than 56px */
.ss .mbar{ position:sticky; bottom:0; z-index:15; background:var(--surface); border-top:2px solid var(--live-fill); }

/* ---------- footer ---------- */
.ss .ftr{ background:var(--surface); border-top:1px solid var(--hair); padding:64px 0 28px; }
.ss .ftr-grid{ display:grid; grid-template-columns:minmax(220px,260px) repeat(4,minmax(0,1fr)); column-gap:48px; row-gap:36px; align-items:start; }
.ss .ftr-brand{ min-width:0; overflow:hidden; }
.ss .ftr .brand{ max-width:100%; min-width:0; overflow:hidden; }
.ss .ftr .wm-line{ height:auto !important; width:148px !important; max-width:calc(100% - 46px); aspect-ratio:2595/175; }
.ss .ftr h3{ margin:0 0 12px; }
.ss .ftr ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ss .ftr li a{ display:flex; align-items:center; gap:8px; min-height:36px; color:var(--muted); font-size:15px; }
.ss .ftr li a .ico{ width:16px; height:16px; flex:none; }
.ss .ftr li a:hover{ color:var(--text); }
.ss .ftr-base{ justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:20px; border-top:1px solid var(--hair); }
@media (max-width:980px){
  .ss .ftr{ padding:48px 0 24px; }
  .ss .ftr-grid{ grid-template-columns:1fr 1fr; column-gap:32px; }
  .ss .ftr-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){ .ss .ftr-grid{ grid-template-columns:1fr; } }

/* ---------- social ---------- */
.ss .sstv-logo{ display:block; height:36px; width:calc(36px * 1200 / 331); max-width:100%; object-fit:contain; object-position:left center; }
.ss .soc{ display:grid; grid-template-columns:1fr; gap:8px; }
.ss .soc a{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 16px; background:var(--raised); font:800 14px/1 var(--f-body); text-transform:uppercase; letter-spacing:.06em; border-radius:var(--r1); }
.ss .soc a .ico{ width:18px; height:18px; flex:none; }
.ss .soc a span:last-child{ margin-left:auto; }
.ss .soc a:hover{ background:var(--accent); color:var(--on-accent); }

/* ---------- live search + results ---------- */
.ss .live-search{ position:relative; }
.ss .live-search form{ display:flex; align-items:center; gap:2px; }
.ss .live-search-input{ width:min(240px, 34vw); min-height:44px; padding:0 14px; font-size:15px; }
.ss .live-search-panel{ position:absolute; right:0; top:calc(100% + 8px); width:min(420px, 86vw); max-height:70vh; overflow:auto; background:var(--surface); border:1px solid var(--hair); z-index:40; box-shadow:0 16px 40px rgba(0,0,0,.35); }
.ss .live-search-k{ margin:0; padding:12px 14px 4px; font:800 11px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ss .live-search-panel a{ display:flex; align-items:center; gap:12px; padding:8px 14px; min-height:56px; }
.ss .live-search-panel a.is-on,.ss .live-search-panel a:hover{ background:var(--raised); }
.ss .live-search-panel b{ display:block; font:700 15px/1.25 var(--f-body); }
.ss .live-search-panel small{ display:block; color:var(--muted); font-size:13px; }
.ss .live-search-thumb{ width:40px; height:40px; flex:none; background:var(--raised); display:grid; place-items:center; overflow:hidden; font:800 14px/1 var(--f-display); }
.ss .live-search-thumb img{ width:100%; height:100%; object-fit:cover; }
.ss .live-search-empty{ margin:0; padding:16px; color:var(--muted); }
.ss .ss-search-form{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.ss .ss-search-form .input{ flex:1 1 240px; min-height:48px; }
.ss .ss-search-form .btn{ min-height:48px; }
.ss .ss-typebar{ display:flex; flex-wrap:wrap; gap:8px; }
.ss .chip.is-on,.ss .chip[aria-current="page"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ss .ss-hit-list{ display:flex; flex-direction:column; gap:8px; }
.ss .ss-hit{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px; background:var(--surface); border:1px solid var(--hair); }
.ss .ss-hit-thumb{ width:72px; height:72px; background:var(--raised); display:grid; place-items:center; overflow:hidden; }
.ss .ss-hit-thumb img{ width:100%; height:100%; object-fit:cover; }
.ss .ss-hit-ph{ font:900 28px/1 var(--f-display); }
.ss .ss-hit:hover{ border-color:var(--border); }
@media (max-width:700px){
  .ss .live-search-input{ width:44px; min-width:44px; padding:0; color:transparent; caret-color:transparent; }
  .ss .live-search-input::placeholder{ color:transparent; }
  .ss .live-search:not(.is-open) .live-search-input::-webkit-search-cancel-button{ display:none; }
  /* Drop the field and the panel under the header bar. The search box is on the
     right, so anchoring them to it pulls the panel off the left edge and the
     field across the logo. .hdr is still the containing block because it is sticky.
     The blur lives on .hdr::before so it does not trap position:fixed. */
  .ss .hdr .live-search.is-open{ position:static; }
  .ss .hdr .live-search.is-open .live-search-input{
    position:absolute; left:var(--margin); right:var(--margin); top:calc(100% + 8px); width:auto; min-width:0;
    color:var(--text); caret-color:auto; z-index:31; padding:0 40px 0 14px; background:var(--surface);
    box-shadow:0 10px 28px rgba(0,0,0,.35);
  }
  .ss .hdr .live-search.is-open .live-search-input::placeholder{ color:var(--muted); }
  .ss .hdr .live-search.is-open .live-search-panel{ left:var(--margin); right:var(--margin); top:calc(100% + 60px); width:auto; }
  .ss .ss-hit{ grid-template-columns:56px minmax(0,1fr); }
  .ss .ss-hit .ico{ display:none; }
}

/* responsive tweaks */
@media (max-width:700px){
  .ss .body{ font-size:18px; }
  .ss .tot .a,.ss .tot .b{ font-size:19px; }
  .ss .mu .vs{ min-width:64px; }
  .ss .hide-s{ display:none !important; }
}
@media (min-width:701px){ .ss .show-s{ display:none !important; } }

/* ---------- stats & data features ---------- */
.ss .ctl{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(26px, 1fr); gap:6px; padding:10px 2px 30px; overflow-x:auto; scrollbar-width:thin; }
.ss .ctl::before{ content:""; position:absolute; left:0; right:0; top:22px; height:2px; background:var(--hair); }
.ss .ctl-i{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ss .ctl-i button{ width:26px; height:26px; padding:0; border:0; cursor:pointer; font:800 12px/1 var(--f-body); border-radius:var(--r1); position:relative; }
.ss .ctl-i button[aria-pressed="true"]{ outline:3px solid var(--text); outline-offset:2px; }
.ss .ctl-y{ position:absolute; top:34px; font:700 11px/1 var(--f-body); color:var(--muted); white-space:nowrap; }
.ss .bars{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; align-items:end; height:180px; border-bottom:1px solid var(--border); }
.ss .bars > div{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; }
.ss .bars i{ display:block; width:min(44px, 100%); border-radius:4px 4px 0 0; background:var(--accent); min-height:2px; }
.ss .bars i.dec{ background:var(--border); }
.ss .bars b{ font:800 18px/1 var(--f-display); font-variant-numeric:tabular-nums; }
.ss .bars-x{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; text-align:center; font:700 12px/1.3 var(--f-body); color:var(--muted); padding-top:8px; }
.ss .mv{ display:inline-flex; align-items:center; gap:3px; min-width:46px; font:800 13px/1 var(--f-body); font-variant-numeric:tabular-nums; }
.ss .mv.up{ color:var(--success); } .ss .mv.dn{ color:var(--live); } .ss .mv.eq{ color:var(--muted); } .ss .mv.nw{ color:var(--accent-ink); }
.ss .rank{ font:900 28px/1 var(--f-display); font-variant-numeric:tabular-nums; width:44px; }
.ss .cmp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,auto) minmax(0,1fr); }
.ss .cmp > div{ padding:12px 0; border-bottom:1px solid var(--hair); display:flex; align-items:center; gap:8px; }
.ss .cmp .k{ justify-content:center; font:700 12px/1.2 var(--f-body); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); text-align:center; }
.ss .cmp .b{ justify-content:flex-end; text-align:right; }
.ss .cmp .v{ font:800 22px/1 var(--f-display); font-variant-numeric:tabular-nums; }

/* data grid "tables" (div-based so template loops are valid HTML) */
.ss .dt{ border:1px solid var(--hair); overflow-x:auto; }
.ss .dt-in{ min-width:560px; }
.ss .dt-r{ display:grid; align-items:center; border-bottom:1px solid var(--hair); font-size:15px; }
.ss .dt-r:last-child{ border-bottom:0; }
.ss .dt-r > *{ padding:12px 16px; min-width:0; }
.ss .dt-h{ background:var(--surface); }
.ss .dt-h > *{ font:800 12px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-block:14px; }
.ss .c-res .dt-r{ grid-template-columns:minmax(190px,1.6fr) minmax(150px,1.3fr) minmax(120px,1.2fr) 50px 64px minmax(150px,1.3fr) 56px; } .ss .dt-in.c-res{ min-width:760px; }
.ss .c-wi .dt-r{ grid-template-columns:minmax(170px,1.4fr) minmax(140px,1fr) minmax(130px,1fr) minmax(150px,1.1fr); } .ss .dt-in.c-wi{ min-width:600px; }
.ss .c-rec .dt-r{ grid-template-columns:100px minmax(160px,1.5fr) minmax(130px,1.3fr) 44px 60px minmax(130px,1.2fr) 90px; } .ss .dt-in.c-rec{ min-width:780px; }
.ss .c-rank .dt-r{ grid-template-columns:64px 70px minmax(220px,2fr) 90px minmax(200px,1.6fr) minmax(150px,1.2fr); } .ss .dt-in.c-rank{ min-width:820px; }
.ss .c-recs .dt-r{ grid-template-columns:56px minmax(200px,1.6fr) 110px minmax(220px,1.8fr) minmax(120px,1fr); } .ss .dt-in.c-recs{ min-width:720px; }

/* paged rail (replaces native horizontal scrollbars) */
.ss .rail-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ss .rail-nav{ display:flex; align-items:center; gap:8px; }
.ss .rail-count{ font:700 13px/1 var(--f-body); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ss .rail-btn{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:var(--rp); cursor:pointer; }
.ss .rail-btn:disabled{ opacity:.3; cursor:default; }
.ss .rail-btn:not(:disabled):hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ss .rail{ display:grid; gap:16px; }
.ss .rail-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ss .rail-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:700px){ .ss .rail-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ss .dots{ display:flex; gap:2px; justify-content:center; margin-top:14px; }
.ss .dots button{ width:28px; height:28px; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; }
.ss .dots button i{ display:block; width:8px; height:8px; border-radius:4px; background:var(--border); transition:width .2s; }
.ss .dots button[aria-current="true"] i{ width:22px; background:var(--accent); }

/* hub hero: one small logo, right of the title, never over the H1 */
.ss .hub-hero{ border-bottom:1px solid var(--hair); }
.ss .hub-hero-in{ display:flex; flex-direction:column; gap:var(--s5); padding-block:var(--s6) var(--s7); }
.ss .hub-hero-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4) var(--s6); }
.ss .hub-hero-copy{ flex:1 1 280px; min-width:min(100%, 16rem); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.ss .hub-hero-copy .crumbs{ margin-bottom:var(--s2); }
.ss .hub-hero-copy .disp{ line-height:.88; }
.ss .hub-hero-intro{ max-width:640px; }
.ss .promo-logo{ position:static; flex:0 0 auto; display:block; width:auto; height:auto; max-width:200px; max-height:64px; margin-inline-start:auto; align-self:center; object-fit:contain; opacity:1; pointer-events:none; filter:none; }
.ss[data-theme="light"] .promo-logo{ filter:none; opacity:1; }
@media (max-width:700px){
  .ss .hub-hero-row{ flex-wrap:nowrap; }
  .ss .hub-hero-copy{ min-width:0; flex-basis:auto; }
  .ss .promo-logo{ max-height:40px; max-width:96px; }
}
.ss .ss-silhouette{ display:grid; place-items:center; background:#0B0C0A; color:#C9F202; }
.ss .fighter-shot{ display:flex; flex-direction:column; gap:8px; max-width:440px; justify-self:end; width:100%; min-width:0; }
.ss .rec-stats{ display:flex; flex-wrap:wrap; gap:10px; max-width:560px; }
.ss .rec-stat{ display:flex; flex-direction:column; gap:6px; flex:1 1 140px; min-width:min(140px,100%); padding:12px 14px; background:var(--surface); border:1px solid var(--hair); }
.ss .rec-stat .num{ font-size:clamp(28px,3vw,40px); line-height:1; }
.ss .rec-stat.is-primary .num{ font-size:clamp(36px,4vw,52px); }
.ss .fighter-lower{ padding-block:clamp(28px,4vw,56px); }
.ss .fighter-credit{ margin:0; overflow-wrap:anywhere; }
.ss .odds-row{ display:flex; flex-wrap:wrap; gap:12px 20px; }
.ss .ss-rg{ margin:8px 0 0; }
.ss .promo-slot{ display:none; }
.ss .promo-slot span{ font:700 11px/1.4 ui-monospace,Menlo,monospace; color:var(--muted); }

/* one-line display text, sized by the template from character count (see Home FotW) */
.ss .fit-line{ white-space:nowrap; text-wrap:nowrap; line-height:.9; max-width:100%; }

/* newsletter: compact copy, inline email + black button, photo blended on the right */
.ss .nl-split{ align-items:flex-start; }
.ss .nl-box{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,3vw,32px); background:var(--accent); color:var(--on-accent); }
.ss .nl-c{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s4) var(--s6); width:100%; }
.ss .nl-copy{ flex:1 1 220px; min-width:min(100%, 220px); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.ss .nl-action{ flex:1 1 280px; max-width:420px; display:flex; flex-direction:column; align-items:stretch; gap:var(--s3); }
.ss .nl-kicker{ margin:0; font:800 12px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; }
.ss .nl-title{ margin:0; max-width:12em; font:900 clamp(28px,3.2vw,42px)/.9 var(--f-display); text-transform:uppercase; letter-spacing:.005em; text-wrap:balance; }
.ss .nl-msg,.ss .ss-nl-soon{ margin:0; font:700 15px/1.4 var(--f-body); }
.ss .nl-fields{ display:flex; flex-direction:column; align-items:stretch; gap:var(--s3); width:100%; }
.ss .nl-box.has-fig{ min-height:240px; }
.ss .nl-box.has-fig .nl-c{ max-width:min(36rem, 60%); flex-direction:column; align-items:flex-start; }
.ss .nl-box.has-fig .nl-action{ max-width:none; flex-basis:auto; }
.ss .nl-fig{ position:absolute; z-index:0; right:0; bottom:0; height:100%; width:min(46%, 420px); pointer-events:none; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 42%);
  mask-image:linear-gradient(to right, transparent 0, #000 42%); }
.ss .nl-fig img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%; filter:grayscale(1) contrast(1.25); }
@media (max-width:700px){
  .ss .nl-box.has-fig{ min-height:0; height:auto; }
  .ss .nl-box.has-fig .nl-c{ max-width:none; width:100%; flex-direction:row; align-items:flex-end; }
  .ss .nl-action{ max-width:none; }
  .ss .nl-title{ max-width:14em; }
  .ss .nl-fig{ display:none; }
}

/* scrollbars: black track, near-black thumb, site-wide */
html{ scrollbar-color:#2B2E28 #000; }
.ss, .ss *{ scrollbar-color:#2B2E28 #000; }
::-webkit-scrollbar{ width:10px; height:10px; background:#000; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#2B2E28; border:2px solid #000; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#3A3E36; }
::-webkit-scrollbar-corner{ background:#000; }

/* winner cell anywhere: badge, flag, name with even spacing */
.ss .w{ display:inline-flex; align-items:center; gap:10px; font-weight:700; }
/* final results list (Event, results state): replaces the wide table, no sideways scroll on phones */
.ss .res{ list-style:none; margin:0; padding:0; border:1px solid var(--hair); }
.ss .res-r{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"k k k" "who how act"; gap:8px 28px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--hair); }
.ss .res-r:last-child{ border-bottom:0; }
.ss .res-r:first-child{ background:var(--surface); }
.ss .res-k{ grid-area:k; font:800 11px/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ss .res-who{ grid-area:who; display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; min-width:0; }
.ss .res-w{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.ss .res-w b{ font:800 18px/1.2 var(--f-body); }
.ss .res-l{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--muted); }
.ss .res-how{ grid-area:how; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.ss .res-act{ grid-area:act; display:flex; align-items:center; gap:4px; }
@media (max-width:700px){
  .ss .res-r{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k k" "who who" "how act"; gap:10px 12px; padding:14px 16px; }
  .ss .res-who{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ss .res-l{ padding-left:36px; }
  .ss .res-how{ flex-wrap:wrap; white-space:normal; min-width:0; gap:8px; }
  .ss .res-act{ align-self:end; }
  .ss .res-act .clip{ white-space:nowrap; }
}

/* Media: short-form first */
.ss .short{ display:block; min-width:0; color:inherit; text-decoration:none; }
.ss .short .play{ width:46px; height:46px; opacity:.92; }
.ss .short .play svg{ width:18px; height:18px; }
.ss .short .dur{ z-index:2; }
.ss .short-cap{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:6px; padding:44px 12px 36px; background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); }
.ss .short-cap .kicker{ font-size:11px; }
.ss .short-t{ font:700 15px/1.25 var(--f-body); color:#fff; text-wrap:pretty; }
.ss .short:hover .short-t{ text-decoration:underline; text-underline-offset:3px; }
.ss .short-xl .short-t{ font:900 clamp(26px,2.6vw,38px)/.95 var(--f-display); text-transform:uppercase; }
.ss .short-xl .play{ width:72px; height:72px; }
.ss .short-xl .play svg{ width:26px; height:26px; }
.ss .short-xl .short-cap{ padding:80px 20px 44px; }
.ss .shorts-lead{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--gutter); }
.ss .shorts-lead .short-xl{ grid-column:span 2; grid-row:span 2; }
.ss .shorts-lead .short-xl .ph{ aspect-ratio:auto; height:100%; }
.ss .g-shorts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(170px, 45%), 1fr)); gap:var(--gutter); }
.ss .long{ display:grid; grid-template-columns:minmax(240px,1fr) repeat(2, minmax(0,1.2fr)); gap:var(--gutter) clamp(20px,3vw,40px); align-items:start; padding:clamp(20px,3vw,32px); border:1px solid var(--hair); }
@media (max-width:1060px){ .ss .shorts-lead{ grid-template-columns:repeat(3, minmax(0,1fr)); } .ss .shorts-lead .short-xl{ grid-column:span 3; grid-row:auto; } .ss .shorts-lead .short-xl .ph{ aspect-ratio:4/5; } .ss .long{ grid-template-columns:repeat(2, minmax(0,1fr)); } .ss .long > :first-child{ grid-column:1 / -1; } }
@media (max-width:700px){ .ss .shorts-lead{ grid-template-columns:repeat(2, minmax(0,1fr)); } .ss .shorts-lead .short-xl{ grid-column:span 2; } .ss .short-t{ font-size:14px; } .ss .long{ grid-template-columns:1fr; } }

/* On this page. Desktop is the sticky sidebar. Phones use the collapsible list. */
.ss .toc-side{ position:sticky; top:84px; z-index:2; display:flex; flex-direction:column; gap:2px; padding:16px 14px 12px; }
.ss .toc-side .cap{ margin:0 0 8px; }
.ss .toc a{ display:block; padding:8px 10px; color:var(--muted); font:700 14px/1.3 var(--f-body); border-left:2px solid transparent; text-decoration:none; }
.ss .toc a:hover{ color:var(--text); }
.ss .toc a[aria-current="true"]{ color:var(--text); border-left-color:var(--accent); }
.ss .toc-mobile{ display:none; }
.ss .toc-mobile summary{ cursor:pointer; min-height:44px; padding:12px 16px; font:800 12px/1 var(--f-display); letter-spacing:.14em; text-transform:uppercase; list-style:none; }
.ss .toc-mobile summary::-webkit-details-marker{ display:none; }
.ss .toc-links{ display:flex; flex-direction:column; padding:0 8px 10px; }
@media (max-width:900px){
  .ss .toc-side{ display:none; }
  .ss .toc-mobile{ display:block; border:1px solid var(--hair); background:var(--surface); }
}

/* Who wins. Same panel language as the athlete cards. No odds. */
.ss .who-form{ margin:0; }
.ss .who-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:stretch; }
.ss .who-card{ display:flex; flex-direction:column; gap:10px; min-width:0; padding:0; border:1px solid var(--hair); background:var(--surface); color:inherit; text-align:left; cursor:pointer; overflow:hidden; }
.ss .who-card .ath-shot{ aspect-ratio:auto; height:clamp(108px, 19vw, 210px); background:#20231D; align-items:center; justify-content:center; }
.ss .who-card .ath-img,.ss .who-card .ath-img.is-cutout{ width:auto; max-width:100%; height:100%; object-fit:contain; object-position:center center; }
.ss .who-card .who-initials{ display:grid; place-items:center; width:100%; height:100%; background:#20231D; color:var(--text); font:800 clamp(28px,4vw,42px)/1 var(--f-display); letter-spacing:.06em; text-transform:uppercase; }
.ss .who-card:hover{ border-color:var(--text); }
.ss .who-card:disabled{ cursor:default; opacity:.72; }
.ss .who-card.is-mine{ box-shadow:inset 0 0 0 2px var(--accent); }
.ss .who-meta{ display:flex; align-items:center; gap:8px; padding:0 12px; min-width:0; }
.ss .who-name{ font:800 clamp(16px,1.6vw,22px)/1.05 var(--f-display); text-transform:uppercase; letter-spacing:.02em; min-width:0; overflow-wrap:break-word; }
.ss .who-pct{ display:block; padding:0 12px 14px; font:800 clamp(28px,4vw,40px)/1 var(--f-display); font-variant-numeric:tabular-nums; }
.ss .who-pct[hidden]{ display:none; }
.ss .who-pct-n{ display:block; }
.ss .who-bar{ display:block; height:6px; margin-top:10px; min-width:0; max-width:100%; background:color-mix(in srgb, var(--text) 16%, var(--bg)); overflow:hidden; }
.ss .who-bar-fill{ display:block; height:100%; width:0; max-width:100%; background:var(--accent); transition:width .45s ease; }
@media (prefers-reduced-motion:reduce){ .ss .who-bar-fill{ transition:none; } }
.ss .who-vs{ align-self:center; font:800 13px/1 var(--f-display); letter-spacing:.12em; color:var(--muted); }
.ss .who-total{ margin:0; }
.ss .who-total[hidden]{ display:none; }
.ss .who-note{ margin:0; }
@media (max-width:700px){
  .ss .who-row{ gap:8px; }
  .ss .who-name{ font-size:15px; }
  .ss .who-meta{ padding:0 8px; }
  .ss .who-pct{ padding:0 8px 12px; }
}