/* Reset enxuto + tipografia base. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Barra de rolagem discreta, em bege. scrollbar-color é herdada, então isto
     vale também para a coluna fixa do desktop, que rola por conta.
     Firefox não expõe o polegar a :hover — lá fica bege o tempo todo. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) var(--paper-sunken);
}

/* Chrome e Safari: os pseudoelementos aceitam :hover no polegar, que é o que
   permite o verde só ao passar o mouse.
   Devolver scrollbar-color para 'auto' é obrigatório aqui — com a propriedade
   padrão definida, o Chrome ignora todo o bloco -webkit-scrollbar. */
@supports selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--paper-sunken);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--rule-strong);
    border-radius: 999px;
    /* A borda na cor do trilho afina o polegar sem estreitar a área de clique. */
    border: 2px solid var(--paper-sunken);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--green);
  }

  ::-webkit-scrollbar-thumb:active {
    background: var(--green-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100svh;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Trocar a seleção substitui as diretrizes inteiras e muda a altura da
     página. O scroll anchoring tentaria "segurar" o que estava na tela,
     empurrando a rolagem para compensar — e desfazendo a subida até o início
     das diretrizes. Precisa ficar no contêiner de rolagem: aplicado só no
     bloco que muda, o navegador escolhe outro elemento como âncora e o
     empurrão acontece do mesmo jeito. */
  overflow-anchor: none;
}

/* Trama de linho: duas hachuras diagonais bem fracas, o suficiente para o
   fundo não ler como bloco chapado de cor. Fica atrás de tudo e não intercepta
   clique. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--ink) 3%, transparent) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--ink) 2%, transparent) 0 1px,
      transparent 1px 9px
    );
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: color-mix(in srgb, var(--green) 26%, transparent);
}

/* Rótulos em versalete espaçado — a marca tipográfica da direção editorial. */
.label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}