/* ============================================================================
   BASE — reset, typography primitives, global chrome
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;        /* iOS honours body overflow only when html has it too */
}

.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;
}

body {
  margin: 0;
  background: var(--void);          /* explicit: the host paints its own ground */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* NOT overflow-x: hidden. Once <html> carries a non-visible overflow (it
     has overflow-x: clip above), the body stops propagating its overflow to
     the viewport and becomes a scroll container in its own right. That breaks
     every position: sticky inside it — which is what unpinned the thesis
     section — and detaches window.scrollY from the document.
     `clip` never creates a scroll container, so it is safe here. */
  overflow-x: clip;
}

/* Safari below 16 (iOS 15 and older) does not know `overflow: clip` at all,
   so BOTH rules above are dropped and nothing contains horizontal overflow.
   Restore the pre-clip arrangement there: with html's clip also ignored, the
   body's `hidden` propagates up to the viewport, which contains the overflow
   AND leaves position: sticky working — that combination was never the bug. */
@supports not (overflow: clip) {
  html { overflow-x: visible; }
  body { overflow-x: hidden; }
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }
textarea { resize: vertical; }

:focus-visible {
  outline: 2px solid var(--sodium);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--sodium);
  color: var(--void);
}

/* --- scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--panel-3);
  border: 3px solid var(--void);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--sodium); }

/* ============================================================================
   TYPE ROLES
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;          /* Archivo's width axis — the industrial set  */
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-transform: uppercase;
}

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  font-size: var(--t-h3);
  line-height: var(--lh-head);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mega {
  font-size: var(--t-mega);
  letter-spacing: -0.035em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: var(--measure);
  text-wrap: pretty;
}

.body { max-width: var(--measure); text-wrap: pretty; }
.body + .body { margin-top: var(--s-4); }

/* mono utility label — the datasheet voice of the whole page */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.label--accent { color: var(--sodium); }
.label--trace  { color: var(--trace); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
}

.dim { color: var(--ink-dim); }
.tabular { font-variant-numeric: tabular-nums; }

/* inline accent for a single word inside a headline */
.hot { color: var(--sodium); }

/* ============================================================================
   FILM GRAIN — one canvas-generated tile, drawn over everything.
   This single layer is what stops the page reading as flat CSS.
   ========================================================================== */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  will-change: transform;
}

/* ============================================================================
   SKIP LINK
   ========================================================================== */
.skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 10000;
  padding: var(--s-3) var(--s-4);
  background: var(--sodium);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform var(--d-std) var(--e-out);
}
.skip:focus { transform: translateY(0); }