/**
 * Base — typography, page shell, shared section chrome.
 */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

/* Consistent keyboard focus ring across interactive elements. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Pointer users don't get the ring. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Display type — heavy, italic, angular (§4). */
h1,
h2,
.display {
  font-family: var(--font-display);
  font-style: italic;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h1 {
  font-size: var(--fs-hero);
}
h2 {
  font-size: var(--fs-h2);
}

/* ── Section shell ───────────────────────────────────────────────────── */
.section {
  position: relative;
  padding: var(--space-xl) var(--section-pad-x);
  border-top: 1px solid var(--hairline);
}

.section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Two-digit section index — editorial marker, e.g. "03". */
.section__index {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent);
  letter-spacing: 0.3em;
  margin-bottom: var(--space-sm);
}

.section__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--text-dim);
}

/* ── Placeholder blocks (where SVG art lands later, §13) ─────────────── */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--accent-mid);
  background: repeating-linear-gradient(
    45deg,
    var(--surface),
    var(--surface) 10px,
    var(--shadow) 10px,
    var(--shadow) 20px
  );
  color: var(--text-dim);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: var(--space-xs);
}

/* Subtle grain overlay hook (§13 optional texture) — off until asset lands. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}