/* Base: reset, typography, grid. Uses tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--c-ink); color: var(--c-page); }

/* ---------- Type roles ---------- */
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display); font-weight: var(--w-display); text-wrap: balance;
}
.t-display { font-size: var(--t-display); line-height: 0.96; letter-spacing: var(--tr-display); }
.t-h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: var(--tr-display); }
.t-h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: calc(var(--tr-display) * 0.7); }
.t-h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
/* The lighter half of a heading: "Product designer <span class="lite">based in Haarlem</span>" */
.lite { font-weight: var(--w-display-lite); }
/* Editorial first-line indent with an arrow, e.g. <p class="t-h2 indent"><span class="indent__mark">↳</span>…</p> */
.indent { text-indent: 2.2em; }
.indent__mark { position: absolute; margin-left: -2.2em; text-indent: 0; font-family: var(--font-sans); font-weight: 300; color: var(--c-ink-3); }
/* A small image or video inline in a heading (Matthieu Givelet reference) */
.inline-media {
  display: inline-block; width: 1.6em; height: 0.8em; vertical-align: 0.02em; margin-inline: 0.06em;
  border-radius: var(--r-media); overflow: hidden; background: var(--c-sunk);
}
.inline-media img, .inline-media video { width: 100%; height: 100%; object-fit: cover; }
.t-lead { font-size: var(--t-lead); line-height: 1.45; }
.t-body { font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); }
.t-small { font-size: var(--t-small); line-height: 1.5; }
.t-label {
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.4;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-ink-3);
}
.t-muted { color: var(--c-ink-2); }
.t-faint { color: var(--c-ink-3); }

/* The human voice: italic serif, slightly larger to optically match the sans */
.serif, em.serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.01em;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.grid {
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: var(--s-6);
}
.section { padding-block: var(--section); }
.rule { border: 0; border-top: var(--hairline); margin: 0; }

/* Column spans — mobile is always full width, spans apply from 768px.
   Spans set only the end, so they combine with .start-* (e.g. .span-5.start-8). */
.col-full { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .span-3 { grid-column-end: span 3; } .span-4 { grid-column-end: span 4; } .span-5 { grid-column-end: span 5; }
  .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; }
  .span-10 { grid-column-end: span 10; }
  .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
}
@media (max-width: 767.98px) {
  .grid > * { grid-column: 1 / -1; }
}

/* Keep a word and attached punctuation/serif together when headings are split into words */
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}