/* ==========================================================================
   Hotbox University — Base styles
   Reset, typography, layout primitives. Depends on tokens.css.
   R39b: one focus ring (tokens --focus-*), navy selection and scrollbars,
   Inter's tabular figures wherever numbers line up, and optical kerning.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px)); }  /* anchors land below the fixed bar */

::selection { background: rgba(var(--action-rgb), 0.55); color: #ffffff; }

* { scrollbar-width: thin; scrollbar-color: rgba(144, 195, 255, 0.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
/* The thumb floats: a transparent border with background-clip keeps it slim on any surface (a solid border painted the canvas color onto glass). */
::-webkit-scrollbar-thumb { background: rgba(144, 195, 255, 0.28) padding-box; border-radius: var(--r-pill); border: 3px solid transparent; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(144, 195, 255, 0.45); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Typography ----
   Large titles: Archivo slightly condensed, bold, sentence case, tight. Big and
   calm, the way a large title reads on a phone. Body: Archivo at normal width.
   Printed numbers: Courier Prime. */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2, .display {
  font-stretch: var(--display-stretch);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
h1 { font-size: clamp(2.7rem, 5.8vw, 4.9rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-4); }
a { color: var(--neon-hot); text-decoration: none; transition: color var(--dur-fast); }
a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
strong { font-weight: 600; color: var(--fg); }
small { font-size: var(--t-sm); color: var(--fg-dim); }
ul, ol { margin: 0; padding-left: 1.25rem; }
li + li { margin-top: var(--s-2); }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.02em; }
.num, .mono { font-variant-numeric: tabular-nums; }

/* Small label: typewriter capitals, quiet. The voice of the machine's own printout. */
.label {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.label--accent { color: var(--neon-hot); }
.label--fg { color: var(--fg); }

/* Status dot. The live one glows like an LED. */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); display: inline-block; flex: none; }
.dot--live { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.9); }
.dot--ok { background: var(--ok); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.measure { max-width: var(--measure); }
.num { font-variant-numeric: tabular-nums; }
.lede { font-size: var(--t-lg); color: var(--fg-dim); line-height: 1.5; max-width: 54ch; }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid > * { min-width: 0; }

/* Focus: one ring for the whole site. The outline follows each element's own radius
   (a pill stays a pill), so the old border-radius here, which squared off pills and
   rounded links while focused, is gone. Mouse clicks never show it (:focus-visible). */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

/* Skip link: visible only when focused. */
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 0.6rem 1rem; background: var(--white); color: var(--ink); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.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; }

/* Reveal: 8px and 320ms, nothing more. Hidden only when script will reveal it. */
html.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}