/* ==========================================================================
   base.css — reset, type scale, links, shared utilities.
   Type rules live ONLY here; block/component sheets never restate a font size
   that a heading class already carries.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  padding: 0;
  background: var(--night-950);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
table { border-collapse: separate; border-spacing: 0; }

/* --- Headings -------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .display {
  margin: 0;
  font-family: var(--font-display);
  text-wrap: balance;
}
.display { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; }
h1, .h1   { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 0.96; }
h2, .h2   { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.03em;  line-height: 1.0; }
h3, .h3   { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.08; }
h4, .h4   { font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; }
h5, .h5   { font-size: var(--t-h5); font-weight: 500; letter-spacing: -0.01em;  line-height: 1.25; }
h6, .h6   { font-size: var(--t-h6); font-weight: 500; line-height: 1.35; }

/* The signature: beat two of every two-beat headline. */
.accent-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--accent-soft);
}

p { margin: 0 0 1em; color: var(--fg-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.lead    { font-size: var(--t-lead);    line-height: 1.45; color: var(--fg-2); }
.body-lg { font-size: var(--t-body-lg); line-height: 1.55; color: var(--fg-2); }
.body-sm { font-size: var(--t-body-sm); line-height: 1.5;  color: var(--fg-3); }
strong, b { color: var(--fg-1); font-weight: 600; }
code, .mono, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.eyebrow--accent { color: var(--accent); }
.overline {
  font-family: var(--font-mono);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--fg-4);
}

/* --- Links ----------------------------------------------------------- */
a { color: var(--accent); text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
a:hover { color: var(--accent-soft); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.link-inline { text-decoration: underline; text-decoration-color: var(--fg-5); text-underline-offset: 3px; }
.link-inline:hover { text-decoration-color: currentColor; }

/* --- Glass surfaces (Aurix three tiers) ------------------------------ */
.glass-1, .glass-2, .glass-3, .glass-master {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke-1);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-2), var(--glass-inner-lift);
}
.glass-1 { background: var(--glass-tint-1); }
.glass-2 { background: var(--glass-tint-2); border-color: var(--glass-stroke-2); }
.glass-3 { background: var(--glass-tint-3); border-color: var(--glass-stroke-3); box-shadow: var(--shadow-3), var(--glass-inner-lift); }
.glass-master {
  background: var(--glass-tint-4);
  border-color: var(--glass-stroke-3);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-4), var(--glass-inner-lift);
}

/* --- Shared atoms ---------------------------------------------------- */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: nt-pulse 1.6s var(--ease-in-out) infinite;
  flex: none;
}
@keyframes nt-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke-2);
  background: var(--glass-tint-1);
  backdrop-filter: blur(var(--glass-blur-sm));
  font-family: var(--font-mono);
  font-size: var(--t-overline);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.chip--accent { border-color: var(--accent); color: var(--accent); }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--fg-5), transparent);
  margin: 0;
}

/* --- Section numbering: "— 03 / MESH" on a hairline ------------------ */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-overline);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: var(--s-6);
}
.section-label::before { content: "—"; color: var(--accent); }
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--fg-5), transparent);
}
.section-label b { color: var(--accent); font-weight: 500; }

/* --- Utilities (each declared once, used everywhere) ----------------- */
.stack     { display: flex; flex-direction: column; }
.row       { display: flex; align-items: center; }
.wrap      { flex-wrap: wrap; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); } .gap-12 { gap: var(--s-12); }
.muted     { color: var(--fg-3); }
.faint     { color: var(--fg-4); }
.center    { text-align: center; }
.measure   { max-width: 68ch; }
.measure-sm{ max-width: 52ch; }
.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;
}

/* --- Scroll-reveal. JS adds .in when the element enters the viewport. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }