/* ============================================================
   base.css — reset, typography roles, focus, reduced-motion base
   ============================================================ */

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

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

body,
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }

ol, ul { padding: 0; list-style: none; }

img, canvas, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* ---- Document ground ---- */
body {
  font-family: var(--font-body);
  font-size: var(--t-18);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Type roles ---- */
.hero-title,
.act-title,
.divider-statement {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.hero-title {
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.act-title {
  font-size: var(--t-h2);
  line-height: 1.06;
}

/* Body copy — capped column, comfortable measure */
.body,
.subhead {
  font-family: var(--font-body);
  font-size: var(--t-18);
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--textw);
  text-wrap: pretty;
}

.subhead { color: var(--muted); }

/* Mono structural labels */
.eyebrow,
.label,
.caption,
.roadmap,
.fineprint {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.label {
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.caption {
  font-size: var(--t-15);
  color: var(--muted);
}

/* Anything numeric/hash-like uses tabular figures */
.hash,
.mono,
code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Links (inline, in-copy) ---- */
.body a,
.subhead a {
  color: var(--accent-ink);
  text-underline-offset: 0.15em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ---- Focus states (visible, functional accent ring) ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Do not show the ring for mouse users that don't need it */
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: var(--s-16);
  top: -100%;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-8) var(--s-16);
  font-size: var(--t-15);
}
.skip-link:focus { top: var(--s-16); }

/* ---- Selection ---- */
::selection {
  background: var(--accent);
  color: var(--surface);
}

/* ---- Reduced-motion base ----
   The engine renders static frames and starts no rAF; this neutralizes
   smooth-scroll and CSS transitions for people who ask for calm. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}