*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  max-width: 60rem;
  margin: 0 auto;
}
.brand { font-weight: 800; text-decoration: none; font-size: var(--text-md); }
.brand__tag { display: block; font-size: 0.7rem; font-weight: 600; color: var(--color-ink-soft); }

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
  animation: fade-in var(--motion-calm) ease both;
}
.page:focus { outline: none; }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}