/* Dantesco — header e footer nativos.
   Valores medidos no header/footer do Elementor antes da troca (getComputedStyle),
   para o port sair visualmente igual. */

/* ---- Tokens ---- */

:root {
	--dantesco-bg: #fff0e5;
	--dantesco-ink: #000;
	--dantesco-nav: #3d2e00;
	--dantesco-muted: #474747;
	--dantesco-meta: rgb(129, 95, 95);
	/* O FIO DA CASA. Uma cor e um traço para toda linha divisória do site:
	   antes havia cinco — #cbcbcb nas editorias, #dcdcdc no pé dos cards (do tema
	   pai), #ffd3d3 (rosa) na assinatura do card de abertura, #eaeaea na de
	   Opinion e rgba(2,1,1,.17) pontilhado nas divisões de coluna. Ficou o
	   pontilhado, um tom mais escuro que o do Elementor. `--dantesco-line` é o
	   atalho para as divisórias; `--dantesco-rule` sozinho serve às molduras
	   fechadas (campos, botões), que continuam de traço cheio. */
	--dantesco-rule: rgba(2, 1, 1, .26);
	--dantesco-line: 1px dotted var(--dantesco-rule);
	--dantesco-icon: #686868;
	--dantesco-gold: #7c6e1a;
	--dantesco-green: #6c7c69;
	--dantesco-green-text: #586b54;
	--dantesco-cta-bg: #f1f1f1;
	--dantesco-cta-btn: #333;
	--dantesco-ribbon-bg: #fff1e4;
	--dantesco-max: 1194px;
	--dantesco-pad: 27px;
	--dantesco-font-body: "PT Serif", Georgia, serif;
	--dantesco-font-display: "Bona Nova", Georgia, serif;
	--dantesco-font-nav: "Abyssinica SIL", Georgia, serif;
	--dantesco-font-meta: Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* O fio no pé de cada matéria é do Mission News (`.entry`, #dcdcdc). Entra na
   padronização como qualquer outro. */
.entry { border-bottom: var(--dantesco-line); }

/* O fio sob a barra do menu principal também é do tema pai, e era o último
   #dcdcdc de pé no site. Empilhava com o border-top do .dantesco-masthead logo
   abaixo — duas linhas pontilhadas de 1px coladas liam como uma só de ~2px.
   2026-09-11: zerado explicitamente (não removido — sem a declaração, a borda
   CRUA do tema pai, sólida e preta, aparecia por baixo). O filete do masthead
   sozinho já faz a separação. */
.menu-primary-container { border-bottom: none; }

/* Os separadores escritos dentro do texto (bloco "Separador" do editor) vinham
   com 2px cinza-médio — três vezes mais pesados que qualquer outro fio da
   página. */
hr,
.wp-block-separator {
	border: 0;
	border-top: var(--dantesco-line);
	height: 0;
	background: none;
}

/* Molduras fechadas — campo de busca, comentários — ficam de traço cheio, mas
   na cor da casa: um retângulo pontilhado em volta de um campo lê como erro. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select,
.search-field { border-color: var(--dantesco-rule); }

/* Regra do editor (2026-09-11): a única tipografia PRETA do site é o logo —
   todo o resto (títulos incluídos) lê em cinza escuro. `--dantesco-ink`
   continua existindo para o que não é texto (ícones, fundo de botão sólido,
   emblema de página atual da paginação); texto novo usa `--dantesco-muted`. */
body {
	background-color: var(--dantesco-bg);
	font-family: var(--dantesco-font-body);
	color: var(--dantesco-muted);
}

/* Cor de link do site inteiro. O tema pai (Mission News) pinta todo <a> de azul
   (#176db3) em `a` e `a:link, a:visited`; aqui devolvemos à paleta Dantesco —
   marrom secundário, dourado no hover — de uma vez, no lugar de remendar cada
   componente. Regras mais específicas (menus, rodapé, botões, chips) seguem
   mandando na sua própria cor. */
a,
a:link,
a:visited {
	color: var(--dantesco-meta);
}
a:hover,
a:focus {
	color: var(--dantesco-gold);
}

/* Sem sombra em nada, no site inteiro (pedido do editor). O foco de teclado
   passa a se apoiar no outline padrão do navegador. */
*,
*::before,
*::after {
	box-shadow: none !important;
	text-shadow: none !important;
}
/* pega também drop-shadow feito via filter */
[style*="drop-shadow"] {
	filter: none !important;
}

/* O tema pai (Mission News) pinta de branco o contêiner de conteúdo (#max-width)
   e o rodapé (.site-footer). Devolvemos os dois ao fundo do site aqui, pelo mesmo
   token — antes isso vivia duplicado, com o valor fixo #fff0e5 repetido no CSS
   Adicional do Personalizador (removido). Agora a cor de fundo tem uma origem só:
   o token --dantesco-bg. */
#max-width {
	background-color: var(--dantesco-bg);
}

/* Mission News injeta uma área de widget "After first post" no meio do loop de
   arquivos/blog (usada para anúncio). Não usamos — removemos o bloco e o espaço
   dele em todo o site (revista, blog e arquivo de ensaios). */
#after-first-post,
.widget-area-after-first-post {
	display: none !important;
}

/* ---- Header ---- */

.dantesco-header {
	background-color: var(--dantesco-bg);
	border: 0;
	padding: 10px 0 0;
	/* Ar entre o fim do cabeçalho e o começo do conteúdo, em todas as páginas.
	   O original encostava as duas coisas; com menu, data, tagline e idiomas
	   empilhados ali em cima, a página começava sem respiro. Tem de ser AQUI:
	   esta regra vem depois de `.site-header` no arquivo e zerava qualquer
	   margem posta lá. */
	margin-bottom: 32px;
}

.dantesco-ticker:empty {
	display: none;
}

/* Barra de utilidades: burger e busca à esquerda, logo ao centro, ações à direita.
   Grid de três colunas iguais mantém a logo centrada mesmo com os lados de larguras
   diferentes — que é o que o flex com space-between não garante. */
.dantesco-utility-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding: 10px var(--dantesco-pad);
	min-height: 83px;
	box-sizing: border-box;
	/* No original a barra tinha filete em cima (abaixo da faixa de cotações) e embaixo. */
	border-top: var(--dantesco-line);
	border-bottom: var(--dantesco-line);
}

.dantesco-utility-bar__start {
	position: relative;
	display: flex;
	align-items: center;
	/* Era 14px — mas o botão do sanduíche tinha 101px de caixa invisible em volta
	   do ícone (ver .toggle-navigation), então a distância real era bem maior.
	   Com a caixa encolhida, 8px já lê como "próximos", pedido do editor. */
	gap: 8px;
	/* Recuo de 10px: no original o bloco começava em x=37 dentro do contêiner de 27. */
	padding-left: 10px;
}

/* A lupa volta ao lado do sanduíche — pedido do editor (2026-09-11), que a usava
   ali antes de eu escondê-la. Maior e só o ícone, sem o rótulo "Search": o
   ícone (.fa-search) já é o SVG via mask do bloco "ÍCONES SEM FONT AWESOME"
   mais abaixo neste arquivo. Markup em content/search-bar.php (sobrescreve o
   do tema pai — mesmos ids/classes, o JS de abrir/fechar continua o do pai). */
#search-toggle span { display: none; }
#search-toggle .fa-search {
	font-size: 26px; /* controla o `1em` do mask */
	/* Mesmo cinza do sanduíche (--dantesco-icon), não o preto — pedido do
	   editor (2026-09-11): os dois ícones no mesmo tom. */
	color: var(--dantesco-icon);
}

/* Popup de busca: fundo mais translúcido que o do tema pai (era quase opaco),
   título em cinza escuro em vez de preto puro, e o X de fechar ao lado do
   campo — no pai ele ficava `position:absolute` no canto superior esquerdo,
   por cima do título; aqui entra na mesma linha do formulário
   (.dantesco-search-popup__row, novo). `color-mix` deriva do token: se
   `--dantesco-bg` mudar, o popup acompanha sozinho. */
#search-form-popup {
	/* 55% tinha ficado translúcido demais — pedido do editor, subiu pra 78%.
	   O blur segue: mesmo a 78% ele evita que o texto por trás (o "Dantesco"
	   do logo, bem atrás do título) leia colado no título. */
	background: color-mix( in srgb, var(--dantesco-bg) 78%, transparent );
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#search-form-popup .title {
	color: var(--dantesco-muted);
}
.dantesco-search-popup__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	/* Trava a largura do formulário: `.search-form` do tema pai é uma
	   PORCENTAGEM do contêiner (com teto de 680px) — dentro do flex, sem isso
	   o contêiner encolhe pro conteúdo e a porcentagem colapsa em cascata
	   (era ~296px em vez de 680px). `width:100%` no formulário some com a
	   circularidade; quem limita a largura final é o `max-width` do contêiner. */
	max-width: 720px;
	margin: 0 auto;
}
.dantesco-search-popup__row .search-form-container {
	flex: 1 1 auto;
	min-width: 0;
}
.dantesco-search-popup__row .search-form { width: 100%; }
/* Campo branco do tema pai → o mesmo cinza sutil (um tom mais escuro que o
   fundo da página) do botão Subscribe (.dantesco-btn--solid), pedido do
   editor pra não destoar. */
#search-form-popup .search-field {
	background: rgba(193, 193, 193, 0.1);
}
#search-form-popup #close-search {
	position: static;
	/* O X vai pra ESQUERDA do campo — pedido do editor — sem trocar a ordem no
	   HTML (mantém a leitura "campo, depois fechar" pra quem usa leitor de
	   tela). */
	order: -1;
	flex: 0 0 auto;
	color: var(--dantesco-muted);
}
#search-form-popup #close-search:hover,
#search-form-popup #close-search:focus-visible { color: var(--dantesco-gold); }
/* Botão SEARCH do popup: preto do tema pai → cinza escuro (a mesma regra de
   "só o logo é preto" de 2026-09-11), hover dourado. */
#search-form-popup .search-submit { background: var(--dantesco-muted); }
#search-form-popup .search-submit:hover,
#search-form-popup .search-submit:focus-visible { background: var(--dantesco-gold); }
@media (max-width: 560px) {
	.dantesco-search-popup__row { flex-wrap: wrap; gap: 10px; }
}

/* Menu "Top" (Home, Members, Groups…): fica recolhido e abre como dropdown quando
   se clica no ícone sanduíche (JS no footer.php alterna .is-open). No Elementor era
   Roboto 14px #000, hover cinza. */
.dantesco-utility-bar #menu-secondary-container {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	min-width: 240px;
	margin-top: 6px;
	padding: 8px 0;
	background: var(--dantesco-bg);
	border: 1px solid var(--dantesco-rule);
}

.dantesco-utility-bar #menu-secondary-container.is-open {
	display: block;
}

.dantesco-utility-bar #menu-secondary-container .menu,
.dantesco-utility-bar #menu-secondary-container ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Lista sempre vertical: o tema pai põe flex/wrap na .menu-secondary-items. */
.dantesco-utility-bar #menu-secondary-container ul {
	display: block;
}

.dantesco-utility-bar #menu-secondary-container li {
	display: block;
	width: 100%;
}

.dantesco-utility-bar #menu-secondary-container a {
	display: block;
	padding: 6px 16px;
	font-family: var(--dantesco-font-meta);
	font-size: 14px;
	line-height: 1.4;
	color: var(--dantesco-muted);
	text-decoration: none;
	white-space: nowrap;
}

.dantesco-utility-bar #menu-secondary-container a:hover,
.dantesco-utility-bar #menu-secondary-container a:focus {
	color: #b9b9b9;
}

.dantesco-utility-bar__end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

/* Logado: o botão "Sign In / Register" dá lugar ao avatar do perfil (mesmo do
   BuddyPress) com um menu de conta — a barra do WP está oculta, então é por aqui
   que se chega ao perfil / logout a partir da revista. */
.dantesco-user {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}
.dantesco-user > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.dantesco-user > summary::-webkit-details-marker { display: none; }
.dantesco-user > summary::marker { content: ""; }
.dantesco-user__avatar {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}
.dantesco-user__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	background: var(--dantesco-bg);
	border: 1px solid var(--dantesco-rule);
	border-radius: 4px;
	min-width: 200px;
	padding: 6px;
	z-index: 200;
}
.dantesco-user__menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 3px;
	color: var(--dantesco-muted);
	text-decoration: none;
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
}
.dantesco-user__menu a:hover,
.dantesco-user__menu a:focus {
	background: rgba(0, 0, 0, .05);
	color: var(--dantesco-gold);
}
.dantesco-header.is-stuck .dantesco-user__avatar {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px;
	flex-basis: 30px;
}

/* Sino de notificações na barra da revista (só logado), à esquerda do avatar.
   É um <details>: .dantesco-notif-wrap (âncora) > summary.dantesco-notif (gatilho)
   + .dantesco-notif__panel (dropdown). */
.dantesco-notif-wrap {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}
.dantesco-notif-wrap[open] { z-index: 950; }
.dantesco-notif {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dantesco-muted);
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}
.dantesco-notif::-webkit-details-marker { display: none; }
.dantesco-notif::marker { content: ""; }
.dantesco-notif:hover,
.dantesco-notif-wrap[open] .dantesco-notif { color: var(--dantesco-gold); }
.dantesco-notif .dcom-ico { width: 22px; height: 22px; }
.dantesco-header.is-stuck .dantesco-notif .dcom-ico { width: 20px; height: 20px; }
.dantesco-notif-wrap .dantesco-notif__count {
	position: absolute;
	top: -5px;
	right: -7px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--dantesco-meta, #815f5f);
	color: #fff;
	font-family: var(--dantesco-font-meta);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* painel */
.dantesco-notif__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: -6px;
	width: 340px;
	max-width: 88vw;
	background: var(--dantesco-bg, #fff0e5);
	border: 1px solid var(--dantesco-rule, #cbcbcb);
	border-radius: 4px;
	box-shadow: 0 18px 44px -22px rgba(60, 46, 0, .4);
	z-index: 950;
}
.dantesco-notif__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: var(--dantesco-line);
	font-family: var(--dantesco-font-meta);
}
.dantesco-notif__head > span {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--dantesco-muted);
}
.dantesco-notif__head a {
	font-size: 12px;
	color: var(--dantesco-gold) !important;
	text-decoration: none;
}
.dantesco-notif__head a:hover { text-decoration: underline; }
.dantesco-notif__list {
	margin: 0;
	padding: 4px 0;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}
.dantesco-notif__list li {
	margin: 0;
	padding: 0;
	font-family: var(--dantesco-font-body);
	font-size: 13px;
	line-height: 1.45;
}
.dantesco-notif__list li + li { border-top: 1px solid rgba(0, 0, 0, .06); }
.dantesco-notif__list li a,
.dantesco-notif__list li > * {
	display: block;
	padding: 10px 14px;
	color: var(--dantesco-muted) !important;
	text-decoration: none;
}
.dantesco-notif__list li a:hover { background: rgba(0, 0, 0, .04); }
.dantesco-notif__empty {
	margin: 0;
	padding: 22px 14px;
	text-align: center;
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	color: var(--dantesco-muted);
}

/* O partial `logo.php` do pai embrulha a imagem num `.site-title` que, com a classe
   `has-date`, carrega margem e line-height próprios e inflava a linha em 32px
   (94px de wrapper para uma imagem de 62px). Aqui o wrapper vira só um contêiner. */
.dantesco-utility-bar__logo .site-title,
.dantesco-utility-bar__logo .custom-logo-link {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
}

.dantesco-utility-bar__logo img {
	display: block;
	max-height: 62px;
	width: auto;
}

/* O tema pai esconde o botão do menu acima de 800px; aqui ele é o acesso ao menu
   secundário em qualquer largura, como era no Elementor. */
/* O pai posiciona o botão do menu com offset próprio, o que jogava o ícone para
   fora do contêiner (x=-9). Dentro da barra ele é um item de flex comum. */
.dantesco-header .toggle-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
	margin: 0;
	/* Era 101px — sobra do rótulo "MENU" que o original tinha ao lado do ícone;
	   sem texto nenhum aqui, essa caixa larga só afastava a lupa. 40px ainda dá
	   uma área de toque confortável em volta do ícone de 20px. */
	width: 40px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* Ícone do menu: cinza, com as barras mais grossas e pontas arredondadas, como no
   toggle do Elementor. O SVG do tema pai tem 3 <rect> de 2px em y=0/8/16 (viewBox
   0 0 24 18); as props geométricas x/y/height/rx são sobrescritas aqui. */
.dantesco-header .toggle-navigation svg {
	/* Era 24×20 — reduzido a pedido do editor (2026-09-11), pra ficar mais perto
	   do tamanho da lupa ao lado. */
	width: 20px;
	height: 17px;
	fill: var(--dantesco-icon);
}

.dantesco-header .toggle-navigation svg rect {
	/* Os <rect> herdam fill do <g> do tema pai; forçar aqui pra ficarem cinza. */
	fill: var(--dantesco-icon);
	height: 3px;
	rx: 1.5px;
}

.dantesco-header .toggle-navigation svg .top-bar {
	y: 0;
}

.dantesco-header .toggle-navigation svg .middle-bar {
	y: 7.5px;
}

.dantesco-header .toggle-navigation svg .bottom-bar {
	y: 15px;
}

.dantesco-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 3px;
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.dantesco-btn--ghost {
	color: var(--dantesco-muted);
	background: transparent;
}

.dantesco-btn--solid {
	color: var(--dantesco-muted);
	background: rgba(193, 193, 193, 0.1);
}

.dantesco-btn:hover,
.dantesco-btn:focus {
	background: rgba(193, 193, 193, 0.28);
}

/* Sign in / Subscribe: o tema pai pinta todo <a> de azul (a:link). Estes seletores
   com duas classes vencem essa regra. Sign in era #000 no original medido;
   2026-09-11: o editor decidiu que só o logo fica preto no site, então virou
   o mesmo cinza do Subscribe (peso continua diferenciando os dois: 500/700). */
.dantesco-utility-bar__end .dantesco-btn--ghost {
	color: var(--dantesco-muted);
	font-weight: 500;
}

.dantesco-utility-bar__end .dantesco-btn--solid {
	color: var(--dantesco-muted);
	font-weight: 700;
}

/* ---- Menu principal ---- */

.dantesco-primary {
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding: 15px var(--dantesco-pad);
	/* Empilhava com o border-bottom da barra de utilidades logo acima — duas
	   linhas pontilhadas de 1px coladas liam como uma só de ~2px. 2026-09-11:
	   zerado explicitamente (não removido — sem a declaração, a borda CRUA do
	   tema pai, sólida e preta, aparecia por baixo). O filete da barra de
	   utilidades sozinho já faz a separação. */
	border-top: none;
}

.dantesco-primary .menu-primary-items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Era só `> li` (o item de primeiro nível): um `<li>` DENTRO de um .sub-menu
   (categoria-neto, tipo "Brazil" dentro de "Latin America" dentro de "World &
   Politics") não tinha position:relative próprio — o painel dela se
   posicionava relativo ao item de primeiro nível, não ao pai imediato.
   2026-09-11, junto com o resto do bug abaixo. */
.dantesco-primary .menu-primary-items li {
	position: relative;
}

/* O submenu do tema pai fica no fluxo e empurrava a barra para duas linhas;
   sai do fluxo aqui e volta a abrir no hover, como era no Elementor. */
.dantesco-primary .menu-primary-items .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	background: var(--dantesco-bg);
	border: 1px solid var(--dantesco-rule);
	list-style: none;
}

.dantesco-primary .menu-primary-items > li:hover > .sub-menu,
.dantesco-primary .menu-primary-items > li:focus-within > .sub-menu {
	display: block;
}
/* BUG (2026-09-11): a regra acima só abre o submenu de PRIMEIRO nível —
   passar o mouse num item DENTRO do painel (uma categoria-filha com filhas
   próprias, "categoria-neto") não acionava o painel dela, porque o seletor
   era `.menu-primary-items > li:hover`, escopado aos itens de topo. Sem esta
   regra, o sub-submenu existia no HTML mas nunca aparecia. Abre pro LADO
   (não embaixo): embaixo empilharia sobre o próprio painel pai já aberto. */
.dantesco-primary .menu-primary-items .sub-menu li:hover > .sub-menu,
.dantesco-primary .menu-primary-items .sub-menu li:focus-within > .sub-menu {
	display: block;
}
.dantesco-primary .menu-primary-items .sub-menu .sub-menu {
	top: -9px; /* alinha com o item pai, compensando o padding:8px 0 do painel */
	left: 100%;
}

.dantesco-primary .menu-primary-items .sub-menu a {
	display: block;
	padding: 6px 15px;
	font-family: var(--dantesco-font-nav);
	font-size: 15px;
	color: var(--dantesco-nav);
	text-decoration: none;
}

.dantesco-primary .menu-primary-items > li > a {
	display: block;
	padding: 10px 15px;
	font-family: var(--dantesco-font-nav);
	font-size: 17px;
	line-height: 20px;
	color: var(--dantesco-nav);
	text-decoration: none;
}

.dantesco-primary .menu-primary-items > li > a:hover {
	text-decoration: underline;
}

/* A seção atual ("Culture" numa página de /category/culture/) vinha com o
   estado "current" cru do tema pai — caixa cinza com borda. Pedido do editor:
   sem caixa nenhuma; a marca do item ativo é negrito (não sublinhado — trocado
   em 2026-09-11). */
.dantesco-primary .menu-primary-items > li.current-menu-item > a,
.dantesco-primary .menu-primary-items > li.current-menu-parent > a,
.dantesco-primary .menu-primary-items > li.current-menu-ancestor > a,
.dantesco-primary .menu-primary-items > li.current_page_item > a,
.dantesco-primary .menu-primary-items > li.current-page-ancestor > a {
	background: none;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	font-weight: 700;
}

/* AS SETAS DO MENU.
   O tema pai desenha a seta com um glyph do Font Awesome no `::after` do link
   (U+F107 embaixo, U+F105 ao lado nos submenus). Quando o Font Awesome saiu do
   site — 101 KB para sete ícones — o `<i>` vazio virou SVG, mas ESTE `::after`
   ficou pedindo uma fonte que não existe mais, e o navegador desenhava o
   quadradinho de glyph ausente. Agora é máscara, como os outros ícones: mesma
   forma, herda a cor, zero bytes de fonte. */
.dantesco-primary .menu-primary-items li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 4px;
	vertical-align: 0;
	opacity: .45;
	background-color: currentColor;
	-webkit-mask: var(--dantesco-caret) center / contain no-repeat;
	mask: var(--dantesco-caret) center / contain no-repeat;
	--dantesco-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 8.6 4.8 7.2 12 14.4l7.2-7.2 1.4 1.4L12 17.2z'/%3E%3C/svg%3E");
}
/* Nos submenus a seta aponta para o lado, como no original. */
.dantesco-primary .menu-primary-items .sub-menu li.menu-item-has-children > a::after {
	--dantesco-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 3.4 7.2 4.8 14.4 12l-7.2 7.2 1.4 1.4L17.2 12z'/%3E%3C/svg%3E");
}

/* ---- Data, tagline e idiomas ---- */

.dantesco-masthead {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding: 10px var(--dantesco-pad) 8px;
	border-top: var(--dantesco-line);
	/* Filete pontilhado abaixo da data/tagline (no Elementor ficava no widget da tagline). */
	border-bottom: 1px dotted var(--dantesco-rule);
	font-family: var(--dantesco-font-meta);
	font-size: 14px;
	line-height: 14px;
	color: var(--dantesco-meta);
}

/* Só o NOME da revista vai em negrito (pedido do editor); o lema de Dante ao
   lado fica no peso normal, no dourado da casa. */
.dantesco-masthead__name { font-weight: 700; }
.dantesco-masthead__motto { color: var(--dantesco-gold); }

/* O separador entre a data e a tagline é decoração: nasce do CSS para não
   virar texto lido em voz alta. */
.dantesco-masthead__tagline::before {
	content: "|";
	margin-right: 10px;
	font-weight: 400;
	color: var(--dantesco-rule);
}

.dantesco-languages {
	max-width: var(--dantesco-max);
	margin: 0 auto;
	/* 1px inferior fecha a diferença de altura do header contra o original (300 -> 301). */
	padding: 0 var(--dantesco-pad) 1px;
	border-bottom: 1px dotted var(--dantesco-rule);
}

.dantesco-languages__items {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* O <a> de cada idioma é `display:block` (abaixo) — um bloco depois de um
   inline (o "·" do ::before) sempre quebra linha, então sem isto o pontinho
   de TODOS os itens ia pra cima e os nomes caíam pra uma segunda linha,
   soltos. `display:flex` no <li> faz o "·" e o <a> ficarem lado a lado. */
.dantesco-languages__items li {
	display: flex;
	align-items: baseline;
}

/* Menu de idiomas: no original era Roboto 12px na cor meta (#815F5F), não o
   Abyssinica marrom grande. Hover dourado como os demais menus do Elementor. */
.dantesco-languages__items a {
	display: block;
	padding: 5px 8px;
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	line-height: 20px;
	color: var(--dantesco-meta);
	text-decoration: none;
}

.dantesco-languages__items a:hover,
.dantesco-languages__items a:focus {
	color: var(--dantesco-gold);
}
/* Pontinho entre os idiomas — mesmo separador usado no submenu de seção e nos
   cards (.dantesco-post__cats-sep). */
.dantesco-languages__items li + li::before {
	content: "·";
	color: #8a8a8a;
}
/* Idioma ativo: negrito, mesmo tratamento do item atual no menu principal
   (trocado de sublinhado pra negrito em 2026-09-11). */
.dantesco-languages__items li.current-menu-item > a,
.dantesco-languages__items li.current_page_item > a {
	font-weight: 700;
}

/* ---- Cabeçalho fixo condensado (reaparece ao rolar para cima) ---- */

/* No topo da página o cabeçalho é o normal, no fluxo. Depois que ele sai de
   vista, `.is-stuck` fixa no topo uma versão baixa e reorganizada; `.is-hidden`
   (rolando para baixo) esconde deslizando para cima. Ficam de fora da versão
   condensada: a faixa de cotações, a linha de data/tagline, a linha de idiomas
   e a busca. Abaixo de 800px o menu principal continua no drawer do tema pai —
   a barra condensada fica só com sanduíche + logo + ações.
   JS: footer.php (mede a altura do cabeçalho cheio → --dho-spacer, alterna as
   classes conforme a direção do scroll). */

.dantesco-header.is-stuck {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	display: flex;
	align-items: center;
	/* Espaçamento é feito item a item (margens abaixo), não por um gap único —
	   sanduíche↔logo é largo, risquinho↔menu é curto. */
	gap: 0;
	/* Padding lateral que centra um conteúdo de largura --dantesco-max e deixa o
	   fundo sangrar de ponta a ponta. Vertical dá ~85px de barra. */
	padding: 14px max(var(--dantesco-pad), calc((100% - var(--dantesco-max)) / 2));
	background-color: var(--dantesco-bg);
	border-bottom: var(--dantesco-line);
	transition: transform 0.28s ease;
}

.dantesco-header.is-stuck.is-hidden {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.dantesco-header.is-stuck {
		transition: none;
	}
}

/* Reserva o espaço do cabeçalho normal enquanto ele está fixo, pra página não
   dar um salto. --dho-spacer = altura medida do cabeçalho no topo (JS). */
body.dho-stuck .content-container {
	padding-top: var(--dho-spacer, 0px);
}

.dantesco-header.is-stuck .dantesco-ticker,
.dantesco-header.is-stuck .dantesco-masthead,
.dantesco-header.is-stuck .dantesco-languages {
	display: none;
}

/* A barra de utilidades deixa de ser grid: seus filhos passam a participar
   direto do flex do cabeçalho, pra intercalar o menu principal entre o logo e
   os botões. */
.dantesco-header.is-stuck .dantesco-utility-bar {
	display: contents;
}

.dantesco-header.is-stuck .dantesco-utility-bar__start {
	order: 1;
	gap: 0;
	padding-left: 0;
	/* Espaço largo entre o sanduíche e o logo. */
	margin-right: 34px;
}

.dantesco-header.is-stuck .toggle-navigation {
	width: auto;
}

/* Sanduíche menor na versão condensada: não pode competir com a marca. */
.dantesco-header.is-stuck .toggle-navigation svg {
	width: 17px;
	height: 14px;
}

.dantesco-header.is-stuck .dantesco-utility-bar__logo {
	order: 2;
	/* tracinho cinza de 1px depois do logo, com respiro dos dois lados (o gap do
	   flex antes, este padding-right depois). */
	padding-right: 20px;
	border-right: var(--dantesco-line);
}

.dantesco-header.is-stuck .dantesco-utility-bar__logo img {
	max-height: 56px;
}

.dantesco-header.is-stuck .dantesco-primary {
	order: 3;
	/* margin-right auto empurra as ações pra direita; padding-left curto = pouco
	   espaço entre o risquinho cinza e o menu. */
	margin: 0 auto 0 0;
	padding: 0 0 0 10px;
	border: 0;
}

.dantesco-header.is-stuck .dantesco-primary .menu-primary-items {
	justify-content: flex-start;
}

.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a {
	padding: 6px 10px;
	font-size: 15px;
	line-height: 18px;
}

/* Item da página atual / hover / foco: algo (tema pai ou plugin) pinta o fundo
   de azul. Zera qualquer fundo em todos os estados e no <li>, e marca o item
   atual só com um sublinhado de 1px no mesmo marrom do texto. Tudo restrito a
   .is-stuck — o cabeçalho do topo não muda. */
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:link,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:visited,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:hover,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:focus,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:focus-visible,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:active,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-menu-item > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-menu-parent > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-menu-ancestor > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current_page_item > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-page-ancestor > a {
	background: none !important;
	box-shadow: none !important;
}

.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:hover,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:focus,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li > a:active,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-menu-item > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-menu-parent > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-menu-ancestor > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current_page_item > a,
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.current-page-ancestor > a {
	color: var(--dantesco-nav);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--dantesco-nav);
	text-underline-offset: 3px;
}

/* O sublinhado do item ativo fica só na palavra: a setinha ▾ vira inline-block,
   o que interrompe o traço do <a> antes dela. */
.dantesco-header.is-stuck .dantesco-primary .menu-primary-items > li.menu-item-has-children > a::after {
	display: inline-block;
	text-decoration: none;
}

.dantesco-header.is-stuck .dantesco-utility-bar__end {
	order: 4;
	gap: 8px;
	margin-left: 20px;
}

.dantesco-header.is-stuck .dantesco-utility-bar__end .dantesco-btn {
	padding: 8px 14px;
	font-size: 11px;
}

@media (max-width: 800px) {
	.dantesco-header.is-stuck .dantesco-utility-bar__start {
		margin-right: 18px;
	}

	.dantesco-header.is-stuck .dantesco-utility-bar__end {
		margin-left: 12px;
	}

	.dantesco-header.is-stuck .dantesco-utility-bar__logo img {
		max-height: 46px;
	}
}

/* ---- Footer ---- */

.dantesco-footer {
	background-color: var(--dantesco-bg);
	border: 0;
	padding: 0;
}

/* Port do widget "Call to Action" (footer 1625): card cinza, texto à esquerda,
   gravura à direita e faixa "Your Article" cruzando o canto. */
.dantesco-cta {
	max-width: var(--dantesco-max);
	margin: 0 auto 40px;
	padding: 0 var(--dantesco-pad);
}

.dantesco-cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 40vh;
	background-color: var(--dantesco-cta-bg);
	overflow: hidden;
}

.dantesco-cta__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 10%;
	text-align: center;
}

.dantesco-cta__kicker {
	margin: 0 0 6px;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 17px;
	color: var(--dantesco-cta-btn);
}

.dantesco-cta__title {
	margin: 0 0 35px;
	font-family: var(--dantesco-font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 44px;
	letter-spacing: -1.13px;
	color: var(--dantesco-cta-btn);
}

.dantesco-cta__figure {
	position: relative;
	overflow: hidden;
}

.dantesco-cta__figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Faixa diagonal no canto superior direito; as pontas somem no overflow do figure. */
.dantesco-cta__ribbon {
	position: absolute;
	top: 28px;
	right: -56px;
	width: 200px;
	padding: 5px 0;
	transform: rotate(45deg);
	background: var(--dantesco-ribbon-bg);
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	text-align: center;
	color: var(--dantesco-cta-btn);
	z-index: 2;
}

.dantesco-cta .dantesco-btn--solid {
	background: var(--dantesco-cta-btn);
	color: #f1f1f1;
	font-family: var(--dantesco-font-meta);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.45px;
	text-transform: capitalize;
	border-radius: 0;
	padding: 14px 28px;
}

.dantesco-cta .dantesco-btn--solid:hover,
.dantesco-cta .dantesco-btn--solid:focus {
	background: var(--dantesco-green);
	color: #fffaf5;
}

/* ---- Anúncio de fim de página (último elemento da home, via Elementor) ---- */

/* Caixa em volta do anúncio: fundo um pouco mais escuro que o do site, largura
   total (rompe o container do Elementor), 20px acima e abaixo do anúncio. */
.dantesco-page-ad-box,
.elementor-element-9cee223 {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	background: #f6e7d8;
	align-items: center;
}

/* Rótulo "Sponsor" com respiro até o anúncio. */
.dantesco-page-ad-box .elementor-widget-heading,
.elementor-element-9cee223 .elementor-widget-heading {
	margin-bottom: 20px;
}

/* O widget HTML do Elementor encolhe pro conteúdo dentro do container flex;
   forçar largura total pro anúncio ter onde renderizar. */
.elementor-widget-html.dantesco-page-ad {
	width: 100%;
	max-width: var(--dantesco-max);
	align-self: center;
	margin: 0 auto;
	padding: 0 var(--dantesco-pad);
	text-align: center;
}

.dantesco-page-ad .adsbygoogle {
	display: block;
	width: 100%;
	margin: 0 auto;
}

.dantesco-footer__brand {
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding: 40px 20px 0;
	text-align: center;
}

.dantesco-footer__logo {
	display: inline-block;
	line-height: 0;
}

.dantesco-footer__brand img {
	width: 250px;
	max-width: 100%;
	height: auto;
}

.dantesco-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 26px;
	margin: 28px 0 0;
	padding: 14px 0;
	border-top: 1px dotted var(--dantesco-rule);
	border-bottom: 1px dotted var(--dantesco-rule);
	list-style: none;
}

.dantesco-social a {
	display: inline-flex;
	color: var(--dantesco-green);
	font-size: 19px;
	text-decoration: none;
}

.dantesco-social a:hover,
.dantesco-social a:focus {
	color: #000;
}

/* Substack não tem glyph no Font Awesome — vai como SVG inline, dimensionado
   por em pra casar com os ícones de fonte ao lado. */
.dantesco-social svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dantesco-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding: 44px 20px;
}

/* Filete entre colunas, sem borda sobrando na primeira. */
.dantesco-footer__column + .dantesco-footer__column {
	border-left: var(--dantesco-line);
}

.dantesco-footer__column {
	padding: 0 24px;
}

.dantesco-footer__column-title {
	margin: 0 0 22px;
	font-family: var(--dantesco-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* O <a> do título herdaria Roboto 14px da regra genérica `.dantesco-footer__column a`
   (mais abaixo no arquivo). O prefixo h3 dá especificidade pra devolver a tipografia
   do título como no Elementor: Bona Nova serifada, 18px, cor cinza-sálvia #6c7c69. */
h3.dantesco-footer__column-title a {
	font-family: var(--dantesco-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	color: var(--dantesco-green);
	text-decoration: none;
}

.dantesco-footer__column ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dantesco-footer__column li + li {
	margin-top: 8px;
}

.dantesco-footer__column a {
	font-family: var(--dantesco-font-meta);
	font-size: 14px;
	color: var(--dantesco-muted);
	text-decoration: none;
}

.dantesco-footer__column a:hover {
	text-decoration: underline;
}

.dantesco-footer__copyright {
	margin: 0;
	padding: 18px 20px;
	border-top: var(--dantesco-line);
	font-family: var(--dantesco-font-meta);
	font-size: 14px;
	color: var(--dantesco-muted);
	text-align: center;
}

/* ---- Categorias no rodapé dos cards (widget Posts) ---- */

/* Injetada por dantesco_posts_category_line(): uma linha no fim de cada card, em
   vez de badge sobre a imagem.
   O grid do widget Posts estica os itens (align-items: stretch) e trava a altura
   de cada card; a linha extra vazava e encobria o que vinha depois. `align-items:
   start` solta a altura, então cada card cresce o tanto que precisa e a linha
   sempre vem logo após o conteúdo. */
/* !important porque o CSS do widget do Elementor (widget-posts.min.css) carrega
   depois com a mesma especificidade: `...:not(.elementor-posts-masonry){align-items:stretch}`
   e `.elementor-post__card{min-height:100%}`. */
.elementor-widget-posts .elementor-posts-container:not(.elementor-posts-masonry) {
	align-items: start !important;
}

.elementor-widget-posts .elementor-post {
	height: auto !important;
}

.elementor-widget-posts .elementor-post .elementor-post__card {
	height: auto !important;
	min-height: 0 !important;
}

.dantesco-post__cats {
	width: 100%;
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: var(--dantesco-line);
	font-family: var(--dantesco-font-meta);
	/* Era 10px — miúdo demais, pedido do editor (2026-09-11) pra subir 1-2pt.
	   Uma categoria longa ("Architecture & Urbanism") pode não caber mais numa
	   linha só nos cards estreitos; ela quebra pro nome da editoria seguinte,
	   não corta — é o que `flex-wrap: wrap` do container já faz. */
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dantesco-post__cats a {
	color: var(--dantesco-green-text);
	text-decoration: none;
}

.dantesco-post__cats a:hover,
.dantesco-post__cats a:focus {
	color: var(--dantesco-gold);
}

.dantesco-post__cats-sep {
	margin: 0 5px;
	color: #8a8a8a;
}

/* Contraste: a "função" no bloco de autor/colaboradores vinha cinza-claro demais. */
.elementor-widget-author-box .elementor-author-box__meta,
.elementor-widget-author-box .elementor-author-box__description + p,
.elementor-post-author-role,
.author-role {
	color: #5c5c5c;
}

/* ---- Caixa "hero" horizontal (um widget Posts, imagem à esquerda) ---- */

/* Substitui o antigo puxadinho de 2 widgets (imagem + conteúdo lado a lado).
   Classe `dantesco-hero-card` no widget; a skin Classic não faz imagem ao lado
   nativamente, então o layout em linha vem daqui. */
/* !important: o widget-posts.min.css do Elementor força `.elementor-post` em
   column com a mesma especificidade e carrega depois. */
.dantesco-hero-card .elementor-post {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: stretch;
	column-gap: 24px;
	row-gap: 0;
}

.dantesco-hero-card .elementor-post__thumbnail__link {
	flex: 0 0 46%;
	max-width: 46%;
	margin: 0;
	align-self: stretch;
}

.dantesco-hero-card .elementor-post__thumbnail {
	height: 100%;
}

.dantesco-hero-card .elementor-post__text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 24px 28px 24px 0;
}

.dantesco-hero-card .elementor-post__title {
	margin-top: 0;
}

/* A linha de categorias ocupa a largura toda, abaixo da imagem + texto. */
.dantesco-hero-card .dantesco-post__cats {
	flex: 0 0 100%;
	margin: 0 28px 0 0;
	padding: 12px 0 0;
}

@media (max-width: 600px) {
	.dantesco-hero-card .elementor-post {
		flex-direction: column;
		gap: 0;
	}

	.dantesco-hero-card .elementor-post__thumbnail__link {
		flex-basis: auto;
		max-width: 100%;
	}

	.dantesco-hero-card .elementor-post__text {
		padding: 20px;
	}
}

/* ---- Responsivo ---- */

@media (max-width: 900px) {
	.dantesco-footer__columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 0;
	}

	/* Com duas colunas, o filete só faz sentido na coluna da direita de cada par. */
	.dantesco-footer__column + .dantesco-footer__column {
		border-left: 0;
	}

	.dantesco-footer__column:nth-child(2n) {
		border-left: var(--dantesco-line);
	}
}

@media (max-width: 800px) {
	.dantesco-utility-bar {
		grid-template-columns: auto 1fr auto;
		padding: 14px 16px;
	}

	.dantesco-utility-bar__end .dantesco-btn--ghost {
		display: none;
	}

	.dantesco-utility-bar__logo img {
		max-height: 40px;
	}

	/* Abaixo de 800px o menu principal é o painel deslizante do tema pai, que só
	   aparece com a classe .open — a barra horizontal fica escondida. */
	.dantesco-primary:not(.open) .menu-primary-items {
		display: none;
	}

	.dantesco-masthead {
		font-size: 12px;
	}

	/* CTA empilha: gravura acima do texto, como o layout_mobile "above" do widget. */
	.dantesco-cta__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dantesco-cta__figure {
		order: -1;
		height: 240px;
	}

	.dantesco-cta__body {
		padding: 32px 24px;
	}

	.dantesco-cta__title {
		font-size: 28px;
		line-height: 32px;
	}
}

@media (max-width: 560px) {
	.dantesco-footer__columns {
		grid-template-columns: 1fr;
	}

	.dantesco-footer__column:nth-child(2n) {
		border-left: 0;
	}
}

/* ==========================================================================
 * DATAS OCULTAS (TEMPORÁRIO) — pedido do editor até o site ter mais atividade.
 * Para REATIVAR: apague este bloco + o bloco "2b. DATAS DE PUBLICAÇÃO OCULTAS"
 * em inc/dantesco-community.php. Não afeta os "há X" do feed de atividade.
 * ======================================================================== */

/* bbPress — colunas/linhas de "freshness" e datas de resposta (cabeçalho junto,
   pra não desalinhar a tabela) */
#bbpress-forums li.bbp-forum-freshness,
#bbpress-forums li.bbp-topic-freshness,
#bbpress-forums .bbp-forum-freshness,
#bbpress-forums .bbp-topic-freshness,
#bbpress-forums .bbp-reply-post-date,
#bbpress-forums .bbp-topic-post-date,
#bbpress-forums .bbp-topic-started-in + .bbp-topic-freshness,
#bbpress-forums .bbp-reply-header .bbp-meta .bbp-reply-post-date {
	display: none !important;
}

/* Elementor / Mission News — data em cards e single (se voltar a aparecer) */
.elementor-post-date,
.elementor-post__meta-data .elementor-post-date,
.byline .posted-on,
.entry-meta .posted-on,
time.entry-date,
.entry-date.published {
	display: none !important;
}

/* Coluna direita da comunidade: se algum card ainda trouxer .dcom-posts__date */
.dcom-posts__date { display: none !important; }

/* ---- Breadcrumbs (posts e páginas) --------------------------------------- */
.dantesco-crumbs {
	max-width: var(--dantesco-content, 1200px);
	margin: 0 auto 18px;
	padding: 10px 0 0;
	font-family: var(--dantesco-font-meta, inherit);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dantesco-meta, #815f5f);
}
.dantesco-crumbs a { color: var(--dantesco-meta, #815f5f); text-decoration: none; }
.dantesco-crumbs a:hover { color: var(--dantesco-gold, #7c6e1a); }
.dantesco-crumbs__sep { margin: 0 .5em; opacity: .5; }
.dantesco-crumbs__current { color: var(--dantesco-muted, #474747); }
.single .loop-container .dantesco-crumbs,
.page .loop-container .dantesco-crumbs { padding-left: 0; }

/* Post: linha de categorias, centralizada com o título */
.dantesco-single-cats {
	margin: 0 auto 10px;
	text-align: center;
	font-family: var(--dantesco-font-meta, inherit);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.5;
}
.dantesco-single-cats a { color: var(--dantesco-meta, #815f5f); text-decoration: none; }
.dantesco-single-cats a:hover { color: var(--dantesco-gold, #7c6e1a); }
.dantesco-single-cats__sep { margin: 0 .55em; opacity: .55; }

/* ============================================================
   PÁGINAS LEGAIS, CONTATO E RODAPÉ LEGAL                v1.7.2
   ============================================================
   Tipografia de documento: coluna estreita (65-75 caracteres),
   entrelinha maior e hierarquia de títulos mais contida que a
   da revista — quem lê estas páginas está procurando um dado,
   não sendo convidado a ler. */

.dantesco-legal__lead {
	font-family: var(--dantesco-font-body);
	font-size: 19px;
	line-height: 1.62;
	color: var(--dantesco-muted);
	margin: 0 0 1.6em;
}

.dantesco-legal__updated {
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--dantesco-meta);
	margin: 0 0 1.8em;
	padding-bottom: .9em;
	border-bottom: var(--dantesco-line);
}

/* Bloco do controlador/publisher. Fica visualmente isolado de propósito:
   é o dado que muda quando a empresa for aberta, e o que um leitor (ou uma
   autoridade) procura primeiro. */
.dantesco-legal__controller {
	background: var(--dantesco-ribbon-bg);
	border-left: 3px solid var(--dantesco-meta);
	padding: 18px 22px;
	margin: 0 0 1.8em;
}
.dantesco-legal__controller p { margin: 0; line-height: 1.7; }

.entry-content h2,
.dantesco-legal h2 {
	font-family: var(--dantesco-font-display);
	font-size: 26px;
	line-height: 1.25;
	margin: 2.2em 0 .7em;
	padding-top: .7em;
	border-top: var(--dantesco-line);
}
.entry-content h3 {
	font-family: var(--dantesco-font-display);
	font-size: 19px;
	margin: 1.7em 0 .5em;
}

.dantesco-legal__table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0 1.8em;
	font-family: var(--dantesco-font-meta);
	font-size: 13.5px;
	line-height: 1.55;
}
.dantesco-legal__table th,
.dantesco-legal__table td {
	text-align: left;
	vertical-align: top;
	padding: 10px 14px 10px 0;
	border-bottom: var(--dantesco-line);
}
.dantesco-legal__table th {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
	border-bottom-width: 2px;
}
.dantesco-legal__table code {
	font-size: 12px;
	background: var(--dantesco-ribbon-bg);
	padding: 1px 5px;
}
/* Tabelas largas rolam dentro de si mesmas: o corpo da página nunca
   deve ganhar barra horizontal. */
@media (max-width: 700px) {
	.dantesco-legal__table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- Contato: formulário + coluna de dados ---- */

.dantesco-contact {
	display: grid;
	grid-template-columns: 1.25fr .85fr;
	gap: 56px;
	align-items: start;
}
.dantesco-contact h2 {
	font-family: var(--dantesco-font-display);
	font-size: 21px;
	margin: 0 0 .8em;
	padding-top: 0;
	border-top: 0;
}
.dantesco-contact__aside h2 {
	font-size: 14px;
	font-family: var(--dantesco-font-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
	margin: 2em 0 .7em;
	padding-top: .8em;
	border-top: var(--dantesco-line);
}
.dantesco-contact__aside > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dantesco-contact__aside p { font-size: 15px; line-height: 1.6; }

.dantesco-contact__routes { margin: 0 0 1.5em; }
.dantesco-contact__routes dt {
	font-family: var(--dantesco-font-meta);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
	margin-top: .9em;
}
.dantesco-contact__routes dd { margin: .15em 0 0; font-size: 15px; }

@media (max-width: 860px) {
	.dantesco-contact { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- Contact Form 7 ---- */

.dantesco-form__row { margin: 0 0 18px; }
.dantesco-form__row label {
	display: block;
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
	margin-bottom: 6px;
}
.dantesco-form__req { color: var(--dantesco-meta); }

.dantesco-form input[type="text"],
.dantesco-form input[type="email"],
.dantesco-form select,
.dantesco-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--dantesco-font-body);
	font-size: 16px;
	color: var(--dantesco-muted);
	background: #f5e4d3;               /* mesmo --dcom-field da área de comunidade */
	border: 1px solid var(--dantesco-rule);
	border-radius: 0;
	padding: 11px 13px;
	transition: border-color .15s;
}
.dantesco-form textarea { line-height: 1.55; resize: vertical; min-height: 170px; }
.dantesco-form input:focus,
.dantesco-form select:focus,
.dantesco-form textarea:focus {
	outline: 0;
	border-color: var(--dantesco-meta);
}
.dantesco-form select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23815f5f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 11px;
	padding-right: 36px;
}

.dantesco-form__consent {
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	line-height: 1.5;
	color: var(--dantesco-muted);
	margin: 4px 0 20px;
}
.dantesco-form__consent input[type="checkbox"] {
	accent-color: var(--dantesco-meta);
	margin-right: 8px;
}
.dantesco-form__consent .wpcf7-list-item { margin: 0; }

.dantesco-form input[type="submit"] {
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	background: var(--dantesco-cta-btn);
	border: 0;
	border-radius: 0;
	padding: 14px 30px;
	cursor: pointer;
	transition: background .15s;
}
.dantesco-form input[type="submit"]:hover { background: var(--dantesco-gold); }

.wpcf7 form .wpcf7-response-output {
	font-family: var(--dantesco-font-meta);
	font-size: 14px;
	border-width: 1px;
	border-radius: 0;
	margin: 18px 0 0;
	padding: 13px 16px;
}
.wpcf7-not-valid-tip {
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	color: #a33;
	margin-top: 5px;
}

/* ---- Botão sólido reaproveitável ---- */
.dantesco-btn--solid {
	display: inline-block;
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff !important;
	background: var(--dantesco-cta-btn);
	padding: 12px 24px;
	text-decoration: none;
	transition: background .15s;
}
.dantesco-btn--solid:hover { background: var(--dantesco-gold); color: #fff !important; }

/* ---- Linha legal do rodapé ---- */

.dantesco-footer__legal {
	margin: 26px 0 10px;
	padding-top: 18px;
	border-top: var(--dantesco-line);
}
.dantesco-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
}
.dantesco-footer__legal a {
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
	text-decoration: none;
}
.dantesco-footer__legal a:hover { color: var(--dantesco-gold); }

/* ============================================================
   CAPA DE SEÇÃO (category.php)                          v1.8.0
   ============================================================
   Hierarquia por tamanho de título e peso de imagem, não por
   caixas: a abertura é grande e horizontal, a grade é média e
   vertical, o resto é lista de texto. Datas não aparecem —
   segue a regra "DATAS OCULTAS" do resto do site. */

/* Padding, e não margin: a margem do primeiro filho colapsa para
   fora do #main e o respiro simplesmente não acontece — foi o que
   deu 0px de distância entre o menu e o nome da seção. */
.dantesco-section {
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding-top: 44px;
}

/* ---- Cabeçalho da seção ---- */

.dantesco-section__head {
	/* 1px cinza, como todo filete do site. O 2px preto pesava mais
	   que o próprio nome da seção e destoava da linguagem. */
	border-bottom: var(--dantesco-line);
	padding-bottom: 14px;
	margin-bottom: 30px;
}
/* Chapéu acima do nome — a mesma peça em itálico que abre cada seção na capa
   (dantesco_home_section_head() em front-page.php), que faltava aqui. Só as
   quatro seções de primeiro nível têm um (dantesco_section_kicker()); nas
   demais este parágrafo simplesmente não é impresso. */
.dantesco-section__kicker {
	font-family: var(--dantesco-font-display);
	font-style: italic;
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 500;
	line-height: 1.2;
	color: #333;
	margin: 0 0 6px;
}
/* Breadcrumb "Home / Seção-mãe" de uma subcategoria (dantesco_section_parent_
   crumb()) — mesma peça visual do chapéu, mas com dois links de verdade. */
.dantesco-section__kicker--crumb a {
	color: inherit;
	text-decoration: none;
}
.dantesco-section__kicker--crumb a:hover {
	color: var(--dantesco-gold);
	text-decoration: underline;
}
.dantesco-section__kicker-sep {
	margin: 0 8px;
	font-style: normal;
	opacity: .6;
}
.dantesco-section__name {
	font-family: var(--dantesco-font-display);
	/* Era clamp(34,5.5vw,52) — grande demais, pedido do editor (2026-09-11). */
	font-size: clamp(28px, 4.2vw, 40px);
	/* Preto puro + 700 lia como manchete de tabloide — pedido do editor:
	   cinza escuro (o mesmo token do resumo da seção, não uma cor nova) e o
	   peso regular da fonte. 700 é o único bold que o Google Fonts carrega
	   pra Bona Nova (dantesco_perf_font_families()); qualquer coisa entre
	   400 e 700 sai em negrito sintético do navegador — por isso o degrau é
	   direto pro 400, não um 500/600 que nunca foi carregado de verdade. */
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 0;
	color: var(--dantesco-muted);
}
/* Busca (search.php): "Search results for…" é frase, não nome de seção — no
   mesmo tamanho do título de categoria ficava grande demais. Só aqui, escopado
   por `.dantesco-search` (a classe extra do wrapper em search.php). */
.dantesco-search .dantesco-section__name {
	font-size: clamp(26px, 3.6vw, 36px);
}

/* Lista de resultados: todo post na MESMA linha — miniatura à esquerda num
   recorte fixo, texto à direita — empilhadas, sem abertura maior nem grade
   (pedido do editor, 2026-09-11: "a lógica do FT", não o design deles — só a
   estrutura de lista vertical uniforme). search.php passa TODO card como
   'grid' (nunca 'lead'); aqui o card --grid, que empilha miniatura-em-cima
   /texto-embaixo em outras páginas, vira uma grade de 2 colunas. O recorte
   3:2 do thumb já é o padrão de `.dantesco-section__thumb img` — mesma
   proporção em toda linha, "thumbs parecidos" sem precisar redeclarar nada. */
.dantesco-search .dantesco-section__grid {
	display: block;
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.dantesco-search .dantesco-section__card--grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	/* `stretch` (não `start`): a miniatura acompanha a altura da coluna de
	   texto até a linha de SHARE — pedido do editor (2026-09-11) — em vez de
	   parar nos 160px do recorte 3:2 e sobrar vazio ao lado. */
	align-items: stretch;
	padding-bottom: 24px;
	margin-bottom: 24px;
	/* Linha embaixo de TODO card, inclusive o último — sem ela (era zerada no
	   :last-child) a fileira de compartilhar ficava "voando solta" quando só
	   havia 1 resultado. */
	border-bottom: var(--dantesco-line);
}
.dantesco-search .dantesco-section__card--grid .dantesco-section__thumb {
	margin-bottom: 0;
	height: 100%;
}
.dantesco-search .dantesco-section__card--grid .dantesco-section__thumb img {
	/* Sem proporção fixa aqui: a altura vem do grid esticado (a da coluna de
	   texto), não de um recorte 3:2 independente. `object-fit: cover` — já
	   herdado da regra geral — continua cortando pra não distorcer a foto. */
	height: 100%;
	aspect-ratio: auto;
}
/* O respiro de 34px do topo da barra de Compartilhar (tunado pro fim de um
   artigo inteiro) sobrava demais aqui, logo abaixo das editorias — pedido do
   editor: aproximar a linha da barra do texto de cima. */
.dantesco-search .dantesco-engage {
	margin-top: 14px;
}
@media (max-width: 640px) {
	.dantesco-search .dantesco-section__card--grid {
		grid-template-columns: 1fr;
		gap: 14px;
		align-items: start;
	}
	.dantesco-search .dantesco-section__card--grid .dantesco-section__thumb {
		height: auto;
	}
	.dantesco-search .dantesco-section__card--grid .dantesco-section__thumb img {
		aspect-ratio: 3 / 2;
	}
}
.dantesco-section__desc {
	max-width: 62ch;
	margin: 12px 0 0;
	font-family: var(--dantesco-font-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--dantesco-muted);
}
.dantesco-section__desc p { margin: 0; }

/* ---- Formulário da PÁGINA de resultados (search.php) ----
   Não é o popup do header (#search-form-popup, é do tema pai) — este é o campo
   embutido no topo da própria página de busca, pra refazer a pesquisa ali. */
.dantesco-search__form {
	display: flex;
	max-width: 46ch;
	margin: 20px 0 0;
}
.dantesco-search__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var(--dantesco-rule);
	border-right: 0;
	border-radius: 3px 0 0 3px;
	/* Branco → o mesmo cinza sutil do botão Subscribe, pedido do editor. */
	background: rgba(193, 193, 193, 0.1);
	font-family: var(--dantesco-font-body);
	font-size: 15px;
	color: var(--dantesco-muted);
}
.dantesco-search__field:focus { outline-offset: -2px; }
.dantesco-search__submit {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	border: 1px solid var(--dantesco-rule);
	border-radius: 0 3px 3px 0;
	background: var(--dantesco-muted);
	color: #fff;
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.dantesco-search__submit:hover,
.dantesco-search__submit:focus-visible { background: var(--dantesco-gold); }

/* Era 18px — pedido do editor (2026-09-11): mais perto do título, sem
   encostar. */
.dantesco-section__subs { margin: 10px 0 0; }
/* Uma linha só, sempre — pedido do editor (2026-09-11): TODAS as subseções
   entram agora (não só as com posts), então a lista pode ficar comprida.
   `nowrap` + o script em dantesco_section_subs_shrink_script() (inc/dantesco-
   sections.php) encolhem a fonte até caber; `overflow-x` é a rede de
   segurança se mesmo no piso de 10px não couber (rolagem, não quebra). */
.dantesco-section__subs ul {
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: auto;
	gap: 0;
	font-size: 14px;
}
.dantesco-section__subs li + li::before {
	content: "·";
	color: #8a8a8a;
	margin: 0 10px;
}
.dantesco-section__subs a {
	font-family: var(--dantesco-font-meta);
	font-size: inherit;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	/* Dourado — pedido do editor (2026-09-11). */
	color: var(--dantesco-gold);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
}
.dantesco-section__subs a:hover { text-decoration: underline; }

/* ---- Cards: base comum ---- */

.dantesco-section__card { margin: 0; }
.dantesco-section__thumb { display: block; overflow: hidden; }
.dantesco-section__thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .2s;
}
.dantesco-section__thumb:hover img { opacity: .88; }

.dantesco-section__title {
	font-family: var(--dantesco-font-display);
	font-weight: 700;
	line-height: 1.16;
	margin: 0 0 8px;
	letter-spacing: -.005em;
}
/* Mesmo cinza escuro do nome da seção — pedido do editor, o preto puro saía
   forte demais em todo título de card também. */
.dantesco-section__title a { color: var(--dantesco-muted); text-decoration: none; }
.dantesco-section__title a:hover { color: var(--dantesco-gold); }

.dantesco-section__standfirst {
	font-family: var(--dantesco-font-body);
	color: var(--dantesco-muted);
	margin: 0 0 10px;
	line-height: 1.5;
}
.dantesco-section__byline {
	font-family: var(--dantesco-font-meta);
	/* Maior e dourado — pedido do editor (2026-09-11), pra assinatura pesar
	   tanto quanto no post e na capa. Só as iniciais em caixa alta: a grafia
	   vem pronta de dantesco_author_name() (o editor pediu "Nome Do Autor",
	   não "NOME DO AUTOR"). O bold é só do NOME (no <a> abaixo) — "By" fica no
	   peso normal, pedido à parte do editor. Subiu de 14 pra 16px depois,
	   mesmo dia — ainda pequena perto do título. */
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: .03em;
	margin: 0;
	color: var(--dantesco-gold);
}
.dantesco-section__byline a { color: inherit; font-weight: 700; text-decoration: none; }
.dantesco-section__byline a:hover { text-decoration: underline; }

/* ---- Abertura: imagem à direita, texto à esquerda ---- */

.dantesco-section__card--lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
	align-items: start;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: var(--dantesco-line);
}
.dantesco-section__card--lead .dantesco-section__thumb { order: 2; }
.dantesco-section__card--lead .dantesco-section__text  { order: 1; }
.dantesco-section__card--lead .dantesco-section__title { font-size: clamp(28px, 3.6vw, 40px); }
.dantesco-section__card--lead .dantesco-section__standfirst { font-size: 18px; }

/* Sem imagem, a abertura ocupa a largura inteira em vez de deixar meia
   coluna vazia — hoje quase nenhum post tem imagem destacada. */
.dantesco-section__card--lead:not(:has(.dantesco-section__thumb)) {
	grid-template-columns: 1fr;
	max-width: 74ch;
}

/* ---- Grade ---- */

.dantesco-section__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 26px;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: var(--dantesco-line);
}
.dantesco-section__card--grid .dantesco-section__thumb { margin-bottom: 12px; }
.dantesco-section__card--grid .dantesco-section__title { font-size: 20px; }
.dantesco-section__card--grid .dantesco-section__standfirst { font-size: 14.5px; }

/* ---- Lista ---- */

.dantesco-section__latest-title {
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dantesco-meta);
	margin: 0 0 4px;
}
.dantesco-section__card--list {
	padding: 17px 0;
	border-bottom: var(--dantesco-line);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 28px;
	align-items: baseline;
}
.dantesco-section__card--list .dantesco-section__title {
	font-size: 21px;
	margin: 0;
	grid-column: 1;
}
.dantesco-section__card--list .dantesco-section__byline { grid-column: 2; grid-row: 1; text-align: right; }
.dantesco-section__card--list .dantesco-post__cats {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	padding-top: 0;
	border-top: 0;
}

/* ---- Paginação ---- */

.dantesco-section .navigation.pagination { margin: 34px 0 0; }
.dantesco-section .nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.dantesco-section .page-numbers {
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	font-weight: 500;
	color: var(--dantesco-meta);
	text-decoration: none;
	padding: 8px 13px;
	border: 1px solid var(--dantesco-rule);
}
.dantesco-section .page-numbers:hover { color: var(--dantesco-gold); border-color: var(--dantesco-meta); }
.dantesco-section .page-numbers.current {
	background: var(--dantesco-ink);
	color: var(--dantesco-bg);
	border-color: var(--dantesco-ink);
}

/* ---- Seção vazia ---- */

.dantesco-section__empty { max-width: 62ch; padding: 8px 0 20px; }
.dantesco-section__empty-lead {
	font-family: var(--dantesco-font-display);
	font-size: 25px;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--dantesco-muted);
}
.dantesco-section__empty p {
	font-family: var(--dantesco-font-body);
	color: var(--dantesco-muted);
	line-height: 1.6;
}
.dantesco-section__empty-title {
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dantesco-meta);
	margin: 30px 0 10px;
	padding-top: 16px;
	border-top: var(--dantesco-line);
}
.dantesco-section__empty-list { list-style: none; margin: 0; padding: 0; }
.dantesco-section__empty-list li {
	padding: 10px 0;
	border-bottom: var(--dantesco-line);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}
.dantesco-section__empty-list a {
	font-family: var(--dantesco-font-display);
	font-size: 19px;
	color: var(--dantesco-muted);
	text-decoration: none;
}
.dantesco-section__empty-list a:hover { color: var(--dantesco-gold); }
.dantesco-section__empty-cta { margin-top: 26px; }

/* ---- Responsivo ---- */

@media (max-width: 980px) {
	.dantesco-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.dantesco-section__card--lead {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.dantesco-section__card--lead .dantesco-section__thumb { order: 1; }
	.dantesco-section__card--lead .dantesco-section__text  { order: 2; }
	.dantesco-section__card--list {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.dantesco-section__card--list .dantesco-section__byline {
		grid-column: 1;
		grid-row: auto;
		text-align: left;
	}
}
@media (max-width: 460px) {
	.dantesco-section__grid { grid-template-columns: 1fr; }
}

/* Largura inteira na capa de seção.
   O Mission News monta o arquivo em floats: #main tem width:50% e cada sidebar
   22%. Tirar os widgets das laterais (ver dantesco_section_drop_sidebars) esvazia
   as colunas mas não devolve a largura — o 50% continua valendo. Aqui o float é
   solto e a coluna volta a ocupar tudo, com o respiro lateral do resto do site. */
body.dantesco-full-width #main {
	/* Em telas pequenas o Mission News põe #main em `display:table-header-group`
	   para reordenar as colunas sem flexbox. Caixas table-*-group IGNORAM
	   padding por especificação — o recuo lateral era computado mas não tinha
	   efeito, e o texto encostava na borda da tela. Sem sidebars, o truque de
	   tabela não serve mais para nada. */
	display: block;
	width: 100%;
	float: none;
	/* O pai posiciona #main entre as duas sidebars com `margin-left:25%;
	   margin-right:-25%` (320px num container de 1280). Sobrescrever só
	   width/float/padding deixava essa margem de pé: a seção nascia 320px à
	   direita e o lado direito era cortado pelo #overflow-container. Zerar a
	   margem é tão obrigatório quanto soltar o float. */
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--dantesco-pad);
	padding-right: var(--dantesco-pad);
}
/* O Mission News desenha os separadores entre #main e as sidebars
   como pseudo-elementos absolutos de 1px em .content-container
   (medidos: 1px x 1545px, #dcdcdc, em x=320 e x=959). Sem sidebars
   eles viram duas linhas verticais soltas, emoldurando uma coluna
   que não existe mais. */
body.dantesco-full-width .content-container::before,
body.dantesco-full-width .content-container::after { content: none; }

body.dantesco-full-width .sidebar-left,
body.dantesco-full-width .sidebar-right,
body.dantesco-full-width #sidebar-left,
body.dantesco-full-width #sidebar-right { display: none; }
body.dantesco-full-width .layout-container::after {
	content: "";
	display: table;
	clear: both;
}

/* Proporção fixa nas imagens da seção.
   O acervo tem imagens de proporções variadas — a de abertura testada é um
   retrato 965x1024, que num espaço horizontal esticava o bloco inteiro e
   deixava a coluna de texto com um vazio embaixo; as da grade vinham em 4:3,
   3:2 e 16:9 misturadas, e as linhas de título não alinhavam entre si.
   Recortar num aspecto único resolve os dois. */
.dantesco-section__thumb img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}
.dantesco-section__card--lead .dantesco-section__thumb img { aspect-ratio: 4 / 3; }

/* ============================================================
   ÍCONES SEM FONT AWESOME                              v1.9.0
   ============================================================
   O Mission News enfileirava os 101 KB do Font Awesome inteiro
   para sete ícones. Os quatro sociais viraram SVG inline no
   rodapé; os três que sobram são do tema pai (setas do menu e
   lupa da busca) e vêm como <i class="fas fa-…"> vazio.
   `mask` em vez de `background-image` para que continuem
   herdando a cor do contexto, como a fonte fazia. */

.fa-angle-right,
.fa-angle-left,
.fa-search {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask: var(--dantesco-icon) center / contain no-repeat;
	mask: var(--dantesco-icon) center / contain no-repeat;
}
.fa-angle-right {
	--dantesco-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 3.4 7.2 4.8 14.4 12l-7.2 7.2 1.4 1.4L17.2 12z'/%3E%3C/svg%3E");
}
.fa-angle-left {
	--dantesco-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 3.4l1.4 1.4L9.6 12l7.2 7.2-1.4 1.4L6.8 12z'/%3E%3C/svg%3E");
}
.fa-search {
	--dantesco-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

/* Os sociais agora são <svg> direto no <a>, não mais <i> com fonte. */
.dantesco-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

/* Selo de "verificado" (plugin BP Verified Member) FORA da comunidade — o
   plugin injeta `<span class="bp-verified-badge">` (via JS) em qualquer lugar
   que mostre o nome de um membro verificado, inclusive no título do arquivo
   de autor da revista. A troca pro selo lobulado marrom só existia em
   `dantesco-community.css`, carregado SÓ nas telas de comunidade — no
   magazine sobrava a bolinha azul padrão do plugin. Mesmo desenho das duas
   cores (selo `#815f5f` + check branco) do bloco `.bp-verified-badge` em
   dantesco-community.css; repetido aqui, sem escopo `.dcom`, porque esta
   folha carrega em toda página, comunidade incluída. */
span.bp-verified-badge {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23815f5f' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.68.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.8c.66 1.31 1.91 2.2 3.34 2.2s2.68-.89 3.34-2.2c1.39.46 2.9.21 3.91-.8s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34z'/%3E%3Cpath fill='%23ffffff' d='M10.54 16.2 6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	background-color: transparent !important;
	filter: none !important;
	width: 1.05em;
	height: 1.05em;
	display: inline-block;
	vertical-align: -0.16em;
}

/* ============================================================
   BARRA DE AÇÕES DO TEXTO                              v1.10.0
   ============================================================
   Compartilhar e guardar. Fica abaixo do texto, separada por um
   fio, porque é gesto de fim de leitura — não deve competir com
   o título nem interromper o começo. */

.dantesco-engage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 26px;
	margin: 34px 0 8px;
	padding: 18px 0 0;
	border-top: var(--dantesco-line);
}
.dantesco-engage__group { display: flex; align-items: center; gap: 12px; }

/* Cinza claro: o rótulo é orientação, não conteúdo — quem já
   reconhece os logotipos não precisa lê-lo. Parei em #8a8a8a e não
   mais claro porque abaixo disso o contraste sobre o creme cai a
   ponto de sumir para quem enxerga pouco. */
.dantesco-engage__label {
	font-family: var(--dantesco-font-meta);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dantesco-label);
}

.dantesco-engage__share {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Sem moldura: a caixa quadrada em volta de cada marca competia com os
   próprios logotipos e enchia a barra de linhas. A área de toque continua
   com 34px — ela existe para o dedo, não para o olho. */
.dantesco-engage__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dantesco-meta);
	cursor: pointer;
	transition: color .15s;
}
.dantesco-engage__btn svg { width: 19px; height: 19px; fill: currentColor; display: block; }
/* Só a cor muda no hover — o `translateY` de antes balançava o ícone, e o
   editor pediu pra tirar. */
.dantesco-engage__btn:hover,
.dantesco-engage__btn:focus-visible { color: var(--dantesco-gold); }
/* O foco de teclado precisa de contorno visível, já que não há mais borda. */
.dantesco-engage__btn:focus-visible { outline: 2px solid var(--dantesco-gold); outline-offset: 3px; }

/* Confirmação do "copiar link" sem alert nem toast: o próprio botão responde. */
.dantesco-engage__btn--link.is-done { color: var(--dantesco-green); }
.dantesco-engage__btn--link.is-done::after {
	content: attr(data-done);
	position: absolute;
	margin-top: -46px;
	font-family: var(--dantesco-font-meta);
	font-size: 11px;
	white-space: nowrap;
}

.dantesco-engage__save {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	color: var(--dantesco-meta);
	background: var(--dantesco-bg-sunken);
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.dantesco-engage__save svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dantesco-engage__save:hover,
.dantesco-engage__save:focus-visible { background: var(--dantesco-meta); color: var(--dantesco-bg); }
.dantesco-engage__save:focus-visible { outline: 2px solid var(--dantesco-gold); outline-offset: 2px; }

/* Guardado: o marcador preenche — o estado se lê pelo ícone, não só pelo texto. */
/* Guardado continua preenchido de marrom: sem borda para separar os
   dois estados, a diferença precisa vir da própria superfície. */
.dantesco-engage__save.is-saved {
	background: var(--dantesco-meta);
	color: var(--dantesco-bg);
}
.dantesco-engage__save.is-saved svg { fill: currentColor; }
.dantesco-engage__save.is-error { background: #f3dede; color: #a33; }

/* ---- Variante do topo ---- */

/* Abaixo do título: sem fio em cima (o título já separa), fio embaixo para
   encostar no texto, e ícones um pouco menores — é apoio, não chamada. */
.dantesco-engage--top {
	margin: 4px 0 26px;
	padding: 0 0 14px;
	border-top: 0;
	border-bottom: var(--dantesco-line);
	justify-content: flex-start;
}

@media (max-width: 560px) {
	.dantesco-engage--bottom { flex-direction: column; align-items: stretch; }
	.dantesco-engage__group--save .dantesco-engage__save { width: 100%; justify-content: center; }
	.dantesco-engage--top { margin-bottom: 20px; }
}

/* ---- Aba "Saved" do perfil ---- */

.dantesco-saved { list-style: none; margin: 0; padding: 0; }
.dantesco-saved__item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 4px 18px;
	padding: 15px 0;
	border-bottom: var(--dantesco-line);
}
.dantesco-saved__title {
	grid-column: 1;
	font-family: var(--dantesco-font-display);
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}
.dantesco-saved__title a { color: var(--dantesco-muted); text-decoration: none; }
.dantesco-saved__title a:hover { color: var(--dantesco-gold); }
.dantesco-saved__meta {
	grid-column: 1;
	margin: 0;
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
}
.dantesco-saved__remove {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	border: 1px solid var(--dantesco-rule);
	background: none;
	color: var(--dantesco-meta);
	font-family: var(--dantesco-font-meta);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 6px 11px;
	cursor: pointer;
}
.dantesco-saved__remove:hover { color: var(--dantesco-gold); border-color: var(--dantesco-meta); }
.dantesco-saved__empty p { margin: 0 0 8px; font-family: var(--dantesco-font-body); color: var(--dantesco-muted); }

/* ============================================================
   CABEÇALHO DO TEXTO                                   v1.12.0
   ============================================================
   Ritmo vertical do topo de um artigo. A ordem é título →
   assinatura → seção → ações, do mais específico ao mais
   contextual: o leitor descobre o assunto, depois quem escreveu,
   depois onde isso se encaixa na revista.

   A assinatura do tema pai sai de cena: era texto sem link, e
   quem gosta do texto precisa de um caminho para o resto do
   autor. */

body.single .post-byline { display: none; }

/* Título: +30% sobre os 28px do tema pai, em escala fluida para
   não estourar em tela estreita. */
/* ATENÇÃO: `!important` obrigatório aqui.
   O Mission News tem uma família de regras `.layout-no-sidebar`
   que só entrou em cena quando removemos as sidebars, e que
   soma cinco classes de especificidade:

     .layout-no-sidebar:not(.small-first-post):not(.blog) .entry:…
     @media (min-width:50em) { font-size: 2.375em }   → 38px fixos

   Foi ela que segurou o título em 38px enquanto meu clamp pedia
   37 e depois 43 — o sintoma é o tamanho não obedecer a mudança
   nenhuma. A mesma família também deslocava o cabeçalho com
   `left:-14%` (ver acima). Ao mexer em tipografia ou posição de
   single, confira se não é ela de novo. */
body.single .post-title,
body.single .entry-title {
	/* Pedido do editor (2026-09-11): maior que os 32-43px de antes. */
	font-size: clamp(38px, 4.2vw, 50px) !important;
	line-height: 1.1 !important;
	letter-spacing: -.012em;
	margin: 0 0 14px;
}

.dantesco-single-byline {
	font-family: var(--dantesco-font-meta);
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	margin: 0 0 8px;
	color: var(--dantesco-muted);
}
.dantesco-single-byline a {
	color: var(--dantesco-gold);
	font-weight: 700;
	text-decoration: none;
}
.dantesco-single-byline a:hover,
.dantesco-single-byline a:focus-visible {
	text-decoration: underline;
}

/* Seção: menor que a assinatura de propósito — é contexto, não
   crédito. Fecha o bloco de cabeçalho antes do fio. */
.dantesco-single-cats {
	text-align: center;
	margin: 0 0 15px;
	font-family: var(--dantesco-font-meta);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.dantesco-single-cats a { color: var(--dantesco-green); text-decoration: none; }
.dantesco-single-cats a:hover { color: var(--dantesco-gold); }
.dantesco-single-cats__sep { margin: 0 7px; color: var(--dantesco-icon); }

/* A barra do topo vira uma FAIXA entre dois fios: fecha o
   cabeçalho e abre o texto, em vez de flutuar solta. */
.dantesco-engage--top {
	margin: 0 0 30px;
	padding: 13px 0;
	border-top: var(--dantesco-line);
	border-bottom: var(--dantesco-line);
	justify-content: space-between;
}

/* As duas barras são idênticas em conteúdo e aparência: mesmo
   rótulo, mesmas redes, mesmo botão de guardar com texto. A única
   diferença é o enquadramento — a de cima é faixa entre dois fios,
   a de baixo fecha o texto com um fio acima. */

@media (max-width: 560px) {
	.dantesco-engage--top { margin-bottom: 24px; }
	body.single .post-title, body.single .entry-title { margin-bottom: 14px; }
}

/* ============================================================
   FAIXA DE LEITURA                                     v1.12.1
   ============================================================
   Tirar as sidebars devolveu a largura inteira ao #main — certo
   para uma capa de seção, que é grade, e errado para texto
   corrido: medido em produção, a linha passou a caber ~163
   caracteres, contra os 60-75 em que o olho volta sem se perder.

   A faixa reproduz exatamente a medida anterior: o #main do tema
   pai tinha 50% de 1280 menos 2.778% de padding de cada lado,
   dando 569px de conteúdo. Fica como token para ser ajustável
   sem caçar o número no arquivo. */

:root {
	--dantesco-label: #8a8a8a;   /* rótulos de apoio */
	/* Fundo rebaixado: o creme do site um tom abaixo. Mesma cor que a
	   caixa de anúncio da home já usava, agora com nome. Serve para
	   marcar superfície clicável sem desenhar borda. */
	--dantesco-bg-sunken: #f6e7d8;
	--dantesco-measure: 569px;   /* texto corrido */
	--dantesco-measure-page: 760px; /* páginas: mais folga, ainda legível */
}

body.single article,
body.single .post-meta,
body.single .more-from-category {
	max-width: var(--dantesco-measure);
	margin-left: auto;
	margin-right: auto;
}

/* Remover as sidebars ativou no tema pai a regra do modo "sem
   sidebar":  `.layout-no-sidebar:not(…):not(…) { position:relative;
   left:-14%; width:128% }`, um cabeçalho sangrado que faz sentido
   na largura inteira e joga o título 80px fora do eixo dentro da
   faixa de leitura (-14% de 569px = -79,66px, o desvio medido).

   Vai de `!important` por especificidade: aquele seletor soma
   quatro classes (as de `:not()` contam), e nenhum seletor
   razoável escrito aqui o alcançaria sem virar charada. */
body.single .post-header {
	position: static !important;
	left: auto !important;
	width: auto !important;
	max-width: 100%;
	margin: 46px 0 0 !important;   /* respiro entre o menu e o título */
}

/* Páginas: o mesmo problema de linha longa, com um pouco mais de
   folga — não são texto de leitura contínua como um ensaio. */
body.page:not(.dantesco-wide) article {
	max-width: var(--dantesco-measure-page);
	margin-left: auto;
	margin-right: auto;
}

/* A página de contato é a exceção: tem duas colunas (formulário e
   dados) e precisa de largura para não virar uma pilha estreita. */
body.page-contact article,
body.page .dantesco-contact {
	max-width: none;
}
body.page-contact article { margin-left: auto; margin-right: auto; }

/* ============================================================
   CAIXA DO AUTOR                                       v1.13.0
   ============================================================
   Substitui a do Mission News, que mostrava a `description` do
   WordPress — não a bio que o membro edita no perfil — e cujo
   link terminava em "More posts from", sem nome depois. */

body.single .post-author { display: none; }

.dantesco-author {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 18px;
	align-items: start;
	margin: 34px 0 0;
	padding: 22px 0 0;
	border-top: var(--dantesco-line);
}
.dantesco-author__avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: block;
}
.dantesco-author__kicker {
	font-family: var(--dantesco-font-meta);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dantesco-meta);
	margin: 0 0 4px;
}
.dantesco-author__name {
	font-family: var(--dantesco-font-display);
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 8px;
}
.dantesco-author__name a { color: var(--dantesco-muted); text-decoration: none; }
.dantesco-author__name a:hover { color: var(--dantesco-gold); }
.dantesco-author__bio {
	font-family: var(--dantesco-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--dantesco-muted);
	margin: 0 0 12px;
}
.dantesco-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
}
.dantesco-author__links a {
	font-family: var(--dantesco-font-meta);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dantesco-meta);
	text-decoration: none;
	border-bottom: var(--dantesco-line);
	padding-bottom: 2px;
}
.dantesco-author__links a:hover,
.dantesco-author__links a:focus-visible {
	color: var(--dantesco-gold);
	border-bottom-color: currentColor;
}

@media (max-width: 480px) {
	.dantesco-author { grid-template-columns: 1fr; gap: 12px; }
	.dantesco-author__avatar img { width: 60px; height: 60px; }
}


/* ============================================================
   SUBSCRIBE DO CABEÇALHO                               v1.14.0
   ============================================================
   Vinha preto (#333 com texto branco) por causa da regra
   "botão sólido reaproveitável" lá embaixo, escrita para a área
   de comunidade e que acabou capturando também este botão.
   Passa a usar a mesma superfície rebaixada do botão de guardar:
   sem contorno, marcado pelo fundo. O `!important` no texto é
   para vencer o `color:#fff !important` daquela regra. */
.dantesco-utility-bar__end .dantesco-btn--solid {
	background: var(--dantesco-bg-sunken);
	color: var(--dantesco-nav) !important;
	border: 0;
}
.dantesco-utility-bar__end .dantesco-btn--solid:hover,
.dantesco-utility-bar__end .dantesco-btn--solid:focus-visible {
	background: var(--dantesco-meta);
	color: var(--dantesco-bg) !important;
}

/* ============================================================
   CAPA                                                 v1.16.0
   ============================================================
   TODOS os valores abaixo foram MEDIDOS na home original em
   produção, com o Elementor no ar, viewport 1440. A tabela
   completa está em spec-home-original.md, na raiz do projeto.

   A primeira versão desta capa foi reprovada porque eu havia
   escrito o CSS por julgamento próprio: rótulos viraram caixa
   alta 11px em negrito quando o original é Roboto 14px regular
   em caixa normal; títulos viraram pretos em negrito quando o
   original é oliva #3d3818 em peso regular; o excerto virou
   serifado quando é Roboto. Nada disso se descobre lendo o JSON
   do Elementor — só medindo a página renderizada.

   Entrelinhas menores que o corpo (35/30, 21/17) não são erro:
   é o que o layout original tem. */

:root {
	--dh-titulo:    #3d3818;   /* títulos de card */
	/* Nome de seção ("Economy & Markets" etc.): era #3d3920, quase preto — pedido
	   do editor (2026-09-11), mesmo cinza do título nas páginas de categoria
	   (.dantesco-section__name usa --dantesco-muted). */
	--dh-secao:     var(--dantesco-muted);
	--dh-corpo:     #777777;   /* excertos */
	--dh-rotulo:    #6a6a6a;   /* rótulos */
	--dh-link:      #7c6e1a;   /* "leia mais" */
	--dh-botao:     #853213;   /* texto de botão */
	--dh-submenu:   #5c5c5c;
	--dh-autor:     #54595f;
}

body.dantesco-wide article,
body.dantesco-wide .dantesco-home { max-width: none; }

.dantesco-home {
	max-width: var(--dantesco-max);
	margin: 0 auto;
	padding: 10px 0 0;
	font-family: Roboto, Arial, sans-serif;
}

/* ---- Rótulos: Roboto 14/14, regular, CAIXA NORMAL ----
   As maiúsculas vêm escritas no texto ("TOP ARTICLE"), não de
   text-transform — forçar uppercase numa fonte já em caixa alta
   muda o rasgo e engorda o traço. */
.dantesco-home__label {
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--dh-rotulo);
	/* CENTRADO. Todos os dezenove rótulos da capa original são centrados sobre a
	   caixa que encabeçam — inclusive os "SPONSOR". Alinhados à esquerda, como
	   estavam, a capa perdia o eixo de simetria que sustenta a composição. */
	text-align: center;
	/* 20px até o que vem embaixo, em toda a capa — medido em todos os rótulos
	   do original, do "TOP ARTICLE" ao "SPONSOR". Estava em 14. */
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

/* ---- Cabeçalho de seção ----
   Centralizado, como no original — chapéu, nome e navegação das subseções.
   O chapéu é Bona Nova itálico 20/22.86 em #333, não 17px: a medida antiga
   veio de uma leitura errada e deixava o chapéu miúdo demais para o nome. */
/* Recheio, não margem, nos dois sentidos: com margem o espaço de cima escapava
   para fora da seção (colapso de margens) e o de baixo era engolido pela margem
   do menu — o cabeçalho ficava 55px mais curto que o do original. */
/* Um fio no ALTO de cada seção editorial — é ele que, visto de cima, fecha a
   seção anterior. Sem ele as duas seções de fundo mais escuro terminavam
   soltas. As quatro têm; o topo, a newsletter e o anúncio de rodapé não. */
.dantesco-home__section { padding-top: 41px; border-top: var(--dantesco-line); }
.dantesco-home__head {
	margin: 0;
	padding: 0 10px 27px;
	border: 0;
	text-align: center;
}
.dantesco-home__kicker {
	font-family: "Bona Nova", Georgia, serif;
	font-style: italic;
	font-size: 20px;
	font-weight: 500;
	line-height: 22.86px;
	color: #333;
	margin: 0;
}
.dantesco-home__section-title {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 33px;
	font-weight: 400;
	line-height: 33px;
	margin: 0;
	color: var(--dh-secao);
}
.dantesco-home__section-title a { color: inherit; text-decoration: none; }
.dantesco-home__section-title a:hover { color: var(--dh-link); }

/* A navegação do cabeçalho é centrada e com respiro dos dois lados; a da
   coluna CATEGORIES continua empilhada e alinhada à esquerda. */
.dantesco-home__head .dantesco-home__subnav ul { justify-content: center; margin-top: 10px; }
.dantesco-home__head .dantesco-home__subnav a  { padding: 2px 20px; }
.dantesco-home__head .dantesco-home__subnav ul { margin: 10px 0 18px; }

/* ---- Submenu: Roboto 16/20, #5c5c5c, caixa normal ---- */
.dantesco-home__subnav ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.dantesco-home__subnav a {
	display: inline-block;
	font-family: Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	text-transform: none;
	color: var(--dh-submenu);
	text-decoration: none;
	padding: 2px 20px 2px 0;
}
.dantesco-home__subnav a:hover { color: var(--dh-link); }
/* Pontinho entre as subseções do cabeçalho — mesmo separador dos cards
   (.dantesco-post__cats-sep). Só nas listas HORIZONTAIS: as colunas
   empilhadas (CATEGORIES/AUTHORS, --stack) já vêm uma por linha, sem
   separador nenhum. */
.dantesco-home__subnav:not(.dantesco-home__subnav--stack) li + li::before {
	content: "·";
	color: #8a8a8a;
	margin-right: 8px;
}
.dantesco-home__subnav--stack ul { flex-direction: column; margin-top: 0; }

/* A lista de subseções dentro de uma seção (CATEGORIES, AUTHORS) tem tipo
   próprio no original: Roboto 13/15 no tom do nome da seção, não os 16/20 do
   menu do cabeçalho. */
.dantesco-home__col .dantesco-home__subnav--stack a {
	font-size: 13px;
	line-height: 15px;
	color: var(--dh-secao);
	padding: 4px 20px;
}

/* ---- Cards ---- */
/* Dois seletores de classe, e não um, porque o Mission News tem
   `.layout-rows-excerpt .rows-excerpt { margin-bottom: .75em; padding-bottom:
   .75em }` — o `post_class()` põe `rows-excerpt` em todo card, e essa regra
   vencia a minha por especificidade. Era daí que vinham os 12px de sobra
   embaixo de cada card e o fio afastado das editorias: no original o card não
   tem margem nem recheio nenhum, e o espaço entre eles é do contêiner. */
.dantesco-home .dantesco-home__card { margin: 0; padding: 0; }
.dantesco-home__top-latest .dantesco-home__card { margin-bottom: 26px; }
/* O respiro é ENTRE os cards: no último ele esticava a coluna 26px além do
   original, e a coluna do meio é a mais alta das três — puxava o bloco todo. */
.dantesco-home__top-latest .dantesco-home__card:last-child { margin-bottom: 0; }

.dantesco-home__thumb { display: block; overflow: hidden; margin-bottom: 20px; }
/* Quinas de 3px, medidas no original: valem para toda foto e para o painel da
   matéria de abertura. Eu tinha deixado tudo em 90°. */
.dantesco-home__thumb { border-radius: 3px; }

/* O original RECORTA — só que pelo contêiner, não pela imagem: a moldura tem
   altura fixa e `overflow: hidden`, e a foto, com a própria proporção, sangra
   para fora e some. Medido em produção: 573x344 na abertura do topo, 350x273
   na abertura de seção, 382x279 no EXCLUSIVE e 340x245 (72%) em todo o resto.
   `object-fit: cover` centralizado reproduz exatamente esse enquadramento.

   Já errei nas duas direções aqui. Primeiro forcei 3:2 em TUDO, o que decepava
   um retrato 965x1024; depois tirei o recorte inteiro, e aí as fotos altas
   empurravam o card e desalinhavam a grade. O certo é uma proporção por
   formato, como no original. */
.dantesco-home__thumb {
	aspect-ratio: 340 / 245;
}
.dantesco-home__card--xl        .dantesco-home__thumb { aspect-ratio: 573 / 344; }
.dantesco-home__card--hero      .dantesco-home__thumb { aspect-ratio: 350 / 273; }
.dantesco-home__card--exclusive .dantesco-home__thumb { aspect-ratio: 382 / 279; }
.dantesco-home__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s;
}
.dantesco-home__thumb:hover img { opacity: .88; }

.dantesco-home__title {
	font-family: "Bona Nova", Georgia, serif;
	margin: 0 0 10px;
	color: var(--dh-titulo);
}
.dantesco-home__title a { color: inherit; text-decoration: none; }
.dantesco-home__title a:hover { color: var(--dh-link); }

.dantesco-home__standfirst {
	font-family: Roboto, Arial, sans-serif;
	font-weight: 400;
	color: var(--dh-corpo);
	margin: 0 0 10px;
}

/* Prefixo `a` obrigatório: a regra global `a, a:link, a:visited
   { color: var(--dantesco-meta) }` soma uma pseudo-classe MAIS um
   elemento, e por isso vence um seletor de classe sozinho. Sem o
   prefixo o link saía marrom #815f5f em vez do dourado medido. */
a.dantesco-home__readmore {
	display: inline-block;
	font-family: Roboto, Arial, sans-serif;
	color: var(--dh-link);
	text-decoration: none;
}
a.dantesco-home__readmore:hover { color: var(--dh-titulo); }

.dantesco-home__byline {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20.8px;
	color: var(--dh-titulo);
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: var(--dantesco-line);
}
/* Na abertura de seção a assinatura vem colada no título, sem fio: outro
   desenho, não a mesma peça deslocada. */
.dantesco-home__byline--hero {
	margin: 0 0 13px;
	padding-top: 0;
	border-top: 0;
}
.dantesco-home__byline a { color: inherit; text-decoration: none; }
.dantesco-home__byline a:hover { color: var(--dh-link); }

/* XL — o card de abertura */
/* O texto do card de abertura é recuado 30px de cada lado — é isso que faz o
   título quebrar em duas linhas, como no original, e as folgas internas são de
   25px, não de 10. */
.dantesco-home__card--xl .dantesco-home__thumb     { margin-bottom: 12px; }
.dantesco-home__card--xl .dantesco-home__text      { padding: 0 30px; }
.dantesco-home__card--xl .dantesco-home__title      { font-size: 35px; font-weight: 400; line-height: 30px; margin-bottom: 25px; }
.dantesco-home__card--xl .dantesco-home__standfirst { font-size: 16px; line-height: 24px; margin-bottom: 25px; }
.dantesco-home__card--xl a.dantesco-home__readmore   { font-size: 15px; font-weight: 500; line-height: 22.5px; text-transform: uppercase; margin-bottom: 8px; }
.dantesco-home__byline--xl { margin: 0; padding: 15px 30px; }

/* Médio */
.dantesco-home__card--card .dantesco-home__title    { font-size: 21px; font-weight: 500; line-height: 17px; margin-bottom: 15px; }
.dantesco-home__card--card a.dantesco-home__readmore { font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; margin-bottom: 20px; }

/* Lista — só texto */
.dantesco-home__card--list { margin: 0 0 18px; }
.dantesco-home__card--list .dantesco-home__title    { font-size: 17px; font-weight: 500; line-height: 17px; margin-bottom: 10px; }
.dantesco-home__card--list a.dantesco-home__readmore { font-size: 12px; font-weight: 500; line-height: 18px; text-transform: uppercase; }

/* EXCLUSIVE — o card grande da coluna estreita, com resumo. Título menor e
   mais escuro que os demais; é assim no original. */
.dantesco-home__card--exclusive .dantesco-home__title      { font-size: 20px; font-weight: 500; line-height: 30px; color: #240707; }
.dantesco-home__card--exclusive .dantesco-home__standfirst { font-size: 14px; line-height: 18px; }
.dantesco-home__card--exclusive a.dantesco-home__readmore  { font-size: 12px; font-weight: 500; line-height: 18px; text-transform: uppercase; }

/* Opinion — o único destaque que assina: retrato de 42px encostado no pé da
   imagem e o nome do autor num rodapé com fio. */
/* A coluna tem 379px, mas o card de Opinion ocupa 340 — o original o recolhe
   19px de cada lado, o que abre a calha entre os três destaques. */
.dantesco-home .dantesco-home__card--opinion { margin: 0 19px; }
.dantesco-home__card--opinion .dantesco-home__thumb { margin-bottom: 21px; }
.dantesco-home__card--opinion .dantesco-home__text  { margin-top: 14px; padding: 0 10px; }
.dantesco-home__card--opinion .dantesco-home__title { font-size: 21px; font-weight: 500; line-height: 17px; margin-bottom: 15px; }
.dantesco-home__card--opinion a.dantesco-home__readmore { font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; margin-bottom: 20px; }
.dantesco-home__byline--opinion {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18.2px;
	color: #000;
	border-top: var(--dantesco-line);
	padding: 10px;
	margin: 0 -10px;
}

/* Hero — imagem ao lado */
.dantesco-home__card--hero {
	display: grid;
	grid-template-columns: 46% 1fr;
	gap: 0 24px;
	align-items: start;
}
.dantesco-home__card--hero .dantesco-home__thumb      { margin-bottom: 0; }
/* 24px de respiro acima do título: no original a coluna de texto desce isso em
   relação ao alto da foto. Sem eles o título encostava na borda do painel. */
.dantesco-home__card--hero .dantesco-home__text       { padding-top: 24px; }
.dantesco-home__card--hero .dantesco-home__title      { font-size: 30px; font-weight: 400; line-height: 26px; }
.dantesco-home__card--hero .dantesco-home__standfirst { font-size: 14px; line-height: 18px; }
.dantesco-home__card--hero a.dantesco-home__readmore   { font-size: 15px; font-weight: 500; line-height: 22.5px; }
.dantesco-home__card--hero:not(:has(.dantesco-home__thumb)) { grid-template-columns: 1fr; }
/* A linha de editorias atravessa imagem e texto, como no original. */
.dantesco-home__card--hero .dantesco-post__cats { grid-column: 1 / -1; margin-top: 8px; }

/* Só nas seções largas a matéria de abertura se apoia num painel branco a 65%
   — medido no original. Nas seções simples (Culture, Opinion) o mesmo card vem
   sobre o fundo da página, sem painel.

   Sem recheio lateral: a foto encosta na borda do painel, de cima a baixo. O
   original deixava 12px de branco em volta dela, o que lia como sobra. Quem
   recua agora é só a coluna de texto, do lado direito. */
.dantesco-home__section--wide .dantesco-home__card--hero {
	background: rgba(255, 255, 255, .65);
	border-radius: 3px;
	padding: 0;
}
.dantesco-home__section--wide .dantesco-home__card--hero .dantesco-home__text { padding-right: 16px; }
.dantesco-home__section--wide .dantesco-home__card--hero .dantesco-post__cats { padding-right: 16px; }

/* ---- Bloco do topo ----

   No original não são três colunas irmãs: é uma divisão ao meio (613 + 613), e
   a metade da direita é que se parte em duas de 291,5 com 10px de calha. Escrito
   como grade única de três, dá no mesmo — desde que as medidas sejam essas, e
   não 593/292/292 com 20 de calha, que empurrava a coluna do meio 5px para a
   direita. Cada caixa tem 10px de recheio, como no original. */
.dantesco-home__top {
	display: grid;
	grid-template-columns: 613fr 291.5fr 291.5fr;
	gap: 0 10px;
	padding: 0 10px 30px 0;
}
/* A coluna de abertura tem 20px de recheio lateral, não 10: o card mede 573px
   dentro de uma coluna de 613. Com 10px o card ia a 593, a foto crescia 12px de
   altura e o título cabia numa linha só em vez de duas. */
.dantesco-home__top-lead { padding: 10px 20px; }
.dantesco-home__top-latest,
.dantesco-home__top-aside { padding: 10px; }

/* World & Politics e Economy & Markets se apoiam num fundo um tom mais escuro
   que o da página — `rgba(0,0,0,.02)` sobre o creme, medido no original. É o
   que separa as duas seções "largas" das duas "simples", que ficam no fundo
   limpo. Eu tinha deixado as quatro iguais. */
.dantesco-home__section--wide { background: rgba(0, 0, 0, .02); }

/* ---- Seções ----

   O original NÃO põe as quatro caixas numa fileira. Ele monta um cata-vento em
   duas linhas de 1206px, com o bloco largo trocando de lado:

       NOW (804)  ────────────────┬──  EXCLUSIVE (402)
       NEW (402)  ──┬─────────────────  FEATURED (804)

   Medido em produção: as caixas encostam umas nas outras (sem gap de coluna) e
   cada uma tem 10px de recheio, o que dá a calha de 20px que se vê. A primeira
   versão fez uma linha de quatro, e isso sozinho encolheu a matéria de abertura
   de 784px para 466px e tirou 421px de altura de CADA seção deste tipo — 842px
   dos 866px que faltavam na página inteira. */
.dantesco-home__section-body { display: grid; padding: 10px; }

/* `min-width: 0` em todo item de grade: sem isso o anúncio do AdSense, que
   chega com largura fixa, estoura a coluna no telefone — a seção "wide" saía
   com 348px dentro de um contêiner de 321. */
.dantesco-home__col,
.dantesco-home__top-lead,
.dantesco-home__top-latest,
.dantesco-home__top-aside { min-width: 0; }
.dantesco-home__col { padding: 10px; }
.dantesco-home__ad ins.adsbygoogle { max-width: 100%; }

.dantesco-home__section--wide .dantesco-home__section-body {
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 0;
}
.dantesco-home__section--wide .dantesco-home__col--now       { grid-area: 1 / 1 / 2 / 3; }
.dantesco-home__section--wide .dantesco-home__col--exclusive { grid-area: 1 / 3 / 2 / 4; }
.dantesco-home__section--wide .dantesco-home__col--new       { grid-area: 2 / 1 / 3 / 2; }
.dantesco-home__section--wide .dantesco-home__col--featured  { grid-area: 2 / 2 / 3 / 4; }

/* FEATURED STORIES ocupa 804px e traz dois textos lado a lado.
   `row-gap` de 20px, e não 26: o rótulo é a primeira linha desta grade, e a
   folga da linha SOMAVA com a margem dele — os cards de FEATURED começavam
   26px abaixo dos de NEW, que estão na mesma fileira. */
.dantesco-home__section--wide .dantesco-home__col--featured {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 25px;
	align-items: start;
}
/* Os cards destas duas caixas têm 340px no original, não a largura cheia da
   coluna: são recolhidos 20px de cada lado, o que abre a calha entre eles. */
.dantesco-home__section--wide .dantesco-home__col--new .dantesco-home__card      { margin: 0 21px; }
.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-home__card { margin: 0 20px; }

.dantesco-home__section--simple .dantesco-home__section-body {
	grid-template-columns: 2fr 1fr;
	gap: 20px 0;
}
.dantesco-home__col--wide { grid-column: 1 / -1; }
.dantesco-home__section--simple .dantesco-home__col--wide {
	display: grid;
	gap: 20px 25px;
	align-items: start;
}
/* A lista de subseções (CATEGORIES, AUTHORS) é separada da matéria de abertura
   por um fio à esquerda, e fechada por outro embaixo — os dois só ao lado da
   lista, não da coluna inteira: em Opinion, com um autor só, o fio de baixo
   fica logo abaixo do nome. */
.dantesco-home__section--simple .dantesco-home__col .dantesco-home__subnav--stack {
	border-left: var(--dantesco-line);
	border-bottom: var(--dantesco-line);
	padding-left: 10px;
}

.dantesco-home__col--cols3 { grid-template-columns: repeat(3, 1fr); }
.dantesco-home__col--cols4 { grid-template-columns: repeat(4, 1fr); }

/* O rótulo é da caixa toda, não da primeira coluna dela. Sem margem embaixo:
   quem dá o respiro aqui é o `row-gap` da grade. */
.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-home__label,
.dantesco-home__section--simple .dantesco-home__col--wide .dantesco-home__label { grid-column: 1 / -1; margin-bottom: 0; }

/* O botão de seção tem 20px de folga embaixo e nenhuma em cima. */
.dantesco-home__section .dantesco-home__more { margin: 0; padding-bottom: 20px; }

/* ---- Autores ----
   Medido no original: nome Bona Nova 14/21 peso 600 em #54595f, bio Roboto
   12/18 em #5c5c5c. Eu estava com o nome em 15/22.5, o que somava altura em
   toda a coluna lateral. */
.dantesco-home__author { margin: 0 0 22px; }
.dantesco-home__author--lead   { text-align: center; padding-bottom: 20px; margin-bottom: 0; }
/* A caixa sem retrato encosta 30px para dentro, na mesma prumada da lista de
   HIGHLIGHTS e do menu de autores logo abaixo. */
.dantesco-home__author--inline { text-align: left; padding-left: 30px; margin: 10px 0 0; }
.dantesco-home__author-name {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	color: var(--dh-autor);
	margin: 0;
}
.dantesco-home__author-name a { color: inherit; text-decoration: none; }
.dantesco-home__author-name a:hover { color: var(--dh-link); }
.dantesco-home__author-bio {
	font-family: Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	color: var(--dh-submenu);
	margin: 0;
}
a.dantesco-home__author-link {
	display: inline-block;
	font-family: Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	color: var(--dh-link);
	text-decoration: none;
	padding: 10px 18px;
}
a.dantesco-home__author-link:hover { color: var(--dh-titulo); }

/* ---- Botões: Roboto 12/12, #853213, 12x24 ---- */
.dantesco-home__more { margin: 16px 0 0; }
.dantesco-home__more .dantesco-btn {
	display: inline-block;
	font-family: Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--dh-botao) !important;
	background: none;
	padding: 12px 24px 12px 0;
	text-decoration: none;
}
.dantesco-home__more .dantesco-btn:hover { color: var(--dh-link) !important; background: none; }

/* ---- Anúncios ---- */
.dantesco-home__ad { margin: 18px 0; }
.dantesco-home__ad--mobile { display: none; }
.dantesco-home__foot-ad { margin: 40px 0 0; padding: 16px 0; }

/* ---- Newsletter e redes ---- */
.dantesco-home__promo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	/* 1226 − 86 = 1140, a largura útil medida no original; 30px acima e abaixo.
	   A faixa cinza é do original e tinha ficado de fora da primeira versão. */
	padding: 30px 43px;
	margin: 0;
	background: #f1f1f1;
	text-align: center;
}
.dantesco-home__promo-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 10px;
}
.dantesco-home__promo-title {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 30px;
	font-weight: 300;
	line-height: 30px;
	margin: 0;
	color: #333;
}
.dantesco-home__promo-title em { font-style: italic; }
.dantesco-home__promo-text {
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	color: #333;
	margin: 0;
}

/* Os dois botões da faixa são escuros e cheios, ao contrário dos botões de
   seção, que são de fundo dourado translúcido. */
.dantesco-home__promo .dantesco-home__more { margin: 0; }
.dantesco-home__promo .dantesco-home__more .dantesco-btn {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 15px;
	text-transform: none;
	letter-spacing: normal;
	color: #f1f1f1 !important;
	background: #333;
	border: 0;
	border-radius: 3px;
	padding: 12px 24px;
}
.dantesco-home__promo .dantesco-home__more .dantesco-btn:hover {
	color: #fff !important;
	background: #111;
}

/* ---- Coluna lateral do topo ----

   No original cada peça desta coluna é uma caixa com 20px de respiro embaixo —
   rótulo, caixa de autor, menu, anúncio, lista, botão. Aqui isso vira uma
   coluna flex com `gap: 20px`, o que dispensa acertar margem por margem e
   impede que duas margens se somem. As duas folgas de 30px do original (antes
   da caixa sem retrato e antes de HIGHLIGHTS) entram como 10px extras.

   O menu de autores e a lista de HIGHLIGHTS ficam 30px para dentro, e os
   títulos da lista são Bona Nova 17/17 com 10px até o link. */
/* As quatro divisórias do bloco de topo, que eu não tinha trazido: o fio
   vertical que separa a coluna lateral, os dois horizontais dentro dela e o que
   fica acima do botão "Most Read Articles". */
.dantesco-home__top-aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-left: var(--dantesco-line);
	padding-left: 20px;
}
.dantesco-home__top-aside .dantesco-home__author--lead,
.dantesco-home__top-aside .dantesco-home__subnav--stack { border-bottom: var(--dantesco-line); }
.dantesco-home__top-lead .dantesco-home__more {
	border-top: var(--dantesco-line);
	padding-top: 16px;
}
.dantesco-home__top-aside > * { margin: 0; }
.dantesco-home__top-aside > .dantesco-home__label { margin: 0; }
.dantesco-home__top-aside .dantesco-home__author--lead   { padding-bottom: 20px; }
.dantesco-home__top-aside .dantesco-home__author--inline { margin-top: 10px; }
.dantesco-home__top-aside .dantesco-home__ad + .dantesco-home__label { margin-top: 10px; }
.dantesco-home__top-aside .dantesco-home__more { margin: 0; }
.dantesco-home__top-aside .dantesco-home__subnav--stack { padding: 0 0 20px 30px; }
.dantesco-home__top-aside .dantesco-home__subnav--stack a {
	font-family: "Bona Nova", Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--dh-autor);
	padding: 2px 0;
}
.dantesco-home__top-aside .dantesco-home__card--list { padding: 0 0 0 30px; margin: 0 0 10px; }

.dantesco-home__social { list-style: none; display: flex; gap: 16px; margin: 0 0 12px; padding: 0; }
.dantesco-home__social svg { width: 20px; height: 20px; fill: var(--dh-rotulo); display: block; }
.dantesco-home__social a:hover svg { fill: var(--dh-link); }

/* ---- Responsivo ---- */
@media (max-width: 1000px) {
	.dantesco-home__top { grid-template-columns: 1fr 1fr; }
	.dantesco-home__top-aside { grid-column: 1 / -1; }
	.dantesco-home__section--wide .dantesco-home__section-body { grid-template-columns: 1fr 1fr; }
	.dantesco-home__section--wide .dantesco-home__col--now,
	.dantesco-home__section--wide .dantesco-home__col--exclusive,
	.dantesco-home__section--wide .dantesco-home__col--new,
	.dantesco-home__section--wide .dantesco-home__col--featured { grid-area: auto; }
	.dantesco-home__col--cols3,
	.dantesco-home__col--cols4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.dantesco-home__top,
	.dantesco-home__section--wide .dantesco-home__section-body,
	.dantesco-home__section--simple .dantesco-home__section-body { grid-template-columns: 1fr; }
	.dantesco-home__col--cols3,
	.dantesco-home__col--cols4 { grid-template-columns: 1fr; }
	.dantesco-home__section--wide .dantesco-home__col--featured { grid-template-columns: 1fr; }
	.dantesco-home__card--hero { grid-template-columns: 1fr; }
	.dantesco-home__promo { grid-template-columns: 1fr; padding: 24px 10px; }
	.dantesco-home__card--xl .dantesco-home__title { font-size: 28px; line-height: 1.1; }
	/* Cada tamanho de tela recebe a unidade de anúncio que lhe cabe. */
	.dantesco-home__ad--desktop { display: none; }
	.dantesco-home__ad--mobile  { display: block; }
	.dantesco-home__section { padding-top: 34px; }
}

/* ---- Peças medidas na 2ª rodada de comparação ---- */

/* Avatar do card de abertura: 65px circular, logo abaixo da imagem.
   Medido em `cards_avatar_size` do widget original. */
.dantesco-home__avatar { margin: -34px 0 12px 16px; position: relative; z-index: 1; }
.dantesco-home__avatar img {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: block;
	border: 2px solid var(--dantesco-bg);
}

/* Nos destaques de Opinion o retrato é menor e fica a cavaleiro da borda de
   baixo da imagem — metade dentro, metade fora. Vem DEPOIS da regra genérica
   de propósito: as duas têm a mesma especificidade, e quem vence é a última. */
.dantesco-home__avatar--opinion { margin: -42px 0 0 10px; }
.dantesco-home__avatar--opinion img { width: 42px; height: 42px; }

/* Símbolo do Dante na caixa "OPINION" — o original mostra a marca,
   não o gravatar do usuário. */
.dantesco-home__author-avatar {
	display: block;
	/* 86x86 no original. Eu tinha posto 140, e sozinho isso empurrava a coluna
	   lateral inteira 50px para baixo. */
	width: 86px;
	height: 86px;
	object-fit: cover;
	margin: 0 auto 6px;
	border-radius: 50%;
	/* O mesmo anel creme dos demais retratos. Era o único sem. */
	border: 2px solid var(--dantesco-bg);
}

/* Botão: fundo dourado translúcido rgba(152,121,0,.2), raio 3px,
   12x24, centralizado, com o ícone de "mais lidos" à esquerda.
   Tudo medido no original. */
.dantesco-home__more { text-align: center; }
.dantesco-home__more .dantesco-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(152, 121, 0, .2);
	border-radius: 3px;
	padding: 12px 24px;
}
.dantesco-home__more .dantesco-btn:hover { background: rgba(152, 121, 0, .34); }
.dantesco-home__more-icon { width: 14px; height: 14px; fill: currentColor; flex: 0 0 14px; }

/* ============================================================
   AJUSTES DE COMPOSIÇÃO                                  v1.22
   ============================================================
   Cinco melhorias sobre a réplica fiel, aprovadas pelo editor
   em 2026-09-10. Mantidas juntas neste bloco por serem uma
   leva só; podem ser lidas uma a uma pelos números abaixo.

   1. Corpo de texto maior
   2. Hierarquia entre as seções da capa
   3. Celular: hero forte + secundários em lista
   4. Respiro de leitura na capa
   5. Foco visível (acessibilidade)
   ------------------------------------------------------------ */

/* ---- 1. CORPO DE TEXTO: coluna 569 → 620, fonte de volta a 16px ----
   Foi a 18/1.55 em 2026-09-10 e voltou a 16/1.5 em 2026-09-11, a pedido do
   editor — 18px lia grande demais. 16px continua bem acima do piso de
   legibilidade mobile do Lighthouse/Search Console (recomendação: ≥16px;
   reprovação: <12px), então a mudança não mexe em SEO, Core Web Vitals nem
   Analytics — é só gosto de leitura. A coluna mais larga (620px) fica: ela é
   medida de linha, não tamanho de letra, e 620px cabe bem tanto 16 quanto
   18px. Vale para o post e para o texto de abertura das capas de seção; a
   capa não muda. */
:root {
	--dantesco-measure: 620px;
}
body.single .post-content,
body.single .entry-content {
	font-size: 16px;
	line-height: 1.5;
}
body.single .post-content p,
body.single .entry-content p {
	margin-bottom: 1.35em;
}
body.single .post-content h2,
body.single .entry-content h2 { font-size: 28px; }
body.single .post-content h3,
body.single .entry-content h3 { font-size: 21px; }
.dantesco-section__standfirst { font-size: 16px; line-height: 1.6; }

/* ---- 2. HIERARQUIA ENTRE AS SEÇÕES DA CAPA ----
   As quatro seções têm hoje o mesmo peso. Uma revista sinaliza a
   editoria que abre: a PRIMEIRA seção larga (World & Politics)
   ganha imagem de abertura mais alta e título maior. Mesmo
   cata-vento, só a primeira respira mais. */
.dantesco-home__promo + .dantesco-home__section .dantesco-home__card--hero .dantesco-home__thumb {
	aspect-ratio: 3 / 2;
}
.dantesco-home__promo + .dantesco-home__section .dantesco-home__card--hero .dantesco-home__title {
	font-size: 34px;
	line-height: 1.05;
}
.dantesco-home__promo + .dantesco-home__section .dantesco-home__card--hero .dantesco-home__standfirst {
	font-size: 15px;
	line-height: 1.5;
}
.dantesco-home__promo + .dantesco-home__section .dantesco-home__kicker { font-size: 22px; }
.dantesco-home__promo + .dantesco-home__section .dantesco-home__section-title { font-size: 37px; }

/* ---- 4. RESPIRO NA CAPA ----
   +8px nas calhas entre blocos, +2px de entrelinha nos resumos.
   Alivia a densidade de terminal sem trocar a composição. */
.dantesco-home__section--wide .dantesco-home__section-body   { gap: 18px 0; }
.dantesco-home__section--simple .dantesco-home__section-body { gap: 28px 0; }
.dantesco-home__section--wide .dantesco-home__col--featured,
.dantesco-home__section--simple .dantesco-home__col--wide { gap: 34px 25px; }
.dantesco-home__section { padding-top: 49px; }
.dantesco-home__standfirst { line-height: 1.55; }

/* ---- 3. CELULAR: hero forte, secundários em lista ----
   Hoje tudo empilha igual. No telefone o hero de cada seção
   mantém imagem e título grandes; os secundários viram linha
   (miniatura 84px à esquerda + título), o padrão de app de
   notícia. Menos rolagem, hierarquia preservada. */
@media (max-width: 700px) {
	.dantesco-home__card--hero .dantesco-home__thumb { aspect-ratio: 3 / 2; }
	.dantesco-home__card--hero .dantesco-home__title { font-size: 24px; line-height: 1.1; }

	.dantesco-home__section--wide .dantesco-home__col--new .dantesco-home__card,
	.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-home__card,
	.dantesco-home__section--simple .dantesco-home__col--wide .dantesco-home__card,
	.dantesco-home__top-latest .dantesco-home__card {
		display: grid;
		grid-template-columns: 84px 1fr;
		gap: 12px;
		align-items: start;
		margin: 0 0 16px;
	}
	.dantesco-home__section--wide .dantesco-home__col--new .dantesco-home__thumb,
	.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-home__thumb,
	.dantesco-home__section--simple .dantesco-home__col--wide .dantesco-home__thumb,
	.dantesco-home__top-latest .dantesco-home__thumb {
		aspect-ratio: 1 / 1;
		margin: 0;
	}
	.dantesco-home__section--wide .dantesco-home__col--new .dantesco-home__title,
	.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-home__title,
	.dantesco-home__section--simple .dantesco-home__col--wide .dantesco-home__title,
	.dantesco-home__top-latest .dantesco-home__title {
		font-size: 16px;
		line-height: 1.25;
		margin: 0 0 4px;
	}
	.dantesco-home__section--wide .dantesco-home__col--new .dantesco-home__standfirst,
	.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-home__standfirst,
	.dantesco-home__section--simple .dantesco-home__col--wide .dantesco-home__standfirst,
	.dantesco-home__top-latest .dantesco-home__standfirst { display: none; }
	.dantesco-home__section--wide .dantesco-home__col--new .dantesco-post__cats,
	.dantesco-home__section--wide .dantesco-home__col--featured .dantesco-post__cats,
	.dantesco-home__section--simple .dantesco-home__col--wide .dantesco-post__cats,
	.dantesco-home__top-latest .dantesco-post__cats { display: none; }
}

/* ---- 5. FOCO VISÍVEL ----
   O tema pai zera o outline em seis lugares. Ninguém que navega
   por teclado enxerga onde está. Contorno dourado da casa,
   afastado 2px, só no foco por teclado (`:focus-visible`), nunca
   no clique de mouse. WCAG 2.4.7. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.dantesco-btn:focus-visible,
.dantesco-home__title a:focus-visible,
.dantesco-home__readmore:focus-visible,
.menu-primary-items a:focus-visible {
	outline: 2px solid var(--dantesco-gold);
	outline-offset: 2px;
	border-radius: 1px;
}