/* design-kit base: reset + typography + accessibility. Load AFTER tokens.css. */
/* ============================================================
Width bands — the kit's single breakpoint vocabulary.
Use the names when talking and planning; use the literals in CSS.
narrow < 640px one column; thumb reach; one primary action
medium 640–1023px its own composition, usually two columns —
never "desktop with the columns knocked over"
wide ≥ 1024px the desktop design
@custom-media isn't baseline yet, so bands are literals kept in
this one file. The kit's selftest pins exactly these values —
write only:
narrow: @media (max-width: 639px)
medium: @media (min-width: 640px) and (max-width: 1023px)
wide: @media (min-width: 1024px)
A component that should break where IT runs out of room (not where
the viewport does) uses a container query instead, e.g.
@container (max-width: 44rem) — .container below is a container.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0; background: var(--color-bg); color: var(--color-text);
font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-family: var(--font-heading); font-weight: var(--weight-heading);
letter-spacing: var(--tracking-heading); line-height: var(--leading-heading);
margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(var(--step-4), 6vw, var(--step-6)); }
h2 { font-size: clamp(var(--step-3), 4vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--space-4); }
small, .small { font-size: var(--step-n1); }
.muted { color: var(--color-muted); }
.lead { font-size: var(--step-1); color: var(--color-muted); }
@media (max-width: 639px) { .lead { font-size: var(--step-0); } } /* a lede at --step-1 costs a full line-block of fold space at narrow */
a { color: var(--color-accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, pre { font-family: var(--font-mono); }
:not(pre) > code { font-size: 0.92em; }
pre code { font-size: inherit; }
.num { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--color-accent-soft); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--color-surface); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip-link:focus { top: var(--space-4); }
/* layout helpers */
/* .container is also a size container: components inside it (.split, cards,
grids) can respond to the space they actually get via @container. Note it
becomes a containing block, so keep fixed-position bars as body children. */
.container { width: min(100% - 2 * var(--space-5), 1200px); margin-inline: auto; container-type: inline-size; }
.container-narrow { width: min(100% - 2 * var(--space-5), 720px); margin-inline: auto; container-type: inline-size; }
.section { padding-block: var(--space-9); }
@media (max-width: 639px) { .section { padding-block: var(--space-7); } }
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; }
/* .cta-row — a CTA group. Put the primary button FIRST. At narrow it goes
full-width stacked (the sanctioned phone treatment); a plain secondary
centers under the buttons. Never ship a ragged wrapped button pair. */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 639px) {
.cta-row { flex-direction: column; align-items: stretch; text-align: center; }
/* a plain secondary stacks under the buttons but must still be a
44px touch target — center it in a real box, not a bare text line */
.cta-row > a:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
}
/* .grid auto-fits against the space it is given, so inside .container it is
already container-aware — no media queries needed. Use .grid-3 when the
design calls for exactly three columns at wide. */
.grid { display: grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
.grid-3 { display: grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) and (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } /* medium keeps two columns */
@media (max-width: 639px) { .grid-3 { grid-template-columns: 1fr; } }
/* .split collapses where the SPLIT runs out of room, not where the viewport
does: the container query covers splits inside .container (the normal case);
the narrow-band literal is the fallback for splits outside a container.
At medium a split inside a wide-enough container legitimately stays 2-col. */
.split { display: grid; gap: var(--space-7); grid-template-columns: 5fr 7fr; align-items: center; }
.split.reverse { grid-template-columns: 7fr 5fr; }
@container (max-width: 44rem) {
.split, .split.reverse { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 639px) {
.split, .split.reverse { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}