body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
}
h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.12;
}
h2 {
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  line-height: 1.2;
}
h3 {
  font-size: 1.4rem;
  line-height: 1.3;
}
h4 {
  font-size: 1.1rem;
}
p {
  font-size: 1rem;
  line-height: 1.7;
}
strong {
  font-weight: 600;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

@keyframes glow-page-in {
  from { opacity: 0; transform: translateX(-2rem); }
  to { opacity: 1; transform: none; }
}
@keyframes glow-page-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(2rem); }
}
@keyframes glow-toast-in {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to { opacity: 1; transform: none; }
}

main.glow-page {
  animation: glow-page-in 0.5s ease backwards;
}
body.is-leaving main.glow-page {
  animation: glow-page-out 0.22s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  main.glow-page,
  body.is-leaving main.glow-page {
    animation: none;
  }
}