:root {
  color-scheme: light;
  --day: #f6f5f1;
  --day-soft: #ebe9e2;
  --ink: #101214;
  --muted: #686b6c;
  --hairline: color-mix(in srgb, currentColor 18%, transparent);
  --ember: #bd543f;
  --dusk: #6b5551;
  --night: #070912;
  --night-soft: #11162b;
  --violet: #30284c;
  --sleep-blue: #789fd0;
  --dawn: #819eb8;
  --page-bg: var(--day);
  --page-fg: var(--ink);
  --page-muted: var(--muted);
  --gutter: clamp(1.25rem, 5.2vw, 6rem);
  --section-max: 90rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.65, 0, .35, 1);
  --display: clamp(5.5rem, 19vw, 17rem);
  --number: clamp(4.25rem, 13.5vw, 12rem);
  --chapter: clamp(2.9rem, 7vw, 7rem);
  --label: clamp(.7rem, .85vw, .78rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--page-bg); }
body {
  margin: 0;
  min-width: 20rem;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }
svg { display: block; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  background: var(--page-fg);
  color: var(--page-bg);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(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;
}