/* =============================================================================
   NURDE BASE — reset, typography defaults, layout primitives, a11y utilities.
   Load AFTER tokens.css, BEFORE components.css.
   Consumes semantic tokens only. No colour literals here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Reset (modern, minimal)
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed nav */
  scroll-padding-top: calc(var(--nav-h) + var(--space-16));
  -webkit-tap-highlight-color: transparent;
  /* Horizontal pan guard. iOS Safari ignores overflow-x on body ALONE — the
     page could still be dragged sideways whenever any descendant painted past
     the viewport (measured: the band-sweep hotspots pushed docWidth to 589px
     on a 375px phone). The root must carry the guard. `clip` forbids even
     programmatic horizontal scrolling without creating a new scroll
     container; the iOS≤15 fallback lives in the @supports block below —
     NOT as a same-property double declaration, which lightningcss minifies
     down to the last value, silently deleting the fallback from the bundle. */
  overflow-x: clip;
}

/* Engines without `clip` (iOS/Safari ≤15) drop the declarations above as
   invalid — give them the classic guard. @supports can't be merged away. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--surface);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* iOS≤15 fallback: see the @supports block after html */
}

/* Korean line breaking (lang toggle, 2026-08-09): default CJK wrapping breaks
   INSIDE words ("끝난" → "끝/난"). keep-all breaks only at spaces, like
   English; overflow-wrap stays as the guard for anything unbroken-long. */
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Brand-tinted text selection — small, everywhere, unmistakably considered. */
::selection {
  background: color-mix(in srgb, var(--action) 30%, transparent);
  color: var(--text);
}

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

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

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   2. Typography defaults
   Headings use the display stack + heavy weights + tight tracking (app voice).
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance; /* progressive enhancement */
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-dim);
}

strong, b { font-weight: var(--fw-bold); color: var(--text); }
small { font-size: var(--fs-small); }

/* ---------------------------------------------------------------------------
   3. Links (default). Component classes may override to buttons etc.
   --------------------------------------------------------------------------- */
a {
  color: var(--action);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--action-hover); }
/* In-prose links carry an underline for affordance without relying on colour. */
.nu-prose a,
a.nu-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------------
   4. Focus — visible, WCAG-conformant ring. Keyboard users get a clear ring;
   pointer users don't get a stray outline (:focus-visible).
   --------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Inputs/buttons that already have a radius keep it, plus a soft ring. */
.nu-btn:focus-visible,
.nu-field:focus-visible,
.nu-nav__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--action-soft);
}

/* ---------------------------------------------------------------------------
   5. Layout primitives
   --------------------------------------------------------------------------- */
.nu-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-24);
}
.nu-container--wide { max-width: var(--container-wide); }
.nu-container--prose { max-width: var(--container-prose); }
.nu-container--narrow { max-width: 40rem; }

@media (min-width: 768px) {
  .nu-container { padding-inline: var(--space-32); }
}

.nu-section { padding-block: var(--section-y); }
.nu-section--sm { padding-block: var(--section-y-sm); }
.nu-section--flush-top { padding-top: 0; }
/* Contain each section's horizontal paint at its own (full-viewport-width)
   box: the band-sweep hotspots animate to translateX(100vw) and the .nu-3d
   perspective projects tilted blocks a few px past the edge — off-screen
   paint either way, but it inflates document width so phones wiggle and
   sit off-center. X-axis only: `clip` keeps overflow-y visible, so the
   sweeps that ride hairlines at top:-1px are untouched. */
.nu-section { overflow-x: clip; }

/* Vertical stack rhythm helper (flow). */
.nu-flow > * + * { margin-top: var(--flow, var(--space-16)); }
.nu-flow--lg { --flow: var(--space-24); }
.nu-flow--sm { --flow: var(--space-8); }

/* Responsive auto-grid. Set --min to control column floor; --gap for gutters. */
.nu-grid {
  display: grid;
  gap: var(--gap, var(--space-24));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}
.nu-grid--2 { --min: 380px; }
.nu-grid--3 { --min: 300px; }
.nu-grid--4 { --min: 220px; }

.nu-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--space-12));
}
.nu-center { text-align: center; }
.nu-measure { max-width: 60ch; }

/* ---------------------------------------------------------------------------
   6. Numerals — tabular figures wherever numbers must align (stats, tables,
   calculator-style readouts on the site). Master plan Part II §1: turn on
   tabular figures for every readout so digit width never shifts.
   --------------------------------------------------------------------------- */
.nu-tnum,
.nu-stat__value,
.nu-table td,
[data-numeric] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------------------------------------------------------------------------
   7. Accessibility utilities
   --------------------------------------------------------------------------- */
/* Visually hidden but available to assistive tech. */
.nu-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page. */
.nu-skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: calc(var(--z-menu) + 1);
  transform: translateY(-160%);
  padding: var(--space-8) var(--space-16);
  background: var(--action-strong);
  color: var(--text-on-action);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.nu-skip-link:focus { transform: translateY(0); color: var(--text-on-action); }

/* Enforce the minimum 44x44 CSS-px target on interactive atoms. Master plan
   Part II §3 / Design a11y row. Component padding usually satisfies this; this
   is the floor. */
a[class*="nu-btn"],
button.nu-btn,
.nu-nav__toggle,
.nu-icon-btn {
  min-height: 44px;
  min-width: 44px;
}

/* ---------------------------------------------------------------------------
   8. Reduced motion — neutralise EVERY transition/animation and stop smooth
   scroll. Master plan Part II §4 "Honor Reduce Motion".
   --------------------------------------------------------------------------- */
@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;
  }
}

/* ---------------------------------------------------------------------------
   9. Icon sprite plumbing — inline SVG icons via <use>. Single-family line set.
   --------------------------------------------------------------------------- */
.nu-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nu-icon--sm { width: 1em; height: 1em; }
.nu-icon--lg { width: 1.5em; height: 1.5em; }