/* =========================================================================
   PerspectivaIA — Tinta & Papel
   Um CSS. Sem framework, sem build. Tokens → fontes → reset → tipografia →
   componentes → telas → responsivo → acessibilidade.
   ========================================================================= */

/* --- Tokens (§3) --------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg:        #F8F5EF;
  --surface:   #FFFFFF;
  --ink:       #1B1712;
  --ink-apoio: #5D564C;
  --ink-meta:  #75695A;
  --accent:    #8A2332;
  --rule:      #E4DED2;
  --rule-suave:#ECE8DF;
  --placeholder:#E9E3D6;
  --code-bg:   #211C15;  --code-ink: #ECE5D8;
  --code-apoio:#A99F8F;  --code-accent:#DE8E99;
  --ok:        #2E6B3F;  --ok-bg: #EFF5EF;  --erro: #B3261E;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --peso-corpo: 400;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --medida: 680px;
}
[data-theme="escuro"] {
  color-scheme: dark;
  --bg:        #17130E;
  --surface:   #211C15;
  --ink:       #ECE5D8;
  --ink-apoio: #A99F8F;
  --ink-meta:  #A99F8F;
  --accent:    #DE8E99;
  --rule:      #39322A;
  --rule-suave:#2C261E;
  --placeholder:#2C261E;
  --peso-corpo: 450;
}

/* --- Fontes (§4) --------------------------------------------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.68;
  font-weight: var(--peso-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }

/* --- Utilitários --------------------------------------------------------- */
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--s6); }
.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;
}
.rotulo-secao {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  padding-bottom: var(--s3); border-bottom: 2px solid var(--ink);
}
.kicker {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.meta {
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  color: var(--ink-meta); font-feature-settings: "tnum";
}

/* --- Links no corpo (§8) ------------------------------------------------- */
.post-corpo a, .prosa a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.post-corpo a:hover, .post-corpo a:focus-visible,
.prosa a:hover, .prosa a:focus-visible { text-decoration-thickness: 2px; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

/* --- Botões (§3) --------------------------------------------------------- */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600;
  font-size: 13px; text-decoration: none; text-align: center;
  padding: 11px 20px; border-radius: 4px; border: 1px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.btn-primary { background: var(--accent); color: #FFFFFF; }
[data-theme="escuro"] .btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bg); }
.btn-bloco { display: block; width: 100%; }

/* =========================================================================
   Cabeçalho compacto (§8) — todas as telas menos a home
   ========================================================================= */
.site-header {
  background: var(--bg); border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 30;
}
.site-header .barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s4) var(--s6);
  max-width: 1200px; margin-inline: auto;
}
.wordmark {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em; text-decoration: none; color: var(--ink);
  line-height: 1; white-space: nowrap;
}
.wordmark b { font-weight: 600; }
.wordmark .pt { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.nav-link:hover { color: var(--accent); }
.nav-link[aria-current] { color: var(--accent); }
.nav .btn { margin-block: -6px; }

/* toggle de tema */
.toggle-tema {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  color: var(--ink-meta); display: inline-flex; gap: 6px; align-items: center;
}
.toggle-tema b { color: var(--ink); font-weight: 500; }

/* na home, o header compacto só aparece no mobile (desktop usa o masthead) */
.site-header.apenas-mobile { display: none; }

/* menu mobile */
.menu-btn { display: none; width: 44px; height: 44px; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 2px;
  background: var(--ink);
}
.menu-btn span { top: 21px; }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
.menu-panel { display: none; }

/* =========================================================================
   Masthead da home (§8)
   ========================================================================= */
.masthead-bar {
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  color: var(--ink-meta);
}
.masthead-bar .barra {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--s3) var(--s6); max-width: 1200px; margin-inline: auto;
}
.masthead-bar .centro { text-align: center; }
.masthead-bar .direita { text-align: right; }
.masthead { text-align: center; padding: var(--s7) 0 var(--s5); }
.masthead .wordmark { font-size: 46px; display: inline-block; }
.masthead .tagline {
  font-family: var(--sans); font-weight: 400; font-size: 13px;
  color: var(--ink-apoio); margin-top: var(--s3);
}
.nav-home {
  display: flex; justify-content: center; align-items: center; gap: 38px;
  border-top: 2px solid var(--ink); padding-top: var(--s3);
  max-width: 1200px; margin-inline: auto;
}
.nav-home .nav-link { font-size: 14px; }
.nav-home .btn { margin-block: -8px; }

/* =========================================================================
   Home (§9.1)
   ========================================================================= */
.home-abertura {
  display: grid; grid-template-columns: 1fr 360px; gap: var(--s6);
  padding-top: var(--s7);
}
.home-abertura .coluna-destaque { border-right: 1px solid var(--rule); padding-right: var(--s6); }
.destaque .kicker { display: block; margin-bottom: var(--s3); }
.manchete {
  font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1.12;
  letter-spacing: -0.01em; text-wrap: pretty;
}
.manchete a { text-decoration: none; color: inherit; }
.manchete a:hover { color: var(--accent); }
.destaque .dek {
  font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55;
  color: var(--ink-apoio); max-width: 620px; margin-top: var(--s4);
}
.destaque .linha-meta {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  color: var(--ink-meta); margin-top: var(--s4);
}
.destaque-sec {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  border-top: 1px solid var(--rule); margin-top: var(--s5); padding-top: var(--s5);
}
.mais-lidos { border-top: 1px solid var(--rule); margin-top: var(--s5); padding-top: var(--s5); }
.mais-lidos .rotulo {
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-meta); margin-bottom: var(--s3);
}
.mais-lidos li {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0; border-top: 1px solid var(--rule-suave);
}
.mais-lidos li:first-of-type { border-top: none; }
.mais-lidos .num {
  font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--accent);
}
.mais-lidos a {
  font-family: var(--serif); font-size: 17px; line-height: 1.3;
  text-decoration: none; color: var(--ink);
}
.mais-lidos a:hover { color: var(--accent); }

/* card de artigo (§8) */
.card-artigo .kicker { display: block; margin-bottom: var(--s2); }
.card-artigo .titulo {
  font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.28;
}
.card-artigo .titulo a { text-decoration: none; color: inherit; }
.card-artigo .titulo a:hover { color: var(--accent); }
.card-artigo .card-meta {
  font-family: var(--sans); font-size: 12px; color: var(--ink-meta); margin-top: var(--s2);
}

/* rail do Radar (§8, §9.1) */
.rail-radar .radar-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--ink); padding-bottom: var(--s2);
}
.rail-radar .radar-cabeca .t {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.rail-radar .radar-cabeca .d { font-family: var(--mono); font-size: 11px; color: var(--ink-meta); }
.radar-item { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.radar-item .fonte {
  font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.radar-item .titulo {
  font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.35;
  margin-top: 6px;
}
.radar-item .titulo a { text-decoration: none; color: inherit; }
.radar-item .titulo a:hover { color: var(--accent); }
.radar-item .comentario {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-apoio); margin-top: 6px;
}
.radar-completo {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 13px;
  color: var(--accent); text-decoration: none; margin-top: var(--s4);
}
.radar-completo:hover { text-decoration: underline; }

/* seções da home */
.secao { padding-top: var(--s7); }
.secao-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s5);
}
.secao-head .link-todos {
  font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--accent);
  text-decoration: none;
}
.secao-head .link-todos:hover { text-decoration: underline; }
.grid-artigos { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-artigos .card-artigo {
  padding: 22px 28px; border-left: 1px solid var(--rule);
}
.grid-artigos .card-artigo:first-child { border-left: none; padding-left: 0; }
.grid-artigos .card-artigo:last-child { padding-right: 0; }

/* trilhas na home */
.trilhas { border-top: 1px solid var(--rule); margin-top: var(--s7); padding-top: var(--s7); }
.trilhas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trilha-card { border-top: 3px solid var(--ink); padding-top: var(--s4); text-decoration: none; color: inherit; display: block; }
.trilha-card.t2 { border-top-color: var(--accent); }
.trilha-card.t3 { border-top-color: var(--ink-apoio); }
.trilha-card .num { font-family: var(--mono); font-size: 13px; color: var(--ink-meta); }
.trilha-card .nome { font-family: var(--serif); font-weight: 500; font-size: 22px; margin-top: var(--s2); }
.trilha-card:hover .nome { color: var(--accent); }
.trilha-card .desc { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-apoio); margin-top: var(--s2); }

/* =========================================================================
   Newsletter (§8) — variantes radar | faixa | fim
   ========================================================================= */
.nl { margin: 0; }
.nl-campos { display: flex; gap: var(--s2); align-items: flex-start; }
.nl input {
  font-family: var(--sans); font-size: 16px; background: var(--bg);
  border: 1px solid #D9D2C4; border-radius: 4px; padding: 10px 12px; width: 100%;
}
[data-theme="escuro"] .nl input { border-color: var(--rule); }
.nl input:focus { outline: none; border: 2px solid var(--ink); background: var(--surface); }
.nl button { white-space: nowrap; }
.nl-ok, .nl-erro { font-family: var(--sans); font-size: 12px; margin-top: var(--s2); display: none; }
.nl-ok { color: var(--ok); }
.nl-erro { color: var(--erro); }
.nl.success .nl-ok { display: block; }
.nl.error .nl-erro { display: block; }
.nl.error input { border: 1.5px solid var(--erro); }

/* variante radar (cartão no rail) */
.nl--radar {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 16px 18px; margin-top: var(--s5);
}
.nl--radar .nl-titulo {
  font-family: var(--serif); font-weight: 500; font-size: 14px; line-height: 1.35;
  margin-bottom: var(--s3);
}
.nl--radar .nl-campos { flex-direction: column; }
.nl--radar input { margin-bottom: 0; }
.nl--radar button { width: 100%; }

/* variante faixa (blocos de destaque) */
.nl--faixa {
  background: #1B1712; border-radius: 8px; padding: 28px 36px;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
}
[data-theme="escuro"] .nl--faixa { background: var(--surface); border: 1px solid var(--rule); }
.nl--faixa .nl-titulo { font-family: var(--serif); font-weight: 500; font-size: 24px; color: #F8F5EF; line-height: 1.2; }
.nl--faixa .nl-sub { font-family: var(--sans); font-size: 13.5px; color: #A99F8F; margin-top: var(--s2); }
[data-theme="escuro"] .nl--faixa .nl-titulo { color: var(--ink); }
[data-theme="escuro"] .nl--faixa .nl-sub { color: var(--ink-apoio); }
.nl--faixa input { width: 260px; background: #211C15; border-color: #39322A; color: #ECE5D8; }
.nl--faixa .btn-primary { background: #F8F5EF; color: #1B1712; }
.nl--faixa .nl-ok, .nl--faixa .nl-erro { grid-column: 1 / -1; }

/* variante fim de artigo = faixa, empilhada e centrada */
.nl--fim { display: block; text-align: center; }
.nl--fim .nl-campos { justify-content: center; margin-top: var(--s4); }
.nl--fim input { width: min(320px, 100%); }

/* =========================================================================
   Artigo (§9.2)
   ========================================================================= */
.post-header { max-width: var(--medida); margin-inline: auto; padding-top: var(--s7); }
.post-header .kicker { display: block; margin-bottom: var(--s4); }
.post-titulo {
  font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.12;
  letter-spacing: -0.01em; text-wrap: pretty;
}
.post-header .dek {
  font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.5;
  color: var(--ink-apoio); margin-top: var(--s4);
}

/* byline (§8) */
.byline {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 18px 0; margin-top: var(--s5);
}
.byline .autor { display: flex; align-items: center; gap: var(--s3); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink);
  color: var(--bg); display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  font-family: var(--serif); font-weight: 500; font-size: 17px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline .nome { font-family: var(--sans); font-weight: 600; font-size: 14px; }
.byline .cargo { font-family: var(--sans); font-size: 12.5px; color: var(--ink-meta); }
.byline .datas { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink-meta); text-align: right; }

/* corpo (§9.2) */
.post-corpo { max-width: var(--medida); margin-inline: auto; padding-top: var(--s6); }
.post-corpo > * + * { margin-top: var(--s5); }
.post-corpo p { font-size: 18px; line-height: 1.68; }
.post-corpo h2 {
  font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.25;
  margin-top: var(--s8); margin-bottom: 0;
}
.post-corpo h2 + * { margin-top: var(--s4); }
.post-corpo h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.3; margin-top: var(--s6); }
.post-corpo ul, .post-corpo ol { padding-left: var(--s5); }
.post-corpo li { margin-top: var(--s2); }
.post-corpo ul li { list-style: disc; }
.post-corpo ol li { list-style: decimal; }
.post-corpo blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 23px; line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: var(--s5);
}
.post-corpo blockquote p { font-size: inherit; }
.post-corpo strong { font-weight: 600; }

/* código — igual nos dois temas (§3) */
.post-corpo pre {
  background: var(--code-bg); color: var(--code-ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  padding: var(--s5); border-radius: 6px; overflow-x: auto;
}
.post-corpo :not(pre) > code {
  font-family: var(--mono); font-size: 0.88em; background: var(--rule-suave);
  padding: 2px 5px; border-radius: 3px;
}
.post-corpo pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* tabelas (§9.2) */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-corpo table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.post-corpo thead th {
  font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-meta); text-align: left;
  border-bottom: 2px solid var(--ink); padding: var(--s3) 10px;
}
.post-corpo tbody td { padding: 12px 10px; border-bottom: 1px solid var(--rule-suave); vertical-align: top; }

/* imagens e cards do editor Koenig (§9.2) */
.post-corpo figure, .post-corpo .kg-card { margin-top: var(--s6); }
.post-corpo img, .post-corpo .kg-image { border-radius: 6px; }
.post-corpo figcaption, .post-corpo .kg-card-caption {
  font-family: var(--sans); font-size: 13px; line-height: 1.5; text-align: center;
  color: var(--ink-meta); margin-top: var(--s3);
}

/* alargamento além da coluna no desktop (§9.2) */
@media (min-width: 900px) {
  .post-corpo pre,
  .post-corpo .tabela-rolagem,
  .post-corpo figure,
  .post-corpo .kg-width-wide { margin-inline: -100px; }
  .post-corpo figcaption { padding-inline: 100px; }
  /* full-bleed de borda a borda da viewport */
  .post-corpo .kg-width-full { margin-inline: calc(50% - 50vw); }
  .post-corpo .kg-width-full img { width: 100vw; max-width: 100vw; border-radius: 0; }
}

/* author-box (§8) */
.author-box {
  max-width: var(--medida); margin: var(--s8) auto 0;
  border-top: 2px solid var(--ink); padding-top: 28px;
  display: flex; gap: var(--s4);
}
.author-box .avatar { width: 64px; height: 64px; font-size: 24px; }
.author-box .nome { font-family: var(--sans); font-weight: 600; font-size: 16px; }
.author-box .cargo { font-family: var(--sans); font-size: 13px; color: var(--ink-meta); }
.author-box .bio { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink-apoio); max-width: 480px; margin-top: var(--s2); }
.author-box .link-linkedin {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 13px;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; margin-top: var(--s3);
}

/* fecho do artigo */
.post-fecho { max-width: var(--medida); margin-inline: auto; }
.post-fecho .nl--fim { margin-top: var(--s7); }
.leia-a-seguir { max-width: var(--medida); margin: var(--s8) auto 0; }
.leia-a-seguir .rotulo {
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-meta);
  border-top: 1px solid var(--rule); padding-top: var(--s4);
}
.leia-a-seguir .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--s4); }

/* =========================================================================
   Trilha (§9.3)
   ========================================================================= */
.trilha-abas {
  display: flex; gap: var(--s6); border-bottom: 1px solid var(--rule);
  max-width: 1200px; margin-inline: auto; padding: 0 var(--s6);
}
.trilha-aba {
  display: flex; align-items: baseline; gap: var(--s2); text-decoration: none;
  color: var(--ink-meta); padding: var(--s4) 0; border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.trilha-aba .n { font-family: var(--mono); font-size: 12px; }
.trilha-aba .nm { font-family: var(--serif); font-weight: 500; font-size: 15px; }
.trilha-aba[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.trilha-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s7); padding-top: var(--s7); }
.trilha-cabeca .rotulo { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.trilha-cabeca .nome { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.12; margin-top: var(--s2); }
.trilha-cabeca .desc { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink-apoio); max-width: 560px; margin-top: var(--s4); }
.trilha-cabeca .info { font-family: var(--mono); font-size: 12px; color: var(--ink-meta); margin-top: var(--s3); }
.trilha-lista { border-top: 2px solid var(--ink); margin-top: var(--s5); }
.trilha-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.trilha-item .n { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink-meta); }
.trilha-item:first-child .n { color: var(--accent); }
.trilha-item .titulo { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.3; }
.trilha-item .titulo a { text-decoration: none; color: inherit; }
.trilha-item .titulo a:hover { color: var(--accent); }
.trilha-item .dek { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-apoio); margin-top: 6px; }
.trilha-item .min { font-family: var(--mono); font-size: 12px; color: var(--ink-meta); white-space: nowrap; }
.selo-comece {
  display: inline-block; background: var(--accent); color: #FFFFFF;
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; border-radius: 3px; padding: 3px 8px; margin-left: var(--s2);
}
[data-theme="escuro"] .selo-comece { color: var(--bg); }
.trilha-ver { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--accent); text-decoration: none; margin-top: var(--s5); }
.trilha-ver:hover { text-decoration: underline; }

/* cartão de material no rail da trilha */
.card-material {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 24px 26px;
}
.card-material .kicker { display: block; margin-bottom: var(--s2); }
.card-material .titulo { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.3; }
.card-material .desc { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-apoio); margin: var(--s3) 0 var(--s4); }
.outras-trilhas { border-top: 1px solid var(--rule); margin-top: var(--s5); padding-top: var(--s5); }
.outras-trilhas .rotulo { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-meta); margin-bottom: var(--s3); }
.outras-trilhas a { display: block; text-decoration: none; color: inherit; border-top: 3px solid var(--ink); padding-top: var(--s2); margin-top: var(--s4); }
.outras-trilhas a.t2 { border-top-color: var(--accent); }
.outras-trilhas a.t3 { border-top-color: var(--ink-apoio); }
.outras-trilhas .nm { font-family: var(--serif); font-weight: 500; font-size: 17px; }
.outras-trilhas a:hover .nm { color: var(--accent); }
.outras-trilhas .ds { font-family: var(--sans); font-size: 12.5px; color: var(--ink-apoio); margin-top: 2px; }

/* =========================================================================
   Material (§9.4)
   ========================================================================= */
.material-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; padding-top: var(--s7); align-items: start; }
.material-info .kicker { display: block; margin-bottom: var(--s3); }
.material-info .titulo { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.14; }
.material-info .desc { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink-apoio); margin-top: var(--s4); }
.material-secoes { margin-top: var(--s6); }
.material-secoes li { display: flex; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--rule-suave); }
.material-secoes li:first-child { border-top: none; }
.material-secoes .faixa { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--accent); white-space: nowrap; }
.material-secoes .txt { font-family: var(--sans); font-size: 15.5px; }
.material-depoimento { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; border-left: 3px solid var(--rule); padding-left: var(--s4); margin-top: var(--s6); color: var(--ink-apoio); }
.material-form { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 28px 30px; }
.material-form .titulo { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; margin-bottom: var(--s4); }
.form-campo { margin-bottom: var(--s4); }
.form-campo label { display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-meta); margin-bottom: 6px; }
.form-campo input, .form-campo select {
  width: 100%; font-family: var(--sans); font-size: 16px; background: var(--bg);
  border: 1px solid #D9D2C4; border-radius: 4px; padding: 10px 12px;
}
[data-theme="escuro"] .form-campo input, [data-theme="escuro"] .form-campo select { border-color: var(--rule); }
.form-campo input:focus, .form-campo select:focus { outline: none; border: 2px solid var(--ink); background: var(--surface); }
.material-form .aviso { font-family: var(--sans); font-size: 12px; line-height: 1.55; color: var(--ink-meta); margin-top: var(--s4); }

/* =========================================================================
   /radar/ (§9.5)
   ========================================================================= */
.radar-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s7); padding-top: var(--s7); }
.radar-cabeca-pg .kicker { display: block; margin-bottom: var(--s3); }
.radar-cabeca-pg .titulo { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.15; }
.radar-cabeca-pg .dek { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-apoio); margin-top: var(--s4); }
.radar-edicao { border-top: 2px solid var(--ink); margin-top: var(--s5); }
.radar-nota { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding: 24px 0; border-bottom: 1px solid var(--rule); }
.radar-nota .num { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--accent); }
.radar-nota .fonte { font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-meta); }
.radar-nota .fonte a { color: inherit; text-decoration: none; }
.radar-nota .fonte a:hover { color: var(--accent); }
.radar-nota .titulo { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.3; margin-top: 6px; }
.radar-nota .texto { font-size: 16px; line-height: 1.6; margin-top: var(--s3); }
.radar-nota .texto em { font-style: italic; }
.radar-anteriores { border-top: 2px solid var(--ink); margin-top: var(--s7); padding-top: var(--s5); }
.radar-anteriores .rotulo { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-meta); margin-bottom: var(--s4); }
.radar-anterior { display: grid; grid-template-columns: 110px 1fr; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; border-top: 1px solid var(--rule-suave); }
.radar-anterior .dia { font-family: var(--mono); font-size: 12px; color: var(--ink-meta); }
.radar-anterior .titulo { font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.35; }
.radar-anterior .titulo a { text-decoration: none; color: inherit; }
.radar-anterior .titulo a:hover { color: var(--accent); }

/* corpo da edição do Radar (conteúdo do editor: h4 fonte + p fato + p comentário) */
.radar-edicao > * + * { margin-top: var(--s2); }
.radar-edicao h4 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.3; margin-top: var(--s5); }
.radar-edicao p { font-size: 16px; line-height: 1.6; }
.radar-edicao em { font-style: italic; color: var(--ink-apoio); }
.radar-edicao a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.radar-como { margin-top: var(--s6); }
.radar-como .rotulo { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-meta); margin-bottom: var(--s3); }
.radar-como p { font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--ink-apoio); }

/* =========================================================================
   Arquivo por tema (§9.6)
   ========================================================================= */
.arquivo { max-width: 840px; margin-inline: auto; padding-top: var(--s7); }
.arquivo .kicker { display: block; margin-bottom: var(--s3); }
.arquivo .nome-tema { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.12; }
.arquivo .desc-tema { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-apoio); margin-top: var(--s3); }
.arquivo .contagem { font-family: var(--mono); font-size: 12px; color: var(--ink-meta); margin-top: var(--s2); }
.arquivo-lista { border-top: 2px solid var(--ink); margin-top: var(--s5); }
.arquivo-item { display: grid; grid-template-columns: 1fr 120px; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.arquivo-item .titulo { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.25; }
.arquivo-item .titulo a { text-decoration: none; color: inherit; }
.arquivo-item .titulo a:hover { color: var(--accent); }
.arquivo-item .dek { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-apoio); margin-top: var(--s2); }
.arquivo-item .item-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-meta); margin-top: var(--s3); }
.arquivo-item .thumb { width: 120px; height: 80px; background: var(--placeholder); border-radius: 4px; overflow: hidden; }
.arquivo-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.paginacao { display: flex; align-items: center; justify-content: space-between; border-top: 2px solid var(--ink); margin-top: var(--s2); padding-top: var(--s5); }
.paginacao a { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--accent); text-decoration: none; }
.paginacao a:hover { text-decoration: underline; }
.paginacao .pos { font-family: var(--mono); font-size: 12px; color: var(--ink-meta); }
.paginacao .vazio { color: var(--ink-meta); opacity: 0.4; }

/* =========================================================================
   Sobre (§9.7) e prosa de páginas
   ========================================================================= */
.pagina-estreita { max-width: 640px; margin-inline: auto; padding-top: var(--s7); }
.pagina-estreita .kicker { display: block; margin-bottom: var(--s4); }
.pagina-tese { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.18; }
.prosa { font-family: var(--serif); font-size: 17.5px; line-height: 1.68; }
.prosa > * + * { margin-top: var(--s5); }
.prosa h2 { font-size: 26px; font-weight: 500; margin-top: var(--s7); }
.sobre-autor { border-top: 1px solid var(--rule); margin-top: var(--s6); padding-top: var(--s5); display: flex; gap: var(--s4); }
.sobre-autor .avatar { width: 88px; height: 88px; font-size: 30px; }
.sobre-oque { margin-top: var(--s6); }
.sobre-oque .linha { display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--rule-suave); }
.sobre-oque .linha:first-child { border-top: none; }
.sobre-oque .rot { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--accent); }
.sobre-oque .txt { font-family: var(--serif); font-size: 15px; line-height: 1.6; }
.sobre-fecho { margin-top: var(--s7); }

/* =========================================================================
   404 (§9.8)
   ========================================================================= */
.erro-404 { text-align: center; padding: 56px var(--s6) 60px; max-width: 640px; margin-inline: auto; }
.erro-404 .cod { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--accent); }
.erro-404 .titulo { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.2; margin-top: var(--s4); }
.erro-404 .apoio { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink-apoio); margin-top: var(--s4); }
.erro-404 .acoes { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s6); }

/* =========================================================================
   Footer (§9.1)
   ========================================================================= */
.site-footer { background: #1B1712; margin-top: var(--s9); }
[data-theme="escuro"] .site-footer { background: var(--surface); border-top: 1px solid var(--rule); }
.site-footer .barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s6); max-width: 1200px; margin-inline: auto;
}
.site-footer .wordmark { font-size: 16px; color: #F8F5EF; }
[data-theme="escuro"] .site-footer .wordmark { color: var(--ink); }
.site-footer nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.site-footer a { font-family: var(--sans); font-size: 12px; color: #A99F8F; text-decoration: none; }
.site-footer a:hover { color: #F8F5EF; text-decoration: underline; }

/* =========================================================================
   Responsivo (§10) — mobile-first: o CSS acima é desktop; aqui reduzimos
   ========================================================================= */
@media (max-width: 899px) {
  .home-abertura, .trilha-layout, .radar-layout, .material-layout,
  .leia-a-seguir .grid { grid-template-columns: 1fr; gap: var(--s6); }
  .home-abertura .coluna-destaque { border-right: none; padding-right: 0; }
  .rail { margin-top: var(--s7); }
  .grid-artigos, .trilhas-grid { grid-template-columns: 1fr; }
  .grid-artigos .card-artigo { border-left: none; padding: var(--s5) 0; border-top: 1px solid var(--rule); }
  .grid-artigos .card-artigo:first-child { border-top: none; padding-top: 0; }
  .trilhas-grid { gap: var(--s5); }
  .post-corpo pre, .post-corpo .tabela-rolagem, .post-corpo figure { margin-inline: 0; }
  .post-corpo figcaption { padding-inline: 0; }

  /* masthead da home some no mobile; o header compacto (apenas-mobile) assume */
  .masthead, .masthead-bar { display: none; }
  .site-header.apenas-mobile { display: block; }

  /* header compacto: mostra hamburger, esconde nav inline */
  .site-header .nav { display: none; }
  .menu-btn { display: block; }
  body.menu-aberto { overflow: hidden; }
  .menu-panel {
    display: none; position: fixed; inset: 0; z-index: 40; background: var(--bg);
    padding: var(--s6); flex-direction: column; gap: var(--s5);
  }
  body.menu-aberto .menu-panel { display: flex; }
  .menu-panel .fechar { align-self: flex-end; width: 44px; height: 44px; font-family: var(--serif); font-size: 28px; color: var(--ink); }
  .menu-panel a { font-family: var(--serif); font-weight: 500; font-size: 22px; text-decoration: none; color: var(--ink); }
  .menu-panel .toggle-tema { font-size: 14px; margin-top: var(--s4); }

  .nl--faixa { grid-template-columns: 1fr; }
  .nl--faixa .nl-campos { flex-direction: column; }
  .nl--faixa input { width: 100%; }
  .arquivo-item { grid-template-columns: 1fr; }
  .arquivo-item .thumb { display: none; }
  .trilha-item { grid-template-columns: auto 1fr; }
  .trilha-item .min { grid-column: 2; }
  .site-footer .barra { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 599px) {
  .container { padding-inline: 20px; }
  .site-header .barra { padding: var(--s4) 20px; }
  .destaque-sec { grid-template-columns: 1fr; gap: var(--s5); }
  .manchete { font-size: 27px; line-height: 1.18; }
  .post-titulo { font-size: 29px; line-height: 1.15; }
  .post-header .dek { font-size: 17px; }
  .post-corpo p { font-size: 17px; }
  .post-header, .post-corpo, .author-box, .post-fecho, .leia-a-seguir { padding-inline: 20px; }
  .pagina-tese, .trilha-cabeca .nome, .material-info .titulo,
  .arquivo .nome-tema, .radar-cabeca-pg .titulo { font-size: 27px; }
  .byline .datas { display: none; }
  .material-layout { gap: var(--s6); }
}

/* =========================================================================
   Acessibilidade (§11)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}