:root { color-scheme:light; --paper:#f4f1ea; --white:#fff; --ink:#111113; --soft:#686766; --red:#b5111b; --red-bright:#df1623; --line:rgba(17,17,19,.16); --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:Arial,"Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.skip { position:fixed; z-index:100; top:-80px; left:16px; padding:12px 18px; background:var(--red); color:white; }
.skip:focus { top:16px; }
.header { position:absolute; z-index:10; top:0; left:50%; width:min(100% - 48px,var(--max)); height:78px; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.24); color:white; }
.wordmark { display:flex; align-items:center; font-weight:900; text-transform:uppercase; letter-spacing:-.06em; }
.wordmark span { padding:7px 9px; background:var(--red); color:white; }
.wordmark b { padding-left:7px; }
.header nav { display:flex; gap:34px; font-size:12px; font-weight:700; }
.header nav a:hover { color:#ff7a82; }
.event-link { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; }
.event-link i { width:7px; height:7px; border-radius:50%; background:#ff303d; box-shadow:0 0 0 5px rgba(255,48,61,.17); }

.cover { position:relative; min-height:900px; display:flex; align-items:center; overflow:hidden; isolation:isolate; background:#111; color:white; }
.cover-photo { position:absolute; inset:0; z-index:-3; background:url("assets/arena.png") center / cover no-repeat; filter:grayscale(.35) contrast(1.15); }
.cover::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(8,8,10,.98) 0%,rgba(16,10,11,.8) 47%,rgba(56,8,12,.25) 83%),linear-gradient(0deg,rgba(0,0,0,.86),transparent 44%); }
.cover::after { content:""; position:absolute; z-index:-1; inset:0 auto 0 50%; width:1px; background:rgba(255,255,255,.12); }
.cover-inner { width:min(100% - 48px,var(--max)); margin:105px auto 45px; }
.cover-label { display:flex; align-items:center; gap:15px; margin-bottom:35px; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.cover-label span { padding:10px 12px; background:var(--red-bright); font-weight:850; }
.cover-label b { color:#c7c3c1; }
h1 { max-width:980px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(68px,10.6vw,150px); line-height:.76; letter-spacing:-.075em; text-transform:uppercase; }
h1 em { color:transparent; font-style:italic; -webkit-text-stroke:1.5px rgba(255,255,255,.8); }
.opponent { display:flex; align-items:center; gap:20px; margin:36px 0 0; }
.opponent span { color:#d35b62; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.16em; }
.opponent strong { font-size:27px; text-transform:uppercase; }
.cover-inner > p { max-width:610px; margin:28px 0 0; color:#c9c5c3; font-size:17px; line-height:1.75; }
.cover-button { display:inline-flex; align-items:center; min-height:52px; margin-top:30px; padding:0 22px; background:var(--red-bright); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.cover-score { position:absolute; right:max(6vw,calc((100vw - var(--max))/2)); bottom:95px; display:flex; align-items:flex-end; gap:16px; }
.cover-score span { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.52); font-size:170px; font-weight:900; line-height:.7; letter-spacing:-.1em; }
.cover-score small { padding-bottom:3px; color:#c2bdba; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }

.date-block,.story,.comparison,.faq { width:min(100% - 48px,var(--max)); margin:0 auto; padding:120px 0; display:grid; grid-template-columns:90px 1fr; column-gap:35px; border-top:1px solid var(--line); }
.section-number { color:var(--red); font-size:12px; font-weight:900; }
.section-title p { margin:0 0 14px; color:var(--red); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.18em; }
h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(43px,6vw,76px); line-height:.95; letter-spacing:-.055em; text-transform:uppercase; }
.date-card { grid-column:2; display:grid; grid-template-columns:1fr 1.25fr; margin-top:55px; border:1px solid var(--line); background:var(--white); }
.date-card > div { min-height:250px; display:flex; flex-direction:column; justify-content:center; padding:35px; }
.calendar { border-right:1px solid var(--line); }
.date-card span,.date-card b { font-size:9px; text-transform:uppercase; letter-spacing:.13em; }
.date-card span { color:var(--red); font-weight:850; }
.date-card strong { margin:9px 0; font-family:Georgia,serif; font-size:88px; line-height:.9; letter-spacing:-.07em; }
.date-card b { color:var(--soft); }
.clock { background:var(--red); color:white; }
.clock span,.clock b { color:white; opacity:.78; }
.clock strong { font-size:95px; }
.date-text { grid-column:2; max-width:880px; margin:44px 0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.date-text p { margin:0; color:var(--soft); line-height:1.8; }

.broadcast { position:relative; padding:105px max(24px,calc((100vw - var(--max))/2)); background:#171719; color:white; }
.broadcast-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; margin-bottom:48px; }
.broadcast-heading span { color:#e4535c; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.16em; }
.broadcast-heading h2 { margin:14px 0 0; font-size:clamp(52px,6.5vw,92px); }
.broadcast-heading p { max-width:480px; margin:0 0 8px; color:#aaa5a2; line-height:1.75; }
.broadcast-placeholder { position:relative; width:100%; aspect-ratio:16/8.2; min-height:520px; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.2); background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.55)),repeating-linear-gradient(135deg,transparent 0 58px,rgba(255,255,255,.018) 58px 59px),radial-gradient(circle at 50% 48%,rgba(196,14,27,.34),transparent 32%),#09090b; box-shadow:0 34px 80px rgba(0,0,0,.28); }
.screen-bar { height:62px; flex:0 0 62px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1); color:#aaa5a2; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.screen-bar span { display:flex; align-items:center; gap:10px; color:white; font-weight:850; }
.screen-bar i { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 14px var(--red); }
.screen-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; text-align:center; }
.pulse { position:relative; width:106px; height:106px; margin-bottom:20px; border-radius:50%; border:1px solid #ee3945; background:rgba(196,14,27,.12); box-shadow:0 0 0 18px rgba(226,41,53,.06),0 0 90px rgba(226,41,53,.28); }
.pulse::after { content:""; position:absolute; left:43px; top:35px; border-top:18px solid transparent; border-bottom:18px solid transparent; border-left:28px solid white; filter:drop-shadow(0 2px 7px rgba(0,0,0,.45)); }
.broadcast-placeholder strong { font-family:Arial,sans-serif; font-size:18px; text-transform:uppercase; letter-spacing:.04em; }
.broadcast-placeholder .screen-center span { color:#8c8886; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.screen-progress { height:4px; margin:0 24px 22px; background:rgba(255,255,255,.12); }
.screen-progress i { display:block; width:13%; height:100%; background:var(--red); }

/* The Dreams block is commented in index.html. These rules apply automatically after it is enabled. */
.broadcast:has(.dreams-player) .broadcast-placeholder { display:none; }
.video-wrapper { position:relative; width:100%; aspect-ratio:16/8.2; min-height:520px; overflow:hidden; border:1px solid rgba(255,255,255,.2); background:#09090b; box-shadow:0 34px 80px rgba(0,0,0,.28); }
.dreams-player { width:100%; height:100%; min-height:520px; --plyr-color-main:#ed1c2e; --plyr-focus-visible-color:#ff4a55; --plyr-video-control-background-hover:#ed1c2e; --plyr-control-toggle-checked-background:#ed1c2e; --plyr-range-fill-background:#ed1c2e; }
.dreams-player .plyr,.dreams-player video,.dreams-player iframe { width:100%; height:100%; min-height:520px; }
.dreams-player .plyr__control--overlaid { background:#ed1c2e !important; box-shadow:0 0 0 14px rgba(237,28,46,.16),0 12px 45px rgba(237,28,46,.4); }
.dreams-player [data-plyr="mute"],.dreams-player .plyr__volume { color:#ed1c2e !important; }
.dreams-player .plyr__controls input[type="range"] { color:#ed1c2e !important; }

.story-lead { grid-column:2; max-width:780px; margin:42px 0 0; }
.story-lead p { font-family:Georgia,serif; font-size:23px; line-height:1.65; }
.timeline { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); margin-top:55px; border:1px solid var(--line); background:white; }
.timeline article { min-height:310px; padding:30px; border-left:1px solid var(--line); }
.timeline article:first-child { border-left:0; }
.timeline time { color:transparent; -webkit-text-stroke:1px var(--red); font-size:52px; font-weight:900; }
.timeline h3 { margin:45px 0 15px; font-size:17px; text-transform:uppercase; }
.timeline p { color:var(--soft); line-height:1.7; }

.fighters { position:relative; grid-column:2; display:grid; grid-template-columns:1fr 1fr; margin-top:55px; }
.fighters article { min-height:550px; padding:45px; }
.fighters article > span { font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.15em; }
.fighters h3 { margin:60px 0 45px; font-family:Georgia,serif; font-size:clamp(46px,6vw,78px); line-height:.82; letter-spacing:-.06em; text-transform:uppercase; }
.fighters .red { background:var(--red); color:white; }
.fighters .dark { background:#171719; color:white; }
.fighters dl { margin:0; border-top:1px solid rgba(255,255,255,.25); }
.fighters dl div { display:flex; justify-content:space-between; gap:25px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.fighters dt { color:rgba(255,255,255,.65); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.fighters dd { margin:0; font-weight:800; }
.versus { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--red); font-weight:900; }
.style-copy { grid-column:2; max-width:850px; margin:65px 0 0 auto; padding-left:30px; border-left:3px solid var(--red); }
.style-copy h3 { margin:0 0 16px; font-size:23px; text-transform:uppercase; }
.style-copy p { color:var(--soft); line-height:1.8; }

.venue { padding:110px max(24px,calc((100vw - var(--max))/2)); display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:end; background:var(--red); color:white; }
.venue span { font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.16em; }
.venue h2 { margin-top:20px; }
.venue p { margin:0; color:rgba(255,255,255,.75); line-height:1.8; }
.faq-list { grid-column:2; max-width:900px; margin:50px 0 0 auto; width:100%; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { position:relative; padding:24px 45px 24px 0; cursor:pointer; list-style:none; font-weight:800; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:8px; color:var(--red); font-size:22px; }
.faq details[open] summary::after { content:"−"; }
.faq details p { max-width:650px; margin:-4px 0 27px; color:var(--soft); line-height:1.7; }
footer { width:min(100% - 48px,var(--max)); min-height:145px; margin:0 auto; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:25px; border-top:1px solid var(--line); color:var(--soft); font-size:10px; }
footer p { text-align:center; } footer>a:last-child { justify-self:end; }

@media(max-width:850px){.header nav{display:none}.cover-score{display:none}.broadcast-heading{grid-template-columns:1fr;gap:25px}.date-block,.story,.comparison,.faq{grid-template-columns:50px 1fr}.timeline{grid-template-columns:1fr}.timeline article{min-height:230px;border-left:0;border-top:1px solid var(--line)}.timeline article:first-child{border-top:0}.venue{grid-template-columns:1fr}}
@media(max-width:600px){.header,.cover-inner,.date-block,.story,.comparison,.faq,footer{width:min(100% - 32px,var(--max))}.cover{min-height:790px;align-items:flex-start}.cover-inner{margin-top:135px}.cover-label{align-items:flex-start;flex-direction:column;gap:10px}h1{font-size:clamp(58px,17vw,78px)}.opponent strong{font-size:21px}.cover-inner>p{font-size:15px}.date-block,.story,.comparison,.faq{padding:80px 0;grid-template-columns:1fr}.section-number{margin-bottom:25px}.date-card,.date-text,.story-lead,.timeline,.fighters,.style-copy,.faq-list{grid-column:1}.date-card{grid-template-columns:1fr}.calendar{border-right:0;border-bottom:1px solid var(--line)}.date-card>div{min-height:210px}.date-text{grid-template-columns:1fr}.broadcast{padding:80px 16px}.broadcast-heading{margin-bottom:32px}.broadcast-heading h2{font-size:52px}.broadcast-placeholder,.video-wrapper{min-height:310px;aspect-ratio:auto}.dreams-player,.dreams-player .plyr,.dreams-player video,.dreams-player iframe{min-height:310px}.screen-bar{height:50px;flex-basis:50px;padding:0 15px}.screen-bar b{display:none}.pulse{width:82px;height:82px;margin-bottom:12px}.pulse::after{left:34px;top:27px;border-top-width:14px;border-bottom-width:14px;border-left-width:22px}.broadcast-placeholder strong{max-width:260px;font-size:14px}.screen-progress{margin:0 15px 15px}.fighters{grid-template-columns:1fr}.fighters article{min-height:470px;padding:30px}.fighters h3{margin-top:45px}.venue{padding:80px 16px}.faq-list{margin-top:40px}footer{grid-template-columns:1fr;padding:35px 0;text-align:center}footer .wordmark,footer>a:last-child{justify-self:center}footer p{margin:0;grid-row:2}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}