/* =========================================================
   O Bojador — sistema editorial
   Newsreader (nome, títulos e texto) · Archivo (rótulos, datas, créditos)
   Segue o Manual da Marca: assinatura em azul-mar, fio duplo, óxido só como sinal
   ========================================================= */

:root {
  --papel: #f7f6f2;
  --papel-2: #eeece6;
  --tinta: #141414;
  --tinta-2: #57534a;   /* texto secundário — 6.9:1 */
  --tinta-3: #6b665c;   /* metadados — 5.1:1 */
  --fio: #141414;
  --fio-fino: #d8d4cb;
  --oxido: #9b2a1d;     /* única cor de sinal: chapéus e ênfase */
  --mar: #16324f;       /* a cor da marca */
  --mar-profundo: #122a43; /* fundo do rodapé (fixo nos dois temas) */
  --mar-medio: #1f4268;    /* símbolo tom sobre tom sobre azul */
  --mar-claro: #dfe7f0;    /* seleção de texto, marcações */
  --mar-luz: #9db7d6;      /* rótulos sobre azul */
  --sobre-mar: #f7f6f2;    /* texto sobre azul */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --rotulo: "Archivo", "Arial Narrow", Arial, sans-serif;

  /* a página cresce com a tela: largura em rem acompanha a escala da raiz */
  --largura: 77.5rem;   /* 1240 px no notebook, ~1550 px num monitor de 2560 */
  --margem: clamp(18px, 2.6vw, 64px);
  --coluna-texto: 40rem;  /* ≈ 66–70 caracteres no corpo da matéria */
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #141412;
    --papel-2: #1d1c19;
    --tinta: #ece8df;
    --tinta-2: #aaa498;
    --tinta-3: #9a9488;
    --fio: #ece8df;
    --fio-fino: #3a3832;
    --oxido: #e0796a;
    --mar: #9db7d6;
    --mar-claro: #26384d;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* escala fluida: 16 px até 1280 px de tela, sobe até 20 px em 2560 px */
  font-size: clamp(100%, .75rem + .3125vw, 125%);
}

html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--oxido); }
::selection { background: var(--mar-claro); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--oxido); outline-offset: 3px; border-radius: 1px; }

.salto {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--tinta); color: var(--papel);
  font: 600 .875rem/1 var(--rotulo); padding: 12px 16px; text-decoration: none;
}
.salto:focus { top: 12px; color: var(--papel); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.pagina { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }

/* ---------- Rótulos e metadados ---------- */
.chapeu {
  font-family: var(--rotulo);
  font-stretch: 75%;
  font-weight: 650;
  font-size: .8125rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--oxido);
  margin: 0 0 .6rem;
}
.chapeu a { text-decoration: none; }

.registro {
  font-family: var(--rotulo);
  font-stretch: 87.5%;
  font-size: .875rem;
  line-height: 1.45;
  letter-spacing: .005em;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- Cabeçalho ---------- */
.topo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding: 22px 0 16px;
}
.topo .esq { justify-self: start; }
.topo .dir { justify-self: end; text-align: right; }

.marca {
  display: inline-flex; align-items: baseline; gap: .30em;
  font-size: 3.6rem;
  text-decoration: none; color: var(--mar);
}
.marca:hover { color: var(--mar); }
.simbolo {
  flex: none;
  /* Manual da Marca: símbolo = 1,24 × altura das maiúsculas (0,715 em),
     centrado na metade das maiúsculas, não na caixa da linha */
  width: .92em; height: .92em;
  transform: translateY(.1025em);
  background: currentColor;
  -webkit-mask: url(/simbolo.svg) center / contain no-repeat;
          mask: url(/simbolo.svg) center / contain no-repeat;
}
.nome {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 650;
  font-size: 1em;
  line-height: .9;
  letter-spacing: -.025em;
  white-space: nowrap;
}

/* cabeçalho compacto das páginas internas */
.topo.compacto { padding: 14px 0 12px; }
.topo.compacto .marca { font-size: 2rem; }

/* ---------- Navegação ---------- */
.nav {
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  position: relative;
}
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px;
  border-top: 1px solid var(--fio);
}
.nav ul {
  list-style: none; margin: 0; padding: 4px 0 0;
  display: flex; justify-content: center; gap: 4px;
}
.nav a {
  display: block;
  padding: 10px 14px 9px;
  font-family: var(--rotulo);
  font-stretch: 87.5%;
  font-weight: 560;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
  text-decoration-color: transparent;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.nav a:hover {
  color: var(--oxido);
  text-decoration-color: var(--oxido);
}
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
  text-decoration-color: var(--oxido);
}

/* Diário de Bordo: separado das editorias por um fio, em itálico e azul-mar */
.nav li.nav-secao { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--fio-fino); display: flex; align-items: center; }
.nav li.nav-secao a {
  font-family: var(--serif); font-style: italic; font-stretch: normal;
  font-weight: 500; font-size: 1.04rem; color: var(--mar);
  padding-top: 8px; padding-bottom: 8px;
}
.nav li.nav-secao a:hover { color: var(--oxido); }

.situacao {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fio-fino);
}
.situacao p { margin: 0; }
.situacao p:last-child { white-space: nowrap; }

/* ---------- Capa: manchete ---------- */
.capa {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  column-gap: 0;
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--fio);
}
.manchete-bloco { padding-right: 2.5rem; border-right: 1px solid var(--fio-fino); }
.lateral { padding-left: 2rem; }

.manchete {
  font-variation-settings: "opsz" 72;
  font-weight: 600;
  font-size: clamp(2.2rem, 1.2rem + 3.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0 0 18px;
  max-width: 17ch;
  color: var(--tinta);
  text-wrap: balance;
}
.manchete a { text-decoration: none; }
.manchete a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; }

.linha-fina {
  font-size: 1.3rem;
  line-height: 1.42;
  color: var(--tinta-2);
  margin: 0 0 16px;
  max-width: 36em;
  text-wrap: pretty;
}

.assina { margin: 0 0 26px; }
.assina strong { font-weight: 500; color: var(--tinta); }

.carta { margin: 0 0 22px; }
/* recorte do detalhe da carta (costa ibérica, noroeste africano e Canárias), como imagem de fundo */
.arquivo {
  aspect-ratio: 16 / 9;
  background-color: #d9cfbd;
  background-repeat: no-repeat;
}
.carta figcaption {
  margin-top: 8px;
  font-size: .95rem; line-height: 1.45; color: var(--tinta-2);
}
.credito-img { font-family: var(--rotulo); font-stretch: 87.5%; font-size: .8rem; color: var(--tinta-3); }
.credito-img a { color: inherit; }

.abertura {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  font-size: 1.0625rem; line-height: 1.6;
}
.abertura p { margin: 0 0 12px; }
.abertura .carta-capa { margin: 4px 0 0; }
.carta-capa figcaption { font-size: .85rem; }
.corpo .carta-materia { margin: 0 0 1.6em; }
.corpo .carta-materia figcaption { font-size: .9rem; line-height: 1.45; }
.continua {
  font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 600;
  font-size: .95rem;
}

/* ---------- Lateral ---------- */
.lateral h2, .faixa-titulo {
  font-family: var(--rotulo);
  font-stretch: 87.5%;
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: .01em;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--fio);
}

.principios { list-style: none; margin: 0 0 34px; padding: 0; counter-reset: p; }
.principios li {
  counter-increment: p;
  display: grid; grid-template-columns: 2.1rem 1fr;
  padding: 14px 0;
  border-bottom: 1px solid var(--fio-fino);
}
.principios li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 600; font-size: .85rem; color: var(--mar);
  font-variant-numeric: tabular-nums;
  padding-top: .35em;
}
.principios h3 {
  font-size: 1.2rem; line-height: 1.2; font-weight: 600; margin: 0 0 4px;
  font-variation-settings: "opsz" 24;
}
.principios h3 a { text-decoration: none; }
.principios p { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--tinta-2); }

.camoes {
  margin: 0 0 34px; padding: 0;
}
.camoes blockquote {
  margin: 0 0 8px;
  font-style: italic;
  font-variation-settings: "opsz" 36;
  font-size: 1.55rem; line-height: 1.22;
  text-wrap: balance;
}
.camoes figcaption { font-size: .9rem; color: var(--tinta-2); }

.lateral section { margin-bottom: 30px; }
/* chamada do Diário de Bordo no alto da coluna lateral */
.lateral .db-chamada {
  margin: 0 0 34px; padding: 18px 0 22px;
  border-top: 3px double var(--mar); border-bottom: 1px solid var(--fio);
}
.db-chamada-selo { display: flex; align-items: baseline; gap: 10px; margin: 0 !important; }
.lateral h2.db-chamada-titulo {
  font-family: var(--serif); font-stretch: 100%; text-transform: none; letter-spacing: -.012em;
  font-variation-settings: "opsz" 60; font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.05;
  color: var(--mar); margin: 14px 0 10px; padding: 0; border: 0;
}
.lateral h2.db-chamada-titulo a { color: inherit; text-decoration: none; }
.lateral h2.db-chamada-titulo a:hover { color: var(--oxido); }
.lateral .db-chamada .db-fina { font-size: 1.08rem; color: var(--tinta-2); }
.lateral .db-chamada .registro { margin-top: 8px; }
.lateral .db-chamada strong { color: var(--tinta); font-weight: 600; }
.lateral .db-chamada a.selo-autoral { color: var(--papel); }
.lateral .db-chamada a.selo-autoral:hover { color: var(--papel); }
/* editorial de estreia na lateral: título menor que o da chamada do Diário */
.lateral .ed-chamada .chapeu { margin: 0 0 12px !important; }
.lateral .ed-chamada .carta-lateral { margin: 0 0 4px; }
.lateral .ed-chamada .carta-lateral figcaption { margin-top: 6px; font-size: .8rem !important; }
.lateral .ed-chamada h2.db-chamada-titulo { font-size: clamp(1.45rem, 1.2rem + .6vw, 1.8rem); line-height: 1.1; margin-top: 12px; }
/* manchete sem imagem: a epígrafe ocupa o lugar da ilustração */
.capa-epigrafe {
  margin: 4px 0 0; padding: 16px 0 0;
  border-top: 3px double var(--mar);
  font-style: italic; font-variation-settings: "opsz" 40;
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); line-height: 1.3; color: var(--mar);
}
.capa-epigrafe p { margin: 0 !important; }
.capa-epigrafe { margin-bottom: 20px; }
.capa-epigrafe footer {
  margin-top: 12px; font-style: normal;
  font-family: var(--rotulo); font-stretch: 87.5%; font-size: .85rem; color: var(--tinta-3);
}
.abertura.abertura-texto { grid-template-columns: 1fr; }
.lateral section p { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.lateral section a { color: var(--tinta); }
.contato-redacao a { color: var(--tinta); }

/* ---------- Editorias (índice) ---------- */
.indice { padding: 34px 0 56px; }
.indice-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--fio); padding-bottom: 8px; margin-bottom: 0;
}
.indice-cab h2 {
  font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 650;
  font-size: .95rem; margin: 0;
}
.editorias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.editorias li { border-bottom: 1px solid var(--fio-fino); }
.editorias a {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; align-items: baseline;
  padding: 16px 0; text-decoration: none;
}
.editorias .ed-nome {
  font-variation-settings: "opsz" 36;
  font-weight: 600; font-size: 1.45rem; line-height: 1.1;
}
.editorias .ed-desc { font-size: 1rem; line-height: 1.45; color: var(--tinta-2); }
.editorias a:hover .ed-nome { color: var(--oxido); }
.editorias a:hover .ed-desc { color: var(--tinta); }

/* ---------- Diário de Bordo ---------- */
/* selo autoral: bloco cheio, como o selo de Opinião do Manual da Marca */
.selo-autoral {
  display: inline-block; margin: 0;
  font-family: var(--rotulo); font-stretch: 75%; font-weight: 650;
  font-size: .8125rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  background: var(--tinta); color: var(--papel);
  padding: .38em .55em .32em;
}
.db-cab { padding: 40px 0 24px; border-bottom: 2px solid var(--fio); }
.db-cab h1 {
  font-variation-settings: "opsz" 72; font-style: italic; font-weight: 500;
  font-size: clamp(2.8rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -.02em;
  color: var(--mar); margin: 16px 0 12px;
}
.db-lead { margin: 0; font-size: 1.25rem; line-height: 1.45; color: var(--tinta-2); max-width: 34em; }

.db-grade {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem;
  padding: 30px 0 64px; align-items: start;
}
.db-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.db-lista li {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem;
  padding: 18px 0; border-bottom: 1px solid var(--fio-fino);
}
.db-num { margin: 0; padding-top: .45em; color: var(--mar); font-weight: 600; letter-spacing: .02em; }
.db-titulo {
  font-variation-settings: "opsz" 36; font-weight: 600;
  font-size: 1.5rem; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.005em;
}
.db-titulo a { text-decoration: none; }
.db-titulo a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.db-fina { margin: 0 0 6px; color: var(--tinta-2); font-size: 1.05rem; line-height: 1.45; }
.db-lista .registro { margin: 0; }
.db-lista .registro strong { font-weight: 600; color: var(--tinta); }

.db-vazio { border-top: 1px solid var(--fio); padding-top: 18px; }
.db-vazio .estado { font-variation-settings: "opsz" 36; font-size: 1.45rem; line-height: 1.3; margin: 0 0 12px; font-weight: 500; }
.db-vazio p { margin: 0 0 12px; color: var(--tinta-2); max-width: 32em; }

.db-sobre { background: var(--papel-2); padding: 26px 28px 24px; }
.db-epigrafe { margin: 0 0 22px; font-style: italic; font-variation-settings: "opsz" 24; font-size: 1.15rem; line-height: 1.45; }
.db-sobre dl { margin: 12px 0 0; }
.db-sobre dt { font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 650; font-size: .9rem; margin-top: 12px; }
.db-sobre dd { margin: 2px 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.db-sobre dd a, .db-contato a { color: var(--tinta); }
.db-contato { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--fio-fino); font-size: 1rem; }

/* chamada na capa */
.db-capa {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start;
  background: var(--papel-2); padding: 30px 32px 32px; margin: 0 0 48px; position: relative;
}
.db-capa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}
.db-capa-cab h2 {
  font-variation-settings: "opsz" 72; font-style: italic; font-weight: 500;
  font-size: 2.3rem; line-height: 1.05; letter-spacing: -.015em; margin: 6px 0 10px; color: var(--mar);
}
.db-capa-cab h2 a { text-decoration: none; }
.db-capa-cab h2 a:hover { color: var(--oxido); }
.db-capa-cab p { margin: 0; color: var(--tinta-2); font-size: 1.05rem; line-height: 1.5; max-width: 26em; }
.db-espera { margin: 8px 0 0; font-size: 1.15rem; line-height: 1.5; padding-top: 14px; border-top: 1px solid var(--fio); }
.db-capa .db-lista li { padding: 14px 0; }

/* página de um texto */
.db-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; margin: 0 0 1rem; }
.db-trilha .registro { color: var(--mar); font-weight: 600; }
.db-autor {
  max-width: var(--coluna-texto); margin: 36px auto 0;
  border-top: 1px solid var(--fio); padding-top: 14px;
  font-size: 1.02rem; line-height: 1.55; color: var(--tinta-2); font-style: italic;
}
.db-autor p { margin: 0; }
.db-autor strong { font-style: normal; font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 650; color: var(--tinta); }

/* listas com ilustração (estilo revista: imagem grande no destaque, miniatura nos demais) */
.db-lista li.com-img { grid-template-columns: 7.5rem minmax(0, 1fr) 11rem; }
.db-mini img, .db-destaque-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--papel-2); }
.db-mini { display: block; align-self: start; padding-top: .3em; }
.db-lista li.db-destaque { grid-template-columns: 7.5rem minmax(0, 1fr); padding-top: 0; }
.db-destaque-img { grid-column: 1 / -1; display: block; margin: 0 0 6px; }
.db-destaque .db-titulo { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.08; letter-spacing: -.012em; }
.db-destaque .db-fina { font-size: 1.15rem; }
.db-lista:has(.db-destaque) { border-top: 0; }

/* imagem de abertura do texto: mais larga que a coluna, crédito discreto */
.db-abertura { max-width: 64rem; margin: 0 auto 2.4rem; }
.db-abertura img { width: 100%; height: auto; background: var(--papel-2); }
.db-abertura figcaption {
  margin-top: 8px; text-align: right;
  font-family: var(--rotulo); font-stretch: 75%; font-weight: 600;
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3);
}
.corpo blockquote p { margin: 0; }
a.selo-autoral { text-decoration: none; }
a.selo-autoral:hover { background: var(--oxido); color: var(--papel); }

/* nota sobre quem escreve, com retrato opcional */
.db-autor { display: flex; gap: 16px; align-items: flex-start; }
.db-autor-foto { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* página do autor */
.db-autor-cab { display: flex; gap: 28px; align-items: center; margin-top: 18px; }
.db-autor-retrato { flex: none; width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; background: var(--papel-2); }
.db-cab-autor h1 { margin: 0 0 10px; }

/* convidados e inscrição */
.db-rodape-secao {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem;
  padding: 0 0 64px; align-items: start;
}
.db-rodape-secao > :only-child { grid-column: 2; }
.db-convidados ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.db-convidados li { padding: 9px 0; border-bottom: 1px solid var(--fio-fino); break-inside: avoid; }
.db-convidados a { text-decoration: none; font-variation-settings: "opsz" 24; font-weight: 600; font-size: 1.1rem; }
.db-convidados a:hover { color: var(--oxido); }
.db-receba p { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.db-receba .registro a { color: var(--tinta); }
.db-sobre .db-receba { margin: 0 0 8px; }
.db-form { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.db-form input[type=email] {
  flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--tinta-3); padding: 10px 12px; border-radius: 0;
}
.db-form input[type=email]:focus { outline: 2px solid var(--oxido); outline-offset: 1px; border-color: var(--tinta); }
.db-form button, .botao {
  font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 650; font-size: .95rem;
  background: var(--tinta); color: var(--papel); border: 1px solid var(--tinta); padding: 10px 16px; cursor: pointer; border-radius: 0;
}
.db-form button:hover, .botao:hover { background: var(--mar); border-color: var(--mar); color: var(--papel); }
.db-mel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.db-aviso { background: var(--mar-claro); color: var(--tinta); padding: 10px 12px; margin: 12px 0 0 !important; font-size: 1rem; }
.db-aviso-erro { background: transparent; border: 1px solid var(--oxido); }
.db-receba-texto {
  max-width: var(--coluna-texto); margin: 44px auto 0; padding: 22px 24px 20px;
  background: var(--mar-claro); border-top: 3px double var(--mar);
}
.db-receba-texto .faixa-titulo { border: 0; padding: 0; margin: 0; color: var(--mar); }
.db-receba-texto .db-receba p { color: var(--tinta); }
@media (max-width: 760px) { .db-receba-texto { padding: 18px 16px; } }
.db-capa-mais { margin-top: 14px !important; }
.faixa-titulo + .db-lista { border-top: 0; }
.db-previa { background: var(--mar-claro); color: var(--tinta); padding: 12px 16px; margin: 0 0 28px; font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 600; font-size: .95rem; }

/* ---------- Rodapé ---------- */
/* faixa em mar-profundo, como a tela final das peças; símbolo tom sobre tom */
.rodape {
  position: relative; overflow: hidden; contain: paint;
  background: var(--mar-profundo); color: var(--sobre-mar);
  margin-top: 28px;
  padding: 44px 0 40px;
  color-scheme: dark;
}
/* símbolo tom sobre tom como fundo do próprio rodapé: imagem de fundo nunca aumenta a página
   (um elemento posicionado fora da borda esticava a rolagem no Safari do iPhone) */
.rodape {
  background-image: url(/simbolo-rodape.svg);
  background-repeat: no-repeat;
  background-size: 640px 640px;
  background-position: right -230px bottom -300px;
}
.rodape .pagina { position: relative; }
.rodape .pagina::before {
  content: ""; display: block; height: 3px; margin-bottom: 34px;
  border-top: 1px solid rgba(247, 246, 242, .55); border-bottom: 1px solid rgba(247, 246, 242, .55);
}
.rodape-grade {
  display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.3fr)); gap: 2rem;
}
.rodape .marca, .rodape .marca:hover { font-size: 1.9rem; color: var(--sobre-mar); }
.rodape .missao { margin: 12px 0 0; color: var(--mar-luz); font-size: 1rem; max-width: 26em; }
.rodape h2 {
  font-family: var(--rotulo); font-stretch: 75%; font-weight: 650;
  font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mar-luz); margin: 6px 0 12px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li a { display: inline-block; padding: 4px 0; font-size: 1rem; text-decoration: none; color: var(--sobre-mar); }
.rodape li a:hover { text-decoration: underline; color: var(--sobre-mar); }
.rodape :focus-visible { outline-color: var(--mar-luz); }
.rodape-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 14px; border-top: 1px solid rgba(157, 183, 214, .35);
}
.rodape-base, .rodape .registro { color: var(--mar-luz); }
.rodape-base p { margin: 0; }

/* ---------- Matéria ---------- */
.materia { padding: 44px 0 20px; }
.materia-cab { max-width: 52rem; margin: 0 auto 30px; }
.materia-cab .manchete { max-width: 20ch; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.5rem); }
.materia-cab .linha-fina { font-size: 1.35rem; }
.credito {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline;
  border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio-fino);
  padding: 12px 0; margin-top: 22px;
}
.credito .autor { font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 600; font-size: 1rem; }
.credito .autor a { text-decoration: none; }

.materia .carta { max-width: 52rem; margin: 0 auto 34px; }

.corpo {
  max-width: var(--coluna-texto);
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.62;
}
.corpo > p { margin: 0 0 1.05em; text-wrap: pretty; hyphens: manual; }
.corpo > p:first-of-type::first-letter {
  float: left;
  font-variation-settings: "opsz" 72;
  font-weight: 600;
  font-size: 4.1em;
  line-height: .78;
  margin: .08em .08em 0 -.02em;
}
.corpo h2 {
  font-variation-settings: "opsz" 36;
  font-weight: 600;
  font-size: 1.6rem; line-height: 1.2;
  margin: 1.8em 0 .55em;
  letter-spacing: -.005em;
}
.corpo blockquote.destaque {
  margin: 2em 0; padding: 18px 0 18px 26px; border-left: 4px solid var(--oxido);
  font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); line-height: 1.3; color: var(--mar);
  font-variation-settings: "opsz" 40;
}
.corpo blockquote.destaque footer {
  margin-top: 12px; font-style: normal; color: var(--tinta-3);
  font-family: var(--rotulo); font-stretch: 87.5%; font-size: .85rem; line-height: 1.4;
}
.corpo blockquote {
  margin: 1.6em 0; padding: 0 0 0 22px;
  border-left: 3px solid var(--oxido);
  font-style: italic; font-size: 1.35rem; line-height: 1.4;
}
/* ficha da obra comentada, antes do texto */
.corpo-ficha {
  margin: 0 0 1.6em; padding: 0 0 14px;
  border-bottom: 1px solid var(--fio-fino);
  font-family: var(--rotulo); font-stretch: 87.5%; font-size: .95rem; line-height: 1.45; color: var(--tinta-2);
}
.corpo-ficha p { margin: 0 0 4px; }
.corpo-ficha em { font-family: var(--serif); font-size: 1.08rem; color: var(--tinta); }
/* epígrafe: sem fio lateral, recuada à direita */
.corpo blockquote.epigrafe {
  margin: 0 0 2em auto; padding: 0; border: 0; max-width: 30em;
  text-align: right; font-size: 1.15rem; line-height: 1.45; color: var(--tinta-2);
}
.corpo blockquote.epigrafe footer {
  margin-top: 8px; font-style: normal;
  font-family: var(--rotulo); font-stretch: 87.5%; font-size: .85rem; color: var(--tinta-3);
}
/* quebra de seção */
.corpo hr.sep { border: 0; margin: 1.7em 0 1.5em; height: auto; text-align: center; overflow: visible; }
.corpo hr.sep::before {
  content: "*\2003*\2003*"; color: var(--mar); font-size: 1.45rem; letter-spacing: .1em;
}

.fim-texto {
  display: inline-block; width: .55em; height: .55em; margin-left: .25em;
  background: var(--mar); vertical-align: baseline;
  -webkit-mask: url(/simbolo.svg) center / contain no-repeat;
          mask: url(/simbolo.svg) center / contain no-repeat;
}

.transparencia {
  max-width: var(--coluna-texto);
  margin: 40px auto 0;
  border-top: 2px solid var(--fio);
  padding-top: 16px;
}
.transparencia h2 {
  font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 650; font-size: .95rem; margin: 0 0 10px;
}
.transparencia dl { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: 10px 20px; }
.transparencia dt { font-family: var(--rotulo); font-stretch: 87.5%; font-weight: 600; font-size: .95rem; padding-top: .15em; }
.transparencia dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--tinta-2); }
.transparencia dd a { color: var(--tinta); }

.leia-tambem { max-width: 52rem; margin: 56px auto 50px; }
.leia-tambem ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.leia-tambem li { border-bottom: 1px solid var(--fio-fino); padding: 14px 0; }
.leia-tambem a { text-decoration: none; font-variation-settings: "opsz" 24; font-weight: 600; font-size: 1.15rem; line-height: 1.25; display: block; }
.leia-tambem .registro { display: block; margin-top: 6px; }

/* páginas institucionais */
.inst-cab { max-width: var(--coluna-texto); margin: 0 auto 26px; }
.inst-cab .manchete { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); max-width: none; }
.sumario {
  max-width: var(--coluna-texto); margin: 0 auto 36px;
  border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio-fino); padding: 12px 0;
}
.sumario ol { margin: 0; padding: 0 0 0 1.4em; columns: 2; column-gap: 32px; font-size: 1rem; }
.sumario li { padding: 3px 0; break-inside: avoid; }
.sumario a { text-decoration: none; }
.sumario a:hover { text-decoration: underline; }

/* ---------- Editoria ---------- */
.ed-cab {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: end;
  padding: 40px 0 22px; border-bottom: 2px solid var(--fio);
}
.ed-cab h1 {
  font-variation-settings: "opsz" 72; font-weight: 600;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -.025em; margin: 0;
}
.ed-cab p { margin: 0; font-size: 1.2rem; line-height: 1.45; color: var(--tinta-2); max-width: 32em; }

.vazio {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px;
  padding: 34px 0 60px;
}
.vazio .estado { font-variation-settings: "opsz" 36; font-size: 1.45rem; line-height: 1.3; margin: 0 0 14px; font-weight: 500; }
.vazio p { margin: 0 0 12px; color: var(--tinta-2); }
.vazio .faixa-titulo { margin-bottom: 0; }
.vazio ul { list-style: none; margin: 0; padding: 0; }
.vazio li { border-bottom: 1px solid var(--fio-fino); }
.vazio li a { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; text-decoration: none; font-size: 1.1rem; }
.vazio li a span:last-child { color: var(--tinta-3); }

/* ---------- 404 ---------- */
.naufragio { max-width: var(--coluna-texto); margin: 0 auto; padding: 70px 0 90px; }
.naufragio .manchete { max-width: 16ch; }
.naufragio p { color: var(--tinta-2); font-size: 1.15rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .capa { grid-template-columns: 1fr; }
  .manchete-bloco { padding-right: 0; border-right: 0; }
  .lateral {
    padding-left: 0; margin-top: 36px; padding-top: 0;
    display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0 40px;
  }
  
  .rodape-grade { grid-template-columns: 1fr 1fr 1fr; }
  .rodape-grade > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --margem: 18px; }
  body { font-size: 1.0625rem; }

  .topo { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 16px 0 12px; }
  .topo .esq, .topo .dir { display: none; }
  .marca { font-size: 2.6rem; }
  .topo.compacto { justify-items: start; }
  .topo.compacto .marca { font-size: 1.7rem; }

  /* navegação: rolagem horizontal com indicação visual de continuidade */
  .nav ul {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
            mask: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 40px;
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav a { padding: 12px 12px 11px; }
  .nav li:first-child a { padding-left: 0; }

  .situacao { flex-direction: column; gap: 2px; }

  .capa { padding: 24px 0 30px; }
  .linha-fina { font-size: 1.15rem; }
  .abertura { grid-template-columns: 1fr; gap: 0; }

  .lateral { grid-template-columns: 1fr; }

  .editorias { grid-template-columns: 1fr; }
  .editorias a { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }

  .db-grade, .db-capa { grid-template-columns: 1fr; gap: 22px; }
  .db-lista li { grid-template-columns: 1fr; gap: 2px; }
  .db-lista li.com-img, .db-lista li.db-destaque { grid-template-columns: 1fr; }
  .db-mini { order: -1; padding-top: 0; margin-bottom: 8px; }
  .db-rodape-secao { grid-template-columns: 1fr; gap: 28px; }
  .db-rodape-secao > :only-child { grid-column: auto; }
  .db-convidados ul { columns: 1; }
  .db-autor-cab { flex-direction: column; align-items: flex-start; gap: 14px; }
  .db-autor-retrato { width: 6.5rem; height: 6.5rem; }
  .db-cab { padding-top: 26px; }
  .db-sobre { padding: 20px 18px; }
  .db-capa { padding: 26px 18px 24px; }
  .nav li.nav-secao { margin-left: 4px; padding-left: 4px; }

  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 26px; }
  .rodape { background-size: 420px 420px; background-position: right -140px bottom -150px; }

  .materia { padding-top: 26px; }
  .corpo { font-size: 1.1875rem; line-height: 1.6; }
  .transparencia dl { grid-template-columns: 1fr; gap: 2px; }
  .transparencia dd { margin-bottom: 10px; }
  .leia-tambem ul { grid-template-columns: 1fr; }
  .sumario ol { columns: 1; }

  .ed-cab, .vazio { grid-template-columns: 1fr; gap: 14px; }
  .ed-cab { padding-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .nav, .situacao, .rodape, .leia-tambem, .salto { display: none; }
  body { background: #fff; color: #000; }
}

.sem-capitular > p:first-of-type::first-letter { float: none; font-size: inherit; margin: 0; font-weight: inherit; line-height: inherit; }
.corpo.sem-capitular h2:first-child { margin-top: 0; }

/* títulos de capa em azul-mar (Manual da Marca) */
.capa .manchete, .capa .manchete a { color: var(--mar); }