@font-face{font-family:Kurland;src:url('/assets/kurland.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}body{margin:0;background:#ede6cf url('/assets/ui/parchment-v1.webp');color:#153a31;font-family:Kurland,Georgia,serif}a{color:inherit}header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #9d7d3b;background:#f4ecd4;padding:16px max(20px,calc((100vw - 1400px)/2))}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:28px;letter-spacing:.08em}.brand img{width:48px;height:48px;object-fit:contain}.brand small{display:block;font-size:14px;letter-spacing:.03em;margin-top:5px}nav{display:flex;gap:22px}nav a{text-underline-offset:6px}main{max-width:1440px;margin:auto;padding:28px 24px}.intro{max-width:780px;margin:4px 0 24px}.eyebrow{text-transform:uppercase;font-size:13px;letter-spacing:.13em;color:#8c602b}h1{font-size:clamp(29px,4vw,46px);font-weight:400;margin:8px 0}h2,h3{font-weight:400}p{line-height:1.55}.races{display:flex;gap:14px;overflow-x:auto;padding:5px 2px 20px}.race-card{flex:0 0 270px;border:1px solid #a48649;background:#f8f1dc;padding:18px;text-align:left;box-shadow:inset 0 0 0 3px #ebe0bd}.race-card[aria-pressed=true]{background:#173f33;color:#ffedb7}.race-card strong,.race-card span{display:block;margin-bottom:8px}.race-card small{line-height:1.5}button,select{font:inherit;color:inherit;min-height:42px;border:1px solid #917b43;background:#f7efd7;padding:9px 15px;border-radius:4px;cursor:pointer}button:hover,a:hover{filter:brightness(1.07)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #217b90;outline-offset:4px}button:disabled{opacity:.6;cursor:default}.theatre-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 24px;background:#173b31;color:#f5e5b8;border:1px solid #947638}.theatre-heading h2{font-size:28px;margin:5px 0}.theatre-heading p{margin:5px 0}.theatre-heading .eyebrow{color:#dec185}#clock{font-size:24px;white-space:nowrap}.theatre-body{display:grid;grid-template-columns:minmax(0,1fr) 230px;background:#102d25;border:1px solid #947638}.picture{position:relative;min-width:0;aspect-ratio:16/9;background:#11271f}canvas{display:block;width:100%;height:100%;object-fit:contain}.picture-notice{position:absolute;left:15px;bottom:10px;max-width:90%;padding:12px;color:#ffe8b7;background:#153329e8;border:1px solid #c49c56}.theatre-body aside{color:#f4e3b7;padding:4px 16px;max-height:560px;overflow:auto}.theatre-body aside h3{border-bottom:1px solid #b09553;padding-bottom:10px}#order{padding:0;list-style:none}#order li{display:grid;grid-template-columns:25px 1fr;gap:3px 7px;margin:11px 0;font-size:14px}#order li small{grid-column:2;color:#d2cba9}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px;background:#e1d6b4;border:1px solid #a48649}.controls label{display:flex;align-items:center;gap:8px}.reduced{font-size:14px}.timeline{display:flex;align-items:center;gap:14px;padding:16px 0}.timeline input{flex:1;min-width:60px;accent-color:#285847}.timeline span{min-width:130px}.chapters{border-top:1px solid #a18a52;padding:0 0 20px}.chapters p{font-size:14px}.chapters button{margin:4px 8px 4px 0}.empty{padding:35px;border:1px solid #ab9054;background:#f6efd9;text-align:center}.empty a{display:inline-block;margin:12px}footer{padding:30px;text-align:center;font-size:13px;border-top:1px solid #b3a175}.picture:fullscreen{aspect-ratio:auto;width:100vw;height:100vh}.picture:fullscreen canvas{width:100%;height:100%;object-fit:contain}@media(max-width:760px){header{padding:14px}.brand{font-size:21px}.brand img{width:35px;height:35px}nav{gap:12px;font-size:14px}main{padding:18px 12px}.theatre-body{grid-template-columns:1fr}.theatre-body aside{max-height:240px}#order{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.theatre-heading{padding:14px}.theatre-heading h2{font-size:22px}.timeline{flex-wrap:wrap}.timeline input{flex-basis:50%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.archive-pages{display:flex;align-items:center;gap:12px;margin:0 0 24px;flex-wrap:wrap}.recording-details{padding:16px 20px;background:#f6eed7;border:1px solid #ab9054;margin:0 0 24px}.recording-details dl{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 16px}.recording-details dl div{min-width:130px}.recording-details dt{font-size:13px;color:#80632f}.recording-details dd{margin:5px 0 0}.recording-details input{display:block;width:100%;max-width:760px;font:inherit;background:#fffaf0;border:1px solid #917b43;padding:12px;margin-top:8px}.recording-details p{font-size:14px;overflow-wrap:anywhere}

/* Fullscreen owns the complete viewer; the road gets all remaining height. */
.race-card small{display:block;margin-top:8px}
.gallery-error{padding:16px 20px;border:1px solid #ab9054;background:#f6efd9;margin-bottom:16px}
#theatre[data-state=waiting] canvas{visibility:hidden}
#theatre[data-state=unavailable] .theatre-body{grid-template-columns:minmax(0,1fr)}
#theatre[data-state=unavailable] .picture{aspect-ratio:auto;min-height:140px}
#theatre[data-state=unavailable] .picture-notice{position:static;margin:20px;max-width:none}
#theatre[data-state=unavailable] canvas,#theatre[data-state=unavailable] aside,#theatre[data-state=unavailable] .timeline,#theatre[data-state=unavailable] .recording-details,#theatre[data-state=unavailable] .chapters,#theatre[data-state=unavailable] #play,#theatre[data-state=unavailable] #live,#theatre[data-state=unavailable] .controls label{display:none}
#theatre:fullscreen{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:#122c24;color:#f5e5b8;width:100%;height:100%;padding:8px;overflow:auto}
#theatre:fullscreen .theatre-heading{padding:6px 14px}
#theatre:fullscreen .theatre-heading h2{font-size:20px;margin:0}
#theatre:fullscreen .theatre-body{min-height:0}
#theatre:fullscreen .picture{aspect-ratio:auto;min-height:0}
#theatre:fullscreen aside{max-height:none;min-height:0}
#theatre:fullscreen .controls{padding:6px 10px;color:#153a31}
#theatre:fullscreen .timeline{padding:6px 10px;margin:0}
#theatre:fullscreen .recording-details,#theatre:fullscreen .chapters{display:none}
@media(max-width:760px){#theatre:fullscreen .theatre-body{grid-template-columns:minmax(0,1fr) 135px}#theatre:fullscreen aside{padding:0 8px}#theatre:fullscreen #order{display:block}#theatre:fullscreen .theatre-heading #road{display:none}#theatre:fullscreen .controls{gap:5px}#theatre:fullscreen .timeline{gap:6px;font-size:13px}}
@media(max-height:500px){#theatre:fullscreen .theatre-heading p,#theatre:fullscreen .theatre-heading #road{display:none}#theatre:fullscreen .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#theatre:fullscreen .controls button,#theatre:fullscreen .controls select{min-height:42px;padding:4px 8px}#theatre:fullscreen .controls label{grid-column:1/-1}#theatre:fullscreen .controls .reduced{display:none}#theatre:fullscreen .controls button{font-size:14px}#theatre:fullscreen .controls select{font-size:16px}#theatre:fullscreen[data-state=unavailable] .controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Long practice/racer names remain inside the phone viewer. */
.controls label{min-width:0;max-width:100%;flex:1 1 220px}
.controls select{min-width:0;max-width:100%;flex:1;width:100%;text-overflow:ellipsis}
.theatre-heading>div,.theatre-body aside,#order li>span{min-width:0;overflow-wrap:anywhere}
#clock{min-width:0;flex-shrink:0}
@media(max-width:480px){
 .controls{gap:8px;padding:10px}.controls label{flex-basis:100%}
 .theatre-heading{padding:12px;gap:8px}.theatre-heading h2{font-size:20px}
 #theatre:fullscreen{grid-template-rows:auto minmax(0,1fr) auto auto}
 #theatre:fullscreen .theatre-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
 #theatre:fullscreen aside{max-height:90px;overflow:auto}
 #theatre:fullscreen #order{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
 #theatre:fullscreen .controls label{flex:1 1 160px}
 #theatre:fullscreen .timeline{flex-wrap:wrap;padding:6px 10px}
 #theatre:fullscreen .timeline input{min-width:0}.timeline span{min-width:0}
}
@media(max-width:480px) and (max-height:500px){#theatre:fullscreen aside{max-height:64px}#theatre:fullscreen aside h3{display:none}#theatre:fullscreen #order{margin:4px 0}#theatre:fullscreen #order li{margin:4px 0}#theatre:fullscreen .timeline{font-size:14px}#theatre:fullscreen .theatre-heading{padding:4px 10px}}
