/* ============================================================================
   ATOMIC LAB — RESET + PRIMITIVES
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  color-scheme: dark;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* The living substrate: a fixed field canvas + a static vignette + grain.
   Kept on ::before/::after of body so no extra DOM is needed. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(89,230,255,0.10), transparent 62%),
    radial-gradient(90% 70% at 88% 8%,   rgba(169,139,255,0.09), transparent 60%),
    radial-gradient(70% 60% at 6% 42%,   rgba(255,180,84,0.05), transparent 58%),
    linear-gradient(180deg, var(--vac-1) 0%, var(--void) 55%, #03050a 100%);
}

/* Fine engineering grid + film grain, ultra low contrast */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 85%);
}

/* The `hidden` attribute only sets `display: none` at user-agent priority, so
   any class that declares a display value silently defeats it — .btn is
   inline-flex, which was leaving hidden buttons on screen. */
[hidden] { display: none !important; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
}

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

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

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}

::selection { background: rgba(89,230,255,0.28); color: #fff; }

/* ---- Focus: a visible instrument bracket, never a browser blob --------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
  border-radius: var(--r-2);
}

/* ---- Scrollbar --------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.13);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(89,230,255,0.4); background-clip: content-box; }

/* ============================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.al-shell { position: relative; z-index: 1; }

.wrap      { width: 100%; max-width: var(--maxw);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-tight{ width: 100%; max-width: 940px;            margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--sect-y); position: relative; }
/* A section that directly follows another already has its neighbour's bottom
   padding above it; halve its own so consecutive blocks do not double up. */
.section + .section { padding-top: calc(var(--sect-y) * 0.45); }
.section--tight { padding-block: clamp(1.75rem, 3.2vw, 3.25rem); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

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

.skip-link {
  position: fixed; top: -100px; left: var(--s-4); z-index: 999;
  padding: 0.75rem 1.25rem; background: var(--beam); color: #04060b;
  font-weight: 600; border-radius: var(--r-2); transition: top var(--d-2) var(--e-out);
}
.skip-link:focus-visible { top: calc(var(--nav-h) + 8px); }

/* ============================================================================
   TYPOGRAPHIC ROLES
   ========================================================================== */

/* Eyebrow / instrument label: small, tracked-out mono */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: 0.7;
}
.eyebrow--plain::before { display: none; }
.eyebrow--beam { color: var(--beam); }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.038em;
}

.h-xl { font-size: var(--t-3xl); letter-spacing: -0.032em; font-weight: 700; }
.h-lg { font-size: var(--t-2xl); letter-spacing: -0.026em; font-weight: 600; }
.h-md { font-size: var(--t-xl);  letter-spacing: -0.02em;  font-weight: 600; }
.h-sm { font-size: var(--t-lg);  letter-spacing: -0.014em; font-weight: 600; }

.lede {
  font-size: var(--t-md);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: var(--maxw-text);
}

.muted   { color: var(--ink-2); }
.dimmed  { color: var(--ink-3); }
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Gradient text used only on the single hero mark — restraint on purpose */
.tx-beam {
  background: linear-gradient(100deg, #ffffff 0%, #cdf6ff 42%, var(--beam) 78%, var(--pulse) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================================
   REVEAL / MOTION UTILITIES
   ========================================================================== */

/* Reveals are opt-in: the markup is visible by default and only hidden once
   the `js` class confirms a script is running to bring it back. Without this,
   a JS failure would leave the whole page blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--d-4) var(--e-out),
    transform var(--d-4) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="scale"]  { transform: translateY(14px) scale(0.97); }
.js [data-reveal="left"]   { transform: translateX(-26px); }
.js [data-reveal="right"]  { transform: translateX(26px); }
.js [data-reveal="fade"]   { transform: none; }
.js [data-reveal].is-in    { transform: none; }

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================================
   OVERFLOW GUARDS
   Grid and flex items default to min-width:auto, so one unbreakable child — a
   <canvas> carrying an intrinsic pixel width, a nowrap readout, a long
   configuration string — can force its track wider than the container. On a
   phone that widens the layout viewport, which re-measures the canvas larger,
   which widens it further. Capping the minimum at zero stops the loop.
   ========================================================================== */
.grid > *, .row > *, .row-wrap > *, .spread > *,
.trend-grid > *, .cat-trend > *, .cat-split > *, .doc-split > *,
.el-split > *, .valley > *, .atom > *, .cfg > *, .lab > *, .pos > *,
.cv > *, .hero__inner > *, .cat-hero__grid > *, .el-hero__grid > *,
.bench > *, .fams > *, .memgrid > *, .srch__grid > * { min-width: 0; }

/* Replaced elements never contribute more than their box to intrinsic sizing */
canvas, svg, img, video { max-width: 100%; }

/* Decorative bleeds must never extend the scrollable area */
.hero__vignette, .el-hero__glow, .cat-hero__glow, .hero__field { max-width: 100vw; }
.el-hero, .cat-hero, .hero, .endcap, .factbox { overflow: clip; }

/* Sections clip on the inline axis only. The left/right reveal variants offset
   their target horizontally before animating in, and on a narrow screen a
   full-width element shifted 26px right extends the page. `clip` (not
   `hidden`) removes the overflow without creating a scroll container, so
   position:sticky children still stick to the viewport. */
.section, .tbl-head, .lab-head, .tools-head, .list-head, .doc-hero, .srch { overflow-x: clip; }