/* Blog da ALYAH: mesma paleta e fontes do site (marfim, tinta e dourado), sem efeito pesado. */
:root {
  --claro: #F5F2EC; --porcelana: #FCFAF5; --areia: #ECE5D7; --champanhe: #E8DBC0;
  --tinta: #17140F; --escuro: #0E0E10; --taupe: #5E574D; --ouro: #C4A35A;
  --ouro-tx: #7F6128; --ouro-em: #96722C; --ouro-fundo: #74571F;
  --linha: rgba(23,20,15,.13); --filete: rgba(196,163,90,.55);
  --f-corpo: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--claro); color: var(--tinta); font-family: var(--f-corpo); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--champanhe); }
:focus-visible { outline: 2px solid var(--ouro-tx); outline-offset: 3px; border-radius: 2px; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 10px var(--gut); background: rgba(245,242,236,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 800; font-stretch: 84%; font-size: 19px; letter-spacing: .05em; }
.marca-logo { width: 28px; height: 28px; flex: none; background: currentColor; -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; }
.topo nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.topo nav a { text-decoration: none; color: var(--taupe); padding: 10px 0; }
.topo nav a:hover, .topo nav a[aria-current] { color: var(--tinta); }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--tinta); color: var(--claro); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .3s var(--ease), color .3s var(--ease); }
.btn:hover { background: var(--ouro); color: var(--escuro); }
.btn svg { width: 16px; height: 16px; }
.topo .btn { margin-left: 4px; }
@media (max-width: 720px) { .topo nav { display: none; } .topo .btn { margin-left: auto; padding: 0 16px; font-size: 14px; } }

/* Rótulos e títulos */
.rotulo { font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ouro-tx); }
.titulo { font-weight: 700; font-stretch: 86%; letter-spacing: -.02em; line-height: 1.02; }
.titulo em { font-family: var(--f-serif); font-weight: 400; font-style: italic; font-stretch: 100%; letter-spacing: 0; color: var(--ouro-em); }

/* Lista de artigos */
.capa { padding: clamp(56px, 10vw, 120px) var(--gut) clamp(32px, 5vw, 56px); max-width: 1200px; margin: 0 auto; }
.capa .titulo { font-size: clamp(48px, 9vw, 112px); margin: 18px 0 22px; }
.capa p.sub { max-width: 46ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--taupe); }
.lista { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut) clamp(64px, 9vw, 120px); }
.ano { display: grid; grid-template-columns: 120px 1fr; gap: 24px; border-top: 1px solid var(--tinta); padding-top: 18px; margin-top: 40px; }
.ano > h2 { font: 400 clamp(34px, 4vw, 48px)/1 var(--f-serif); font-style: italic; color: var(--ouro-em); }
.ano ol { list-style: none; }
.item { border-bottom: 1px solid var(--linha); }
.item a { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 22px 0; text-decoration: none; }
.item h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 650; font-stretch: 90%; letter-spacing: -.01em; line-height: 1.2; transition: color .3s var(--ease); }
.item p { grid-column: 1; color: var(--taupe); font-size: 16px; max-width: 70ch; }
.item .meta { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right; font: 500 12px/1.7 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--taupe); white-space: nowrap; }
.item a:hover h3 { color: var(--ouro-tx); }
@media (max-width: 720px) {
  .ano { grid-template-columns: 1fr; gap: 4px; }
  .item a { grid-template-columns: 1fr; }
  .item .meta { grid-column: 1; grid-row: auto; text-align: left; order: -1; }
}

/* Artigo */
.artigo { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gut) 24px; }
.voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--taupe); }
.voltar:hover { color: var(--tinta); }
.artigo .rotulo { margin-top: 28px; }
.artigo h1 { font-size: clamp(38px, 6vw, 64px); margin: 14px 0 22px; }
.artigo .lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--taupe); padding-bottom: 28px; border-bottom: 1px solid var(--filete); }
.corpo { padding-top: 12px; }
.corpo h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; font-stretch: 88%; letter-spacing: -.015em; line-height: 1.15; margin: 44px 0 12px; }
.corpo h3 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; }
.corpo p { margin: 14px 0; }
.corpo ul, .corpo ol { margin: 14px 0 14px 1.2em; }
.corpo li { margin: 8px 0; padding-left: 4px; }
.corpo li::marker { color: var(--ouro-tx); }
.corpo strong { font-weight: 700; }
.corpo a { color: var(--ouro-tx); text-underline-offset: 3px; }
.corpo blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--ouro); font: 400 italic clamp(22px, 2.6vw, 27px)/1.35 var(--f-serif); }
.corpo .quadro { margin: 28px 0; padding: 22px 24px; background: var(--porcelana); border: 1px solid var(--linha); border-radius: 14px; }
.corpo .quadro > :first-child { margin-top: 0; }
.corpo .quadro > :last-child { margin-bottom: 0; }
.corpo .resposta { margin-top: 20px; background: var(--areia); border-color: transparent; border-left: 3px solid var(--ouro); border-radius: 4px 14px 14px 4px; }
.corpo .resposta .rotulo { color: var(--ouro-fundo); margin-bottom: 6px; }
.corpo .resposta p:last-child { font-size: 18px; line-height: 1.55; }

/* Chamada no fim do artigo */
.chamada { max-width: 760px; margin: 40px auto 0; padding: 0 var(--gut); }
.chamada > div { background: var(--escuro); color: var(--claro); border-radius: 18px; padding: clamp(26px, 4vw, 40px); }
.chamada .rotulo { color: var(--ouro); }
.chamada p.t { font-size: clamp(24px, 3vw, 32px); font-weight: 700; font-stretch: 88%; line-height: 1.15; margin: 10px 0 8px; }
.chamada p.t em { font: 400 italic 1.08em var(--f-serif); color: var(--ouro); }
.chamada p.d { color: rgba(245,242,236,.7); margin-bottom: 22px; max-width: 52ch; }
.chamada .btn { background: var(--ouro); color: var(--escuro); }
.chamada .btn:hover { background: var(--claro); }

/* Leia também */
.mais { max-width: 760px; margin: 56px auto 0; padding: 0 var(--gut); }
.mais ul { list-style: none; margin-top: 10px; border-top: 1px solid var(--tinta); }
.mais li a { display: block; padding: 16px 0; border-bottom: 1px solid var(--linha); text-decoration: none; font-weight: 600; font-size: 18px; }
.mais li a:hover { color: var(--ouro-tx); }

/* Rodapé */
.rodape { margin-top: clamp(64px, 9vw, 112px); background: var(--escuro); color: rgba(245,242,236,.7); padding: 36px var(--gut); font-size: 14px; }
.rodape > div { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape a { text-decoration: none; display: inline-block; padding: 6px 0; }
.rodape a:hover { color: var(--ouro); }