/*
  estilo.css: folha de estilo unica do json-p.org
  Conceito: "arquivo tecnico vivo". Papel sobre fundo escuro,
  tipografia de terminal (IBM Plex Mono) + serifa editorial (Source Serif 4),
  placas de metadados. Ver .claude/skills/design-do-blog para os tokens.

  Regras: zero estilo inline em post, foco visivel em tudo que recebe foco,
  motion so fadeUp de entrada respeitando prefers-reduced-motion,
  responsivo ate 360px.
*/

:root{
  --bg: #0d1210;
  --paper: #efe7d8;
  --paper-edge: #e2d8c3;
  --ink: #2b2620;
  --ink-soft: #57503f;
  --amber: #e8a23d;
  --sage: #7c9a7f;
  --sage-dim: #4f6650;
  --rule: #cabf9f;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, #16201b 0%, var(--bg) 60%),
    var(--bg);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; }

a{ color: var(--sage-dim); text-decoration-color: var(--rule); }
a:hover{ color: var(--amber); }
/* Em fundo papel o ambar reprova AA, entao no cartao o hover escurece pro tom da tinta */
.paper a:hover,
.cartao a:hover{ color: var(--ink); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

img{ max-width: 100%; }

.wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

/* ===== placa de arquivo: identidade na home, metadados no post ===== */
.placa{
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #cbb98a;
  border: 1px dashed #4a4438;
  border-radius: 2px;
  padding: 14px 16px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  background: repeating-linear-gradient(135deg, rgba(232,162,61,0.03) 0 2px, transparent 2px 8px);
  animation: fadeUp .5s ease-out both;
}
.placa .k{ color: #8a8067; text-transform: uppercase; }
.placa .v{ color: #e9e0c9; }
.placa .full{ grid-column: 1 / -1; }
.placa a{ color: var(--amber); }

/* ===== aviso curto de navegacao (topo de /origem/, por exemplo) ===== */
.aviso{
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: #b9ae8c;
  background: rgba(232, 162, 61, 0.08);
  border: 1px solid rgba(232, 162, 61, 0.35);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 24px;
  animation: fadeUp .4s ease-out both;
}
.aviso a{ color: var(--amber); }

/* ===== link de retorno no topo de post ===== */
.voltar{
  margin: 0 0 24px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.voltar a{ color: var(--sage-dim); text-decoration: none; }
.voltar a:hover{ color: var(--amber); text-decoration: underline; }

header.hero{
  animation: fadeUp .6s ease-out both;
  animation-delay: .08s;
}

h1{
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 52px);
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 4px;
}
.kicker{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 28px;
}

/* ===== bloco de codigo em destaque (hero), usado na /origem/ ===== */
.codecard{
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 6px;
  padding: 22px 24px;
  margin: 0 0 40px;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6);
}
.codecard .comment{ color: var(--ink-soft); }
.codecard pre{ margin: 0; white-space: pre-wrap; font-size: 14px; color: var(--ink); }
.codecard .callresult{ color: var(--sage-dim); font-weight: 500; }

/* ===== bloco de codigo dentro de post (pre/code), no padrao snippet da skill ===== */
.cartao pre{
  background: #e4d9c2;
  border-left: 3px solid var(--sage);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 0 0 20px;
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.cartao pre code{ font-family: inherit; font-size: inherit; background: none; padding: 0; }

/* nota de fonte no fim do post */
.fonte-nota{ opacity: .7; font-size: .85em; }

/* ===== cartao de papel: todo conteudo longo vive aqui ===== */
.paper,
.cartao{
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55);
}
.paper{ padding: 8px 40px 4px; }
.cartao{ padding: 32px 40px; }
.paper > *:first-child,
.cartao > *:first-child{ margin-top: 0; }

.cartao + .cartao{ margin-top: 24px; }

/* tipografia de conteudo dentro do cartao de papel */
.cartao h2, .paper h2{
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--ink);
}
.cartao h3, .paper h3{
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--ink);
}
.cartao p, .paper p{ margin: 0 0 16px; }
.cartao ul, .cartao ol, .paper ul, .paper ol{ margin: 0 0 16px; padding-left: 22px; }
.cartao li, .paper li{ margin-bottom: 6px; }
.cartao blockquote, .paper blockquote{
  margin: 20px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--amber);
  color: var(--ink-soft);
  font-style: italic;
}
.cartao code, .paper code{
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88em;
  background: #e4d9c2;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ===== secao numerada (§1, §2...): so em conteudo com sequencia real ===== */
.secao-numerada{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 18px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.secao-numerada:last-of-type{ border-bottom: none; }
.secao-numerada .num{
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--sage-dim);
  padding-top: 6px;
}
.secao-numerada h2{
  grid-column: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.secao-numerada .body{ grid-column: 2; }
.secao-numerada p{ margin: 0 0 14px; font-size: 16.5px; }
.secao-numerada p:last-child{ margin-bottom: 0; }

/* ===== snippet de codigo dentro do texto ===== */
.snippet{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
  background: #e4d9c2;
  border-left: 3px solid var(--sage);
  padding: 12px 16px;
  margin: 16px 0;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ===== meta de post: pilar, data, autor em linha ===== */
.meta-post{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--sage-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
}

/* ===== box de autor (fim de post) ===== */
.box-autor{ margin-top: 24px; }
.box-autor .rotulo{
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--sage-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

/* ===== lista de posts na home ===== */
.lista-posts{ list-style: none; margin: 0; padding: 0; }
.lista-posts li{
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.lista-posts li:last-child{ border-bottom: none; }
.lista-posts .data{
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--sage-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 6px;
}
.lista-posts .titulo-post{
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 4px;
}
.lista-posts .titulo-post a{ color: var(--ink); text-decoration: none; }
.lista-posts .titulo-post a:hover{ color: var(--sage-dim); text-decoration: underline; }
.lista-posts .descricao-post{ margin: 0; color: var(--ink-soft); font-size: 15px; }

.placeholder-vazio{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 0 24px;
}

/* ===== rodape ===== */
footer.rodape{
  margin-top: 48px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: #948a70;
  text-align: center;
}
footer.rodape a{ color: #a89b78; }

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 560px){
  .paper{ padding: 4px 20px 4px; }
  .cartao{ padding: 20px 20px 4px; }
  .secao-numerada{ grid-template-columns: 22px 1fr; gap: 4px 10px; }
  .placa{ grid-template-columns: 1fr; }
}

@media (max-width: 380px){
  .wrap{ padding: 40px 14px 64px; }
  h1{ font-size: 28px; }
  .cartao{ padding: 16px 16px 4px; }
}