/* ============================================================
   BASE — reset, elements, typography primitives
   ============================================================ */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-hard) transparent;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Lock scroll while preloader or menu is open */
body.is-locked { overflow: hidden; }

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

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

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

ul, ol { list-style: none; }

::selection { background: var(--fg); color: var(--bg); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-line-hard); }

/* ---- Focus: visible, on-brand, keyboard-only ------------- */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s-4);
  left: var(--s-4);
  z-index: calc(var(--z-loader) + 1);
  padding: var(--s-3) var(--s-5);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  transform: translateY(-200%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- Type primitives ------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

.lede {
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--fg);
}

strong { font-weight: 600; }
em { font-style: normal; color: var(--fg-faint); }

/* ---- Global texture overlays ----------------------------- */

/* Film grain — sits above everything, ignores pointer events */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 500;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(6) infinite;
}

/* Drafting-paper rule grid */
.rule-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--c-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line-soft) 1px, transparent 1px);
  background-size: clamp(48px, 6vw, 96px) clamp(48px, 6vw, 96px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

/* Reading-progress hairline */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--z-header);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}