/* fontes: frontend/assets/fonts (FONTES.md); recorte latino em WOFF2 */
@font-face {
  font-family: "Gabarito";
  src: url("/assets/fonts/Gabarito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: block;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/AtkinsonHyperlegibleNext-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: block;
}

/* variable.export do FigCraft (só o que o blog usa) */
:root {
  --paleta-creme: #FBF4E9;
  --paleta-creme-escuro: #E8DCC6;
  --paleta-papel: #FFFCF6;
  --paleta-tinta: #1B1F2B;
  --paleta-tinta-suave: #4B4F5C;
  --paleta-tinta-hover: #343A4B;
  --paleta-amarelo: #FFD43B;
  --paleta-framboesa: #9A0F57;
  --paleta-verde-claro: #A9D18E;
  --paleta-amarelo-claro: #FFE7A1;

  --cor-fundo: var(--paleta-creme);
  --cor-superficie: var(--paleta-papel);
  --cor-linha: var(--paleta-creme-escuro);
  --cor-texto: var(--paleta-tinta);
  --cor-texto-suave: var(--paleta-tinta-suave);
  --cor-cartaz: var(--paleta-amarelo);
  --cor-destaque: var(--paleta-framboesa);
  --cor-texto-invertido: var(--paleta-creme);
  --cor-acao: var(--paleta-tinta);
  --cor-acao-hover: var(--paleta-tinta-hover);
  --cor-acao-texto: var(--paleta-creme);
  --cor-foco: var(--paleta-framboesa);
  --cor-foco-invertido: var(--paleta-amarelo);
  --cor-planta-clara: var(--paleta-verde-claro);
  --cor-cartaz-claro: var(--paleta-amarelo-claro);
  --cor-contorno: var(--paleta-tinta);

  --layout-calha: 20px;
  --layout-alvo: 44px;
  --layout-leitura: 620px;
  --texto-leitura: 18px;
  --texto-subtitulo: 24px;
  --texto-titulo-post: 32px;

  --raio-folha: 8px;
  --raio-campo: 12px;
  --raio-balao: 16px;
  --raio-pilula: 999px;
  --raio-etiqueta: 4px;
  --borda-padrao: 2px;
  --borda-objeto: 3px;
  /* variable.export escreve estas duas entre aspas; aqui vão sem, para o aspect-ratio */
  --capa-card: 3 / 2;
  --capa-post: 16 / 9;

  --titulo: "Gabarito", system-ui, sans-serif;
  --texto: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  /* única exceção às duas famílias: código, na monoespaçada do sistema */
  --codigo: ui-monospace, Consolas, "SFMono-Regular", Menlo, monospace;
}
@media (min-width: 900px) {
  :root {
    --layout-calha: 80px;
    --texto-leitura: 19px;
    --texto-subtitulo: 28px;
    --texto-titulo-post: 44px;
  }
}

/* ===== base ===== */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, blockquote, pre, figure { margin: 0; }
html { background: var(--cor-fundo); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: 400 17px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--cor-cartaz); color: var(--cor-texto); }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.rodape :focus-visible { outline-color: var(--cor-foco-invertido); }
.wrap {
  max-width: 1280px; margin-inline: auto;
  padding-inline: max(var(--layout-calha), env(safe-area-inset-left, 0px));
}
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--cor-superficie); color: var(--cor-texto); font: 600 15px/1.3 var(--texto);
  padding: 12px 16px; border: var(--borda-padrao) solid var(--cor-contorno); border-radius: 0 0 var(--raio-folha) 0;
}
.pular:focus { left: 0; }

/* ===== botão: um sistema só, a pílula da landing (componente Botão) ===== */
.nav-cta, .btn-primary, .pag-anterior, .pag-proxima {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 32px; border: 0; border-radius: var(--raio-pilula);
  font: 700 18px/1.2 var(--titulo); text-decoration: none; text-align: center;
  transition: transform 80ms cubic-bezier(.16, 1, .3, 1);
}
.nav-cta, .btn-primary { background: var(--cor-acao); color: var(--cor-acao-texto); }
.nav-cta:hover, .btn-primary:hover { background: var(--cor-acao-hover); }
.nav-cta:active, .btn-primary:active, .pag-anterior:active, .pag-proxima:active { transform: translateY(1px); }

/* ===== topo (componente Topo do blog) ===== */
.topo .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 6px; }
.marca { display: inline-flex; align-items: center; min-height: var(--layout-alvo); font: 900 24px/1 var(--titulo); text-decoration: none; }
.topo nav { display: flex; align-items: center; gap: 32px; }
.nav-blog {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--layout-alvo); font: 700 17px/1.55 var(--texto); text-decoration: none;
}
/* o Blog fica marcado como a seção atual: um traço de amarelo-cartaz embaixo */
.nav-blog::after { content: ""; width: 100%; height: 4px; border-radius: 2px; background: var(--cor-cartaz); }
/* no celular o topo fica só com marca e Blog; o botão vive no bloco do fim do post */
.nav-cta { display: none; }

/* ===== rodapé (componente Rodapé do blog) ===== */
.rodape { background: var(--cor-contorno); color: var(--cor-texto-invertido); }
.rodape .wrap { display: flex; flex-direction: column; gap: 16px; padding-block: 40px 48px; }
.rodape nav { display: flex; flex-direction: column; }
.rodape nav a { display: inline-flex; align-items: center; min-height: var(--layout-alvo); text-decoration: underline; }

main { display: block; }

/* ===== lista (página 07) ===== */
.blog-cabecalho { padding-top: 40px; display: grid; gap: 12px; }
.blog-cabecalho h1, .post-titulo, .erro h1 { font: 800 var(--texto-titulo-post)/1.1 var(--titulo); }
.blog-cabecalho .sub { font-size: 19px; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip, .post-categoria {
  display: inline-flex; align-items: center; min-height: var(--layout-alvo); padding: 0 16px;
  border: var(--borda-padrao) solid var(--cor-linha); border-radius: var(--raio-pilula);
  background: var(--cor-superficie); color: var(--cor-texto);
  font: 600 15px/1.3 var(--texto); text-decoration: none;
}
.chip:hover, .post-categoria:hover { border-color: var(--cor-contorno); }
.chip-ativo { background: var(--cor-cartaz); border-color: var(--cor-contorno); }
.cards {
  display: grid; gap: 24px; margin-top: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* componente Card de post: folha de papel; o título leva o link e cobre o card inteiro */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--cor-superficie); border: var(--borda-padrao) solid var(--cor-linha);
  border-radius: var(--raio-folha); overflow: hidden;
}
.card:hover { border-color: var(--cor-contorno); }
.card:has(a:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.card-capa, .card-capa-vazia { order: -1; width: 100%; aspect-ratio: var(--capa-card); }
.card-capa { object-fit: cover; object-position: center; }
.card-categoria { margin: 20px 20px 0; font: 600 15px/1.3 var(--texto); color: var(--cor-texto-suave); }
.card-titulo { margin: 8px 20px 0; font: 700 24px/1.2 var(--titulo); }
.card-titulo a { text-decoration: none; }
.card-titulo a:focus-visible { outline: 0; }
.card-titulo a::after { content: ""; position: absolute; inset: 0; }
.card-resumo { margin: 8px 20px 0; color: var(--cor-texto-suave); }
.card-data { margin: 8px 20px 20px; font-size: 14px; line-height: 1.45; color: var(--cor-texto-suave); }
/* placeholder de capa: a peça da categoria sobre um campo claro (componente Placeholder de capa) */
.card-capa-vazia, .post-capa-vazia, .vazio-desenho {
  display: flex; align-items: center; justify-content: center; background: var(--cor-planta-clara);
}
[data-peca="janela"], [data-peca="balanca"], .vazio-desenho { background: var(--cor-cartaz-claro); }
.card-capa-vazia img, .post-capa-vazia img, .vazio-desenho img { width: 37%; }
[data-peca="prateleira"] img { width: 66%; }
[data-peca="janela"] img { width: 34%; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 32px; }
.pag-anterior, .pag-proxima {
  padding: 0 14px; background: var(--cor-superficie); color: var(--cor-texto);
  box-shadow: inset 0 0 0 var(--borda-padrao) var(--cor-contorno);
}
.pag-status { font: 600 15px/1.3 var(--texto); color: var(--cor-texto-suave); }
.pag-status:first-child { margin-right: auto; }
.pag-status:last-child { margin-left: auto; }
.vazio {
  display: grid; gap: 20px; margin-top: 24px; padding: 24px;
  background: var(--cor-superficie); border: var(--borda-padrao) solid var(--cor-linha); border-radius: var(--raio-folha);
}
.vazio-desenho { height: 160px; border-radius: var(--raio-folha); }
.vazio-desenho img { width: 104px; }
.vazio-texto { display: grid; gap: 20px; }
.vazio h2 { font: 700 24px/1.2 var(--titulo); }
.vazio a { color: var(--cor-destaque); }
main > :last-child { margin-bottom: 96px; }
main > .post { margin-bottom: 64px; }

/* ===== post (página 08): tipografia de leitura numa coluna de 620 px ===== */
.post { max-width: var(--layout-leitura); margin-inline: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.voltar { display: inline-flex; align-items: center; align-self: flex-start; justify-self: start; min-height: var(--layout-alvo); color: var(--cor-destaque); font-size: var(--texto-leitura); line-height: 1.6; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--cor-texto-suave); }
.post-autor { color: var(--cor-texto-suave); }
.post-capa, .post-capa-vazia { width: 100%; aspect-ratio: var(--capa-post); border-radius: var(--raio-folha); }
.post-capa { object-fit: cover; object-position: center; }
.post-capa-vazia img { width: 30%; }
.post-capa-vazia[data-peca="prateleira"] img { width: 40%; }
.post-capa-vazia[data-peca="janela"] img { width: 20%; }
.post-corpo { font-size: var(--texto-leitura); line-height: 1.6; }
.post-corpo > * + * { margin-top: 20px; }
.post-corpo h2 { margin-top: 40px; font: 700 var(--texto-subtitulo)/1.2 var(--titulo); }
.post-corpo h3, .post-corpo h4 { margin-top: 28px; font: 700 22px/1.25 var(--titulo); }
.post-corpo a { color: var(--cor-destaque); text-decoration: underline; }
.post-corpo ul, .post-corpo ol { padding-left: 1.4em; }
.post-corpo li + li { margin-top: 8px; }
.post-corpo li::marker { color: var(--cor-texto); }
.post-corpo blockquote { padding: 4px 0 4px 24px; border-left: 4px solid var(--cor-cartaz); }
.post-corpo img { width: 100%; border-radius: var(--raio-folha); }
/* legenda: um parágrafo só em itálico logo depois de uma imagem */
.post-corpo p:has(> img) + p:has(> em:only-child) { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--cor-texto-suave); }
.post-corpo p:has(> img) + p > em:only-child { font-style: normal; }
.post-corpo code { font: 0.85em/1.5 var(--codigo); background: var(--cor-superficie); border-radius: var(--raio-etiqueta); padding: 1px 4px; }
.post-corpo pre {
  padding: 16px 20px; overflow-x: auto; background: var(--cor-superficie);
  border: var(--borda-padrao) solid var(--cor-linha); border-radius: var(--raio-campo);
}
.post-corpo pre code { font-size: 16px; padding: 0; background: none; }
.post-corpo hr { height: 2px; margin-block: 32px; border: 0; background: var(--cor-linha); }
/* componente Bloco de CTA: campo amarelo-cartaz com contorno de tinta, como o cartaz */
.cta {
  margin-top: 24px; display: grid; gap: 16px; padding: 24px;
  background: var(--cor-cartaz); border: var(--borda-objeto) solid var(--cor-contorno); border-radius: var(--raio-folha);
}
.cta h2 { font: 700 24px/1.2 var(--titulo); }
.cta .btn-primary { width: 100%; padding-inline: 16px; }

/* ===== erro (página 09): o único lugar do Miu no blog ===== */
/* a página de erro ocupa a largura toda, para a parede verde ir até a borda da tela */
main:has(> .erro) { max-width: none; padding-inline: 0; }
main:has(> .erro) > :last-child { margin-bottom: 0; }
.erro-texto { display: grid; gap: 16px; padding: 40px var(--layout-calha); }
.erro-texto p { font-size: var(--texto-leitura); line-height: 1.6; }
/* parede verde e tampo de tinta; o Miu fica atrás do tampo, com os pés escondidos */
.erro-cena {
  /* abaixo de 360 px o Miu encolhe para o balão caber inteiro à esquerda dele */
  --miu: min(180px, calc(100vw - 180px));
  position: relative; height: 260px; overflow: hidden; background: var(--cor-planta-clara);
}
.erro-cena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--cor-contorno); }
.erro-miu { position: absolute; right: var(--layout-calha); bottom: -10px; width: var(--miu); }
.balao {
  position: absolute; right: calc(var(--layout-calha) + var(--miu) + 13px); top: 118px; width: max-content;
  padding: 12px 16px; border-radius: var(--raio-balao);
  background: var(--cor-contorno); color: var(--cor-texto-invertido); font: 600 18px/1.25 var(--titulo);
}
/* a ponta aponta para o Miu, à direita */
.balao::after {
  content: ""; position: absolute; top: 50%; right: -10px; margin-top: -8px;
  border-left: 12px solid var(--cor-contorno); border-block: 8px solid transparent;
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===== desktop (o modo Desktop do FigCraft) ===== */
@media (min-width: 900px) {
  body { font-size: 18px; }
  .topo .wrap { padding-block: 12px; }
  .nav-blog { font-size: 18px; }
  .nav-cta { display: inline-flex; }
  .rodape .wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-block: 40px; }
  .rodape nav { flex-direction: row; gap: 0 32px; }
  .blog-cabecalho { padding-top: 64px; }
  .blog-cabecalho .sub { font-size: 22px; }
  .chips, .cards { margin-top: 32px; }
  .cards { gap: 32px; }
  .vazio { grid-template-columns: 240px 1fr; align-items: center; gap: 32px; padding: 32px; }
  .vazio h2 { font-size: 28px; }
  main > :last-child { margin-bottom: 120px; }
  main > .post { margin-bottom: 96px; }
  .post { padding-top: 48px; }
  .cta { padding: 32px; }
  .cta h2 { font-size: 28px; }
  .cta .btn-primary { width: auto; justify-self: start; padding-inline: 32px; }
  /* 404: texto na metade esquerda (alinhado à faixa de 1280), a parede verde na metade direita
     até a borda da tela e o Miu no tampo; posições do frame 404 1280 */
  .erro { display: grid; grid-template-columns: 1fr 1fr; min-height: 716px; }
  /* 200% = largura do main: o recuo acompanha a faixa centralizada de 1280 px */
  .erro-texto { align-content: start; padding: 96px 24px 96px max(var(--layout-calha), calc((200% - 1280px) / 2 + var(--layout-calha))); }
  .erro-cena { height: auto; }
  .erro-cena::after { height: 16px; }
  .erro-miu { right: auto; left: 300px; bottom: -11px; width: 224px; }
  .balao { left: 120px; right: auto; top: auto; bottom: 98px; }
}

/* menos movimento: nada se mexe */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}