:root {
  --page: #fafaf8;
  --ink: #171717;
  --muted: #525252;
  --action: #202020;
  --action-hover: #383838;
  --on-action: #ffffff;
  --focus: #1d4ed8;
  --page-width: 64rem;
  --gutter: 1.5rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink);
  font: 1rem/1.6 system-ui, sans-serif; }
header, main { max-width: var(--page-width); margin-inline: auto;
  padding: 1.5rem var(--gutter); }
h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.1;
  max-width: 18ch; overflow-wrap: break-word; }
p { max-width: 60ch; color: var(--muted); }
.button-primary { display: inline-flex; align-items: center;
  min-height: 44px; padding: .65rem 1rem; border-radius: .375rem;
  background: var(--action); color: var(--on-action);
  text-decoration: none; }
.button-primary:hover { background: var(--action-hover); }
.button-primary:focus-visible { outline: 3px solid var(--focus);
  outline-offset: 3px; }
#access { margin-top: 4rem; }