/* Resets and document rhythm. No component rules here. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
p  { margin: 0 0 var(--s-4); text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, button, textarea, select { font: inherit; color: inherit; }
input, textarea { background: var(--surface); }
::placeholder { color: var(--text-soft); }
::selection { background: var(--accent-tint); }

/* iOS zooms any field under 16px on focus. */
@media (max-width: 619px) { input, textarea, select { font-size: 16px !important; } }

/* Containers */
.wrap { width: 100%; max-width: var(--container-page); margin-inline: auto; padding-inline: var(--gutter-mobile); }
.wrap--app { max-width: var(--container-app); }
.wrap--doc { max-width: var(--container-doc); }
.wrap--wide { max-width: var(--container-page); }

@media (min-width: 768px)  { .wrap { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1280px) { .wrap { padding-inline: var(--gutter); } }

.site-main { display: block; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  z-index: var(--z-toast); clip: auto; width: auto; height: auto;
  padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-md);
}

/* Sections */
.section { padding-block: var(--s-9); }
.section__title { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.section__lede { color: var(--text-muted); margin-bottom: var(--s-5); }

.page-head { padding-block: var(--s-6) var(--s-5); }
.page-head__title { margin-bottom: var(--s-2); }
.page-head__lede { color: var(--text-muted); margin: 0; max-width: 62ch; }