html {
  scroll-behavior: smooth;
}

html,
body {
  /* O painel do menu mobile fica fora da tela via translateX além do próprio
     viewport; sem isso, alguns navegadores ainda contam esse espaço no
     scrollWidth do documento e criam rolagem horizontal indevida. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-background);
}

::selection {
  background: var(--color-brand-yellow);
  color: var(--color-brand-dark);
}

a {
  transition: color var(--transition-fast);
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.section-dark :focus-visible {
  outline-color: var(--color-brand-yellow);
}

main section {
  padding-block: var(--space-2xl);
}

address {
  font-style: normal;
  margin-block: var(--space-sm);
}