/* On the court (moved from About, Yashika 14 Oct 9:01am: below the work, compact, little white space): taped polaroid, a bouncing ball sketch (inline script) and three drawn-on badges. */
#court{padding-top:0}
.court{margin-top:14px;background:var(--card);padding:clamp(18px,2.6vw,36px) clamp(18px,3vw,44px);box-shadow:0 18px 40px -28px #514735;display:grid;grid-template-columns:minmax(170px,.5fr) minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"photo copy scene" "photo copy badges";gap:12px clamp(22px,3vw,48px);align-items:start}
.court-photo{grid-area:photo;position:relative;margin:10px 0 0;max-width:250px;transform:rotate(-2.4deg)}
.court-photo.polaroid{padding-bottom:32px}
.court-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.court-photo figcaption{position:absolute;inset:auto 0 2px;text-align:center;font-size:22px}
.court-copy{grid-area:copy;min-width:0}
main .court-lead{margin:0;font-size:clamp(22px,1.9vw,28px);color:var(--accent)}
.court-copy h2{font:400 clamp(38px,3.8vw,58px)/1 var(--serif);margin:4px 0 12px}
.court-copy p:not(.hand){margin:0 0 8px;max-width:46ch;color:var(--ink-2)}
.court-close{text-wrap:balance;margin:12px 0 0;font-size:clamp(22px,1.8vw,27px);line-height:1.15;max-width:32ch}
.court-scene{grid-area:scene;display:block;width:100%;max-width:560px;height:auto;overflow:visible}
.court-badges{grid-area:badges;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px}
.court-badges li{display:grid;justify-items:center;align-content:start;gap:0;text-align:center;min-width:0}
.court-badges svg{width:clamp(64px,5.6vw,84px);height:auto;overflow:visible}
.court-badges .hand{font-size:clamp(19px,1.5vw,22px);line-height:1}
.court.armed .dr{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) var(--d)}
.court.armed .disc{opacity:0;transition:opacity .6s ease var(--d)}
.court.armed .fill{fill-opacity:0;transition:stroke-dashoffset 1.2s var(--ease) var(--d),fill-opacity .5s ease calc(var(--d) + .7s)}
.court.drawn .dr{stroke-dashoffset:0}.court.drawn .disc{opacity:1}.court.drawn .fill{fill-opacity:1}
.court-badges .mv,.court-badges .arm{transform-box:fill-box;transform-origin:50% 100%}
.court.is-on li:nth-child(1) .mv{animation:court-lob 2.6s ease-in-out 1.6s infinite}
.court.is-on li:nth-child(2) .mv{animation:court-throw 2.2s cubic-bezier(.5,0,.3,1) 1.8s infinite}
.court.is-on li:nth-child(3) .mv{animation:court-hop 1.6s ease-in-out 2s infinite}
.court.is-on li:nth-child(3) .arm{animation:court-arms 1.6s ease-in-out 2s infinite}
@keyframes court-lob{0%,100%{transform:none}25%,75%{transform:translate(-13px,-7px)}50%{transform:translate(-26px,3px)}}
@keyframes court-throw{0%,15%,100%{transform:none}55%{transform:translateX(18px)}}
@keyframes court-hop{0%,40%,100%{transform:none}20%{transform:translateY(-5px)}}
@keyframes court-arms{0%,40%,100%{transform:none}20%{transform:scaleY(.6)}}
@media(max-width:1000px){.court{grid-template-columns:minmax(150px,.6fr) minmax(0,1fr);grid-template-areas:"photo copy" "photo badges" "scene scene"}.court-scene{max-width:none}}
/* phones: copy, then a small photo beside the badges (stacked), then the scene full width */
@media(max-width:600px){.court{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"copy copy" "photo badges" "scene scene";gap:12px 18px;padding:18px 18px 14px}.court-photo{margin:12px 0 0 2px;max-width:112px}.court-photo.polaroid{padding:6px 6px 26px}.court-photo .tape{width:60px;height:18px;top:-9px}.court-photo figcaption{font-size:18px}.court-copy h2{margin-bottom:10px}.court-close{margin-top:8px}.court-badges{grid-template-columns:1fr;gap:4px;align-self:center}.court-badges li{grid-template-columns:52px minmax(0,1fr);justify-items:start;align-items:center;text-align:left;gap:10px}.court-badges svg{width:52px}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.court *{animation:none!important;transition:none!important}.court .dr{stroke-dashoffset:0!important}.court .disc{opacity:1!important}.court .fill{fill-opacity:1!important}}