/* CUE — shared tokens and browser surfaces */
:root {
  --room: #0c0a08;
  --room-2: #15110d;
  --room-3: #1f1913;
  --baize: #0d6a3c;
  --baize-deep: #08442a;
  --baize-ink: #d7efdc;
  --gold: #e3b54f;
  --gold-hi: #f6dc8c;
  --gold-lo: #9c6f1e;
  --ivory: #f4efe2;
  --ivory-dim: #c9bfa8;
  --ivory-mute: #9a907c;
  --red: #c8232b;
  --red-hi: #e2353d;
  --neon-tri: #3ddc84;
  --neon-sq: #ff4fd8;
  --neon-x: #4d8dff;
  --neon-o: #ff4545;

  --f-display: "Big Shoulders Display", "Barlow Condensed", sans-serif;
  --f-slant: "Barlow Condensed", sans-serif;
  --f-text: "Barlow", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 14px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--room);
  color: var(--ivory);
  font: 400 1.0625rem/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--gold);
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--gold); color: #1a1206; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--gold-lo) var(--room); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--room); }
::-webkit-scrollbar-thumb { background: var(--gold-lo); border-radius: 10px; border: 2px solid var(--room); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons: brass-and-baize, not pills of colour */
.btn {
  --b-bg: transparent; --b-fg: var(--ivory); --b-line: rgba(244, 239, 226, 0.28);
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 48px; padding: 0.7em 1.25em;
  border: 1px solid var(--b-line); border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font: 600 0.98rem/1 var(--f-text); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { border-color: rgba(244, 239, 226, 0.6); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--gold {
  --b-bg: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, #b9862c);
  --b-fg: #1c1306; --b-line: transparent;
  background: var(--b-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 24px -12px rgba(0, 0, 0, 0.75);
}
.btn--gold:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 30px -12px rgba(0, 0, 0, 0.85); }
.btn--red { --b-bg: var(--red); --b-line: transparent; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.75); }
.btn--red:hover { --b-bg: var(--red-hi); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Live open / closed status */
.status {
  display: inline-flex; align-items: center; gap: 0.55em;
  font: 600 0.9rem/1 var(--f-text); letter-spacing: 0.02em;
}
.status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ivory-mute);
}
.status[data-open="true"]::before {
  background: var(--neon-tri);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .status[data-open="true"]::before { animation: none; } }