/* FX5 brand layer (brand direction v4): ink base, chrome type, the site fonts stay as they are, film grain, Signal orange and Flash yellow as fills and details, never as text.
   Staff screens (body.light) are left alone. */
:root{--ink:#0b0c0d;--signal:#F52305;--flash:#FFE123;--heat:linear-gradient(90deg,#F52305 0%,#FF6919 55%,#FFE123 100%);--chrome:linear-gradient(135deg,#f4f6f7 0%,#9aa0a7 30%,#eef0f2 52%,#7b8189 78%,#cfd4d9 100%)}

body:not(.light){background:var(--ink)}
/* film grain over the whole site */
body:not(.light)::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* chrome type: the big headlines and numbers */
body:not(.light) .h-xl,body:not(.light) .num,body:not(.light) .h-l b{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#d4d8dc}

/* tags: letter-spaced, same font as the rest of the site */
body:not(.light) .label,body:not(.light) .pill,body:not(.light) .hero-date,body:not(.light) .count small,body:not(.light) .tag{letter-spacing:.12em}
body:not(.light) .pill{border-radius:999px;padding:4px 14px}
body:not(.light) .pill.live{background:var(--flash);border-color:var(--flash);color:var(--ink)}
body:not(.light) .pill.live:before{background:var(--ink)}

/* buttons: the main call to action is brushed silver, outline buttons stay quiet */
body:not(.light) .btn.solid{background:var(--chrome);border-color:#cfd4d9;color:var(--ink);font-weight:700}
body:not(.light) .btn.solid:hover{background:transparent;color:#fff;border-color:#cfd4d9}
body:not(.light) .btn:not(.solid):hover{background:#fff;color:var(--ink)}

/* hero: blurred metal glow and a hint of heat over the video */
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(55% 38% at 82% 18%,rgba(201,206,211,.28),transparent 70%),radial-gradient(60% 30% at 12% 92%,rgba(245,35,5,.28),transparent 70%)}

/* heat line: the one gradient detail under every page title and above the footer */
body:not(.light) .pagehead .row{position:relative;border-bottom-color:transparent}
body:not(.light) .pagehead .row:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--heat)}
body:not(.light) footer{border-top:3px solid transparent;border-image:var(--heat) 1}

/* sections that carry data keep a quiet frame */
body:not(.light) .gbox,body:not(.light) .results>div>.tbl,body:not(.light) .results>div>.adm{background:#101112;border-color:#2c2f32}
body:not(.light) .gtbl tr.top1 td:first-child{box-shadow:inset 3px 0 0 var(--signal)}
body:not(.light) .qmark{background:var(--signal)}
body:not(.light) .results>div>.label{border-top-color:#2c2f32}

/* the marquee gets the brand ticker voice */
body:not(.light) .marq{border-color:#2c2f32}
body:not(.light) .marq div{font-style:normal;font-weight:900;letter-spacing:.02em}
body:not(.light) .marq span{color:var(--signal)}