@font-face{font-family:Manrope;src:url('/assets/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:light;--paper:#f3f4ee;--ink:#173e35;--muted:#54665c;--accent:#d7eea6;--line:#ccd4c8}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif;scrollbar-color:var(--muted) var(--paper)}
body{margin:0}
::selection{color:var(--ink);background:var(--accent)}
.page{width:min(1440px,100%);min-height:100svh;margin:auto;padding:38px 64px 25px;display:flex;flex-direction:column}
header{display:flex;align-items:center;min-height:40px}
.wordmark{display:inline-flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:25px;font-weight:700;letter-spacing:-.04em}
.wordmark:hover{color:#426e45}
.wordmark:focus-visible{outline:2px solid var(--ink);outline-offset:8px;border-radius:3px}
main{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:55px 0 64px}
h1{font-size:clamp(46px,5.8vw,84px);line-height:1.07;font-weight:700;letter-spacing:-.04em;margin:0;text-wrap:balance}
h1 span{display:inline-block;color:#5d7055;margin-top:15px;white-space:nowrap}
p{font-size:17px;line-height:1.8;color:var(--muted);margin:30px 0 0}
.graphic{width:100%;max-width:540px;justify-self:end}
.court{display:block;width:100%;height:auto}
.ball{transform-origin:372px 174px;animation:arrive 1.8s cubic-bezier(.16,1,.3,1) both}
.flight{animation:trace 1.8s cubic-bezier(.16,1,.3,1) both}
footer{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted)}
@keyframes arrive{from{transform:translate(-58px,110px) rotate(-45deg)}to{transform:translate(0,0) rotate(0)}}
@keyframes trace{from{clip-path:inset(75% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(min-width:1500px){.page{max-height:1100px}main{padding-top:75px;padding-bottom:85px}}
@media(max-width:1000px){.page{padding:30px 36px 24px}main{gap:30px}h1{font-size:clamp(42px,5.8vw,58px)}p{font-size:16px}}
@media(max-width:700px){.page{padding:25px 24px 22px}.wordmark{font-size:23px}.wordmark svg{width:28px;height:28px}main{grid-template-columns:1fr;align-content:center;gap:36px;padding:44px 0 36px}h1{font-size:clamp(40px,9.5vw,64px);line-height:1.08}h1 span{margin-top:10px}p{margin-top:22px;font-size:15px;line-height:1.7}.graphic{justify-self:stretch;max-width:none;aspect-ratio:1.45;overflow:hidden;border-radius:20px}.court{height:100%;width:100%}footer{font-size:12px;padding-top:19px}}
@media(prefers-reduced-motion:reduce){.ball,.flight{animation:none}}