/* Fernando Bonafé — folha de estilo única, sem framework e sem build. */

:root {
  --cor-fundo: #faf7f1;
  --cor-fundo-alt: #f1ede4;
  --cor-tinta: #1b1b19;
  --cor-tinta-suave: #4a4843;
  --cor-verde: #2f4739;
  --cor-verde-escuro: #1f3227;
  --cor-terra: #9a5a37;
  --cor-linha: #d8d2c4;
  --cor-branco: #fffdf9;

  --fonte-serifada: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --fonte-sem-serifa: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --largura-maxima: 1180px;
  --coluna-leitura: 68ch;
  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.75rem;
  --espaco-4: 3rem;
  --espaco-5: 5rem;

  --transicao: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

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

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

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte-sem-serifa);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--cor-verde-escuro); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--cor-terra); }

:focus-visible {
  outline: 3px solid var(--cor-terra);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--espaco-2);
  top: -3rem;
  background: var(--cor-tinta);
  color: var(--cor-branco);
  padding: 0.6em 1em;
  border-radius: 3px;
  z-index: 100;
  transition: top var(--transicao);
}
.skip-link:focus { top: var(--espaco-2); }

.wrap {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--espaco-3);
}

/* Cabeçalho */

.site-header {
  border-bottom: 1px solid var(--cor-linha);
  background: var(--cor-fundo);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding-block: 0.9rem;
}

.brand {
  font-family: var(--fonte-serifada);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cor-tinta);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.brand:hover { color: var(--cor-verde-escuro); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--cor-linha);
  border-radius: 4px;
  padding: 0.4em 0.8em;
  font: inherit;
  cursor: pointer;
  color: var(--cor-tinta);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: var(--cor-tinta);
  font-size: 0.98rem;
}
.site-nav a[aria-current="page"] {
  color: var(--cor-verde-escuro);
  border-bottom: 2px solid var(--cor-terra);
  padding-bottom: 0.2em;
}

/* Menu mobile só se comporta como colapsável quando o JS adiciona .js ao html */
html.js .nav-toggle { display: inline-block; }

@media (max-width: 640px) {
  html.js .site-nav { display: none; }
  html.js .site-nav.aberto { display: block; padding-block: var(--espaco-2); }
  html.js .site-nav ul { flex-direction: column; gap: var(--espaco-2); }
}

/* Rodapé */

.site-footer {
  border-top: 1px solid var(--cor-linha);
  margin-top: var(--espaco-5);
  padding-block: var(--espaco-4);
  background: var(--cor-fundo-alt);
  color: var(--cor-tinta-suave);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  justify-content: space-between;
  align-items: baseline;
}

.footer-links { list-style: none; display: flex; gap: var(--espaco-3); margin: 0; padding: 0; }

/* Tipografia geral */

h1, h2, h3, h4 {
  font-family: var(--fonte-serifada);
  line-height: 1.2;
  color: var(--cor-tinta);
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.25rem; }

.lede {
  font-size: 1.2rem;
  max-width: var(--coluna-leitura);
  color: var(--cor-tinta-suave);
}

.coluna-leitura {
  max-width: var(--coluna-leitura);
}

.assinatura {
  font-family: var(--fonte-serifada);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--cor-verde-escuro);
}

.meta-mono {
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  color: var(--cor-tinta-suave);
  letter-spacing: 0.02em;
}

/* Seções e espaçamento editorial */

.section { padding-block: var(--espaco-5); }
.section + .section { border-top: 1px solid var(--cor-linha); }
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
  flex-wrap: wrap;
}

/* Hero da página inicial */

.hero {
  padding-block: var(--espaco-5);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(47,71,57,0.10), transparent 55%),
    var(--cor-fundo);
}
.hero-obra {
  border: 1px solid var(--cor-linha);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--espaco-4);
}
.hero-texto h1 { margin-bottom: var(--espaco-1); }
.hero-acoes { display: flex; gap: var(--espaco-2); flex-wrap: wrap; margin-top: var(--espaco-3); }

/* Botões */

.btn {
  display: inline-block;
  padding: 0.75em 1.4em;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn-primario { background: var(--cor-verde-escuro); color: var(--cor-branco); }
.btn-primario:hover { background: var(--cor-tinta); color: var(--cor-branco); }
.btn-secundario { border-color: var(--cor-tinta); color: var(--cor-tinta); }
.btn-secundario:hover { border-color: var(--cor-terra); color: var(--cor-terra); }

/* Grades de cartões (séries, projetos, textos) */

.grade {
  display: grid;
  gap: var(--espaco-4) var(--espaco-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cartao { display: flex; flex-direction: column; gap: 0.6rem; }
.cartao-capa {
  border: 1px solid var(--cor-linha);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cor-fundo-alt);
}
.cartao-capa img { width: 100%; height: 100%; object-fit: cover; }
.cartao h3 { margin: 0; }
.cartao h3 a { text-decoration: none; color: var(--cor-tinta); }
.cartao h3 a:hover { color: var(--cor-verde-escuro); }
.cartao .meta-mono { display: block; }
.cartao p { margin: 0.2rem 0 0; color: var(--cor-tinta-suave); }

/* Aviso de conteúdo de exemplo */

.aviso-exemplo {
  border: 1px dashed var(--cor-terra);
  background: #fbf1e8;
  color: #6b3d20;
  padding: 0.9em 1.1em;
  border-radius: 4px;
  font-size: 0.92rem;
  margin-bottom: var(--espaco-3);
}

.placeholder {
  color: var(--cor-tinta-suave);
  font-style: italic;
}

/* Trilha (breadcrumb) */

.trilha {
  font-size: 0.88rem;
  color: var(--cor-tinta-suave);
  margin-bottom: var(--espaco-3);
}
.trilha a { color: inherit; }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3em; padding: 0; margin: 0; }
.trilha li:not(:last-child)::after { content: "/"; margin-left: 0.3em; color: var(--cor-linha); }

/* Página de obra */

.obra-imagens { display: grid; gap: var(--espaco-2); margin-bottom: var(--espaco-3); }
.obra-imagem-principal { border: 1px solid var(--cor-linha); border-radius: 3px; overflow: hidden; }
.obra-imagem-principal a { display: block; }
.obra-detalhes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--espaco-2); }
.obra-detalhes a { display: block; border: 1px solid var(--cor-linha); border-radius: 3px; overflow: hidden; }

.ficha-tecnica { display: grid; grid-template-columns: max-content 1fr; gap: 0.35em 1em; font-family: var(--fonte-mono); font-size: 0.92rem; margin: 0; }
.ficha-tecnica dt { color: var(--cor-tinta-suave); }
.ficha-tecnica dd { margin: 0; }

.selo-situacao {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  border: 1px solid var(--cor-verde);
  color: var(--cor-verde-escuro);
  padding: 0.15em 0.6em;
  border-radius: 999px;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-3);
  z-index: 100;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 88vh; margin-inline: auto; }
.lightbox-fechar {
  position: absolute;
  top: var(--espaco-2);
  right: var(--espaco-2);
  background: var(--cor-branco);
  border: none;
  border-radius: 3px;
  padding: 0.5em 0.9em;
  cursor: pointer;
  font: inherit;
}

/* Filtros de obras */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  border: 1px solid var(--cor-linha);
  border-radius: 4px;
  padding: var(--espaco-2) var(--espaco-3);
  margin-bottom: var(--espaco-4);
  background: var(--cor-branco);
}
.filtros fieldset { border: none; padding: 0; margin: 0; }
.filtros legend { font-family: var(--fonte-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-tinta-suave); padding: 0; }
.filtros select { font: inherit; padding: 0.35em 0.5em; border: 1px solid var(--cor-linha); border-radius: 3px; background: var(--cor-fundo); }
[data-item][hidden] { display: none; }

/* Linha do tempo */

.linha-tempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--cor-linha); }
.linha-tempo li { position: relative; padding: 0 0 var(--espaco-3) var(--espaco-3); }
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: -6px; top: 0.35em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cor-terra);
}
.linha-tempo .ano { font-family: var(--fonte-mono); color: var(--cor-verde-escuro); display: block; margin-bottom: 0.15em; }

/* Listas de currículo */

.lista-cv { padding-left: 1.1em; }
.lista-cv li { margin-bottom: 0.4em; }

/* Formulário */

.form { max-width: 40rem; }
.campo { margin-bottom: var(--espaco-3); }
.campo label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  padding: 0.65em 0.8em;
  border: 1px solid var(--cor-linha);
  border-radius: 3px;
  background: var(--cor-branco);
  color: var(--cor-tinta);
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo .erro { color: #8a2c1f; font-size: 0.88rem; margin-top: 0.3em; display: none; }
.campo.com-erro .erro { display: block; }
.campo.com-erro input, .campo.com-erro textarea { border-color: #8a2c1f; }
.campo-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mensagem-envio { border: 1px solid var(--cor-verde); background: #eef3ee; color: var(--cor-verde-escuro); padding: 0.9em 1.1em; border-radius: 4px; margin-bottom: var(--espaco-3); }
.mensagem-envio[hidden] { display: none; }

/* Utilidades */

.lista-simples { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.lista-simples li { background: var(--cor-fundo-alt); border: 1px solid var(--cor-linha); border-radius: 999px; padding: 0.2em 0.8em; font-size: 0.85rem; }

.duas-colunas { display: grid; gap: var(--espaco-4); grid-template-columns: 2fr 1fr; }
@media (max-width: 800px) { .duas-colunas { grid-template-columns: 1fr; } }

.tabela-links { width: 100%; border-collapse: collapse; }
.tabela-links th, .tabela-links td { text-align: left; padding: 0.5em 0.8em; border-bottom: 1px solid var(--cor-linha); }