/* Mirrors the Charioteer app theme (src/ui/theme.tsx, src/ui/ui.tsx): dark palette, Oswald + Barlow, radius 2/4. */
@font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/oswald-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/barlow-400-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-600.woff2) format("woff2")}
:root{
  --black:#000;--bg:#0C0C0C;--sunken:#171717;--surface:#1A1A1A;--ink:#F3F3EE;--muted:#B3B3AC;
  --line:#3A3A3A;--emphasis-soft:#2A2A2A;--r-sm:2px;--r-md:4px;
  --display:"Oswald","Arial Narrow",Impact,sans-serif;--body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark
}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--ink);font:400 1.0625rem/1.47 var(--body)}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.25rem}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:.2em}
a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--black);padding:.5rem 1rem;z-index:9;border-radius:var(--r-md)}
strong,b,th{font-weight:600}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:.0125em}
h1{font-size:2.125rem;line-height:1.18;margin:.5rem 0 1rem;text-transform:uppercase}
.hero h1{font-size:clamp(2.5rem,8vw,4rem);line-height:1.12;letter-spacing:-.03em}
h2{font-size:1.5rem;line-height:1.25;margin-top:2.5rem;text-transform:uppercase}
h3{font-size:1.15rem;line-height:1.3;margin-top:1.5rem}
p,li{max-width:44rem}
.lead{font-size:1.2rem;color:var(--muted)}
.meta{color:var(--muted);font-size:.9375rem}
header.site{background:var(--bg);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.brand{font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
nav a{font-weight:600;letter-spacing:.025em;text-decoration:none}
nav a:hover{text-decoration:underline}
main{padding-top:2rem;padding-bottom:3rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:.5rem 0 0}.card p{margin:0}
.shot{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunken);margin:1rem 0}
.card .shot{margin:0}
.placeholder{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:1rem}
.notice{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:var(--r-sm);padding:.25rem 14px;margin:1.5rem 0}
.notice h2{margin-top:.75rem}
mark.tc{background:var(--ink);color:var(--black);padding:0 .25em;font-weight:600;border-radius:var(--r-sm)}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:.5rem .625rem;text-align:left;vertical-align:top}
th{background:var(--emphasis-soft)}
td{background:var(--bg)}
footer.site{background:var(--bg);border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem;padding:1.5rem 0}
footer.site strong{color:var(--ink)}
footer.site a{color:var(--muted)}footer.site a:hover{color:var(--ink)}
@media (max-width:30rem){h1{font-size:1.75rem}h2{font-size:1.3rem}}
@media print{body{background:#fff;color:#000}}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand img{display:block;height:34px;width:auto}
@media (max-width:30rem){.brand img{height:26px}}