/* Corner Pin Standings - public website (cps-site). Prefix cs-.
   Phone first at 360px; desktop grows from it (docs/DESIGN_RULES.md).
   House palette: Mission Control purple and red on the results site dark.
   Textures are CSS and SVG only; nothing is loaded from another site. */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/site/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/site/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/site/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/site/poppins-800.woff2') format('woff2'); }

:root {
  --cs-bg: #0b0912;
  --cs-bg-2: #120d1f;
  --cs-panel: rgba(255, 255, 255, 0.045);
  --cs-panel-2: rgba(255, 255, 255, 0.08);
  --cs-line: rgba(255, 255, 255, 0.11);
  --cs-text: #f4f3f8;
  --cs-muted: #a9a6b8;
  --cs-purple: #6d28d9;
  --cs-purple-2: #8b5cf6;
  --cs-red: #dc2626;
  --cs-red-2: #f87171;
  --cs-gold: #f6c026;
  --cs-green: #22c55e;
  --cs-wood-1: #3b2414;
  --cs-wood-2: #5a3820;
  --cs-radius: 12px;
  --cs-radius-sm: 8px;
  --cs-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --cs-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --cs-pad: 10px;
  --cs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.cs-body {
  hyphens: manual;
  margin: 0; min-height: 100vh; background: var(--cs-bg); color: var(--cs-text);
  font-family: var(--cs-body); font-size: 15px; line-height: 1.5; overflow-x: hidden;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(109, 40, 217, 0.28), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(220, 38, 38, 0.12), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px);
  background-size: auto, auto, 18px 18px;
  background-attachment: fixed, fixed, scroll;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cs-purple-2); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cs-gold); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; overflow-wrap: break-word; }
p { margin: 0 0 10px; overflow-wrap: break-word; }

/* Film grain over everything, very faint */
.cs-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cs-skip { position: absolute; left: -999px; top: 0; background: var(--cs-gold); color: #000; padding: 8px 12px; z-index: 100; }
.cs-skip:focus { left: 8px; }
.cs-notice { background: var(--cs-gold); color: #141018; text-align: center; font-weight: 600; font-size: 0.85rem; padding: 6px var(--cs-pad); }

/* ---- Header ---- */
.cs-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 6px;
  padding: 6px var(--cs-pad); min-height: 54px;
  background: rgba(11, 9, 18, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cs-line);
}
.cs-brand { flex: 0 0 auto; display: flex; align-items: center; }
.cs-brand img { width: 88px; height: auto; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px rgba(139, 92, 246, 0.45)); }
.cs-quick { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 4px; min-width: 0; }
.cs-quick-link {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 10px;
  border-radius: 999px; color: var(--cs-text); text-decoration: none; font-size: 0.82rem; font-weight: 600;
  border: 1px solid transparent;
}
.cs-quick-link:hover { border-color: var(--cs-line); background: var(--cs-panel); }
.cs-quick-link.is-on { background: var(--cs-purple); }
.cs-cta { background: var(--cs-red); }
.cs-wide-only { display: none; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-red); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); animation: cs-pulse 1.6s infinite; display: inline-block; flex: 0 0 8px; }
.cs-quick-link .cs-dot { background: var(--cs-red-2); }
/* Streaming menu item: plain when nothing is on air; a pulsing red button
   reading Live now (Streaming - Live now on wide screens) while a stream is
   actually publishing. */
.cs-wide-text { display: none; }
.cs-stream-link { white-space: nowrap; }
.cs-stream-link.is-live { background: var(--cs-red); color: #fff; animation: cs-live-glow 1.6s infinite; }
.cs-stream-link.is-live .cs-dot { background: #fff; }
.cs-stream-link.is-live.is-on { background: var(--cs-red); box-shadow: inset 0 0 0 2px var(--cs-purple); }

.cs-menu { position: relative; flex: 0 0 auto; }
.cs-menu > summary { list-style: none; }
.cs-menu > summary::-webkit-details-marker { display: none; }
.cs-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--cs-line); cursor: pointer; background: var(--cs-panel); }
.cs-burger, .cs-burger::before, .cs-burger::after { display: block; width: 18px; height: 2px; background: var(--cs-text); border-radius: 2px; position: relative; transition: transform 0.2s var(--cs-ease); }
.cs-burger::before, .cs-burger::after { content: ''; position: absolute; left: 0; }
.cs-burger::before { top: -6px; }
.cs-burger::after { top: 6px; }
.cs-menu[open] .cs-burger { background: transparent; }
.cs-menu[open] .cs-burger::before { transform: translateY(6px) rotate(45deg); }
.cs-menu[open] .cs-burger::after { transform: translateY(-6px) rotate(-45deg); }
.cs-menu-grid {
  position: absolute; right: 0; top: 48px; width: min(92vw, 340px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px; border-radius: var(--cs-radius); background: var(--cs-bg-2); border: 1px solid var(--cs-line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: cs-drop 0.18s var(--cs-ease);
}
.cs-menu-grid a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: var(--cs-radius-sm); background: var(--cs-panel); color: var(--cs-text); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
.cs-menu-grid a:hover { background: var(--cs-purple); }

/* ---- Sections and type ---- */
.cs-main { display: block; }
.cs-section { padding: 10px var(--cs-pad); max-width: 1180px; margin: 0 auto; }
.cs-pagehead { padding-top: 16px; }
.cs-kicker { margin: 0 0 2px; color: var(--cs-gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.cs-h1 { font-family: var(--cs-display); font-weight: 400; font-size: clamp(34px, 11vw, 76px); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; }
.cs-h1-article { font-size: clamp(28px, 8vw, 56px); }
.cs-h2 { font-family: var(--cs-display); font-weight: 400; font-size: clamp(20px, 6vw, 30px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.cs-section-head .cs-h2::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--cs-purple-2), var(--cs-red)); }
.cs-h3 { font-family: var(--cs-display); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; }
.cs-display { font-family: var(--cs-display); font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cs-muted { color: var(--cs-muted); font-size: 0.82rem; overflow-wrap: break-word; }
.cs-lede { font-size: 1.05rem; color: var(--cs-muted); margin-top: 8px; }
.cs-empty { color: var(--cs-muted); padding: 12px 0; }
.cs-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cs-more { font-size: 0.82rem; font-weight: 600; white-space: nowrap; }

/* ---- Buttons, chips, pills, badges ---- */
.cs-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--cs-line); background: var(--cs-panel); color: var(--cs-text); text-decoration: none; font: 600 0.9rem var(--cs-body); cursor: pointer;
  transition: transform 0.15s var(--cs-ease), background 0.15s var(--cs-ease), border-color 0.15s var(--cs-ease);
}
.cs-btn:hover { transform: translateY(-1px); border-color: var(--cs-purple-2); }
.cs-btn-primary { background: linear-gradient(135deg, var(--cs-red), #b91c1c); border-color: transparent; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--cs-line); background: var(--cs-panel); color: var(--cs-text); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.cs-chip.is-on { background: var(--cs-purple); border-color: var(--cs-purple); }
.cs-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--cs-line); color: var(--cs-text); text-decoration: none; font-size: 0.78rem; font-weight: 600; background: var(--cs-panel); }
.cs-pill-icon { gap: 6px; }
.cs-pill-icon img { width: 18px; height: 18px; flex: none; }
.cs-pill-hot { background: var(--cs-red); border-color: var(--cs-red); }
.cs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--cs-panel-2); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-badge-live { background: rgba(220, 38, 38, 0.18); color: #fecaca; }

/* ---- Hero: lane boards, light sweep, pins ---- */
.cs-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--cs-line); }
.cs-hero-bg { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 78%, transparent 100%); }
.cs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.cs-lanes {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 9, 18, 0.15) 0%, rgba(11, 9, 18, 0.65) 60%, var(--cs-bg) 100%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0, 0, 0, 0.35) 22px 23px),
    repeating-linear-gradient(90deg, var(--cs-wood-1) 0 7px, var(--cs-wood-2) 7px 9px, #4a2c18 9px 23px),
    linear-gradient(180deg, #2a1a0f, #160e08);
  transform: perspective(520px) rotateX(48deg) scale(1.9) translateY(-18%);
  transform-origin: 50% 100%;
  opacity: 0.55;
}
.cs-sweep {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.10) 50%, transparent 60%);
  animation: cs-sweep 7s var(--cs-ease) infinite;
}
/* A rack of ten pins seen from the foul line: the 1 pin at the front, 2 and
   3 behind it, then 4 5 6, then 7 8 9 10 across the back, left to right.
   Every six seconds a strike attempt takes out eight pins and leaves the 7
   and 10 standing and wobbling: the corner pin standings. Markup order is
   back row first (7 8 9 10), then 4 5 6, then 2 3, then the 1. */
.cs-pins { position: absolute; right: 18px; top: 38px; width: 92px; height: 86px; pointer-events: none; }
.cs-pins img { position: absolute; width: 16px; height: 48px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); transform-origin: 50% 100%; animation: cs-strike 6s var(--cs-ease) infinite; }
.cs-pins img:nth-child(1) { left: 6px; top: 0; animation-delay: 0.22s; }
.cs-pins img:nth-child(2) { left: 28px; top: 0; animation-delay: 0.18s; }
.cs-pins img:nth-child(3) { left: 50px; top: 0; animation-delay: 0.20s; }
.cs-pins img:nth-child(4) { left: 72px; top: 0; animation-delay: 0.24s; }
.cs-pins img:nth-child(1), .cs-pins img:nth-child(4) { animation-name: cs-wobble; }
.cs-pins img:nth-child(5) { left: 17px; top: 12px; animation-delay: 0.12s; }
.cs-pins img:nth-child(6) { left: 39px; top: 12px; animation-delay: 0.10s; }
.cs-pins img:nth-child(7) { left: 61px; top: 12px; animation-delay: 0.14s; }
.cs-pins img:nth-child(8) { left: 28px; top: 24px; animation-delay: 0.05s; }
.cs-pins img:nth-child(9) { left: 50px; top: 24px; animation-delay: 0.07s; }
.cs-pins img:nth-child(10) { left: 39px; top: 36px; animation-delay: 0s; }

.cs-hero-inner { position: relative; z-index: 1; padding: 18px var(--cs-pad) 14px; max-width: 1180px; margin: 0 auto; }
.cs-hero .cs-h1 { text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); max-width: 14ch; }

.cs-now {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; max-width: 520px;
  border-radius: var(--cs-radius); background: rgba(18, 13, 31, 0.78); border: 1px solid var(--cs-line); color: var(--cs-text); text-decoration: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cs-now:hover { border-color: var(--cs-purple-2); }
.cs-now-live { border-color: rgba(220, 38, 38, 0.6); box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3), 0 10px 40px rgba(220, 38, 38, 0.25); }
.cs-now-text { display: flex; flex-direction: column; min-width: 0; }
.cs-now-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gold); }
.cs-now-live .cs-now-tag { color: #fecaca; }
.cs-now-name { font-weight: 800; line-height: 1.2; overflow-wrap: break-word; }
.cs-now-sub { font-size: 0.8rem; color: var(--cs-muted); overflow-wrap: break-word; }
.cs-now-go { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--cs-red); font-weight: 800; font-size: 0.8rem; }
.cs-countdown { color: var(--cs-gold); font-weight: 600; white-space: nowrap; }

/* Date chips take the Google calendar colour */
.cs-datechip { flex: 0 0 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 10px; background: #039be5; color: #fff; line-height: 1; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.cs-datechip-d { font-family: var(--cs-display); font-size: 1.35rem; }
.cs-datechip-m { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cs-colour-1 { background: #7986cb; } .cs-colour-2 { background: #33b679; } .cs-colour-3 { background: #8e24aa; }
.cs-colour-4 { background: #e67c73; } .cs-colour-5 { background: #f6c026; color: #141018; } .cs-colour-6 { background: #f5511d; }
.cs-colour-8 { background: #616161; } .cs-colour-9 { background: #3f51b5; } .cs-colour-10 { background: #0b8043; } .cs-colour-11 { background: #d60000; }

/* ---- Quick tiles: 2 by 2 on a phone, 4 across on desktop ---- */
.cs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; padding: 10px var(--cs-pad); max-width: 1180px; margin: 0 auto; }
.cs-tile {
  position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  min-height: 64px; padding: 10px; border-radius: var(--cs-radius); text-decoration: none; color: var(--cs-text); overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--cs-line);
  transition: transform 0.18s var(--cs-ease), border-color 0.18s var(--cs-ease);
}
.cs-tile::after { content: ''; position: absolute; inset: auto -20% -60% auto; width: 90px; height: 90px; border-radius: 50%; background: var(--tile, var(--cs-purple)); opacity: 0.25; filter: blur(12px); }
.cs-tile:hover { transform: translateY(-2px); border-color: var(--tile, var(--cs-purple-2)); }
.cs-tile-icon { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; background: var(--tile, var(--cs-purple)); position: relative; }
.cs-tile-label { font-family: var(--cs-display); font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; }
.cs-tile-sub { font-size: 0.64rem; color: var(--cs-muted); overflow-wrap: break-word; line-height: 1.2; }
.cs-tile-live { --tile: var(--cs-red); }
.cs-tile-events { --tile: var(--cs-purple); }
.cs-tile-results { --tile: var(--cs-green); }
.cs-tile-tour { --tile: var(--cs-gold); }
.cs-tile-live .cs-tile-icon::before { content: ''; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.cs-tile-events .cs-tile-icon::before { content: ''; position: absolute; inset: 9px 8px 8px; border: 2px solid #fff; border-top-width: 5px; border-radius: 3px; }
.cs-tile-results .cs-tile-icon::before { content: ''; position: absolute; left: 8px; bottom: 8px; width: 4px; height: 10px; background: #fff; box-shadow: 7px -5px 0 #fff, 14px -10px 0 #fff; }
.cs-tile-tour .cs-tile-icon::before { content: ''; position: absolute; left: 10px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: #141018; box-shadow: 0 0 0 3px #fff; }

/* ---- Cards ---- */
.cs-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--cs-radius); background: var(--cs-panel); border: 1px solid var(--cs-line); color: var(--cs-text); text-decoration: none; transition: transform 0.18s var(--cs-ease), border-color 0.18s var(--cs-ease); }
a.cs-card:hover { transform: translateY(-2px); border-color: var(--cs-purple-2); }

.cs-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--cs-pad); padding-bottom: 6px; }
.cs-rail > * { scroll-snap-align: start; }
.cs-result-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cs-result-name { font-weight: 800; font-size: 1.02rem; line-height: 1.2; overflow-wrap: break-word; }
/* Result cards carry their competition's colour: Tour gold (the calendar's
   QTour colour), Carnival red. A stripe down the left, the badge and a faint
   wash of the same colour. */
.cs-result { position: relative; overflow: hidden; padding-left: 16px; }
.cs-result::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.cs-result-tour::before { background: var(--cs-gold); }
.cs-result-tour { background: linear-gradient(150deg, rgba(246, 192, 38, 0.14), var(--cs-panel) 55%); }
.cs-result-tour .cs-badge { background: var(--cs-gold); color: #141018; }
.cs-result-carnival::before { background: var(--cs-red); }
.cs-result-carnival { background: linear-gradient(150deg, rgba(220, 38, 38, 0.18), var(--cs-panel) 55%); }
.cs-result-carnival .cs-badge { background: var(--cs-red); color: #fff; }
.cs-result.is-live { border-color: rgba(220, 38, 38, 0.55); background: linear-gradient(160deg, rgba(220, 38, 38, 0.14), var(--cs-panel)); }
.cs-resultgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---- Events list ---- */
.cs-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-event { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 8px; border-radius: var(--cs-radius); background: var(--cs-panel); border: 1px solid var(--cs-line); }
.cs-event-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
.cs-event-name { font-weight: 700; font-size: 0.9rem; line-height: 1.25; overflow-wrap: break-word; }
.cs-event-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.78rem; color: var(--cs-muted); }
.cs-event-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 1 auto; margin-left: auto; }
.cs-event-links:empty { display: none; }
.cs-event-links .cs-pill { min-height: 30px; padding: 2px 10px; font-size: 0.74rem; }
.cs-event-links .cs-pill-icon img { width: 16px; height: 16px; }
.cs-eventshead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cs-eventshead .cs-chips { margin-top: 0; }
.cs-eventshead .cs-chip { min-height: 32px; padding: 2px 12px; }
.cs-eventshead .cs-legend { flex: 1 1 100%; }
.cs-eventshead .cs-h1 { font-size: clamp(30px, 9vw, 76px); }
.cs-eventshead + .cs-section .cs-event { padding: 6px 8px; gap: 4px 10px; }
.cs-legend { list-style: none; margin: 0; padding: 6px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-panel); font-size: 0.74rem; font-weight: 600; line-height: 1.2; }
.cs-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cs-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.cs-swatch.cs-colour-7 { background: #039be5; }
@media (min-width: 900px) { .cs-legend { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cs-events-sticky { padding: 0 8px 8px; }
.cs-fold-sticky { margin: 0 0 8px; border-left: 4px solid var(--cs-gold); }
.cs-event-sticky { border-left: 4px solid var(--cs-gold, #f6c026); }
.cs-sticky { padding: 8px 12px; border-radius: var(--cs-radius-sm); margin-bottom: 6px; color: #fff; overflow-wrap: break-word; }
.cs-sticky a { color: inherit; font-weight: 700; }

/* ---- Folds ---- */
.cs-fold { margin-top: 8px; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-panel); }
.cs-fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; font-weight: 700; }
.cs-fold > summary::-webkit-details-marker { display: none; }
.cs-fold > summary::after { content: '+'; margin-left: auto; color: var(--cs-purple-2); font-weight: 800; font-size: 1.1rem; }
.cs-fold[open] > summary::after { content: '-'; }
.cs-fold > :not(summary) { padding: 0 12px 12px; }
.cs-fold > .cs-events { padding: 0 8px 8px; }
.cs-fold-inline { margin-top: 4px; background: transparent; border-color: transparent; }
.cs-fold-inline > summary { min-height: 36px; padding: 4px 0; font-size: 0.82rem; color: var(--cs-muted); }
.cs-fold-inline > :not(summary) { padding: 0 0 6px; }
.cs-count { font-size: 0.75rem; padding: 0 8px; border-radius: 999px; background: var(--cs-panel-2); }

/* ---- Figures ---- */
.cs-figs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 8px; align-items: stretch; }
.cs-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: var(--cs-radius); background: var(--cs-panel); border: 1px solid var(--cs-line); border-left: 3px solid var(--cs-gold); }
.cs-fig-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-muted); }
.cs-fig-value { font-weight: 800; font-size: clamp(0.74rem, 3.3vw, 1.15rem); line-height: 1.15; overflow-wrap: break-word; }

/* ---- Tour ladders: side by side ---- */
.cs-ladders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-ladder-rows { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-ladder-rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--cs-line); font-size: clamp(0.72rem, 3.2vw, 0.85rem); }
.cs-ladder { padding: 8px; }
.cs-rank { font-family: var(--cs-display); color: var(--cs-gold); font-size: 1rem; }
.cs-ladder-name { overflow-wrap: break-word; line-height: 1.2; }
.cs-pts { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- News ---- */
/* Latest news: a rotating hero. Each story is a slide stacked in the same
   cell; the frame, progress bar, dots and All news link belong to the box.
   On a change the incoming photo wipes in from the right while it settles
   from a zoom, the words rise in one after another, the outgoing story
   drifts left and fades, and a light streak crosses the card. */
.cs-leads { position: relative; display: grid; overflow: hidden; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: linear-gradient(135deg, rgba(220, 38, 38, 0.28), rgba(109, 40, 217, 0.3) 45%, var(--cs-panel) 85%); }
.cs-leads-bar { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cs-red), var(--cs-purple), var(--cs-gold)); transform-origin: 0 50%; }
.is-rotating > .cs-leads-bar { transform: scaleX(0); }
.is-rotating > .cs-leads-bar.is-run { animation: cs-progress 5s linear forwards; }
.cs-leads.is-paused > .cs-leads-bar { animation-play-state: paused; }
.cs-lead { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 132px; min-height: 210px; color: var(--cs-text); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--cs-ease), visibility 0s linear 0.9s; }
.cs-lead.is-on { opacity: 1; visibility: visible; z-index: 2; transition: opacity 0.4s var(--cs-ease), visibility 0s; }
.cs-lead.is-out { visibility: visible; z-index: 1; }
.cs-lead-pic { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; }
.cs-lead-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.cs-lead-body { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 14px 12px 40px 14px; min-width: 0; }
.cs-badge-news { background: var(--cs-red); color: #fff; }
.cs-lead-title { font-family: var(--cs-display); font-size: 1.55rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: break-word; }
.cs-lead-sum { font-size: 0.82rem; color: #e7e3f2; overflow-wrap: break-word; }
.cs-lead-go { color: var(--cs-gold); font-weight: 800; font-size: 0.9rem; }
.cs-lead.is-on .cs-lead-pic { animation: cs-wipe-in 0.9s cubic-bezier(0.77, 0, 0.18, 1) both; }
.cs-lead.is-on .cs-lead-pic img { animation: cs-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cs-lead.is-on .cs-lead-body > * { animation: cs-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cs-lead.is-on .cs-lead-body > :nth-child(1) { animation-delay: 0.15s; }
.cs-lead.is-on .cs-lead-body > :nth-child(2) { animation-name: cs-rise-wide; animation-duration: 0.9s; animation-delay: 0.25s; }
.cs-lead.is-on .cs-lead-body > :nth-child(3) { animation-delay: 0.4s; }
.cs-lead.is-on .cs-lead-body > :nth-child(4) { animation-delay: 0.52s; }
.cs-lead.is-out .cs-lead-body { animation: cs-drift-out 0.6s var(--cs-ease) both; }
.cs-lead.is-out .cs-lead-pic img { animation: cs-zoom-out 0.8s var(--cs-ease) both; }
.cs-leads::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; z-index: 3; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), rgba(246, 192, 38, 0.12), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.cs-leads.is-sweep::after { animation: cs-streak 1s cubic-bezier(0.65, 0, 0.35, 1) both; }
.cs-leads-ui { position: absolute; left: 0; right: 132px; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 6px 14px; }
.cs-leads-dots { display: flex; gap: 6px; }
.cs-leads-dot { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.cs-leads-dot::before { content: ''; position: absolute; left: 3px; right: 3px; top: 11px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); transition: background 0.3s var(--cs-ease); }
.cs-leads-dot.is-on::before { background: var(--cs-gold); }
.cs-leads-all { margin-left: auto; font-size: 0.82rem; font-weight: 700; }
@keyframes cs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cs-wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes cs-settle { from { transform: scale(1.22); filter: saturate(1.4) brightness(1.15); } to { transform: scale(1); filter: none; } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cs-rise-wide { from { opacity: 0; transform: translateY(22px); letter-spacing: 0.07em; } to { opacity: 1; transform: none; letter-spacing: 0.02em; } }
@keyframes cs-drift-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-28px); } }
@keyframes cs-zoom-out { from { transform: none; opacity: 1; } to { transform: scale(1.08); opacity: 0; } }
@keyframes cs-streak { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(560%) skewX(-18deg); } }
.cs-newsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-newscard { padding: 0; overflow: hidden; }
.cs-newscard-pic img, .cs-newscard-blank { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cs-newscard-blank { display: block; background: linear-gradient(135deg, var(--cs-purple), var(--cs-red)); opacity: 0.6; }
.cs-newscard-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.cs-newscard-title { font-weight: 800; line-height: 1.2; overflow-wrap: break-word; }
.cs-newscard-sum { font-size: 0.8rem; color: var(--cs-muted); overflow-wrap: break-word; }
.cs-pager { justify-content: center; margin-top: 12px; }
.cs-article-hero img { border-radius: var(--cs-radius); width: 100%; }
.cs-prose { max-width: 760px; font-size: 1rem; }
.cs-prose h2, .cs-prose h3, .cs-prose h4 { margin: 16px 0 6px; font-family: var(--cs-display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.cs-prose blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--cs-red); color: var(--cs-muted); }
.cs-prose ul, .cs-prose ol { padding-left: 20px; }
.cs-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--cs-radius-sm); }
.cs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.cs-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--cs-radius-sm); }

/* ---- Sponsors ---- */
.cs-sponsorband { padding-bottom: 18px; }
.cs-marquee { overflow: hidden; border-radius: var(--cs-radius); background: rgba(255, 255, 255, 0.92); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-marquee-track { display: flex; gap: 28px; width: max-content; padding: 12px 14px; animation: cs-marquee 40s linear infinite; }
.cs-marquee:hover .cs-marquee-track, .cs-marquee:focus-within .cs-marquee-track { animation-play-state: paused; }
.cs-marquee-item { display: flex; align-items: center; height: 46px; }
.cs-marquee-item img { max-height: 46px; width: auto; }
.cs-tier-head { margin: 14px 0 6px; color: var(--cs-gold); }
.cs-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cs-logos-principal { grid-template-columns: 1fr; }
.cs-logo { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px; border-radius: var(--cs-radius); background: var(--cs-panel); border: 1px solid var(--cs-line); }
.cs-logo-img { display: flex; align-items: center; justify-content: center; height: 70px; padding: 6px; border-radius: var(--cs-radius-sm); background: #fff; }
.cs-logo-img img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }
.cs-logo-name { font-size: 0.74rem; line-height: 1.2; font-weight: 600; overflow-wrap: break-word; }

/* ---- People ---- */
/* The team: a profile card each, round photo with a gold ring, name in the
   display face, nickname in gold, bio in full underneath. */
.cs-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.cs-profile { position: relative; overflow: hidden; padding: 16px 14px 14px; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: linear-gradient(160deg, rgba(124, 58, 237, 0.22), rgba(18, 13, 31, 0.92) 46%); }
.cs-profile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cs-red), var(--cs-purple), var(--cs-gold)); }
.cs-profile-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.cs-profile-pic img, .cs-profile-blank { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cs-gold), 0 10px 26px rgba(0, 0, 0, 0.55); }
.cs-profile-blank { display: flex; align-items: center; justify-content: center; font-family: var(--cs-display); font-size: 2.6rem; background: linear-gradient(135deg, var(--cs-purple), #2a1458); }
.cs-profile-id { min-width: 0; }
.cs-profile-name { margin: 0; font-family: var(--cs-display); font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: break-word; }
.cs-profile-nick { margin: 6px 0 0; color: var(--cs-gold); font-weight: 800; font-style: italic; }
.cs-profile .cs-bio { margin: 14px 0 0; font-size: 0.92rem; line-height: 1.6; }
.cs-bio { white-space: pre-line; font-size: 0.88rem; }

/* ---- Live ---- */
.cs-livebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.cs-player { position: relative; border-radius: var(--cs-radius); overflow: hidden; border: 1px solid var(--cs-line); background: #000; aspect-ratio: 16 / 10; min-height: 420px; }
.cs-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-offair { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--cs-radius); background: var(--cs-panel); border: 1px solid var(--cs-line); }
.cs-offair-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--cs-panel-2); position: relative; }
.cs-offair-icon::before { content: ''; position: absolute; left: 15px; top: 12px; border-left: 12px solid var(--cs-muted); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* ---- Video facade ---- */
.cs-video { position: relative; border-radius: var(--cs-radius); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.cs-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.cs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--cs-red); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.cs-video-play span { position: absolute; left: 29px; top: 23px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }

/* ---- Contact form: two fields to a row ---- */
.cs-form { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--cs-muted); }
.cs-field-full { flex: 1 1 100%; }
.cs-field input, .cs-field select, .cs-field textarea {
  width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-line);
  background: rgba(0, 0, 0, 0.35); color: var(--cs-text); font: 400 0.95rem var(--cs-body);
}
.cs-field textarea { resize: vertical; }
.cs-field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9a6b8' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.cs-field select option { background: var(--cs-bg-2); color: var(--cs-text); }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { border-color: var(--cs-purple-2); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); }
.cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-sent { padding: 12px; border-radius: var(--cs-radius); background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.5); margin-bottom: 10px; }
.cs-errors { padding: 10px 12px; border-radius: var(--cs-radius); background: rgba(220, 38, 38, 0.14); border: 1px solid rgba(220, 38, 38, 0.5); margin-bottom: 10px; }
.cs-errors p { margin: 0; }

/* ---- Footer ---- */
.cs-footer { position: relative; margin-top: 24px; border-top: 1px solid var(--cs-line); background: linear-gradient(180deg, transparent, rgba(109, 40, 217, 0.12)); }
.cs-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: repeating-linear-gradient(90deg, var(--cs-wood-2) 0 9px, var(--cs-wood-1) 9px 11px), linear-gradient(90deg, var(--cs-purple), var(--cs-red)); opacity: 0.8; }
.cs-footer-inner { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px var(--cs-pad) 4px; max-width: 1180px; margin: 0 auto; }
.cs-footer-brand { display: flex; flex-direction: column; gap: 4px; }
.cs-footer-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.cs-footer-links a { color: var(--cs-text); text-decoration: none; font-size: 0.76rem; min-height: 36px; display: flex; align-items: center; }
.cs-footer-links a:hover { color: var(--cs-gold); }
.cs-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cs-social { display: inline-flex; align-items: center; min-height: 34px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--cs-line); color: var(--cs-text); text-decoration: none; font-size: 0.8rem; font-weight: 600; }
.cs-legal { text-align: center; color: var(--cs-muted); font-size: 0.75rem; padding: 8px var(--cs-pad) 20px; margin: 0; }
.cs-error { padding-top: 40px; padding-bottom: 40px; }

/* ---- Motion ---- */
.cs-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--cs-ease), transform 0.6s var(--cs-ease); }
.cs-reveal.is-in { opacity: 1; transform: none; }
.cs-no-js .cs-reveal { opacity: 1; transform: none; }
@keyframes cs-live-glow { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.75); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes cs-sweep { 0% { transform: translateX(-30%); } 60%, 100% { transform: translateX(30%); } }
@keyframes cs-strike { 0%, 62% { transform: none; opacity: 1; } 66% { transform: translateY(-4px) rotate(-25deg); opacity: 1; } 72% { transform: translate(10px, 6px) rotate(80deg); opacity: 0.6; } 78% { transform: translate(14px, 10px) rotate(95deg); opacity: 0; } 94% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cs-wobble { 0%, 63% { transform: none; } 67% { transform: rotate(-12deg); } 71% { transform: rotate(10deg); } 75% { transform: rotate(-8deg); } 79% { transform: rotate(6deg); } 83% { transform: rotate(-4deg); } 87% { transform: rotate(2.5deg); } 91% { transform: rotate(-1deg); } 94%, 100% { transform: none; } }
@keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cs-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cs-reveal { opacity: 1; transform: none; }
  .is-rotating > .cs-leads-bar { transform: none; }
  .cs-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .cs-marquee-item[aria-hidden="true"] { display: none; }
}

/* ---- Wider screens grow from the phone ---- */
@media (min-width: 600px) {
  :root { --cs-pad: 18px; }
  .cs-brand img { width: 112px; }
  .cs-rail { grid-auto-columns: minmax(240px, 34%); }
  .cs-resultgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-logos-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  body.cs-body { font-size: 16px; }
  .cs-wide-only { display: inline-flex; }
  .cs-wide-text { display: inline; }
  .cs-menu { display: none; }
  .cs-header { padding: 8px 24px; }
  /* Title block on the left with the pin rack in the space beside it, Next
     up card on the right. The rack shares the title's grid area, so it adds
     no height to the hero. */
  .cs-hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'head now' 'btns now'; column-gap: 32px; align-items: end; padding: 64px 24px 56px; }
  .cs-hero { border-bottom: 0; }
  .cs-hero-inner > .cs-hero-head { grid-area: head; }
  .cs-hero-inner > .cs-pins { position: relative; right: auto; top: auto; grid-area: head; justify-self: end; align-self: center; zoom: 1.7; }
  /* The far end of the lane fades into the dark instead of ending in a hard edge. */
  .cs-lanes { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); }
  .cs-hero-inner > .cs-now { grid-area: now; max-width: none; margin-top: 0; padding: 16px 18px; }
  .cs-hero-inner > .cs-btnrow { grid-area: btns; }
  .cs-now-name { font-size: 1.15rem; }
  .cs-lanes { opacity: 0.8; }
  .cs-hero-inner > .cs-now { align-self: end; }
  .cs-now .cs-datechip { flex-basis: 64px; width: 64px; height: 70px; }
  .cs-now .cs-datechip-d { font-size: 2rem; }
  .cs-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cs-tiles { padding: 0 24px; }
  .cs-section { padding-left: 24px; padding-right: 24px; }
  .cs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -26px; margin-bottom: 18px; position: relative; z-index: 2; }
  .cs-tile { min-height: 84px; padding: 14px; }
  .cs-tile-label { font-size: 1.4rem; }
  .cs-rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  .cs-newsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-resultgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-ladders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Wide screens: one card per row, photo and name on the left, bio beside
     them, so every card is complete and no column is left with a hole. */
  /* Article: photo on the left, story beside it, so a tall photo never
     pushes the words below the fold. */
  .cs-article-main.has-hero { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 8px; align-items: start; max-width: 1180px; margin: 0 auto; }
  .cs-article-main.has-hero > .cs-article-hero { position: sticky; top: 90px; padding-right: 0; }
  .cs-article-main.has-hero > .cs-prose { margin: 0; padding-top: 0; }
  .cs-lead { grid-template-columns: minmax(0, 1fr) 380px; min-height: 300px; }
  .cs-lead-body { padding: 28px 32px 52px; gap: 10px; }
  .cs-leads-ui { right: 380px; padding: 0 32px 14px; }
  .cs-lead-title { font-size: 3rem; }
  .cs-lead-sum { font-size: 1rem; max-width: 60ch; }
  .cs-team { gap: 16px; }
  .cs-profile { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 22px 24px 20px; }
  .cs-profile-top { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .cs-profile .cs-bio { margin: 0; }
  .cs-profile-pic img, .cs-profile-blank { width: 140px; height: 140px; }
  .cs-profile-name { font-size: 2.6rem; }
  .cs-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-footer-inner { grid-template-columns: 1fr 2fr; }
  .cs-player { aspect-ratio: 16 / 9; }
}

.cs-later { margin-top: 14px; }
.cs-contact-direct { align-items: center; margin: 0 0 10px; }

.cs-event-name.is-long { font-size: 0.8rem; }

/* Engines carried in frames: StreamPortal's live viewer and Mission
   Control's events page. They size themselves by message. */
.cs-pagehead-tight { padding-bottom: 4px; }
.cs-pagehead-tight .cs-kicker { display: inline-flex; align-items: center; gap: 6px; }
.cs-embed-wrap { padding-top: 0; }
.cs-embed { display: block; width: 100%; border: 0; min-height: 520px; border-radius: var(--cs-radius); background: transparent; }
.cs-embed-events { min-height: 640px; }
/* With nothing on air the viewer may be empty; it starts collapsed and grows to
   whatever height the viewer reports (Coming Soon, tracker). */
.cs-embed-idle { min-height: 0; height: 0; }
.cs-offair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 0; }
.cs-offair .cs-empty { flex: 1 1 220px; margin: 0; }