/* base.css v2: reset, tipografia, layout, movimento "plotter" (desenvolvedor-web) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; padding-top: var(--header-h);
  background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-text); font-weight: var(--weight-text); font-size: var(--text-base);
  line-height: var(--leading-body); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
img[loading="lazy"] { background: var(--color-line); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
figure, blockquote, dl, dd { margin: 0; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 200; background: var(--color-ink); color: var(--color-paper); padding: var(--space-3) var(--space-5); }
.skip-link:focus { top: var(--space-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: var(--space-section); }
main > :last-child { margin-bottom: var(--space-section); }
main > .band:last-child { margin-bottom: 0; }

/* ---- tipografia ---- */
.display {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
}
.display em { font-style: italic; }
.display--xl { font-size: var(--text-3xl); }
.display--light { color: var(--color-on-band); }
.dot { color: var(--color-dot); }
.band .dot, .site-footer .dot { color: var(--color-dot-on-band); }
.mono { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; line-height: 1.5; }
.muted { color: var(--color-ink-muted); }
.muted-dark { color: var(--color-on-band-muted); }
.lead { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; }
.prose { max-width: var(--measure); }

/* rotulo de secao com linha que se desenha */
.label { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-ink-muted); }
.label__n { color: var(--color-redline-text); }
.label::after { content: ""; flex: 1; height: 1px; background: var(--color-ink); transform-origin: left; transform: scaleX(1); }
.band .label { color: var(--color-on-band-muted); }
.band .label::after { background: var(--color-on-band-muted); }

/* link de texto */
.text-link { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: underline; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-fast); }
.text-link:hover { text-decoration-color: var(--color-redline); text-decoration-thickness: 2px; }

/* faixa nanquim */
.band { background: var(--color-band); color: var(--color-on-band); padding-block: var(--space-section); margin-top: var(--space-section); }
.band a:not(.btn) { color: inherit; }

/* ---- movimento "plotter" ---- */
.js .reveal { clip-path: inset(-24px -24px 100% -24px); transition: clip-path var(--dur-draw) var(--ease-draw); }
.js .reveal.is-in { clip-path: inset(-24px); }
.js .draw::after, .js .draw.dim::before { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-draw); }
.js .draw.is-in::after, .js .draw.dim.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { clip-path: none; transition: none; }
  .js .draw::after, .js .draw.dim::before { transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}