/* Type refresh (SF Pro on Apple devices, Inter elsewhere; semibold tight headlines)
   and graphite sections: blocks marked data-tone="light" sit on graphite instead of black. */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fw-light: 600;
  --fw-regular: 600;
  --tracking-title: -0.03em;
  --lh-tight: 1.05;
  --lh-body: 1.5;
}

section[data-tone='light'], .nextlinks {
  --c-paper: #1e1e20;
  --c-card: #2c2c2e;
  --c-card-dark: #111112;
  --c-line: #3a3a3c;
  --c-muted: #a1a1a6;
  background: var(--c-paper);
}
.nextlinks { max-width: none; padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2)) var(--section-y); }

:is(h1, h2, h3) { letter-spacing: -0.025em; }
.cards__title, .shead__title, .faq__title, .footer__title, .portfolio__title, .contact__title, .engineering__title { letter-spacing: -0.035em; line-height: 1.06; }
.about__statement { letter-spacing: -0.03em; line-height: 1.1; }
.bp__title { font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.pcard__text, .card__text, .chain__node p, .ecard__p, .showcase__text, .bpath__list p, .stat__label { font-weight: 400; }
.stat__value, .card__num, .viz__timer, .loader__pct { letter-spacing: -0.04em; }
.faq__item summary { font-weight: 600; letter-spacing: -0.02em; }

/* Pain-card scenes drawn with tokens so they read on black and graphite alike */
.viz { background: var(--c-paper); }
.g-track { stroke: var(--c-line); }
.h-bar { background: var(--c-line); }