/* Reset, page and layout. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text-md)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0 0 var(--s2); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
p { margin: 0 0 var(--s3); }
a { color: var(--accent); text-underline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: var(--s3); top: -100px; z-index: 20; background: var(--surface); padding: var(--s2) var(--s3); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.skip:focus { top: var(--s3); }

/* the app: side navigation beside a stage that holds the top bar and the page */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.stage { min-width: 0; display: flex; flex-direction: column; }
.stage > main { flex: 1; }
.wrap { max-width: 1240px; margin: 0 auto; padding: var(--s5); }
.narrow { max-width: 440px; margin: 7vh auto 0; padding: 0 var(--s4); }
.page-head { margin-bottom: var(--s5); }
.page-head h1 { margin-bottom: var(--s1); }
.page-head p { margin: 0; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.grid2 > * { min-width: 0; }
.mt { margin-top: var(--s4); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }
.spacer { flex: 1; }
.scroll { overflow-x: auto; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}