/* Colours and fonts match cheltenhamdata.co.uk (light and dark). */
:root{
  --bg:#e7dfd1;--bg-2:#eee7db;--card:#f9f4ec;--text:#221c15;--body:#443a2d;--muted:#5c5344;--line:#cfc3ad;
  --accent:#2c6244;--accent-soft:rgba(44,98,68,.1);--on-accent:#f6fbf8;--signal:#a8620f;
  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1240px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#15110d;--bg-2:#1a1611;--card:#221c15;--text:#f1e8db;--body:#c3b5a3;--muted:#9a8b78;--line:#332a20;
    --accent:#5fb182;--accent-soft:rgba(95,177,130,.13);--on-accent:#0e1a13;--signal:#dda04a}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.hdr{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px max(16px,calc((100vw - var(--maxw))/2));background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.wm{font:600 21px var(--disp);letter-spacing:-.02em;text-decoration:none;line-height:1.15}
.wm small{display:block;font:400 12px var(--mono);color:var(--muted);letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.nav>a:not(.btn){text-decoration:none;color:var(--body)}
.lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lang button{font:400 13px var(--mono);background:none;border:0;color:var(--muted);padding:7px 10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--text);color:var(--bg)}

.btn,.btn2{display:inline-block;text-decoration:none;font-weight:600;font-size:15px;padding:12px 20px;border-radius:10px;transition:transform .15s}
.btn{background:var(--accent);color:var(--on-accent)}
.btn2{border:1px solid var(--line);color:var(--text)}
.btn:hover,.btn2:hover{transform:translateY(-1px)}

.eye{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.eye i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;box-shadow:0 0 0 4px var(--accent-soft)}

.hero{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:24px;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:24px 16px 8px;min-height:calc(100vh - 80px);min-height:calc(100svh - 80px)}
h1{font:600 clamp(42px,5.3vw,66px)/1 var(--disp);letter-spacing:-.043em;margin:16px 0 18px}
.acc{color:var(--accent)}
.lede{color:var(--body);font-size:18px;margin:0;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.board{position:relative;height:min(640px,72vh);min-height:380px}
.board canvas{display:block;width:100%;height:100%;outline:none}
.board-hint{position:absolute;right:12px;bottom:4px;margin:0;font:400 12px var(--mono);color:var(--muted);letter-spacing:.06em}
.no-webgl .board{display:none}
.no-webgl .hero{grid-template-columns:1fr;min-height:0;padding-top:72px}

.cases{max-width:var(--maxw);margin:0 auto;padding:72px 16px 88px}
.cases h2{font:600 clamp(30px,3.6vw,42px)/1.05 var(--disp);letter-spacing:-.035em;margin:12px 0 28px}
.case-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.case{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.case.pending{background:transparent;border-style:dashed}
.case .no{font:400 12px var(--mono);letter-spacing:.12em;color:var(--accent)}
.case h3{font:600 24px/1.15 var(--disp);letter-spacing:-.025em;margin:0}
.case p{margin:0;color:var(--body);flex:1}
.case .st{font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.case a.st{align-self:flex-start;color:var(--on-accent);background:var(--accent);padding:7px 12px;border-radius:8px;text-decoration:none}

.ftr{border-top:1px solid var(--line);background:var(--bg-2)}
.ftr-in{max-width:var(--maxw);margin:0 auto;padding:44px 16px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.ftr-wm{font:600 22px var(--disp);letter-spacing:-.02em;margin:0 0 6px}
.ftr-by{margin:0;color:var(--body)}
.ftr a{color:var(--text);text-decoration-color:var(--line);text-underline-offset:3px}
.ftr a:hover{text-decoration-color:var(--accent)}
.ftr-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:34px}
.ftr-links li{display:flex;flex-direction:column;gap:6px}
.ftr-links .eye{color:var(--muted)}
.ftr-copy{max-width:var(--maxw);margin:0 auto;padding:0 16px 28px;font:400 12px var(--mono);color:var(--muted)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:40px}
  .board{height:72vw;min-height:280px;margin:0 -16px}
  .nav>a:not(.btn){display:none}
}
@media (max-width:480px){
  .hdr .btn{display:none}
}