/* ============================================================================
   bargames.live — the player site (2026-10-02 overhaul).

   The room: a patron at a high-top in a dim, loud bar, phone in one hand, the
   host just called a code. So: a CHALKBOARD. Dark slate, chalk-white type, the
   five BINGO column hues as the only coloured chalk, and the game-code form as
   the paper ticket you get at the door. Never a casino.

   Shared by /, /find/ (server-rendered), /find/<slug>, /venues/ and the 404.
   Display: Anton. Body: Heebo. The same pair as the player app and the host
   sales page, so the three read as one family. Ball hues copied verbatim from
   games/bingo/src/columns.css; change them there first.

   Bump ?v= on every stylesheet link when this file changes: nginx serves it
   with a one-year immutable cache.
   ========================================================================== */

@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The board. Slate with a green cast, like a real one; three steps of it. */
  --board:      oklch(0.215 0.022 165);
  --board-deep: oklch(0.170 0.020 165);
  --board-lift: oklch(0.265 0.024 165);
  /* Chalk. Warm, never pure white. */
  --chalk:      oklch(0.955 0.012 90);
  --chalk-soft: oklch(0.955 0.012 90 / 0.78);
  --chalk-mute: oklch(0.955 0.012 90 / 0.58);
  --line:       oklch(0.955 0.012 90 / 0.16);
  --line-firm:  oklch(0.955 0.012 90 / 0.32);
  /* Coloured chalk: the five BINGO columns. */
  --b: oklch(0.700 0.185 250);
  --i: oklch(0.720 0.180 25);
  --n: oklch(0.780 0.165 145);
  --g: oklch(0.790 0.160 85);
  --o: oklch(0.700 0.190 320);
  /* The ticket: paper, and the red of a roll ticket. */
  --paper:      oklch(0.960 0.022 85);
  --paper-deep: oklch(0.920 0.030 85);
  --paper-ink:  oklch(0.230 0.030 60);
  --paper-mute: oklch(0.230 0.030 60 / 0.62);
  /* Chalk on the stub red measures 4.01:1 at 0.600; 0.555 clears AA (4.5) for the Anton label. */
  --stub:       oklch(0.555 0.195 25);
  --stub-deep:  oklch(0.490 0.190 25);
  --on-stub:    oklch(0.975 0.012 85);

  --slab: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif;
  --sans: "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(1rem, 4vw, 2.5rem);
  --wrap: 72rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fs-lede: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);

  color-scheme: dark;
}

/* ── reset-ish ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--board); color: var(--chalk);
  font: 400 1.05rem/1.55 var(--sans); min-height: 100dvh;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
/* Chalk dust: a faint grain and the unevenly-wiped middle of a board. One fixed layer, no image. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, oklch(0.955 0.012 90 / 0.055), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 90%, oklch(0.955 0.012 90 / 0.03), transparent 70%),
    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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, soft-light;
  opacity: 0.9;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--slab); font-weight: 400; letter-spacing: 0.01em; margin: 0; }
h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1; }
h3 { font-size: 1.35rem; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--paper); color: var(--paper-ink); padding: 0.6rem 1rem; border-radius: 6px; z-index: 50; font-weight: 700; }
.skip:focus { top: 1rem; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.eyebrow {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: var(--g); margin-bottom: 1rem;
}
.lede { color: var(--chalk-soft); font-size: var(--fs-lede); line-height: 1.5; }

/* A chalk underline: a hand-drawn stroke under a heading, in one of the hues. */
.ul { position: relative; display: inline-block; }
/* The stroke is white in the SVG; it is used as a MASK so the hue comes from --ul-color. */
.ul::after {
  content: ""; position: absolute; left: -0.1em; right: -0.1em; bottom: -0.12em; height: 0.28em;
  background: var(--ul-color, var(--g)); opacity: 0.9;
  -webkit-mask: var(--ul-mask); mask: var(--ul-mask);
}
:root { --ul-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 90 10, 130 6 S 185 4, 198 7' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ul-b { --ul-color: var(--b); } .ul-i { --ul-color: var(--i); } .ul-n { --ul-color: var(--n); } .ul-g { --ul-color: var(--g); } .ul-o { --ul-color: var(--o); }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.3rem; border-radius: 8px; border: 2px solid transparent;
  font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.1;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: 1.1rem; padding: 0.9rem 1.6rem; }
.btn-chalk { background: transparent; border-color: var(--line-firm); color: var(--chalk); }
.btn-chalk:hover { border-color: var(--chalk); background: oklch(0.955 0.012 90 / 0.06); }
.btn-gold { background: var(--g); color: oklch(0.200 0.030 70); border-color: var(--g); }
.btn-gold:hover { background: oklch(0.860 0.150 85); }
.btn-stub { background: var(--stub); color: var(--on-stub); border-color: var(--stub); font-family: var(--slab); font-weight: 400; letter-spacing: 0.04em; font-size: 1.25rem; }
.btn-stub:hover { background: var(--stub-deep); }
.btn-ghost { background: transparent; color: var(--chalk-soft); border-color: transparent; }
.btn-ghost:hover { color: var(--chalk); background: oklch(0.955 0.012 90 / 0.06); }

/* ── header ────────────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: 1.2rem;
  width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto;
  padding-block: 0.9rem; min-height: 4rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-right: auto; }
.brand-mark {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  border: 2.5px solid var(--chalk); font-family: var(--slab); font-size: 1.3rem; line-height: 1;
  color: var(--chalk); box-shadow: inset 0 0 0 3px var(--board), inset 0 0 0 4.5px var(--line-firm);
}
.brand-word { font-family: var(--slab); font-size: 1.5rem; letter-spacing: 0.03em; }
.brand-word small { font-family: var(--sans); font-weight: 400; font-size: 0.8rem; color: var(--chalk-mute); margin-left: 0.3rem; letter-spacing: 0; }
.nav { display: flex; gap: 0.2rem; }
.nav a { text-decoration: none; color: var(--chalk-soft); padding: 0.55rem 0.8rem; border-radius: 6px; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--chalk); background: oklch(0.955 0.012 90 / 0.07); }
.menu-btn { display: none; }
.menu { display: none; }
@media (max-width: 52rem) {
  .nav, .bar .btn-ghost { display: none; }
  .menu-btn {
    display: inline-flex; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 8px;
    background: transparent; border: 2px solid var(--line-firm); color: var(--chalk); font-weight: 700; cursor: pointer;
  }
  /* `display:none` stays the closed state; the popover only shows when open. */
  .menu:popover-open { display: grid; }
  .menu {
    inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
    background: var(--board-deep); color: var(--chalk); padding: 1rem var(--gut) 2rem;
    align-content: start; gap: 0.2rem;
  }
  .menu-head { display: flex; justify-content: flex-end; }
  .menu-close { background: none; border: 2px solid var(--line-firm); color: var(--chalk); font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
  .menu > a { font-family: var(--slab); font-size: 2rem; text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
  .menu-note { color: var(--chalk-mute); margin-top: 1rem; font-size: 0.95rem; }
}

/* ── the hero: the board, and the ticket ──────────────────────────────────── */
.hero { padding-block: clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.15fr 1fr; } }
.hero h1 {
  font-size: clamp(3.2rem, 2rem + 6vw, 7rem); line-height: 0.92; letter-spacing: 0.005em;
  display: grid; text-wrap: balance;
}
.hero h1 span { display: block; }
.hero h1 .l3 { color: var(--g); }
.hero .lede { margin-top: 1.4rem; }
.hero-alt { margin-top: 1.2rem; color: var(--chalk-mute); }
.hero-alt a { color: var(--chalk); font-weight: 600; }

/* Staggered chalk-in on load. Opacity + transform only; none of it is scroll-gated, so a
   crawler or a screenshot sees the whole page. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span, .hero .eyebrow, .hero .lede, .hero-alt, .ticket { animation: chalk-in 700ms var(--ease) both; }
  .hero .eyebrow { animation-delay: 0ms; }
  .hero h1 .l1 { animation-delay: 60ms; } .hero h1 .l2 { animation-delay: 140ms; } .hero h1 .l3 { animation-delay: 220ms; }
  .hero .lede { animation-delay: 320ms; } .hero-alt { animation-delay: 380ms; } .ticket { animation-delay: 160ms; }
}
@keyframes chalk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The code panel. Paper on the board: one field, one button, nothing decorative. */
.ticket {
  background: var(--paper); color: var(--paper-ink); border-radius: 8px;
  padding: 1.6rem 1.6rem 1.4rem; width: min(30rem, 100%); margin-inline: auto;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.5) inset, 0 24px 48px -24px oklch(0 0 0 / 0.75);
}
.ticket-label { display: block; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: var(--paper-ink); margin-bottom: 0.6rem; }
.ticket input {
  width: 100%; min-height: 3.8rem; border: 1.5px solid oklch(0.230 0.030 60 / 0.35); border-radius: 6px;
  background: oklch(0.990 0.008 85); padding: 0.3rem 1rem; color: var(--paper-ink);
  font-family: var(--slab); font-size: 2rem; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.06) inset;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.ticket input::placeholder { color: var(--paper-mute); font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.ticket input:focus { outline: none; border-color: var(--paper-ink); box-shadow: 0 0 0 3px oklch(0.790 0.160 85 / 0.45); }
.ticket input[aria-invalid="true"] { border-color: var(--stub); }
.ticket .btn-stub { width: 100%; margin-top: 0.9rem; min-height: 3.5rem; border-radius: 6px; }
.ticket-msg { min-height: 1.4rem; margin-top: 0.6rem; font-size: 0.95rem; color: var(--paper-mute); }
.ticket-msg.err { color: var(--stub-deep); font-weight: 600; }
.ticket-msg.ok { color: oklch(0.45 0.13 145); font-weight: 600; }
.ticket-tear { border-top: 1px solid oklch(0.230 0.030 60 / 0.14); margin: 1rem 0 0.8rem; }
.ticket-alt { font-size: 0.92rem; color: var(--paper-mute); line-height: 1.45; }
.ticket-alt a { color: var(--paper-ink); font-weight: 700; }

/* ── "Playing tonight" strip (filled by bg.js, hidden until it has something) ── */
.tonight { display: none; border-block: 1px solid var(--line); padding-block: 1rem; }
.tonight.has { display: block; }
.tonight-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.tonight-h { font-family: var(--slab); font-size: 1.1rem; letter-spacing: 0.05em; color: var(--n); display: inline-flex; align-items: center; gap: 0.5rem; }
.tonight-h::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--n); box-shadow: 0 0 10px var(--n); }
.tonight-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.tonight-list a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.tonight-list a:hover { border-color: var(--chalk); }
.tonight-list small { color: var(--chalk-mute); margin-left: 0.3rem; }

/* ── steps: how a night works, chalk numbers ──────────────────────────────── */
.section-h { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
/* align-content: start, or the shorter steps stretch their rows to the tallest one and read as
   extra space under 1 and 3 (Scott, 2026-10-02). */
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; align-content: start; }
.step-n {
  font-family: var(--slab); font-size: 2.6rem; line-height: 1; color: var(--chalk-mute);
  grid-row: span 2; padding-top: 0.1rem;
}
.steps li:nth-child(1) .step-n { color: var(--b); } .steps li:nth-child(2) .step-n { color: var(--g); } .steps li:nth-child(3) .step-n { color: var(--o); }
.steps h3 { margin-bottom: 0.3rem; }
.steps p { color: var(--chalk-soft); }

/* ── the games: three lines on the board, not three cards ─────────────────── */
.games { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gameline {
  display: grid; gap: 0.3rem 2rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 48rem) { .gameline { grid-template-columns: minmax(12rem, 0.6fr) 1.4fr; } }
.gameline h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1; }
.gameline h3 small { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.2rem; }
.gameline p { color: var(--chalk-soft); }
.game-b h3 small { color: var(--b); } .game-i h3 small { color: var(--i); } .game-o h3 small { color: var(--o); } .game-n h3 small { color: var(--n); }

/* ── a darker band of the board (any section) ─────────────────────────────── */
.band { background: var(--board-deep); border-block: 1px solid var(--line); }

/* ── house rules ───────────────────────────────────────────────────────────── */
.rules { background: var(--board-deep); border-block: 1px solid var(--line); }
.rules-in { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .rules-in { grid-template-columns: 0.8fr 1.2fr; } }
.rules h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.rules ul { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .rules ul { grid-template-columns: 1fr 1fr; } }
.rules ul li { display: flex; gap: 0.7rem; align-items: baseline; color: var(--chalk-soft); }
.rules ul li::before { content: "✓"; color: var(--n); font-weight: 700; flex: none; }

/* ── a pitch to venues, on the player site ─────────────────────────────────── */
.pitch { border-top: 1px solid var(--line); }
.pitch-in { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 56rem) { .pitch-in { grid-template-columns: 1.4fr auto; } }
.pitch p { color: var(--chalk-soft); margin-top: 0.6rem; max-width: none; }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq-list { display: grid; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 1rem 2.2rem 1rem 0; font-weight: 700; font-size: 1.1rem; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.85rem; font-family: var(--slab); font-size: 1.6rem; color: var(--g); transition: transform 200ms var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.1rem; color: var(--chalk-soft); max-width: 65ch; }

/* ── footer ────────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; color: var(--chalk-mute); font-size: 0.92rem; }
.foot-in { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .foot-in { grid-template-columns: 1fr auto; align-items: start; } }
.foot a { color: var(--chalk-soft); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.foot-nav a { text-decoration: none; font-weight: 600; }
.foot-legal { max-width: none; }
/* Our sites: the family of sites, one row across the bottom (crosslinking pass, 2026-10-02). */
.foot-sites { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.foot-sites span { color: var(--chalk-mute); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; align-self: center; }
.foot-sites a { color: var(--chalk-mute); text-decoration: none; }
.foot-sites a:hover { color: var(--chalk); }

/* ── Find a game ───────────────────────────────────────────────────────────── */
.find-head h1 { font-size: clamp(2.8rem, 2rem + 4vw, 5.5rem); line-height: 0.95; }
.find-head .lede { margin-top: 1rem; }
.find-form { display: grid; gap: 0.8rem; margin-top: 1.6rem; width: min(46rem, 100%); grid-template-columns: 1fr 1fr; }
@media (min-width: 44rem) { .find-form { grid-template-columns: 1.5fr 1.2fr 0.8fr; } .find-form .find-do { grid-column: 1 / -1; } }
.find-form label { display: grid; gap: 0.3rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--chalk-mute); }
.find-form label:first-child { grid-column: 1 / -1; }
@media (min-width: 44rem) { .find-form label:first-child { grid-column: auto; } }
.find-form input, .find-form select {
  min-height: 3.2rem; padding: 0.4rem 1rem; border-radius: 8px; border: 2px solid var(--line-firm);
  background: var(--board-lift); color: var(--chalk); font-size: 1.1rem; font-weight: 400; letter-spacing: 0; text-transform: none; width: 100%;
}
.find-form select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e9e4d6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.find-form input::placeholder { color: var(--chalk-mute); }
.find-form input:focus, .find-form select:focus { border-color: var(--chalk); outline: none; }
.find-do { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.find-msg { margin-top: 0.8rem; color: var(--chalk-mute); min-height: 1.4rem; }
.find-msg.err { color: var(--i); }
.results { margin-top: 2rem; border-top: 1px solid var(--line); }
.venue-row {
  display: grid; gap: 0.2rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr auto; align-items: center; text-decoration: none; color: inherit;
}
.venue-row:hover .vr-name { color: var(--g); }
.vr-name { font-family: var(--slab); font-size: 1.6rem; line-height: 1.05; transition: color 160ms var(--ease); }
.vr-where { color: var(--chalk-mute); grid-column: 1; }
.vr-dist { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--slab); font-size: 1.4rem; color: var(--chalk-soft); white-space: nowrap; }
.vr-dist small { display: block; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-mute); }
.vr-next { grid-column: 1 / -1; color: var(--chalk-soft); margin-top: 0.2rem; }
.vr-next b { color: var(--n); font-weight: 700; }
.vr-next.soon b { color: var(--g); }
.pending-h { margin-top: 2.5rem; color: var(--chalk-mute); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.empty { padding: 2rem 0; color: var(--chalk-soft); }

/* ── one venue ─────────────────────────────────────────────────────────────── */
.crumb { font-size: 0.9rem; color: var(--chalk-mute); margin-bottom: 1rem; }
.crumb a { color: var(--chalk-soft); text-decoration: underline; text-underline-offset: 0.15em; }
.crumb a:hover { color: var(--chalk); }
.venue-head { display: grid; gap: 1.2rem; align-items: end; }
@media (min-width: 56rem) { .venue-head { grid-template-columns: 1.3fr 1fr; } }
.venue-head h1 { font-size: clamp(2.8rem, 2rem + 4.5vw, 6rem); line-height: 0.95; }
.venue-addr { margin-top: 0.8rem; color: var(--chalk-soft); font-style: normal; line-height: 1.5; }
.venue-addr a { color: var(--chalk); text-decoration: underline; text-underline-offset: 0.15em; font-weight: 600; }
.venue-run { color: var(--chalk-mute); margin-top: 0.4rem; }
.nights { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.night {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1.4rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: center;
}
.night-date { font-family: var(--slab); font-size: 1.5rem; line-height: 1; min-width: 6.5rem; }
.night-date small { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-mute); margin-bottom: 0.15rem; }
.night-what { font-weight: 600; }
.night-what small { display: block; color: var(--chalk-mute); font-weight: 400; }
.night.today .night-date { color: var(--n); }
.night-tag { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--n); }
.venue-cta { margin-top: 2rem; }

/* ── for venues (the pitch page) ──────────────────────────────────────────── */
.pv-hero { padding-block: clamp(2rem, 5vw, 5rem) clamp(2rem, 5vw, 4rem); }
.pv-grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .pv-grid { grid-template-columns: 1.1fr 1fr; } }
.pv-hero h1 { font-size: clamp(3rem, 2rem + 5.5vw, 6.5rem); line-height: 0.92; }
.pv-hero h1 span { color: var(--g); }
.pv-do { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.pv-shot { border-radius: 10px; box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.8); border: 1px solid var(--line); }
.why { display: grid; gap: 1.6rem; counter-reset: why; }
@media (min-width: 48rem) { .why { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }
.why li { padding-top: 0.6rem; border-top: 2px solid var(--line-firm); }
.why li:nth-child(1) { border-color: var(--b); } .why li:nth-child(2) { border-color: var(--i); } .why li:nth-child(3) { border-color: var(--n); } .why li:nth-child(4) { border-color: var(--o); }
.why h3 { margin-bottom: 0.3rem; }
.why p { color: var(--chalk-soft); }
.shots { display: grid; gap: 1.2rem; margin-top: 2rem; }
@media (min-width: 48rem) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shots figure { margin: 0; }
.shots img { border-radius: 8px; border: 1px solid var(--line); }
.shots figcaption { margin-top: 0.5rem; color: var(--chalk-mute); font-size: 0.9rem; }
.kit { display: grid; gap: 1.2rem; }
@media (min-width: 48rem) { .kit { grid-template-columns: repeat(3, 1fr); } }
.kit div { padding: 1rem 0 0; border-top: 1px solid var(--line-firm); }
.kit dt { font-weight: 700; font-size: 1.1rem; }
.kit dd { margin: 0.3rem 0 0; color: var(--chalk-soft); }

/* contact form, on the board */
.cform { display: grid; gap: 0.9rem; width: min(44rem, 100%); margin-top: 1.5rem; }
.cf-row { display: grid; gap: 0.9rem; }
@media (min-width: 40rem) { .cf-row { grid-template-columns: 1fr 1fr; } }
.cform label { display: grid; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--chalk-soft); }
.cform label .opt { font-weight: 400; color: var(--chalk-mute); }
.cform input, .cform textarea {
  min-height: 3rem; padding: 0.55rem 0.9rem; border-radius: 8px; border: 2px solid var(--line-firm);
  background: var(--board-lift); color: var(--chalk); font-size: 1rem; width: 100%;
}
.cform textarea { min-height: 7rem; resize: vertical; }
.cform input:focus, .cform textarea:focus { border-color: var(--chalk); outline: none; }
.cform [aria-invalid="true"] { border-color: var(--i); }
.cf-hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 1.4rem; color: var(--chalk-mute); }
.form-msg.err { color: var(--i); font-weight: 600; }
.form-msg.ok { color: var(--n); font-weight: 600; }

/* ── 404 ───────────────────────────────────────────────────────────────────── */
.nf { min-height: 70dvh; display: grid; place-content: center; text-align: center; gap: 1rem; padding: 2rem var(--gut); }
.nf-ball {
  width: 6rem; height: 6rem; border-radius: 50%; margin: 0 auto 0.5rem; display: grid; place-items: center;
  border: 3px solid var(--i); color: var(--i); font-family: var(--slab); font-size: 1.1rem; line-height: 1;
}
.nf-ball b { display: block; font-size: 1.9rem; font-weight: 400; }
.nf h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); line-height: 1; }
.nf p { color: var(--chalk-soft); }
.nf-do { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}