/* ZAPINK — type. Two families: a Swiss grotesque for text, a mono for system labels. */
:root{
  --font-grotesque:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --font-display:var(--font-grotesque);
  --font-text:var(--font-grotesque);
  --font-label:var(--font-mono);

  /* weight: hierarchy comes from size + space, almost never from weight */
  --w-light:300; /* @kind font */ --w-regular:400; /* @kind font */ --w-medium:500; /* @kind font */ --w-semibold:600; /* @kind font */

  /* scale — aggressive: massive headlines, tiny metadata. 1280 baseline. */
  --t-d1:112px; /* @kind font */ --t-d1-lh:0.90; /* @kind font */ --t-d1-ls:-0.045em; /* @kind font */
  --t-d2:76px; /* @kind font */ --t-d2-lh:0.94; /* @kind font */ --t-d2-ls:-0.035em; /* @kind font */
  --t-d3:52px; /* @kind font */ --t-d3-lh:0.98; /* @kind font */ --t-d3-ls:-0.028em; /* @kind font */
  --t-h1:34px; /* @kind font */ --t-h1-lh:1.08; /* @kind font */ --t-h1-ls:-0.02em; /* @kind font */
  --t-h2:24px; /* @kind font */ --t-h2-lh:1.15; /* @kind font */ --t-h2-ls:-0.015em; /* @kind font */
  --t-h3:18px; /* @kind font */ --t-h3-lh:1.25; /* @kind font */ --t-h3-ls:-0.01em; /* @kind font */
  --t-body:16px; /* @kind font */ --t-body-lh:1.55; /* @kind font */ --t-body-ls:-0.006em; /* @kind font */
  --t-small:14px; /* @kind font */ --t-small-lh:1.5; /* @kind font */ --t-small-ls:0em; /* @kind font */
  --t-meta:12px; /* @kind font */ --t-meta-lh:1.35; /* @kind font */ --t-meta-ls:0.02em; /* @kind font */
  --t-label:11px; /* @kind font */ --t-label-lh:1.2; /* @kind font */ --t-label-ls:0.13em; /* @kind font */  /* uppercase mono */
  --t-micro:9px; /* @kind font */ --t-micro-lh:1.1; /* @kind font */ --t-micro-ls:0.16em; /* @kind font */ /* tick numerals, revision ids */

  --measure-prose:62ch; /* @kind spacing */
  --measure-note:44ch; /* @kind spacing */
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-text);font-size:var(--t-body);line-height:var(--t-body-lh);letter-spacing:var(--t-body-ls);color:var(--text-body);background:var(--bg-page)}
/* type utilities — the same values the JSX components use */
.sb-d1{font:var(--w-regular) var(--t-d1)/var(--t-d1-lh) var(--font-display);letter-spacing:var(--t-d1-ls)}
.sb-d2{font:var(--w-regular) var(--t-d2)/var(--t-d2-lh) var(--font-display);letter-spacing:var(--t-d2-ls)}
.sb-d3{font:var(--w-regular) var(--t-d3)/var(--t-d3-lh) var(--font-display);letter-spacing:var(--t-d3-ls)}
.sb-h1{font:var(--w-regular) var(--t-h1)/var(--t-h1-lh) var(--font-display);letter-spacing:var(--t-h1-ls)}
.sb-h2{font:var(--w-regular) var(--t-h2)/var(--t-h2-lh) var(--font-display);letter-spacing:var(--t-h2-ls)}
.sb-h3{font:var(--w-medium) var(--t-h3)/var(--t-h3-lh) var(--font-display);letter-spacing:var(--t-h3-ls)}
.sb-body{font:var(--w-regular) var(--t-body)/var(--t-body-lh) var(--font-text)}
.sb-small{font:var(--w-regular) var(--t-small)/var(--t-small-lh) var(--font-text)}
.sb-meta{font:var(--w-regular) var(--t-meta)/var(--t-meta-lh) var(--font-mono);letter-spacing:var(--t-meta-ls);color:var(--text-meta)}
.sb-label{font:var(--w-medium) var(--t-label)/var(--t-label-lh) var(--font-mono);letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-meta)}
.sb-micro{font:var(--w-regular) var(--t-micro)/var(--t-micro-lh) var(--font-mono);letter-spacing:var(--t-micro-ls);text-transform:uppercase;color:var(--ink-4)}
a{color:var(--system);text-decoration:none;border-bottom:1px solid var(--system-tint);transition:color .18s cubic-bezier(.2,0,.2,1),border-color .18s cubic-bezier(.2,0,.2,1)}
a:hover{color:var(--system-press);border-bottom-color:var(--system)}