:root { font: 16px/1.6 Poppins, system-ui, sans-serif; color: #213b2b; background: #f8f6eb; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid #a04f36; outline-offset: 4px; }
.wrap { width: min(100% - 2rem, 62rem); margin-inline: auto; }
.faixa { margin: 0; padding: .65rem 1rem; background: #213b2b; color: white; text-align: center; font-size: .8rem; }
header { padding: 1rem 0; border-bottom: 1px solid #cad4bc; font-weight: 700; }
main { padding-block: 1.75rem; }
.hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 1rem 2rem; }
.hero svg { width: 100%; height: auto; }
h1, h2 { font-family: Georgia, serif; line-height: 1.1; }
h1 { margin: .25em 0; font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { margin: .45em 0; font-size: 1.45rem; }
.tag { color: #75442e; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; }
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.grade article { padding: 1rem; background: #fffdf5; border: 1px solid #cad4bc; border-radius: .55rem; }
.grade a, .leitura > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.leitura { max-width: 64ch; }
footer { border-top: 1px solid #cad4bc; padding-block: 1rem; font-size: .8rem; }
@media (max-width: 650px) { .hero, .grade { grid-template-columns: 1fr; } }