:root{color-scheme:dark;--bg:#090909;--panel:#181818;--text:#f5f5f5;--muted:#b3b3b3;--line:#363636;--accent:#ff9d17}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font:16px/1.65 'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:7px}
header,footer{display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:27px;letter-spacing:-1px}.brand img{display:block;object-fit:contain}.brand span b{color:var(--accent)}
.eyebrow,.chapter-label{font-size:14px;letter-spacing:1.8px;font-weight:600}
main{max-width:1500px;margin:auto;padding:0 5vw}.eyebrow{color:var(--accent)}
h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.05}h1{font:800 clamp(64px,8.7vw,138px)/.98 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-.025em;margin:35px 0 42px;text-transform:uppercase}h1 em,.intro-step em{font-style:normal;color:var(--accent)}.mobile{display:none}

.scroll-intro{--journey:0;height:330svh;position:relative;margin-inline:-5vw}
.scroll-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.stadium-layer{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:saturate(.86) contrast(1.12);transform:scale(calc(1 + var(--journey)*.24)) translateY(calc(var(--journey)*-2%));will-change:transform}
.stadium-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,transparent 0 18%,rgba(0,0,0,.2) 43%,rgba(0,0,0,.92) 94%),linear-gradient(90deg,rgba(255,115,0,.2),transparent 42%,rgba(255,255,255,.05))}
.energy-line{position:absolute;left:50%;top:-10%;width:3px;height:120%;background:linear-gradient(transparent,#fff 32%,var(--accent) 50%,transparent 82%);box-shadow:0 0 18px 5px #ff6400;transform:translateX(-50%) rotate(8deg) scaleY(calc(.4 + var(--journey)*.8));opacity:calc(.25 + var(--journey)*.6)}
.versus-mark{position:absolute;left:50%;top:50%;width:min(42vw,440px);height:auto;transform:translate(-50%,-50%) scale(calc(.66 + var(--journey)*1.15)) rotate(calc((var(--journey) - .5)*3deg));filter:drop-shadow(0 20px 50px #000);opacity:calc(1 - var(--journey)*1.15);will-change:transform,opacity}
.intro-step{position:absolute;left:7vw;bottom:12vh;max-width:900px;text-shadow:0 3px 24px #000;opacity:0;transform:translateY(24px);transition:opacity .35s,transform .35s}.intro-step span{color:var(--accent);font-size:14px;letter-spacing:.2em;font-weight:700}
.intro-step h1,.intro-step h2{margin:14px 0 0;text-transform:uppercase;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;line-height:.92}.intro-step h1{font-size:clamp(58px,9vw,138px)}.intro-step h2{font-size:clamp(48px,7vw,108px)}
[data-step=a] .intro-step-a,[data-step=b] .intro-step-b,[data-step=c] .intro-step-c{opacity:1;transform:none}
.scroll-cue{position:absolute;right:5vw;bottom:7vh;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ddd;transition:opacity .3s}.scroll-cue b{color:var(--accent);font-size:22px;margin-left:8px}.scroll-intro:not([data-step=a]) .scroll-cue{opacity:0}

.host{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:stretch;margin:8rem 0;border:1px solid var(--line);background:#111;min-height:560px}
.host-image{overflow:hidden;position:relative}.host-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#111)}.host-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.host-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,80px)}.host-copy h2{font:800 clamp(48px,6vw,90px)/.95 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;margin:20px 0}.host-copy p{color:var(--muted);font-size:18px;max-width:48ch}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}

.home-hero{padding:64px 0 36px}.home-hero h1{font-size:clamp(48px,6.5vw,96px)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:32px}.hero-bottom p{color:var(--muted);font-size:18px;margin:0}.hero-index{font-size:14px;color:var(--muted);white-space:nowrap}
.listing{padding:40px 0 64px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:30px}h2{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-1px}.section-heading>span{color:var(--accent);font-size:24px}.empty{color:var(--muted);border-bottom:1px solid var(--line);padding:20px 0 36px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}.match-card{padding:30px;background:var(--panel);border:1px solid var(--line);transition:border-color .2s,transform .2s}.match-card:hover{border-color:var(--accent);transform:translateY(-3px)}h3{font-size:26px;margin:20px 0}.match-card h3 span{font-size:16px;color:var(--muted)}.match-card p{font-size:14px;color:var(--muted)}.card-link{display:block;color:var(--accent);margin-top:32px}
footer{border-top:1px solid var(--line);border-bottom:0;font-size:14px;color:var(--muted);gap:24px}.back{display:inline-block;margin:32px 0;color:var(--muted)}
.match-hero{padding:20px 0 64px}.match-hero h1{font-size:clamp(56px,8vw,110px)}.versus{display:inline-block;font-size:.35em;color:var(--accent);padding:0 24px;vertical-align:middle}.prediction-heading{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;gap:16px}small{font-size:14px;color:var(--muted)}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:32px 0}.scores>div>span{display:block;color:var(--muted)}.scores strong{display:block;font:700 clamp(40px,7vw,84px)/1.3 'Barlow Condensed',sans-serif}.scores strong small{font-size:.4em;margin-left:4px}.meter{height:4px;background:var(--line);margin-top:15px}.meter i{height:100%;display:block;background:var(--accent)}.scroll-link{display:inline-block;margin-top:24px;color:var(--accent)}
.chapter{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid var(--line);padding:64px 0;gap:48px}.chapter-label{color:var(--muted)}.chapter-body{font-size:20px}.chapter-body p{white-space:pre-line}.dialogue{padding:24px 28px;border-left:3px solid var(--accent);background:var(--panel);margin-bottom:20px}.dialogue p{margin:12px 0 0}.dialogue.narrator{background:transparent;border-color:var(--line);font-style:italic}
.narrator-portrait{width:88px;height:88px;overflow:hidden;border-radius:50%;margin-bottom:18px;background:#eee}.narrator-portrait img{display:block;width:176px;height:auto;max-width:none;transform:translateY(-4px)}
.factor{padding-bottom:20px}.factor h3{color:var(--accent)}details{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-size:23px}details p{padding-top:20px;color:var(--muted)}.confidence{color:var(--accent)}.changes p{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:12px 0;font-size:16px}
.product{border:1px solid var(--line);padding:36px;display:flex;align-items:center;gap:30px;justify-content:space-between;margin-bottom:64px}.product h2{margin:15px 0}.button{background:var(--accent);color:var(--bg);padding:15px 25px;font-weight:700;white-space:nowrap}.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--accent);transform-origin:left;z-index:10}.skip{position:absolute;top:-100px;padding:12px;background:var(--accent);color:var(--bg);z-index:20}.skip:focus{top:10px}

@media(max-width:700px){
 header,footer{padding:18px 6vw}.brand span{font-size:20px}main{padding:0 6vw}.scroll-intro{height:280svh;margin-inline:-6vw}.stadium-layer{object-position:center}.versus-mark{width:min(68vw,360px)}.intro-step{left:6vw;right:6vw;bottom:14vh}.intro-step h1{font-size:clamp(58px,18vw,92px)}.intro-step h2{font-size:clamp(44px,13vw,72px)}.scroll-cue{left:6vw;right:auto}
 .host{grid-template-columns:1fr;margin:5rem 0;min-height:0}.host-image{height:54vw;min-height:280px}.host-image:after{background:linear-gradient(0deg,#111,transparent 55%)}.host-copy{padding:30px}.home-hero{padding-top:40px}h1{font-size:clamp(52px,12.5vw,86px)}.mobile{display:block}.hero-bottom{display:block}.hero-index{display:block;margin-top:28px}.hero-bottom p{font-size:16px}
 .chapter{grid-template-columns:1fr;gap:22px;padding:40px 0}.chapter-body{font-size:18px}.scores{gap:16px}.scores>div>span{font-size:14px;overflow-wrap:anywhere}.prediction-heading{flex-direction:column}.versus{display:block;padding:12px 0}.product{display:block;padding:24px}.button{display:inline-block;margin-top:22px}footer{align-items:start;flex-direction:column;gap:8px}.changes p{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-intro{height:100svh}.stadium-layer,.versus-mark,.energy-line{transform:none}.intro-step{display:none}.intro-step-c{display:block;opacity:1;transform:none}.scroll-cue{display:none}.reveal{opacity:1;transform:none}*{transition:none!important}}