/* base.css — reset enxuto + padrões de elemento (tipografia, links, foco).
   Nada de layout aqui (ver layout.css). */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: var(--leading);
    color: var(--ink);
    background-color: var(--paper);
}

/* Headlines e botões em sans */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    line-height: 1.2;
    font-weight: 700;
}
h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
h3 { font-size: 1.25rem; }

p, ul, ol { max-width: var(--measure); }
p + p { margin-top: var(--space-3); }

a { color: var(--ink); text-underline-offset: 0.15em; }

/* Sublinhado "a lápis": risco que se desenha da esquerda p/ a direita no
   hover/foco, sem sublinhado em repouso.
   Vale para links de conteúdo e do header; botões (.btn/.icon-btn) ficam fora. */
main a:not(.btn):not(.icon-btn),
.site-nav a {
    position: relative;
    text-decoration: none;
}
main a:not(.btn):not(.icon-btn)::after,
.site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.12em;
    height: 0.14em;
    background: var(--accent);
    border-radius: 999px;
    filter: url(#rough-3);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease-out;
    pointer-events: none;
}
main a:not(.btn):not(.icon-btn):hover::after,
main a:not(.btn):not(.icon-btn):focus-visible::after,
.site-nav a:hover::after,
.site-nav a:focus-visible::after {
    transform: scaleX(1);
}

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

/* Foco visível e consistente (acessibilidade) */
:focus-visible {
    outline: var(--border-w) solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}