* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background: linear-gradient(var(--soft-line) 1px, transparent 1px), var(--paper);
  background-size: 100% 64px;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-180%); padding: 12px 16px; background: var(--ink); color: white; }
.skip-link:focus { transform: translateY(0); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.brand-mark { display: flex; align-items: center; gap: 2px; width: 27px; height: 27px; padding: 5px; border-radius: 50%; background: var(--ink); }
.brand-mark i { display: block; width: 3px; border-radius: 2px; background: var(--acid); }
.brand-mark i:nth-child(1) { height: 6px; }
.brand-mark i:nth-child(2) { height: 14px; }
.brand-mark i:nth-child(3) { height: 10px; }
.brand-mark i:nth-child(4) { height: 5px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}