/* ==========================================================================
   ARSENE GAME STUDIO — base: reset, fonts, type classes, focus, selection
   No literal colours here (tokens.css only).
   ========================================================================== */

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

html {
  background: var(--ink);
  color: var(--text);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: var(--lh-ui);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}
/* no CSS smooth scrolling: Lenis owns the easing on pointer devices and ScrollTrigger must read true positions */
html { scroll-behavior: auto; }
/* Lenis drives the scroll on pointer devices: native smooth scrolling must not fight it */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--text);
  font-size: var(--fs-ui);
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select {
  -webkit-appearance: none;
  appearance: none;        /* WebKit paints a grey native face under dark color-scheme unless this is off */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius);
  margin: 0;
  padding: 0;
}
[hidden] { display: none !important; }
button { cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
address { font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { text-align: left; font-weight: inherit; }
hr { border: 0; border-top: var(--hairline) solid var(--line); margin: 0; }
dialog { color: inherit; }

/* ---- type roles (brief §3) ---------------------------------------------- */
.display {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-variation-settings: "wdth" var(--wdth, 100);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.display--narrow { --wdth: 62; }
.display--wide   { --wdth: 125; }

.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  line-height: var(--lh-serif);
  letter-spacing: 0;
}
.italic { font-style: italic; }

.ui {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  line-height: var(--lh-ui);
}
.ui--medium { font-weight: 500; }

.mono, .mono-lg {
  font-family: "JetBrains Mono", Menlo, monospace;
  font-weight: 500;
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  max-width: 100%;
  /* no text-wrap: balance here: it resets text-wrap-mode and would undo an inherited white-space: nowrap
     (ticker, captions). Opt in per block with .mono--balance where a long TR label should wrap evenly. */
}
.mono--balance { text-wrap: balance; }
.mono-lg { font-size: var(--fs-mono-lg); }
.mono--muted { color: var(--muted); }

/* fluid sizes by role */
.t-chapter  { font-size: var(--fs-chapter); }
.t-word     { font-size: var(--fs-word); }
.t-hello    { font-size: var(--fs-hello); }
.t-h2       { font-size: var(--fs-h2); }
.t-quote    { font-size: var(--fs-quote); }
.t-lead     { font-size: var(--fs-lead); }
.t-body     { font-size: var(--fs-body); }

/* ---- utilities ---------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* a measuring span: in the DOM, never painted, never read */
.measure {
  position: absolute;
  top: 0; left: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}

/* ---- focus (brief §2.1): never removed, never replaced by the cursor ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--hue);
  outline-offset: 3px;
}
html:not(.js) :focus { outline: 2px solid var(--hue); outline-offset: 3px; }

/* ---- selection ---------------------------------------------------------- */
::selection { background: var(--hue); color: var(--ink); }

/* ---- links: the draw-underline (brief §7.3) ----------------------------- */
.link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hairline);
  padding-bottom: 0.08em;
  transition: background-size var(--t-micro) var(--ease-expo);
}
.link:hover, .link:focus-visible, .link.is-active { background-size: 100% var(--hairline); }
.link--on { background-size: 100% var(--hairline); }
.link--on:hover, .link--on:focus-visible { background-size: 0% var(--hairline); background-position: 100% 100%; }

/* mono links/buttons share the hover ink */
.mono a:hover, .mono a:focus-visible { color: var(--hue-text); }   /* small mono: the AA-safe text tint of the live accent */

/* ---- no transitions before the page is styled and settled (html.is-ready, set by the head bootstrap) */
html.js:not(.is-ready) *, html.js:not(.is-ready) *::before, html.js:not(.is-ready) *::after { transition: none !important; }

/* ---- reduced motion: no transitions on the base layer ------------------- */
@media (prefers-reduced-motion: reduce) {
  .link { transition: none; }
}