:root { --ink:#182422; --muted:#6c7872; --paper:#f5f5ef; --panel:#fff; --line:#dfe4dc; --green:#0d6b58; --coral:#ed7156; --navy:#173a48; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans", sans-serif; } h1,h2,p { margin:0; } h1,h2,strong { font-family:"Space Grotesk", sans-serif; } h1 { font-size:clamp(3.2rem, 7vw, 6.8rem); line-height:.91; letter-spacing:-.04em; } h1 em { color:var(--green); font-style:normal; } h2 { font-size:clamp(1.4rem,2.2vw,2.1rem); line-height:1.05; letter-spacing:-.03em; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 5vw; border-bottom:1px solid var(--line); background:rgba(245,245,239,.92); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); } .brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:12px; letter-spacing:.08em; } .brand strong,.brand small { display:block; } .brand small { color:var(--muted); font-size:9px; margin-top:2px; } .brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--green); color:white; font:700 12px "Space Grotesk"; } .nav-tabs { display:flex; gap:5px; align-self:stretch; min-width:0; overflow-x:auto; } .nav-link { flex:0 0 auto; border:0; border-bottom:2px solid transparent; padding:0 12px; background:none; color:var(--muted); font:600 12px "DM Sans"; cursor:pointer; white-space:nowrap; } .nav-link.active { color:var(--ink); border-bottom-color:var(--coral); } .data-status { color:var(--muted); font-size:10px; letter-spacing:.1em; white-space:nowrap; } .data-status i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#63ad4e; }
main { max-width:1440px; margin:auto; padding:0 5vw 90px; } .view { display:none; padding-top:78px; animation:rise .55s ease both; } .active-view { display:block; } @keyframes rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } .hero-grid { min-height:440px; display:grid; grid-template-columns:1fr 280px; align-items:end; padding-bottom:70px; border-bottom:1px solid var(--line); } .eyebrow { color:var(--coral); font:700 10px "DM Sans"; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; } .lede { max-width:410px; margin-top:27px; color:var(--muted); line-height:1.55; } .text-button { margin-top:30px; border:0; border-bottom:1px solid var(--ink); padding:0 0 7px; background:none; color:var(--ink); font-weight:700; cursor:pointer; } .text-button span { color:var(--coral); font-size:16px; margin-left:8px; } .hero-stat { align-self:end; border-left:1px solid var(--line); padding-left:32px; } .hero-stat span { display:block; color:var(--green); font:700 clamp(3.5rem,6vw,6rem) "Space Grotesk"; letter-spacing:-.07em; } .hero-stat small { color:var(--muted); line-height:1.4; }
.section-heading { display:flex; justify-content:space-between; align-items:end; padding:68px 0 26px; gap:30px; } .section-note { max-width:280px; color:var(--muted); font-size:13px; line-height:1.45; } .chart-panel,.table-panel { background:var(--panel); border:1px solid var(--line); } .chart-title { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:20px 22px 12px; } .chart-title strong { font-size:14px; } .chart-title span,.table-heading span { color:var(--muted); font-size:11px; } .chart-wrap { height:380px; padding:4px 20px 18px; } .chart-wrap.short { height:285px; } .insight-row { display:grid; grid-template-columns:repeat(3,1fr); margin-top:26px; border-top:1px solid var(--line); } .insight-row>div { display:flex; align-items:center; gap:16px; padding:22px 0; border-right:1px solid var(--line); } .insight-row>div:not(:first-child) { padding-left:24px; } .insight-row>div:last-child { border:0; } .accent-number { color:var(--coral); font:600 30px "Space Grotesk"; } .insight-row span:last-child { color:var(--muted); font-size:11px; line-height:1.35; }
.metric-definitions { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 22px 8px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .metric-definitions div { display:flex; gap:10px; align-items:baseline; } .metric-definitions strong { color:var(--coral); font-size:12px; } .metric-definitions span { color:var(--muted); font-size:11px; line-height:1.4; } .page-intro { max-width:650px; margin-bottom:40px; } .page-intro p:last-child,.story-header>p:last-child { margin-top:18px; color:var(--muted); line-height:1.5; } .filters { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px; padding:18px; background:var(--navy); color:#fff; } label { display:grid; gap:8px; color:#c8d6d1; font-size:10px; letter-spacing:.08em; text-transform:uppercase; } select { appearance:none; border:1px solid rgba(255,255,255,.2); padding:13px 34px 13px 12px; border-radius:0; background:#24515f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; color:white; font:600 12px "DM Sans"; } .filters:not(.comparison-filters) { grid-template-columns:1.4fr 1.1fr 1.1fr .85fr 1.2fr; } .filters input { width:100%; min-width:0; min-height:43px; border:1px solid rgba(255,255,255,.2); padding:10px 12px; background:#24515f; color:white; font:600 12px "DM Sans"; } .filters select:disabled { opacity:.62; } .filter-note { grid-column:1/-1; color:#d1ddd8; font-size:11px; line-height:1.4; } .comparison-filters { grid-template-columns:repeat(4,minmax(0,1fr)); } .explorer-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; } .comparison-panel { margin-top:18px; } .table-panel { margin-top:18px; } .table-heading { display:flex; justify-content:space-between; align-items:end; padding:24px 22px 16px; } .table-heading .eyebrow { margin-bottom:8px; } .table-heading h2 { font-size:22px; } .table-scroll { overflow:auto; } table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; } th { color:var(--muted); background:#fafbf7; font-size:10px; letter-spacing:.08em; text-transform:uppercase; } th,td { padding:13px 18px; border-top:1px solid var(--line); white-space:nowrap; } td:first-child { font-weight:700; } td:not(:first-child) { color:var(--muted); }
.data-profile { display:grid; grid-template-columns:1.1fr 1fr; gap:45px; margin-top:50px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .data-profile h2 { margin-bottom:12px; } .data-profile p:last-child { max-width:570px; color:var(--muted); font-size:13px; line-height:1.6; } .profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-content:center; } .profile-stats div { border-left:2px solid var(--lime, #c8ee65); padding-left:12px; } .profile-stats strong,.profile-stats span { display:block; } .profile-stats strong { color:var(--green); font-size:25px; } .profile-stats span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.story-header { max-width:760px; padding-bottom:55px; } .story-header h1 { font-size:clamp(3rem,7vw,7rem); } .story-layout { display:grid; grid-template-columns:minmax(260px,.7fr) 1.3fr; gap:60px; align-items:start; } .story-copy { display:grid; gap:34px; } .story-block { border-top:1px solid var(--line); padding-top:15px; } .story-block span { color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.14em; } .story-block p { margin-top:12px; color:#53605b; font-size:14px; line-height:1.65; } .story-chart { position:sticky; top:110px; } .legend { display:flex; gap:20px; padding:0 22px 20px; color:var(--muted); font-size:11px; } .legend-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; } .power { background:var(--coral); } .small-ball { background:var(--green); } footer { display:flex; justify-content:space-between; gap:20px; padding:22px 5vw; border-top:1px solid var(--line); color:var(--muted); font-size:9px; letter-spacing:.1em; }
.story-header { max-width:760px; padding-bottom:55px; } .story-header h1 { font-size:clamp(3rem,7vw,7rem); } .story-layout { display:grid; grid-template-columns:minmax(260px,.7fr) 1.3fr; gap:60px; align-items:start; } .story-copy { display:grid; gap:34px; } .story-block { border-top:1px solid var(--line); padding-top:15px; } .story-block span { color:var(--coral); font-size:10px; font-weight:700; letter-spacing:.14em; } .story-block p { margin-top:12px; color:#53605b; font-size:14px; line-height:1.65; } .story-chart { position:sticky; top:110px; } .legend { display:flex; gap:20px; padding:0 22px 20px; color:var(--muted); font-size:11px; } .legend-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; } .power { background:var(--coral); } .small-ball { background:var(--green); } footer { display:flex; justify-content:space-between; gap:20px; padding:22px 5vw; border-top:1px solid var(--line); color:var(--muted); font-size:9px; letter-spacing:.1em; }

html { background:var(--paper); }
body { position:relative; isolation:isolate; background:transparent; }
body::before { content:""; position:fixed; z-index:-1; inset:-3%; pointer-events:none; background-image:linear-gradient(rgba(245,245,239,.84),rgba(245,245,239,.84)),url("assets/softball-swing.jpg"); background-position:48% 45%; background-size:cover; animation:softball-drift 38s ease-in-out infinite alternate; }
@keyframes softball-drift { from { transform:translate3d(-1%,0,0) scale(1.03); background-position:48% 45%; } to { transform:translate3d(1%,0,0) scale(1.07); background-position:54% 55%; } }
@media (prefers-reduced-motion:reduce) { body::before { animation:none; } }
.story-images { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-bottom:55px; } .story-images figure { margin:0; } .story-images img { display:block; width:100%; height:220px; object-fit:cover; filter:saturate(.78); } .story-images figure:first-child img { height:300px; } .story-images figcaption { padding-top:9px; color:var(--muted); font-size:10px; }
.chart-annotations { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 22px 20px; } .chart-annotations p,.story-notes p { color:var(--muted); font-size:11px; line-height:1.5; } .chart-annotations strong,.story-notes strong { color:var(--green); } .story-notes { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:25px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:55px; padding:30px 0; border-top:1px solid var(--line); } .about-section h2 { margin-bottom:22px; font-size:24px; } .about-details { margin:0; } .about-details div { display:grid; grid-template-columns:145px 1fr; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:13px; } .about-details dt { color:var(--muted); } .about-details dd { margin:0; overflow-wrap:anywhere; } .about-section a { color:var(--green); text-underline-offset:3px; } .data-source>p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.7; } .source-links { display:flex; flex-wrap:wrap; gap:22px; margin-top:20px; }
@media (max-width:800px) { .site-header { height:auto; min-height:72px; flex-wrap:wrap; padding:14px 5vw 0; } .nav-tabs { order:3; width:100%; height:46px; overflow:auto; } .nav-link { padding:0 10px; white-space:nowrap; } .data-status { margin-left:auto; } .view { padding-top:45px; } .hero-grid { grid-template-columns:1fr; gap:35px; padding-bottom:45px; } .hero-stat { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; } .section-heading,.story-layout { display:block; } .section-note { margin-top:15px; } .explorer-grid,.filters,.data-profile,.story-images,.about-grid,.story-notes { grid-template-columns:1fr; } .filter-note { grid-column:auto; } .story-images img,.story-images figure:first-child img { height:220px; } .story-chart { position:static; margin-top:40px; } .chart-annotations { grid-template-columns:1fr; } .about-details div { grid-template-columns:110px 1fr; } .insight-row { grid-template-columns:1fr; } .insight-row>div,.insight-row>div:not(:first-child) { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); } footer { display:block; line-height:2; } }