/* ============================================================================
   JAVVY LABS — base.css
   Modern reset, base typography, focus-visible, a11y utilities, reduced-motion
   base. "Invisible premium" — one accent, no heat, no custom cursor.
   (ART-DIRECTION §3, §4)
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  tab-size: 4;
}

/* Lenis owns scrolling when active; no native smooth to avoid double-easing */
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 {
  min-height: 100svh;
  background: var(--surface-0);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; }

/* ---- Headings ---- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* ---- Focus visibility — iris ring on every interactive element ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* ============ A11Y UTILITIES ============ */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -120%;
  z-index: var(--z-skip);
  background: var(--accent);
  color: var(--surface-0);
  padding: 0.7em 1.2em;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  transition: top var(--dur-micro) var(--ease);
}
.skip-link:focus-visible { top: var(--space-sm); outline-offset: 2px; }

.visually-hidden {
  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;
}

[hidden] { display: none !important; }

/* ============ MONO REGISTER HELPERS (the engineered voice) ============ */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  font-weight: 400;
}

/* section kicker / index — mono, tracked-upper ONLY here (never a per-section eyebrow) */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-low);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.dateline {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-low);
}

/* The signature glyph — the index tick (a small solid right triangle in --accent).
   Punctuation, not wallpaper: active-nav marker, mono index prefix, live readout. */
.tick {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.32em 0 0.32em 0.46em;
  border-color: transparent transparent transparent var(--accent);
  vertical-align: middle;
  flex: none;
}

/* one deliberately accented word inside a heading / lead */
.hot { color: var(--accent); }

/* live pip — the only success-colored element on the page */
.pip {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--success);
  flex: none;
  vertical-align: middle;
  box-shadow: 0 0 0 0 transparent;
}

/* ============ REDUCED MOTION BASE ============
   Belt-and-braces: even before JS sets html.reduced, kill transitions/animations.
   JS adds html.reduced for the full motion-off path. Content is NEVER gated. */
@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;
  }
}

/* no-JS / reduced safety: reveals never hide content (from-state is JS-applied
   only, and only when motion is allowed). This belt-and-braces override forces
   the visible end-state for every reveal hook regardless. */
.no-js [data-reveal], .no-js [data-split], .no-js [data-clip], .no-js [data-draw],
html.reduced [data-reveal], html.reduced [data-split], html.reduced [data-clip], html.reduced [data-draw] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}
/* draw-on hairlines must stay full-width when motion is off */
.no-js .rule, .no-js .step__draw,
html.reduced .rule, html.reduced .step__draw { transform: scaleX(1) !important; }