/* Base: reset, tipografia, botões, grão do fundo e revelação ao rolar. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Grão leve sobre o fundo claro (manual, seção 10). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .25 0 0 0 0 .23 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* Fraunces Italic só em títulos e frases curtas. */
h1, h2, h3, .display {
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: 24px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.lead { font-size: 18px; font-weight: 500; max-width: 46ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--warm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--sage)); }
.btn-soft { background: var(--sage); color: var(--ink); }
.btn-soft:hover { background: color-mix(in srgb, var(--sage) 80%, var(--mint)); }

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