/* Element defaults and global utilities. */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Safety net: nothing may widen the page. Phones zoom the whole site out when it does.
     'clip' (unlike 'hidden') doesn't create a scroll container, so the sticky header keeps working. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + 16px);
  -webkit-text-size-adjust: 100%;
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--color-ink); line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
code { font-size: .9em; background: var(--color-surface); padding: 1px 6px; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* default icon sizing */
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* utilities */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--color-ink); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 12px; }