/* PlayStat graphic system: court geometry, archive photography, editable type. */
body { --paper:#f5f4ed; --line:#dcded7; background:var(--paper); }
.sport-hero { background:var(--navy); color:var(--paper); overflow:hidden; }
.sport-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; padding-block:52px 38px; }
.sport-hero .small-label { color:var(--green); font-size:11px; letter-spacing:.1em; display:flex; align-items:center; gap:12px; }
.brand-cross { font-size:29px; line-height:1; }
.sport-hero h1 { font-size:clamp(70px,7.4vw,104px); line-height:.95; letter-spacing:-.065em; color:var(--paper); margin:28px 0 24px; text-wrap:nowrap; }
.sport-hero h1 span { color:var(--green); }
.hero-subhead { font:600 22px/1.4 var(--heading); margin:0 0 14px; }
.hero-description { font-size:15px; line-height:1.8; color:#c7cadb; max-width:385px; }
.sport-hero .hero-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:27px; }
.sport-hero .button.primary { background:var(--green); color:var(--navy); border-color:var(--green); border-radius:0; }
.sport-hero .text-link { color:white; font-size:12px; }
.hero-footnote { font-size:10px; color:#b3b9ce; margin-top:24px; }
.athlete-feature { margin:0; min-width:0; }
.athlete-stage { position:relative; isolation:isolate; height:495px; padding:35px 24px 42px; background:var(--green); }
.athlete-stage::before { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(var(--navy) .8px,transparent .8px); background-size:7px 7px; opacity:.18; clip-path:polygon(40% 0,100% 0,100% 100%,0 100%); }
.athlete-photo { position:relative; width:100%; height:100%; overflow:hidden; clip-path:polygon(0 7%,100% 0,100% 93%,0 100%); }
.athlete-photo img { width:100%; height:100%; object-fit:cover; object-position:51% 50%; display:block; }
.athlete-index { position:absolute; right:9px; top:-7px; font:600 150px/.9 var(--heading); letter-spacing:-.08em; color:var(--navy); opacity:.25; }
.court-orbit { position:absolute; border:2px solid var(--navy); width:320px; height:320px; border-radius:50%; left:-25px; bottom:-25px; opacity:.45; }
.frame-label { position:absolute; left:0; bottom:30px; background:var(--navy); color:var(--green); padding:11px 17px; font:600 15px/1.2 var(--heading); transform:rotate(-4deg); }
.archive-tag { position:absolute; right:18px; bottom:12px; color:var(--navy); font-size:9px; letter-spacing:.1em; font-weight:600; }
.athlete-feature figcaption { font-size:9px; color:#c7cadb; padding-top:17px; line-height:1.7; }
.athlete-feature figcaption a { color:inherit; }
.sport-ribbon { border-top:1px solid #ffffff30; padding:17px 32px; display:flex; justify-content:space-around; align-items:center; gap:24px; font:600 14px/1.2 var(--heading); letter-spacing:.07em; color:var(--green); }
.sport-ribbon i { font-size:24px; font-style:normal; }
.paths-section { border-top:0; padding-block:72px 80px; }
.section-heading h2 { font-size:clamp(30px,3.5vw,44px); line-height:1.15; margin-top:16px; }
.section-heading { margin-bottom:34px; align-items:end; }
.research-paths { border-radius:0; border:1px solid #ccd0c8; }
.research-paths>a { background:#eeeee4; padding:25px 27px; }
.research-paths>a:nth-child(2) { background:#e3f1e5; }
.research-paths>a:nth-child(3) { background:#e7e8f2; }
.path-number { color:var(--navy); font-size:11px; font-weight:600; }
.path-graphic { display:block; width:100%; height:auto; margin-top:20px; }
.research-paths h3 { font-size:23px; margin:14px 0 12px; }
.research-paths p { font-size:14px; }
.path-action { font-size:13px; padding-top:18px; border-top:1px solid #01024f25; }
.path-action b { transition:transform 160ms ease; }
.sport-perspective { background:var(--navy); color:white; padding:65px 0; overflow:hidden; }
.perspective-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.tennis-feature { margin:0; min-width:0; }
.tennis-frame { position:relative; background:var(--green); padding:0 22px 22px 0; }
.tennis-frame::after { content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid #0aeb7d70; pointer-events:none; }
.tennis-frame img { display:block; width:100%; height:455px; object-fit:cover; object-position:50% 71%; }
.tennis-frame>span { position:absolute; left:24px; top:20px; font:600 clamp(40px,5vw,66px)/.95 var(--heading); letter-spacing:-.05em; color:#fff; }
.tennis-feature figcaption { font-size:9px; color:#c7cadb; margin-top:25px; line-height:1.8; }
.tennis-feature figcaption a { color:inherit; }
.perspective-copy h2 { color:white; font-size:clamp(30px,3.3vw,42px); line-height:1.16; margin:20px 0 25px; }
.perspective-copy h2 span { color:var(--green); }
.perspective-copy>.small-label { color:var(--green); }
.perspective-copy>p:not(.small-label) { font-size:15px; color:#c7cadb; }
.question-list { list-style:none; padding:0; margin:30px 0; }
.question-list li { padding:15px 0; border-top:1px solid #ffffff30; font-size:14px; }
.question-list span { color:var(--green); font-size:11px; margin-right:18px; }
.perspective-copy .text-link { color:var(--green); font-size:13px; }
.perspective-copy>p.coverage-note { font-size:11px; margin-top:24px; color:#b3b9ce; line-height:1.8; }
.field-note-v5 { padding-block:80px; background:var(--paper); }
.field-grid { gap:60px; grid-template-columns:1fr 1fr; }
.evidence-poster { background:var(--green); color:var(--navy); padding:28px; position:relative; overflow:hidden; min-width:0; }
.evidence-poster::before { content:""; position:absolute; width:380px; height:380px; border:1px solid #01024f40; border-radius:50%; top:-180px; right:-50px; pointer-events:none; }
.poster-label,.poster-foot { font-size:10px; font-weight:600; letter-spacing:.1em; position:relative; }
.evidence-poster>p { font:600 clamp(34px,4.1vw,55px)/1.08 var(--heading)!important; color:var(--navy)!important; letter-spacing:-.05em; margin:48px 0!important; position:relative; }
.evidence-poster>p>span { display:inline-block; background:var(--navy); color:var(--green); padding:0 12px 3px; margin-right:8px; }
.poster-foot { display:block; border-top:1px solid #01024f55; padding-top:16px; }
.graphic-article-cover { margin-block:0 50px; }
.graphic-article-cover .evidence-poster { padding:35px 45px; background:var(--navy); color:var(--green); }
.graphic-article-cover .evidence-poster>p { color:white!important; font-size:clamp(35px,6vw,80px)!important; }
.graphic-article-cover .evidence-poster>p>span { background:var(--green); color:var(--navy); }
.graphic-article-cover .poster-foot { border-color:#ffffff40; }
.graphic-article-cover .evidence-poster::before { border-color:#0aeb7d70; width:500px; height:500px; top:-130px; }
.faq-section { border-top:1px solid var(--line); }
@media(hover:hover) and (pointer:fine) { .research-paths>a:hover { background:#d2f6de; }.research-paths>a:hover .path-action b { transform:translate(3px,-3px); }.sport-hero .button.primary:hover { background:#8af9b8; } }
@media(prefers-reduced-motion:no-preference) { .sport-hero-copy,.athlete-feature { animation:brand-enter 600ms cubic-bezier(.2,.8,.2,1) both; }.athlete-feature { animation-delay:80ms; } }
@keyframes brand-enter { from { opacity:.4; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) { .sport-hero-grid { gap:28px; }.sport-hero h1 { font-size:76px; }.athlete-stage { height:450px; padding-inline:15px; }.perspective-grid { gap:44px; }.research-paths>a { padding:20px; }.research-paths h3 { font-size:20px; } }
@media(max-width:760px) { .sport-hero-grid { grid-template-columns:1fr; gap:35px; padding-block:35px; }.sport-hero h1 { font-size:clamp(62px,13vw,94px); }.hero-description { max-width:450px; }.athlete-stage { height:460px; }.athlete-photo img { object-fit:cover; }.sport-ribbon { padding:16px 20px; font-size:10px; gap:15px; }.sport-ribbon>span:nth-of-type(3),.sport-ribbon>i:last-child { display:none; }.paths-section { padding-block:45px; }.research-paths { grid-template-columns:1fr; }.research-paths>a+a { border-left:0; border-top:1px solid #ccd0c8; }.research-paths>a { padding:24px; }.path-graphic { max-width:340px; margin:16px auto 0; }.research-paths h3 { font-size:25px; }.perspective-grid { grid-template-columns:1fr; gap:36px; }.sport-perspective { padding-block:40px; }.tennis-frame img { height:430px; }.tennis-frame>span { font-size:56px; }.perspective-copy h2 { font-size:34px; }.field-grid { grid-template-columns:1fr; gap:28px; }.field-note-v5 { padding-block:45px; }.evidence-poster>p { font-size:46px!important; }.graphic-article-cover .evidence-poster { padding:24px; }.graphic-article-cover .evidence-poster>p { font-size:44px!important; }.graphic-article-cover .evidence-poster>p>span { margin-top:8px; }.hero-footnote { font-size:10px; }.athlete-feature figcaption,.tennis-feature figcaption { font-size:10px; } }
@media(max-width:380px) { .sport-hero h1 { font-size:62px; }.sport-hero .hero-actions { gap:16px; }.athlete-stage { height:410px; }.tennis-frame img { height:380px; }.sport-ribbon { font-size:9px; gap:10px; } }
@media(prefers-reduced-motion:reduce) { .sport-hero *, .research-paths * { animation:none!important; transition:none!important; } }
@media(max-width:760px) { .sport-hero .hero-actions { flex-direction:row; justify-content:flex-start; align-items:center; gap:18px; margin-top:22px; }.sport-hero .hero-actions .button { width:auto; padding:14px 17px; }.sport-hero .hero-actions .text-link { padding:10px 0; }.hero-footnote { margin-top:20px; }.sport-hero-grid { gap:25px; }.hero-subhead { font-size:20px; } }

/* Transparent banner layers. Decorative only; never intercept links or obscure athletes. */
.sport-hero { position:relative; isolation:isolate; }
.sport-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:url('/assets/playstat-play-overlay.svg') no-repeat 42% 48% / 1300px auto; opacity:.13; pointer-events:none; }
.sport-hero-grid { position:relative; }
.sport-hero-copy { position:relative; z-index:2; }
.athlete-stage { background:transparent; padding:30px 8px 42px 24px; }
.athlete-stage::before { inset:-55px -95px -30px 50px; background:url('/assets/playstat-ball-overlay.svg') no-repeat center / contain; clip-path:none; opacity:.42; z-index:-1; }
.athlete-stage::after { content:""; position:absolute; right:-60px; bottom:-12px; width:190px; height:190px; background:url('/assets/playstat-ball-overlay.svg') center/contain no-repeat; pointer-events:none; }
.athlete-photo { clip-path:polygon(0 9%,100% 0,100% 91%,0 100%); }
.athlete-index { left:-25px; right:auto; top:-25px; font-size:185px; color:transparent; -webkit-text-stroke:1px #64e67f; opacity:.55; }
.court-orbit { border-color:var(--green); width:380px; height:380px; bottom:20px; left:-45px; opacity:.28; }
.frame-label { left:0; bottom:22px; border-left:3px solid var(--green); }
.archive-tag { right:18px; bottom:7px; color:var(--green); z-index:2; background:var(--navy); padding:2px 5px; }
.athlete-feature figcaption { position:relative; z-index:2; }
.sport-ribbon { position:relative; background:var(--navy); }
.sport-perspective { position:relative; isolation:isolate; }
.sport-perspective::before { content:""; position:absolute; inset:0; z-index:-1; background:url('/assets/playstat-play-overlay.svg') no-repeat 0 40% / 1100px auto; opacity:.12; pointer-events:none; }
.tennis-frame { background:transparent; padding:0 12px 15px 0; }
.tennis-frame::after { inset:18px -8px -3px 18px; border-color:#64e67f70; }
.start-v5 { position:relative; isolation:isolate; overflow:hidden; background:var(--green); border:0; padding:42px 48px; margin-bottom:60px; }
.start-v5::before { content:""; position:absolute; z-index:-1; top:-50px; right:50px; width:600px; height:350px; background:url('/assets/playstat-court.svg') center/contain no-repeat; opacity:.15; transform:rotate(-18deg); pointer-events:none; }
.start-v5 .small-label { max-width:400px; }
.start-v5 .button { flex-shrink:0; position:relative; }
.graphic-article-cover .evidence-poster::before { border:0; background:url('/assets/playstat-ball-overlay.svg') center/contain no-repeat; opacity:.35; right:-130px; top:-95px; }
@media(max-width:760px) {
 .sport-hero::before { background-position:30% 27%; background-size:950px auto; opacity:.1; }
 .athlete-stage { padding:30px 4px 42px 12px; }
 .athlete-stage::before { inset:-20px -55px 0 0; }
 .athlete-stage::after { width:130px; height:130px; right:-35px; bottom:-4px; }
 .athlete-index { font-size:155px; left:-5px; top:-20px; }
 .court-orbit { width:300px; height:300px; left:-25px; }
 .archive-tag { font-size:8px; right:8px; }
 .start-v5 { padding:32px 24px; margin-bottom:36px; }
 .start-v5::before { width:390px; height:230px; right:-130px; top:50px; opacity:.12; }
 .graphic-article-cover .evidence-poster::before { width:310px; height:310px; right:-130px; top:-20px; opacity:.2; }
}