/* base.css — reset, layout primitives, global utilities
   Brief Sections 2.4, 4.1, 15.2, 15.3 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--tx); /* legacy — replaced by --ink-100 in Step 3+ rebuild */
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--amber-signal); color: var(--ink-900); }
.gold { color: var(--gold); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── Layout primitives (brief 4.1) ─── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--r); } /* legacy — used by current sections */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.content {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* ─── Typographic helpers (brief 2.4) ─── */
.display {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variation-settings: "opsz" 144;
}
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.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;
}

/* ─── Focus + skip link (brief 15.2) ─── */
:focus-visible {
  outline: 2px solid var(--amber-signal);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 9999;
  background: var(--ink-900);
  color: var(--ink-100);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  border: 1px solid var(--amber-signal);
}
.skip-link:focus-visible { left: 16px; top: 16px; outline: 2px solid var(--amber-signal); outline-offset: 2px; }

/* ─── Ambient grain (legacy, preserved) ─── */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='.4' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ─── Scroll reveal (brief 13.1) ─── */
.reveal, [data-r] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-slow, 900ms) var(--ease-out-expo),
    transform var(--duration-slow, 900ms) var(--ease-out-expo);
}
.reveal.in-view, [data-r].in { opacity: 1; transform: none; }
[data-r][data-d="1"], .reveal[data-d="1"] { transition-delay: 80ms; }
[data-r][data-d="2"], .reveal[data-d="2"] { transition-delay: 160ms; }
[data-r][data-d="3"], .reveal[data-d="3"] { transition-delay: 240ms; }
[data-r][data-d="4"], .reveal[data-d="4"] { transition-delay: 320ms; }

/* ─── Reduced motion safety net (brief 15.3) ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-r] { transform: none; transition: opacity 300ms linear; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}