/* =========================================================================
   BASE — reset, document rhythm, typography, accessibility primitives.
   ========================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background: var(--surface-0);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

/* ---- Headings ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: -0.042em; font-weight: 650; }
h2 { font-size: var(--t-h2); letter-spacing: -0.032em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

ul, ol { padding: 0; list-style: none; }

/* ---- Focus ------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Selection --------------------------------------------------------- */
::selection { background: rgba(22, 23, 27, 0.14); color: var(--fg); }

/* ---- Scrollbar --------------------------------------------------------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--surface-0); }
  ::-webkit-scrollbar-thumb { background: var(--surface-4); border: 3px solid var(--surface-0); border-radius: var(--r-pill); }
  ::-webkit-scrollbar-thumb:hover { background: #b9a98d; }
}

/* ---- Utilities --------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* Small uppercase label for meta keys and category names. Set in the
   interface face rather than mono: mono is reserved for actual code. */
.label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* The single emphasised word per view. One italic serif against an
   otherwise entirely grotesk page — it only works because it is rare. */
.accent-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  /* The italic leans right; a hair of trailing space stops the final glyph
     colliding with whatever follows. */
  padding-right: 0.03em;
  /* Same ink as the rest of the heading: the change of typeface is the
     emphasis. A gradient on top of it was one effect too many. */
  color: inherit;
}