/* ============================================================
   BASE: reset, browser surfaces, typographic primitives, layout
   Loaded after scrollcraft.css, so it settles anything the engine's
   reset sets differently.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
  background: var(--white);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--orange-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Browser surfaces, per ground ──────────────────────── */
::selection { background: var(--sel-bg, var(--orange)); color: var(--sel-ink, var(--white)); }
:root { caret-color: var(--orange-ink); accent-color: var(--orange-ink); }

:focus-visible {
  outline: 2px solid var(--focus, var(--orange-ink));
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }
/* chapters receive focus after anchor jumps; they are not controls */
[tabindex="-1"]:focus { outline: none; }

@supports (scrollbar-color: auto) {
  html { scrollbar-color: rgb(204 53 16 / 0.45) var(--white); scrollbar-width: thin; }
}

.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 ─────────────────────────────────────────── */
.skip {
  position: fixed;
  top: 12px; left: 50%;
  z-index: 300;
  transform: translate(-50%, -180%);
  background: var(--white);
  color: var(--orange-ink);
  padding: 0.7rem 1.2rem;
  font: 500 var(--t-sm)/1 var(--f-text);
  border-radius: var(--radius);
  transition: transform var(--d-base) var(--e-out);
}
/* the shadow only exists while it is on screen, or it bleeds in from above */
.skip:focus { transform: translate(-50%, 0); box-shadow: var(--e2); }

/* ── Layout ────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sect {
  position: relative;
  padding-block: var(--s-8);
}

/* ── Typographic primitives ────────────────────────────── */

/* Section heading. */
.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--tr-head);
  color: var(--display);
  text-wrap: balance;
}

/* Editorial statement: the largest type outside the hero. */
.statement {
  font-family: var(--f-display);
  font-size: var(--t-state);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  color: var(--display);
  text-wrap: balance;
}

/* Emphasis in a display line is carried by weight, not italics:
   Unbounded has none, and one italic word in a sans headline is a
   template tell. The lighter word reads as the quieter, truer one. */
:where(.statement, .h2, .hero__title, .close__t, .about__statement) em {
  font-style: normal;
  font-weight: 300;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Small uppercase label, set in mono. White grounds only: on orange
   it would sit under the large-text floor. */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Inline text link with an underline that draws on hover. */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.12em;
  font-weight: 700;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::after { transform: scaleX(0.35); }
}
.link:active { transform: translateY(1px); }