/* ==========================================================================
   Base: reset, typography, focus, small utilities.
   Requires tokens.css. Load fonts (Instrument Serif + Inter) in your <head>.
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--page);
  background-image:
    radial-gradient(40% 40% at 8% 0%, var(--w1), transparent 70%),
    radial-gradient(40% 40% at 100% 6%, var(--w2), transparent 70%),
    radial-gradient(50% 40% at 60% 100%, var(--w3), transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  font: var(--fs-body)/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elements that force a theme locally pick up its ink colour. */
[data-theme="light"], [data-theme="dark"] { color: var(--ink); }

img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
::selection { background: color-mix(in srgb, var(--blue) 24%, transparent); }

/* --- Typography --- */
/* Headings use the serif display face at regular weight. An <em> inside a
   heading turns coral (and italic): one accent word per heading at most. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
h1, .h1 { font: 400 clamp(30px, 4vw, 44px)/1.05 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
h2, .h2 { font: 400 32px/1.1 var(--serif); text-wrap: balance; }
h3, .h3 { font: 400 26px/1 var(--serif); }
h4, .h4 { font: 400 24px/1.1 var(--serif); }
h5, .h5 { font: 400 20px/1.1 var(--serif); }
h6, .h6 { font: 600 var(--fs-body)/1.3 var(--sans); }
.display { font: 400 clamp(40px, 7vw, 72px)/1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }

h1 em, h2 em, h3 em, h4 em, h5 em,
.h1 em, .h2 em, .h3 em, .h4 em, .h5 em, .display em { color: var(--coral); }

/* Uppercase, letter-spaced label: section captions, kickers, table heads. */
.label, .kicker {
  font-size: var(--fs-label); font-weight: var(--fw-label);
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  color: var(--ink-3);
}

.lead { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 68ch; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); font-weight: 400; }

code, kbd, samp, pre { font-family: var(--mono); font-size: .92em; }
code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--page-2); }
pre { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--page-2); overflow-x: auto; line-height: 1.5; }
pre code { padding: 0; background: none; }
mark { color: inherit; background: color-mix(in srgb, var(--yellow) 26%, transparent); border-radius: 3px; padding: 0 2px; }

/* Long-form reading text (articles, docs, marketing pages).
   Larger than the dense UI text; same families and ink scale. */
.prose { font-size: var(--fs-prose); line-height: 1.65; color: var(--ink-2); max-width: 66ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; color: var(--ink); }
.prose h3 { margin-top: 1.4em; color: var(--ink); font-size: 24px; line-height: 1.1; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a, a.link { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { font: italic 400 24px/1.3 var(--serif); color: var(--ink); border-left: 2px solid var(--coral); padding: 2px 0 2px 18px; }
.prose figcaption { font-size: var(--fs-small); color: var(--ink-3); margin-top: 6px; }

/* --- Focus: one visible blue ring, keyboard only --- */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
:focus:not(:focus-visible) { outline: none; }

/* --- Icons (stroke icons on a 24 grid, see icons/) --- */
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 14px; height: 14px; }
.ic.lg { width: 20px; height: 20px; }

/* --- Layout utilities --- */
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stack.tight { gap: 6px; }
.sp { flex: 1; }
.pad { padding: 14px var(--gutter); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Accent helpers: set --c, which tinted components read. */
.c-blue { --c: var(--blue); }   .c-coral { --c: var(--coral); }  .c-orange { --c: var(--orange); }
.c-yellow { --c: var(--yellow); } .c-green { --c: var(--green); } .c-violet { --c: var(--violet); }
.c-grey { --c: var(--grey); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}