/**
 * Custom CSS — Reformulação "radical / computer"
 * ------------------------------------------------------------------
 * Este arquivo é carregado DEPOIS do built/index.css, então as
 * sobrescritas abaixo entram em vigor imediatamente, sem rebuild.
 *
 * Conceito: estética de computador, ousada — linhas duras de
 * separação, divs com cantos quase retos (leve bisel), tipografia
 * com serifa pesada (Young Serif) nos títulos, Barlow no corpo e
 * Source Code Pro em código/rótulos.
 */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
	/* Tipografia. As vars --gh-font-* vêm do Design do admin do Ghost
	   (injetadas no ghost_head só se o admin escolher fontes); sem
	   escolha, valem os fallbacks do tema. Exigido pelo validador. */
	--font-family-headings: var(--gh-font-heading, 'Young Serif', Georgia, 'Times New Roman', serif);
	--font-family-body: var(--gh-font-body, 'Barlow', system-ui, sans-serif);
	--font-family-button: var(--gh-font-body, 'Barlow', system-ui, sans-serif);
	--font-family-mono: 'Source Code Pro', SFMono-Regular, Menlo, Consolas, monospace;

	/* Cantos quase retos — leve bisel, nunca totalmente arredondado. */
	--radius-1: 2px;
	--radius-2: 3px;
	--radius-3: 4px;

	/* Nav mobile do rodapé removida (default.hbs) → zera a altura que o
	   bundle (vars.css) define como 47px. FABs, padding do body e
	   scroll-progress usam essa var e se reposicionam sozinhos. */
	--nav-mobile--min-height: 0px;

	/* Degrau abaixo do --spacing-1 (10→15px) do bundle; usado nas notas
	   compactas do Jogo Rápido. */
	--spacing-0: 5px;

	/* Linhas duras de separação — largura única para todas as bordas. */
	--color-border: rgb(0 0 0 / 85%);
	--line: 1px;

	/* Fundo do site (claro): cinza plano #eee. */
	--color-background: #eeeeee;
	--color-background-100: #eeeeee;
	--color-background-200: #e3e3e3;

	/* Texto sobre o roxo da marca (botões primários, hovers). */
	--color-accent-foreground: #fff;
}

:root[data-color-scheme="dark"] {
	--color-border: rgb(255 255 255 / 55%);
}

@media (prefers-color-scheme: dark) {
	:root[data-color-scheme="system"] {
		--color-border: rgb(255 255 255 / 55%);
	}
}

/* ── Fontes em todo o tema (vence o fallback --gh-font do admin) ─── */
body {
	font-family: var(--font-family-body);
	font-feature-settings: 'ss01'on;
}

pre,
code,
kbd,
samp,
.kg-bookmark-metadata,
tt {
	font-family: var(--font-family-mono);
}

/* ── Títulos: Young Serif (peso único 400 — sem falso-bold) ──────── */
h1,
h2,
h3,
h4,
h5,
h6,
.post-title,
.gh-article-title {
	font-family: var(--font-family-headings);
	font-weight: 400;
	letter-spacing: -0.005em;
}

h1,
.post-title {
	letter-spacing: -0.015em;
}

/* ── Linhas duras de separação na estrutura ─────────────────────── */
.sidebar {
	border-right: 0 solid var(--color-border);
}

.sidebar-posts {
	border-left: var(--line) solid var(--color-border);
}

.header {
	border-bottom: var(--line) solid var(--color-border);
}

.footer,
.site-footer,
footer.footer {
	border-top: var(--line) solid var(--color-border);
}

/* Divisores entre blocos de navegação na sidebar. */
.navigation+.navigation,
.navigation-tags,
.navigation-socials,
.sidebar-footer {
	border-top: var(--line) solid var(--color-border);
	padding-top: var(--spacing-3);
}

/* ── Rótulos em mono caixa-alta: cara de terminal ───────────────── */
.nav-section,
.sidebar-title,
.popup-toggle label,
.post-card-tags,
.breadcrumbs {
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── Botões: retos, traço firme ─────────────────────────────────── */
.button,
button,
.kg-btn,
input[type="submit"] {
	border-radius: var(--radius-1);
}

.button-grey,
.button-minimal {
	border: var(--line) solid var(--color-border);
}

/* ── Imagens / cards / blocos Ghost: bisel mínimo ───────────────── */
img,
figure,
.kg-card,
.kg-image,
.kg-bookmark-container,
.kg-embed-card,
.post-card,
.card {
	border-radius: var(--radius-3);
}

/* Bookmark/callout/embed ganham moldura dura. */
.kg-bookmark-container,
.kg-callout-card,
.kg-product-card-container {
	border: var(--line) solid var(--color-border);
}

/* ── Foco visível e duro (acessível + estética) ─────────────────── */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--color-contrast);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   RADICAL v2 — brutalismo de terminal (só efeitos, sem estrutura)
   ══════════════════════════════════════════════════════════════════ */

/* Sombra dura reutilizável (sem blur, deslocada) — a assinatura do visual. */
:root {
	--hard-shadow: 4px 4px 0 var(--color-contrast);
	--hard-shadow-sm: 3px 3px 0 var(--color-contrast);
}

/* ── Seleção de texto: inversão total ───────────────────────────── */
::selection {
	background: var(--color-contrast);
	color: var(--color-background);
}

/* ── Botões: moldura + sombra dura, com "pressão" no hover ──────── */
/* clip-path: none é ESSENCIAL: o tema base usa clip-path inset() nos
   botões (o "press" antigo dele), que recorta a sombra dura, raspa a
   borda no hover (inset de 1px) e, no Safari, come a borda DIREITA
   quando a largura cai em pixel fracionário — era a causa das "bordas
   sumindo" em Sair/Gerenciar conta/etc. */
.button,
.kg-btn,
button.button,
button[type='submit'] {
	border: var(--line) solid var(--color-contrast);
	box-shadow: var(--hard-shadow-sm);
	clip-path: none !important;
	transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.1s ease, color 0.1s ease;
}

.button:hover,
.kg-btn:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--color-contrast);
}

.button:active,
.kg-btn:active {
	transform: translate(3px, 3px);
	box-shadow: none;
}

/* Botões minimal/ícone ficam como "toggles" quadrados de painel. */
.button-minimal {
	border: var(--line) solid var(--color-border);
	box-shadow: none;
}

.button-minimal:hover {
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	transform: none;
}

/* ── Tags inline (páginas de tag) como chips de terminal ────────── */
/* NÃO afeta a lista de tags da sidebar (.navigation-tags), que usa
   avatar + anel posicionados em absoluto e não pode receber padding. */
.tag-card,
.post-tag {
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: var(--line) solid var(--color-border);
	border-radius: 0;
	padding: 0.3em 0.6em;
}

/* Sidebar: só a etiqueta vira mono caixa-alta, sem mexer no avatar. */
.navigation-tags .label {
	font-family: var(--font-family-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── Código / pre: bloco de terminal duro, sombra deslocada ─────── */
pre {
	border: var(--line) solid var(--color-contrast);
	border-radius: 0 !important;
	clip-path: none !important;
	box-shadow: var(--hard-shadow);
	box-decoration-break: clone;
}

:not(pre)>code {
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ── Cards de post: moldura dura que "salta" no hover ───────────── */
.post-card,
.card {
	border: var(--line) solid var(--color-border);
	transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}

.post-card:hover,
.card:hover {
	border-color: var(--color-contrast);
	box-shadow: var(--hard-shadow);
	transform: translate(-2px, -2px);
}

/* ── Blockquote: barra fina à esquerda, itálico, sem moldura ─────
   Sem fundo, sem sombra, sem bordas direita/inferior. Só a barra
   esquerda (na cor do texto) + texto itálico na mesma cor do corpo. */
blockquote {
	border-left: 3px solid var(--ghost-accent-color);
	border-right: 0;
	border-radius: 0;
	padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-1);
	color: var(--color-contrast);
	font-weight: var(--font-weight-regular);
	font-style: italic;
	background: none;
	box-shadow: none;
}

/* Ênfase dentro da citação → Young Serif, pra destacar do itálico
   corrente (Barlow). O trecho itálico "vira" serifado e ganha peso
   visual próprio. */
blockquote :is(em, i) {
	font-family: var(--font-family-headings);
	font-style: italic;
}

/* ── Bookmark / callout / embed: molduras de painel ─────────────── */
.kg-bookmark-container,
.kg-callout-card,
.kg-product-card-container {
	border-width: var(--line);
	border-radius: 0 !important;
	box-shadow: var(--hard-shadow-sm);
}

.kg-bookmark-container {
	box-shadow: none;
}

/* ── Títulos de seção com marcador de prompt "//" ───────────────── */
.nav-section::before,
.sidebar-title::before {
	content: '// ';
	color: var(--color-secondary);
}

/* ── Cores de texto: corpo do post escuro, excerpt em cinza ─────── */
.post-content {
	color: var(--color-contrast);
}

.post-excerpt {
	color: var(--color-foreground);
}

/* ── Links de prosa: inversão dura no hover ─────────────────────── */
.post-content a:hover {
	background: var(--color-contrast);
	color: var(--color-background);
	text-decoration-color: transparent;
}

/* ── Scrollbar: só na janela principal, sem tocar as colunas ────── */
/* As sidebars têm scrollbar própria (transparente/escondida) e
   reservam um vão de 14px; estilizá-la deixava os cards colados numa
   barra preta. Aqui mexemos apenas no scroll do documento (html). */
html::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

html::-webkit-scrollbar-track {
	background: var(--color-background-100);
}

html::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border: 3px solid var(--color-background-100);
	border-radius: 0;
}

html::-webkit-scrollbar-thumb:hover {
	background: var(--color-contrast);
}

/* ── Folga à direita para a barra de rolagem não comer a borda ──── */
/* As colunas roláveis (sidebar, posts) têm padding-right: 0 — o que
   deixa a borda direita dos cards/itens embaixo da barra. */
.sidebar,
.sidebar-posts {
	padding-right: 12px;
}

/* Itens do menu hambúrguer (popup), que também rola. */
.popup-content {
	padding-right: calc(var(--padding-h) + 8px);
}

/* ── Colunas roláveis recortam a sombra (overflow-x: hidden) ────── */
/* Dentro do menu / lista de posts / popup, a sombra deslocada bate na
   divisória e é "comida". Mantemos moldura + inversão, sem o offset. */
.sidebar :is(.button, .card, .post-card),
.sidebar-posts :is(.button, .card, .post-card),
.popup :is(.button, .card, .post-card) {
	box-shadow: none !important;
	transform: none !important;
}

/* Hover ali: realce pela borda, sem deslizar para fora e ser cortado. */
.sidebar .card:hover,
.sidebar-posts .card:hover,
.sidebar .button:hover,
.sidebar-posts .button:hover {
	border-color: var(--color-contrast);
}

/* ── Tabelas: grade dura completa ───────────────────────────────── */
table {
	border: var(--line) solid var(--color-contrast);
}

table thead {
	background: var(--color-background-200);
	border-bottom-width: var(--line);
}

/* ══════════════════════════════════════════════════════════════════
   RESPIRO — padding interno e folga para as sombras duras
   ══════════════════════════════════════════════════════════════════ */

/* Conteúdo não encosta na moldura: mais padding nos blocos. */
.card,
.card-post {
	padding: var(--spacing-2) var(--spacing-2);
}

pre {
	padding: var(--spacing-2) var(--spacing-3);
}

.post-content .kg-callout-card {
	padding: var(--spacing-3);
}

blockquote {
	padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-1);
}

/* Células de tabela arejadas (a grade dura aperta o texto). */
table th,
table td {
	padding: calc(var(--spacing-1) - 0.1rem) var(--spacing-2);
}

/* Chip inline não encosta no texto vizinho. */
.tag-card,
.post-tag {
	display: inline-block;
	margin: 0 0.25em 0.35em 0;
}

/* Folga para a sombra dura (4px) não colar no elemento seguinte. */
.post-content :is(pre, blockquote, table, .kg-callout-card, .kg-bookmark-container) {
	margin-bottom: var(--spacing-4);
}

/* Cards: sombra menor para caber no gap de 10px da lista, sem clipar. */
.post-card,
.card {
	box-shadow: none;
}

.post-card:hover,
.card:hover {
	box-shadow: var(--hard-shadow-sm);
	transform: translate(-1px, -1px);
}

/* ══════════════════════════════════════════════════════════════════
   BUSCA — campo centralizado com cara de input (não de botão)
   Só em telas grandes (> 950px); no mobile fica o ícone padrão.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 951px) {
	.header [data-ghost-search] {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;

		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;

		width: clamp(200px, 38%, 380px);
		min-height: 0;
		/* Mesma altura do toggle dia/noite: padding vertical 7.5px + ícone 16px. */
		padding: 7.5px 12px;

		border: var(--line) solid var(--color-border);
		border-radius: var(--radius-1);
		background: var(--color-background);
		box-shadow: var(--hard-shadow-sm);

		color: var(--color-mute);
		font-family: var(--font-family-mono);
		font-size: var(--font-small);
		font-weight: var(--font-weight-regular);
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		cursor: text;
	}

	/* Placeholder dentro do "campo". */
	.header [data-ghost-search]::after {
		content: 'Buscar…';
	}

	/* Ícone de lupa à esquerda, tamanho de input. */
	.header [data-ghost-search] svg {
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
	}

	/* Hover/foco: borda escurece como um input ativo (sem inverter). */
	.header [data-ghost-search]:hover,
	.header [data-ghost-search]:focus-visible {
		border-color: var(--color-contrast);
		background: var(--color-background);
		color: var(--color-foreground);
	}

	/* A divisória inferior do header não atravessa o campo centralizado. */
	.header>.breadcrumbs {
		justify-content: flex-start;
	}
}

/* fim @media (min-width: 951px) */

/* No mobile, o logo encostava no botão de toggle do menu (burger). */
@media (max-width: 950px) {
	.header>.logo {
		padding-left: 12px;
	}
}

/* Toggle dia/noite (e a busca em ícone no mobile) com a mesma sombra
   dura do campo de busca, e 1px a mais de espaço entre os botões. */
.header-buttons .button-minimal {
	box-shadow: var(--hard-shadow-sm);
}

.header-buttons {
	gap: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   POSTS — sombreado no hover + linhas duras (topo e CTA)
   ══════════════════════════════════════════════════════════════════ */

/* Hover shade nos cards de post (listas e sidebar). */
.card-post:hover,
.section-list>.card:hover,
.sidebar-posts .card:hover,
.read-next .card:hover {
	background-color: var(--color-background-200);
	border-color: var(--color-contrast);
}

/* Linha dura separando a CTA do conteúdo. */
.section-cta {
	border-top: var(--line) solid var(--color-border);
	margin-top: var(--spacing-3);
	padding-top: var(--spacing-6);
}

/* No post, o degradê do header pintava por cima da borda inferior e
   escondia a linha dura (só no desktop). Removido para a linha do
   header aparecer igual à home. */
.post-template .header::after {
	display: none;
}

/* ── Hero do post: excerpt como continuação inline do título ────── */
/* Título e excerpt fluem como um texto só: o excerpt começa logo
   após o h1, na mesma linha, e quebra naturalmente junto. */
/* Separação clara da tag (editoria) acima + entrelinha mais folgada. */
.post-header .post-title-row {
	margin-top: var(--spacing-2);
	line-height: 1.2;
}

.post-header .post-title-row .post-title {
	display: inline;
	line-height: 1.2;
}

.post-header .post-title-row .post-excerpt {
	display: inline;
	margin: 0;
	/* Mesmo tamanho e entrelinha do título; diferencia pela fonte
	   (Barlow) e cor. */
	font-family: var(--font-family-body);
	font-size: 1.625rem;
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	color: var(--color-foreground);
	vertical-align: baseline;
}

/* ══════════════════════════════════════════════════════════════════
   TAGS — ícone por editoria (menu, sidebar, índice e post)
   Sem color code: o ícone herda a cor do texto (neutro).
   ══════════════════════════════════════════════════════════════════ */

.tag-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	color: currentColor;
}

.tag-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Sidebar/menu e home: o ícone toma o lugar do avatar (bolinha + anel). */
.navigation-tags .nav-link:has(.tag-icon) .nav-link-image,
.navigation-tags .nav-link:has(.tag-icon)::before,
.section-tags .nav-link:has(.tag-icon) .nav-link-image {
	display: none;
}

.navigation-tags .nav-link .tag-icon {
	width: 1rem;
	height: 1rem;
}

/* Nav mais limpa: sem ícones/avatares na lista de tags "Áreas" da
   sidebar/popup — só o texto. As redes sociais mantêm os ícones (não são
   .navigation-tags). Home (.section-tags) e /tags (.tags-index) não mexem. */
.navigation-tags .nav-link-image,
.navigation-tags .nav-link .tag-icon,
.navigation-tags .nav-link::before {
	display: none !important;
}

/* Home: o ícone é um <span>, então o tema aplicava nele o padding/overflow
   de ".nav-link > span", esmagando-o. Aqui neutralizamos e damos tamanho. */
.section-tags .nav-link .tag-icon {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	overflow: visible;
	max-height: none;
}

/* Home: tags em negativo VAZADO — fundo transparente, traço/texto/ícone
   na cor de contraste (preto no claro, branco no escuro), com sombra. */
.section-tags .nav-link,
:root[data-color-scheme="dark"] .section-tags .nav-link,
:root[data-color-scheme="system"] .section-tags .nav-link {
	color: var(--color-contrast);
	background-color: transparent;
	border: var(--line) solid var(--color-contrast);
	box-shadow: var(--hard-shadow-sm);

	/* Botão mais compacto (sem o tile alto). */
	aspect-ratio: auto;
	max-height: none;
	gap: 0.4em;
}

.section-tags .nav-link>span {
	padding: 10px 14px;
}

/* Índice (card) e post: ícone antes do nome (cor neutra, herda o texto). */
.card-tag,
.post-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

/* Tag dos cards do feed: cinza claro pra pesar menos na tela (o accent
   roxo chamava demais). No hover volta ao accent como affordance. */
.card-post .card-tag {
	color: var(--color-secondary);
}

.card-post .card-tag:hover {
	color: var(--ghost-accent-color);
}

/* ── Item selecionado/atual do menu: cinza claro (era escuro) ───── */
.navigation .nav-link-current:not(.nav-section-link),
.navigation .nav-item:has(.collapse .nav-link-current)>[aria-expanded='false'] {
	color: var(--color-contrast);
	background-color: var(--color-background-400);
}

/* Card do post atual (lista lateral): mesmo cinza claro. */
.card-post-active,
.card-post-active:hover {
	color: var(--color-contrast);
	background-color: var(--color-background-400);
}

/* ══════════════════════════════════════════════════════════════════
   MENU SECUNDÁRIO — dropdown no estilo radical/terminal
   Taxonomia editável no admin do Ghost (Settings → Navigation):
     "# Título" = seção · "- Item" = subitem · "---" = separador
   ══════════════════════════════════════════════════════════════════ */

/* Painel do dropdown: borda dura, cantos retos e a sombra dos botões. */
.navigation-secondary .dropdown {
	border: var(--line) solid var(--color-contrast);
	border-radius: var(--radius-1);
	background-color: var(--color-background);
	box-shadow: var(--hard-shadow-sm);
}

/* Itens: hover com o roxo da marca (accent). */
.navigation-secondary .dropdown .nav-link:not(.nav-section-link):hover {
	background-color: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

/* Separador "---" mais marcado. */
.navigation-secondary .nav-separator {
	border-top-color: var(--color-contrast);
}

/* Linha conectora dos subitens ("- ") mais dura. */
.navigation-secondary .collapse .nav-item::before {
	border-top-color: var(--color-contrast);
}


/* ══════════════════════════════════════════════════════════════════
   TOGGLE da home (Comunidade ⇄ Destaques) — segmented control
   ══════════════════════════════════════════════════════════════════ */
.home-tabs {
	position: relative;
	/* âncora da flechinha-hint */
	display: flex;
	width: fit-content;
	/* compacto (sobre o width:100% do container-wide) */
	/* O .page usa gap: spacing-7 entre os blocos; puxamos o toggle pra perto
	   das seções de cima e de baixo (gap efetivo ≈ spacing-3). */
	margin-top: calc(var(--spacing-3) - var(--spacing-7));
	margin-bottom: calc(var(--spacing-3) - var(--spacing-7));
	border: var(--line) solid var(--color-contrast);
	border-radius: var(--radius-1);
	box-shadow: var(--hard-shadow-sm);
}

.home-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 18px;
	border: 0;
	line-height: 1;
	background: var(--color-background);
	color: var(--color-contrast);
	cursor: pointer;
	transition: background-color 0.1s ease, color 0.1s ease;
}

.home-tab-icon {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
}

.home-tab+.home-tab {
	border-left: var(--line) solid var(--color-contrast);
}

.home-tab.is-active {
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

.home-tab:not(.is-active):hover {
	background: color-mix(in srgb, var(--ghost-accent-color) 12%, var(--color-background));
}

/* Painel: restaura o espaçamento entre as seções internas (o .page dá
   gap só entre blocos diretos; dentro do painel precisamos repor). */
.home-panel {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
}

.home-panel[hidden] {
	display: none;
}

/* ── Flechinha-hint apontando para "Destaques" ──────────────────── */
/* Desktop: à direita do toggle, apontando pra esquerda no botão Destaques. */
.home-tab-arrow {
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	margin-top: -24px;
	/* metade da altura → centraliza vertical */
	width: 48px;
	height: 48px;
	color: var(--ghost-accent-color);
	pointer-events: none;
	z-index: 2;
	/* bounce horizontal leve + some aos 12s. */
	animation: home-arrow-bounce 1.3s ease-in-out infinite,
		home-arrow-fade 0.8s ease 12s forwards;
}

.home-tab-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(-1);
	/* o SVG aponta pra direita → invertemos */
}

@keyframes home-arrow-bounce {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-7px);
	}
}

@keyframes home-arrow-fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-tab-arrow {
		animation: home-arrow-fade 0.8s ease 12s forwards;
	}
}

/* Mobile: Destaques é o botão de baixo → flecha embaixo, apontando pra cima. */
@media (max-width: 950px) {
	.home-tab-arrow {
		left: 50%;
		margin-left: -24px;
		/* metade da largura → centraliza horizontal */
		top: calc(100% + 6px);
		margin-top: 0;
	}

	.home-tab-arrow svg {
		transform: rotate(-90deg);
		/* base aponta p/ direita → vira p/ cima */
	}
}

/* Mobile (≤950px): botões empilhados (um sobre o outro), largura cheia. */
@media (max-width: 950px) {
	.home-tabs {
		width: 100%;
		flex-direction: column;
	}

	.home-tab {
		justify-content: center;
	}

	.home-tab+.home-tab {
		border-left: 0;
		border-top: var(--line) solid var(--color-contrast);
	}
}

/* ══════════════════════════════════════════════════════════════════
   CONSOLIDAÇÃO PRÉ-STAGE — estilos que viviam inline nos partials
   (.hbs) durante a iteração agora moram aqui, cacheáveis. Lembrete:
   editar este arquivo exige ghost restart (?v=) + hard refresh.
   ══════════════════════════════════════════════════════════════════ */

/* ── "Window manager": painéis laterais colapsáveis ─────────────── */
:root {
	--wm-rail-w: 44px;
	--wm-titlebar-h: 40px;
	--wm-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Fora do desktop tudo isso está sob display:none junto com a própria
   sidebar, então só estiliza dentro dos breakpoints.
   Regras de ouro (a v1 quebrou o layout ignorando isso):
   - NÃO mexer no grid do .main: o colapso sobrescreve as variáveis
     --sidebar--width / --sidebar-posts--width, que o grid já consome.
   - NÃO mudar o modelo de scroll da página (body continua scrollando). */
@media (min-width: 951px) {
	html.wm-nav-collapsed {
		--sidebar--width: var(--wm-rail-w);
	}

	.main {
		transition: grid-template-columns 0.28s var(--wm-ease);
	}

	.sidebar {
		flex-direction: column;
		height: 100vh;
		padding: 0;
		overflow: hidden;
	}

	.pane-titlebar {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		height: var(--wm-titlebar-h);
		padding: 0 var(--padding-h);
		border-bottom: var(--line, 1px) solid var(--color-border);
		background-color: var(--color-background-200);
		white-space: nowrap;
	}

	.pane-title {
		font-family: var(--font-family-mono);
		font-size: var(--font-x-small);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-contrast);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Botão de colapso — métrica do .button-minimal (31×31px). */
	.pane-toggle {
		flex: 0 0 auto;
		width: 31px;
		height: 31px;
		display: grid;
		place-items: center;
		padding: 0;
		line-height: 1;
		font-family: var(--font-family-mono);
		font-size: 14px;
		font-weight: 600;
		color: var(--color-contrast);
		background-color: transparent;
		border: var(--line, 1px) solid var(--color-border);
		border-radius: var(--radius-1);
		cursor: pointer;
	}

	.pane-toggle:hover,
	.pane-toggle:focus-visible {
		background-color: var(--ghost-accent-color);
		color: var(--color-accent-foreground);
	}

	/* Corpo do painel — assume o scroll que era da própria sidebar.
	   overflow-y AUTO (não scroll): com muitos itens ou zoom, rola;
	   com poucos, fica fixo (sem rubber-band nem barra fantasma). */
	.pane-scroll {
		flex: 1 1 auto;
		overflow: hidden auto;
		overscroll-behavior: contain;
		padding: var(--padding-v) 12px var(--padding-h) var(--padding-h);
		/* Rola, mas sem barra de scroll (Firefox). */
		scrollbar-width: none;
	}

	/* Rola, mas sem barra de scroll (WebKit/Blink). */
	.pane-scroll::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	/* Anti-reflow: o conteúdo mantém a largura expandida enquanto a
	   coluna anima (16.5% do .main ≈ 16.5vw). O overflow:hidden da
	   sidebar recorta. */
	.sidebar .pane-scroll {
		min-width: calc(clamp(237px, 16.5vw, 320px) - 1px);
	}

	/* Trilho colapsado — o painel inteiro vira um botão de reexpandir. */
	.pane-rail {
		display: none;
		width: 100%;
		padding: 14px 0 0;
		border: 0;
		background-color: var(--color-background-200);
		cursor: pointer;
		align-items: flex-start;
		justify-content: center;
	}

	.pane-rail span {
		writing-mode: vertical-rl;
		font-family: var(--font-family-mono);
		font-size: var(--font-x-small);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-contrast);
	}

	.pane-rail:hover,
	.pane-rail:focus-visible {
		background-color: var(--ghost-accent-color);
	}

	.pane-rail:hover span,
	.pane-rail:focus-visible span {
		color: var(--color-accent-foreground);
	}

	html.wm-nav-collapsed .sidebar .pane-titlebar,
	html.wm-nav-collapsed .sidebar .pane-scroll {
		display: none;
	}

	html.wm-nav-collapsed .sidebar .pane-rail {
		display: flex;
		flex: 1 1 auto;
	}

	/* Modo foco (\): com os dois colapsados, a coluna de leitura alarga. */
	.content .container {
		transition: max-width 0.28s var(--wm-ease);
	}

	html.wm-nav-collapsed.wm-posts-collapsed .content .container {
		max-width: 680px;
	}

	/* Painel(is) colapsado(s): o logo da sidebar de navegação some, então
	   trocamos o breadcrumb do header pelo logo — só quando um ou os dois
	   painéis estão colapsados. */
	:where(html.wm-nav-collapsed, html.wm-posts-collapsed) .header > .logo {
		display: block;
	}

	:where(html.wm-nav-collapsed, html.wm-posts-collapsed) .header > .breadcrumbs {
		display: none;
	}

	/* Botão colapsar/expandir tudo (no header-buttons, à direita — no
	   início do header ele sobrepunha o breadcrumb nas matérias).
	   Ícone troca conforme o estado: setas pra dentro (colapsar) ↔
	   setas pra fora (expandir). */
	.wm-focus-toggle {
		display: inline-flex;
	}

	.wm-focus-toggle svg {
		width: 16px;
		height: 16px;
	}

	.wm-focus-toggle .wm-icon-expand {
		display: none;
	}

	html.wm-nav-collapsed.wm-posts-collapsed .wm-focus-toggle .wm-icon-collapse {
		display: none;
	}

	html.wm-nav-collapsed.wm-posts-collapsed .wm-focus-toggle .wm-icon-expand {
		display: block;
	}

	/* Com o painel de navegação colapsado, a largura dos FABs de member
	   calculada via --sidebar--width fica estreita demais → reposiciona
	   ao lado do trilho. */
	html.wm-nav-collapsed .member-fab-stack {
		left: calc(var(--wm-rail-w) + 16px);
		width: 200px;
	}

	html.wm-nav-collapsed .member-fab {
		left: calc(var(--wm-rail-w) + 16px);
	}

	/* Redes sociais na sidebar: só os ícones, lado a lado (mesmo
	   tratamento do footer/hero). Nome escondido acessível via clip;
	   flechinha ::after removida. Só no menu esquerdo desktop. */
	.sidebar .social-links {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sidebar .social-link::after {
		display: none;
	}

	.sidebar .social-link>span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		word-wrap: normal;
	}
}

/* Painel [2] publicações só existe onde a sidebar-posts é visível
   (>1199px — abaixo disso o tema a esconde; não reintroduzir). */
@media (min-width: 1200px) {
	html.wm-posts-collapsed {
		--sidebar-posts--width: var(--wm-rail-w);
	}

	.sidebar-posts {
		flex-direction: column;
		height: 100vh;
		padding: 0;
		overflow: hidden;
	}

	.sidebar-posts .pane-scroll {
		min-width: calc(clamp(321px, 22.5vw, 400px) - 1px);
	}

	html.wm-posts-collapsed .sidebar-posts .pane-titlebar,
	html.wm-posts-collapsed .sidebar-posts .pane-scroll {
		display: none;
	}

	html.wm-posts-collapsed .sidebar-posts .pane-rail {
		display: flex;
		flex: 1 1 auto;
	}
}

/* O botão de colapsar tudo só existe no desktop (painéis não existem
   no mobile). */
@media (max-width: 950px) {
	.wm-focus-toggle {
		display: none;
	}
}

/* Acessibilidade + reduced motion. */
.pane-toggle:focus-visible,
.pane-rail:focus-visible {
	outline: 2px solid var(--ghost-accent-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.main,
	.content .container {
		transition: none !important;
	}
}

/* ── Hero da home: imagem única com pill de CTA sobreposto ──────── */
/* Sem o rotate(-3deg) que o tema aplica em figures de hero — a imagem
   da home fica na horizontal. Pill só aparece deslogado (guard no
   partial). Mesma especificidade da regra do tema (hero.css), vence
   pela ordem (custom.css carrega depois). */
.section-hero>figure.section-hero-figure-cta {
	position: relative;
	transform: none;
}

.hero-image-cta {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 11px 22px;
	border: var(--line) solid var(--color-contrast);
	border-radius: 999px;
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	box-shadow: var(--hard-shadow-sm);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Hover de pressão; cor travada (a:hover global pintaria de accent). */
.hero-image-cta:hover {
	transform: translateX(-50%) translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--color-contrast);
	color: var(--color-accent-foreground);
}

.hero-image-cta:active {
	transform: translateX(-50%) translate(3px, 3px);
	box-shadow: none;
	color: var(--color-accent-foreground);
}

/* Mobile (hero empilhado): esconde a imagem — ela só empurrava o
   conteúdo pra baixo, e o CTA já existe no topo (Assine do header). */
@media (max-width: 720px) {
	.section-hero>figure.section-hero-figure-cta {
		display: none;
	}
}

/* ── CTA de inscrição por email (home, deslogado) ───────────────── */

/* Home: espaçamento entre blocos = spacing-5 (era spacing-7), sem as
   margens negativas que causavam sobreposição. */
.page-home .header {
	margin-bottom: 0;
}

.page-home .content,
.page-home .page {
	gap: var(--spacing-5);
}

/* O toggle tinha margens negativas calibradas pra spacing-7 (puxavam
   demais com o gap menor → overlap). Recalibra pro gap atual (spacing-5),
   mantendo o toggle justo (~spacing-3) sem sobrepor. */
.page-home .home-tabs {
	margin-top: calc(var(--spacing-3) - var(--spacing-5));
	margin-bottom: calc(var(--spacing-3) - var(--spacing-5));
}

.signup-cta {
	text-align: left;
	padding-bottom: 20px;
}

.signup-cta-inner {
	display: flex;
	flex-direction: column;
	align-items: left;
	gap: var(--spacing-2);
	margin: 0 auto;
}

.signup-cta-title {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.15;
	text-align: left;
	max-width: 500px;
	font-family: var(--font-family-mono);
	font-weight: var(--font-weight-medium);
}

.signup-cta-free {
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-light);
	font-style: italic;
	text-decoration: underline;
}

/* Reset da caixa do `form` base do tema + container do input/botão. */
.signup-cta-form {
	position: relative;
	display: block;
	width: 100%;
	max-width: 500px;
	height: 46px;
	padding: 0;
	border: 0;
	min-height: 0;
}

.signup-cta-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 150px 0 24px;
	font-family: var(--font-family-body);
	font-size: 1rem;
	color: var(--color-contrast);
	background: #fff;
	border: 2px solid color-mix(in srgb, var(--color-contrast) 18%, transparent);
	border-radius: 999px;
	outline: none;
}

.signup-cta-input::placeholder {
	color: var(--color-secondary);
}

.signup-cta-input:focus {
	border-color: var(--ghost-accent-color);
}

/* Botão: absoluto, à direita, com a MESMA borda redonda do input (999px). */
.signup-cta-submit {
	position: absolute !important;
	right: 6px;
	bottom: -12px;
	height: 40px;
	min-width: 130px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 26px;
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	font-family: var(--font-family-mono);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: none;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background 0.12s ease, transform 0.12s ease, color 0.12s ease;
}

.signup-cta-submit:hover {
	background: var(--color-contrast);
	color: var(--color-background);
	transform: translateY(-1px);
}

.signup-cta-form.loading .signup-cta-submit {
	pointer-events: none;
	opacity: 0.85;
}

.signup-cta-message {
	margin: 0;
	font-family: var(--font-family-mono);
	font-size: 0.875rem;
	display: none;
}

.signup-cta-form.success~.signup-cta-message-success {
	display: block;
	color: var(--ghost-accent-color);
}

.signup-cta-form.error~.signup-cta-message-error {
	display: block;
	color: #c0392b;
}

.signup-cta-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 24px;
}

.signup-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-secondary);
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.1s ease;
}

.signup-cta-link:hover {
	color: var(--ghost-accent-color);
}

.signup-cta-link svg {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.section-mid {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-5);
}

/* ── CTAs fixos por estado de member (FABs + "Assine" do header) ── */
.member-fab {
	/* Desktop: na coluna esquerda (mesma posição dos FABs de deslogado),
	   não na área do conteúdo/publicações. Mobile: à esquerda. */
	position: fixed;
	left: var(--padding-h);
	bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	box-shadow: var(--hard-shadow-sm);
	animation: member-fab-in 0.35s ease both;
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.member-fab svg {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
}

.member-fab:hover {
	transform: translateY(-2px);
	background: var(--color-contrast);
	color: var(--color-background);
}

@keyframes member-fab-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.member-fab,
	.member-fab-stack {
		animation: none;
	}
}

/* Mobile: a nav é fixa embaixo (bottom:0) → sobe o FAB acima dela. */
@media (max-width: 950px) {
	.member-fab {
		left: 12px;
		bottom: calc(var(--nav-mobile--min-height, 47px) + 12px);
	}
}

/* Deslogado: 2 botões empilhados na coluna mais à esquerda (sobre a sidebar). */
.member-fab-stack {
	/* Desktop: mesma largura útil da sidebar (padding-h dos 2 lados + gutter da scrollbar). */
	position: fixed;
	left: var(--padding-h);
	bottom: 20px;
	z-index: 90;
	width: calc(var(--sidebar--width) - (var(--padding-h) * 2) - var(--sidebar--scrollbar--width));
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: member-fab-in 0.35s ease both;
}

.member-fab-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 20px;
	border-radius: var(--button--border-radius);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	box-shadow: var(--hard-shadow-sm);
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

/* Hover sutil (mesma "pressão" dos .button do tema), sem trocar de cor.
   Cor do texto travada no :hover pois a regra global "a:hover" (typography.css)
   tem especificidade maior que uma classe única e sobrescrevia pra roxo accent. */
.member-fab-pill:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--color-contrast);
}

.member-fab-pill:active {
	transform: translate(3px, 3px);
	box-shadow: none;
}

/* Assine: azul (accent). */
.member-fab-pill--signup {
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

.member-fab-pill--signup:hover,
.member-fab-pill--signup:active {
	color: var(--color-accent-foreground);
}

/* Entrar: preto. */
.member-fab-pill--signin {
	background: var(--color-contrast);
	color: var(--color-background);
}

.member-fab-pill--signin:hover,
.member-fab-pill--signin:active {
	color: var(--color-background);
}

/* ── Mobile: reserva espaço pro fim da página ───────────────────── */
/* A nav do rodapé foi removida (--nav-mobile--min-height: 0 no :root),
   então o body não precisa mais de reserva geral — só quando existe a
   barra fixa Assine/Entrar do deslogado (~47px), senão ela cobre o
   final do footer. */
@media (max-width: 950px) {
	body {
		padding-bottom: var(--nav-mobile--min-height, 0px);
	}

	body:has(.member-fab-stack) {
		padding-bottom: calc(var(--nav-mobile--min-height, 0px) + 53px);
	}
}

/* Mobile: barra única lado a lado, colada nas bordas da tela e no menu abaixo. */
@media (max-width: 950px) {
	.member-fab-stack {
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		flex-direction: row;
		gap: var(--line);
		background: var(--color-contrast);
		/* Encosta no topo da nav mobile → só arredonda em cima. */
		border-radius: var(--button--border-radius) var(--button--border-radius) 0 0;
		overflow: hidden;
		box-shadow: none;
		bottom: var(--nav-mobile--min-height, 47px);
	}

	.member-fab-pill {
		flex: 1 1 0;
		width: auto;
		margin: 0;
		padding: 13px 12px;
		border-radius: 0;
		box-shadow: none;
	}

	.member-fab-pill:hover,
	.member-fab-pill:active {
		transform: none;
		box-shadow: none;
	}
}

/* "Assine" no header (deslogado). Mesma altura do toggle dia/noite e da
   busca: padding vertical 7.5px + ícone 16px = 31px. */
.header-assine {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	height: 31px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	box-shadow: var(--hard-shadow-sm);
	transition: background 0.12s ease, color 0.12s ease;
	margin-right: 5px;
	/* afasta do toggle dia/noite */
}

.header-assine:hover {
	background: var(--color-contrast);
	color: var(--color-background);
}

@media (max-width: 380px) {
	.header-assine {
		padding: 0 12px;
	}
}

/* Logado: "Sair" ao lado do "Conta" (que reusa o estilo do Assine).
   Pill vazado (ação terciária) com a mesma sombra dura dos outros
   pills — sem ela, o pill branco "fundia" com o botão quadrado branco
   ao lado e a borda direita parecia sumir. Fundo sólido (não
   transparente) pra sombra não vazar por trás. Cor travada no hover
   (a:hover global pintaria de accent). */
.header-sair {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	height: 31px;
	padding: 0 14px;
	border-radius: 999px;
	border: var(--line) solid var(--color-contrast);
	background: var(--color-background);
	color: var(--color-contrast);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	box-shadow: var(--hard-shadow-sm);
	margin-right: 8px;
	transition: background 0.12s ease, color 0.12s ease;
}

.header-sair:hover,
.header-sair:active {
	background: var(--color-contrast);
	color: var(--color-background);
}

@media (max-width: 380px) {
	.header-sair {
		padding: 0 10px;
	}
}

/* ── Comentários da comunidade (home) ───────────────────────────── */
.section-comments-recent[hidden] {
	display: none;
}

/* overflow-x: clip (não hidden!): hidden força o eixo Y pra "auto" e
   recorta o topo do 1º card quando ele sobe 2px no hover (a borda
   superior sumia). clip corta SÓ o eixo X; o hidden anterior fica de
   fallback pra navegadores sem suporte. */
.rc-layout {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-3);
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* Menu lateral (estilo Twitter) de filtro por rede. */
.rc-filter {
	position: sticky;
	top: var(--spacing-3);
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rc-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px 9px 12px;
	border: 0;
	background: transparent;
	color: var(--color-contrast);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.1s ease, color 0.1s ease;
}

.rc-filter-btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.rc-filter-btn:hover {
	background: var(--color-background-300);
}

.rc-filter-btn.is-active {
	background: var(--color-contrast);
	color: var(--color-background);
}

.recent-comments-list {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cor por rede (accent inferior + badge + logo). */
.recent-comment {
	--net: var(--color-contrast);
	min-width: 0;
	max-width: 100%;
}

.recent-comment-bluesky {
	--net: #1185fe;
}

.recent-comment-discord {
	--net: #5865f2;
}

.recent-comment-linkedin {
	--net: #0a66c2;
}

.recent-comment-card {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--spacing-2);
	border: var(--line) solid var(--color-border);
	border-radius: var(--radius-3);
	background: var(--color-background);
	color: var(--color-contrast);
	text-decoration: none;
	box-shadow: 0 3px 0 var(--net);
	transition: border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

/* Link "esticado" que torna o card inteiro clicável (leva ao original)
   sem aninhar âncoras — assim os links de URL dentro do corpo podem ser
   <a> de verdade. Os links internos sobem de camada pra ficar clicáveis. */
.rc-cardlink {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.rc-body a {
	position: relative;
	z-index: 2;
	color: var(--ghost-accent-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rc-body a:hover {
	text-decoration: none;
}

.recent-comment-card:hover {
	border-color: var(--color-contrast);
	box-shadow: 0 5px 0 var(--net);
	transform: translateY(-2px);
}

.rc-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0.6em;
	min-width: 0;
}

.rc-avatar {
	position: relative;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--color-background-200);
	font-family: var(--font-family-mono);
	font-weight: var(--font-weight-semibold);
	color: var(--color-secondary);
}

.rc-avatar::before {
	content: attr(data-initial);
}

.rc-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rc-id {
	flex: 1 1 auto;
	min-width: 0;
}

.rc-author-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	line-height: 1.2;
	min-width: 0;
}

.rc-author {
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-semibold);
	color: var(--color-contrast);
	overflow-wrap: anywhere;
}

.rc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--net);
}

.rc-badge svg {
	width: 1em;
	height: 1em;
}

.rc-time {
	display: block;
	margin-top: 2px;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	color: var(--color-secondary);
}

.rc-body {
	font-family: var(--font-family-body);
	font-size: var(--font-small);
	line-height: 1.5;
	color: var(--color-contrast);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.rc-body p {
	margin: 0 0 0.4em;
}

.rc-body p:last-child {
	margin-bottom: 0;
}

.rc-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 0.7em;
	padding-top: 0.6em;
	border-top: var(--line) solid var(--color-border);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	color: var(--color-secondary);
	flex-wrap: wrap;
}

.rc-metric {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.rc-metric svg {
	width: 14px;
	height: 14px;
}

.rc-where {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rc-open {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--net);
	text-transform: uppercase;
}

.rc-open svg {
	width: 13px;
	height: 13px;
}

/* Spinner. */
.recent-comments-loading {
	display: flex;
	justify-content: center;
	padding: var(--spacing-5) 0;
}

.recent-comments-loading .spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 2px solid var(--color-border);
	border-top-color: var(--ghost-accent-color);
	border-radius: 50%;
	animation: recent-spin 0.7s linear infinite;
}

@keyframes recent-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 700px) {

	/* align-items:flex-start (herdado do desktop) faz um item de flex em coluna
	   virar "fit-content" em vez de esticar 100% — o texto então cresce livre
	   e só quebra linha além da largura da tela. stretch + width:100% travam isso. */
	.rc-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.rc-filter {
		position: static;
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 4px;
	}

	.recent-comments-list {
		width: 100%;
	}
}

/* ── Área do assinante (/conta) ─────────────────────────────────── */
.conta {
	max-width: var(--container-wide--width);
	margin: 0 auto;
}

.conta-title {
	margin: 0 0 var(--spacing-2);
}

.conta-sub {
	margin: 0 0 var(--spacing-5);
	color: var(--color-foreground);
}

/* Botão "Acessar página de benefícios" no topo da /conta: encurta o
   respiro que o .conta-sub deixa (spacing-5) e abre espaço até o grid. */
.conta-beneficios {
	display: inline-flex;
	margin-top: calc(var(--spacing-3) - var(--spacing-5));
	margin-bottom: var(--spacing-5);
}

.conta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--spacing-3);
}

.conta-card {
	padding: var(--spacing-4);
	border: var(--line) solid var(--color-border);
	border-radius: var(--radius-1);
	background: var(--color-background);
	box-shadow: var(--hard-shadow-sm);
}

.conta-card h2 {
	margin: 0 0 var(--spacing-3);
	font-family: var(--font-family-mono);
	font-size: var(--font-midl, 1.2rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ghost-accent-color);
}

.conta-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: var(--line) solid var(--color-border);
	font-size: var(--font-mid, 1rem);
}

.conta-row:first-of-type {
	border-top: 0;
}

.conta-row dt {
	color: var(--color-secondary);
}

.conta-row dd {
	margin: 0;
	font-weight: var(--font-weight-medium);
	text-align: right;
}

.conta-badge {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.conta-actions {
	margin-top: var(--spacing-4);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.conta-gate {
	max-width: 480px;
	margin: var(--spacing-6) auto;
	text-align: center;
}

.conta-gate p {
	color: var(--color-foreground);
	margin: 0 0 var(--spacing-4);
}

/* Toggles de newsletters (/conta): card de largura total abaixo do
   grid, lista com switches on/off. */
.conta>.conta-newsletters {
	width: 100%;
	margin-top: var(--spacing-3);
}

.conta-nl-hint {
	margin: 0 0 var(--spacing-2);
	font-size: var(--font-mid, 1rem);
	color: var(--color-foreground);
}

.conta-nl-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	cursor: pointer;
}

.conta-nl-name {
	font-size: var(--font-midl);
	font-weight: var(--font-weight-medium);
	color: var(--color-contrast);
}

.conta-nl-name small {
	display: block;
	margin-top: 2px;
	font-size: var(--font-mid);
	font-weight: var(--font-weight-regular);
	color: var(--color-secondary);
}

/* Switch on/off (pill é permitido em toggles/ações no design system).
   Seletores com [type] pra empatar/vencer o estilo de checkbox do tema
   (forms.css usa [type='checkbox']::before com o ✓ em mask). */
input[type='checkbox'].conta-nl-check {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	margin: 0;
	position: relative;
	border: var(--line) solid var(--color-contrast);
	border-radius: 999px;
	background: var(--color-background-300);
	cursor: pointer;
	vertical-align: middle;
	transition: background-color 0.15s ease;
}

input[type='checkbox'].conta-nl-check::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	mask-image: none;
	border-radius: 50%;
	background: var(--color-contrast);
	transform: none;
	opacity: 1;
	/* o tema esconde o ::before desmarcado (opacity 0) — polegar fica sempre visível */
	transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type='checkbox'].conta-nl-check:checked {
	background: var(--ghost-accent-color);
	border-color: var(--color-contrast);
}

input[type='checkbox'].conta-nl-check:checked::before {
	transform: translateX(18px);
	background: var(--color-accent-foreground);
}

input[type='checkbox'].conta-nl-check:focus-visible {
	outline: 2px solid var(--ghost-accent-color);
	outline-offset: 2px;
}

input[type='checkbox'].conta-nl-check:disabled {
	cursor: wait;
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {

	input[type='checkbox'].conta-nl-check,
	input[type='checkbox'].conta-nl-check::before {
		transition: none;
	}
}

.conta-nl-status {
	margin: var(--spacing-1) 0 0;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	color: var(--color-secondary);
	min-height: 1.2em;
}

/* ══════════════════════════════════════════════════════════════════
   COMPARTILHAR — botão + menu de redes
   ══════════════════════════════════════════════════════════════════ */

/* Botão-gatilho: no hover/foco/aberto vira accent com ícone BRANCO.
   Sem isso, o ícone (currentColor) sumia quando o fundo escurecia. */
.button-share .dropdown-toggle:hover,
.button-share .dropdown-toggle:focus-visible,
.button-share .dropdown-toggle[aria-expanded='true'] {
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	border-color: var(--color-contrast);
}

/* Zebra: itens pares num tom mais claro que o fundo do dropdown
   (o hover, mais abaixo/específico, continua vencendo). */
.button-share .dropdown li:nth-child(even) .nav-link {
	background-color: var(--color-background-100);
}

:root[data-color-scheme="dark"] .button-share .dropdown li:nth-child(even) .nav-link {
	background-color: var(--color-background-400);
}

/* Itens do menu: hover com o roxo da marca e ícone/rótulo branco
   (mesmo padrão do dropdown do menu secundário). */
.button-share .dropdown .nav-link:not(.nav-section-link):hover {
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

/* ══════════════════════════════════════════════════════════════════
   BLOCKQUOTE ALT (kg-blockquote-alt) — citação de destaque
   Pull-quote centralizado, Young Serif, sem moldura/fundo. Aspas
   grandes em accent como marcador. Substitui o visual antigo (que
   herdava a barra/itálico do blockquote comum e ficava esquisito).
   ══════════════════════════════════════════════════════════════════ */
blockquote.kg-blockquote-alt {
	border: 0;
	padding: var(--spacing-3) var(--spacing-2);
	max-width: 40ch;
	margin-inline: auto;
	text-align: center;
	font-family: var(--font-family-headings);
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1.25;
	color: var(--color-contrast);
	background: none;
	box-shadow: none;
}

/* Garante centralização mesmo se o conteúdo vier em <p>/spans. */
blockquote.kg-blockquote-alt > * {
	text-align: center;
}

blockquote.kg-blockquote-alt::before {
	content: '\201C';
	display: block;
	font-family: var(--font-family-headings);
	font-size: 2.6em;
	line-height: 0.55;
	color: var(--ghost-accent-color);
	margin-bottom: 0.08em;
}

/* Ênfase dentro do pull-quote não precisa trocar de fonte (já é serif). */
blockquote.kg-blockquote-alt :is(em, i) {
	font-family: inherit;
	font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   LISTA DE POSTS (painel [2] "Publicações")
   A moldura dura por item deixava a lista densa demais; sem nada,
   solta demais. Meio-termo: divisória pontilhada bem clara entre os
   itens (só aqui — grades, read-next, popup e home ficam iguais).
   ══════════════════════════════════════════════════════════════════ */

/* Divisória cinza-clara (adapta a light/dark: cinza neutro em baixa
   opacidade fica visível sobre o #eee e sobre o fundo escuro). */
.sidebar-posts .sidebar-list {
	gap: 0;
}

.sidebar-posts .sidebar-list .card-post {
	border: 0;
	border-radius: var(--radius-1);
	box-shadow: none;
	/* Padding em volta pro realce de hover/ativo não colar no texto. */
	padding: var(--spacing-2);
}

.sidebar-posts .sidebar-list .card-post + .card-post {
	border-top: 1px dotted rgb(128 128 128 / 30%);
}

/* Hover/ativo: realce só pelo fundo, sem reintroduzir borda. */
.sidebar-posts .sidebar-list .card-post:hover {
	border-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   PAINEL PUBLICAÇÕES — toggle "só destaques" (foguinho) + filtro em linha
   ══════════════════════════════════════════════════════════════════ */

/* Toggle no header, à direita do filtro (não encolhe). */
.posts-destaques {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 4px;
	border: 0;
	background: none;
	color: var(--color-secondary);
	cursor: pointer;
	transition: color 0.12s ease;
}

.posts-destaques > svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* Switch ao lado do foguinho. */
.posts-destaques-switch {
	position: relative;
	width: 26px;
	height: 15px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--color-background-400);
	transition: background-color 0.15s ease;
}

.posts-destaques-switch::after {
	content: '';
	position: absolute;
	top: 1.5px;
	left: 1.5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-background);
	box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	transition: transform 0.15s ease;
}

.posts-destaques[aria-pressed='true'] {
	color: var(--ghost-accent-color);
}

.posts-destaques[aria-pressed='true'] .posts-destaques-switch {
	background: var(--ghost-accent-color);
}

.posts-destaques[aria-pressed='true'] .posts-destaques-switch::after {
	transform: translateX(11px);
}

/* Filtro por tag na mesma linha do toggle de destaques (dentro do
   .sidebar-header, que é flex): ocupa a esquerda; o toggle fica à direita. */
.posts-filter-row {
	flex: 1 1 auto;
	min-width: 0; /* permite o select encolher em vez de estourar a coluna */
	margin: 0;
}

/* Select do filtro: linha discreta (cinza claro, não o traço preto duro),
   cantos suaves e o tom mono/caixa-alta dos outros rótulos. */
.posts-filter-row .sidebar-posts-filter {
	width: 100%;
	min-height: 34px;
	border: var(--line) solid var(--color-background-400);
	border-radius: var(--radius-1);
	background-color: var(--color-background);
	color: var(--color-secondary);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.04em;
	transition: border-color 0.12s ease, color 0.12s ease;
}

.posts-filter-row .sidebar-posts-filter:hover,
.posts-filter-row .sidebar-posts-filter:focus-visible {
	border-color: var(--color-border);
	color: var(--color-contrast);
}

/* Toggle ativo: esconde os cards que não são destaque (featured). */
.sidebar-posts.destaques-only .sidebar-list .card-post:not(.featured) {
	display: none;
}

/* Com o filtro de destaques ligado, o "carregar mais"/infinite scroll
   ficava piscando: carregava páginas cheias de não-destaques (todos
   escondidos), o loader continuava visível no fim e disparava sem parar.
   Escondendo o botão de paginação, o observer do PVS não dispara → para de
   piscar. (Ao desligar o filtro, volta a carregar normalmente.) */
.sidebar-posts.destaques-only .pagination-next,
.sidebar-posts.destaques-only .pagination-prev {
	display: none;
}

/* Aviso "sem destaques": aparece só com o toggle ligado e quando não há
   nenhum card featured visível na lista. */
.destaques-empty {
	display: none;
	margin: 0;
	padding: var(--spacing-2) 0;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.04em;
	color: var(--color-secondary);
}

.sidebar-posts.destaques-only .sidebar-body:not(:has(.card-post.featured)) .destaques-empty {
	display: block;
}

/* ══════════════════════════════════════════════════════════════════
   COMENTÁRIOS — âncora na meta do post + alvo do #comments
   ══════════════════════════════════════════════════════════════════ */

/* Segundo grupo de metadados (abaixo da imagem, logo acima do corpo):
   tempo de leitura + nota de comentários + compartilhar. Alinha com a
   coluna do texto (mesma largura de .post-content > *) e tem um respiro
   no topo pra não colar na imagem. */
.post-content-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 14px;
	max-width: var(--container--width);
	margin-inline: auto;
	margin-bottom: var(--spacing-3);
	padding-top: var(--spacing-4);
	font-size: var(--font-small);
	font-weight: var(--font-weight-medium);
}

/* Compartilhar empurrado pra direita. */
.post-content-meta .button-share {
	margin-left: auto;
}

/* Tempo de leitura na mesma cor da nota de comentários (secundária),
   com ícone de relógio. */
.post-content-meta .post-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--color-secondary);
}

.post-content-meta .post-time-icon {
	flex: 0 0 auto;
}

/* Selo de política de IA (Conteúdo feito por humanos / com auxílio de IA).
   No pé do post, logo acima dos comentários — alinhado à coluna do texto. */
.post-ai-seal-footer {
	max-width: var(--container--width);
	margin: var(--spacing-4) auto 0;
}

.post-ai-seal {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.post-ai-seal-img {
	height: 48px;
	width: auto;
}

/* No dark, o carimbo (fundo claro, texto escuro) fica invertido pra
   manter legibilidade sem redesenhar o SVG. */
:root[data-color-scheme="dark"] .post-ai-seal-img,
:root[data-color-scheme="system"] .post-ai-seal-img {
	filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: light) {
	:root[data-color-scheme="system"] .post-ai-seal-img {
		filter: none;
	}
}

/* Nota "N comentários". O {{comment_count}} vira um placeholder
   [data-ghost-comment-count] preenchido pelo script do Ghost; fica VAZIO
   quando 0 (ou antes da hidratação), então escondemos só a nota nesse
   caso (o tempo de leitura e o compartilhar continuam na linha). */
.post-content-comments-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-secondary);
	text-decoration: none;
	transition: color 0.1s ease;
}

.post-content-comments-link:hover {
	color: var(--ghost-accent-color);
}

.post-content-comments-link .pcc-icon {
	flex: 0 0 auto;
}

.post-content-comments-link:has([data-ghost-comment-count]:empty) {
	display: none;
}

/* Separador "/" no mesmo estilo dos outros metadados. */
.post-content-meta .post-content-comments-link:not(:first-child)::before {
	content: '/';
	margin-right: 14px;
	color: var(--color-secondary);
}

/* Âncora: não deixa o topo do bloco sumir sob o header fixo. */
#comments {
	scroll-margin-top: var(--spacing-5);
}

/* <strong> dentro de <h6> ganha a cor de destaque (accent). */
.post-content h6 strong {
	color: var(--ghost-accent-color);
}

/* ══════════════════════════════════════════════════════════════════
   ÍNDICE DE TAGS (/tags/) — chips com badge de contagem
   Só tags com +100 publicações (filtro no partial sections/tags-index).
   ══════════════════════════════════════════════════════════════════ */
.tags-index > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tags-index-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px 8px 12px;
	border: var(--line) solid var(--color-border);
	border-radius: var(--radius-1);
	color: var(--color-contrast);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

.tags-index-link:hover {
	border-color: var(--color-contrast);
	box-shadow: var(--hard-shadow-sm);
	transform: translate(-1px, -1px);
}

.tags-index-link .tag-icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
}

/* Badge/pílula com o total de publicações. */
.tag-count {
	flex: 0 0 auto;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

/* ══════════════════════════════════════════════════════════════════
   POST MULTI-AUTOR — avatares sobrepostos na meta + nomes abaixo
   ══════════════════════════════════════════════════════════════════ */
.post-authors-avatars {
	display: inline-flex;
	align-items: center;
}

.post-authors-avatar {
	display: inline-flex;
	border-radius: 50%;
}

/* Overlap sutil entre os avatares. */
.post-authors-avatar:not(:first-child) {
	margin-left: -7px;
}

.post-authors-avatar picture,
.post-authors-avatar img {
	display: block;
}

.post-authors-avatar img {
	width: 30px;
	height: 30px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--color-border);
	/* anel na cor do fundo pra "recortar" a sobreposição. */
	box-shadow: 0 0 0 2px var(--color-background);
}

/* Nomes numa linha abaixo dos metadados (quebra em várias linhas). */
.post-authors-names {
	margin-top: 8px;
	font-size: var(--font-small);
	font-weight: var(--font-weight-medium);
	line-height: 1.45;
	color: var(--color-contrast);
}

.post-authors-names .post-authors-name {
	color: inherit;
	text-decoration: none;
}

.post-authors-names .post-authors-name:hover {
	color: var(--ghost-accent-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   TEMPLATE "ESPECIAIS" (custom-especiais.hbs)
   Reaproveita o template de post; muda só a apresentação do hero:
   título centralizado, subtítulo abaixo (não inline) e imagem maior.
   O colapso dos painéis é feito no load (script no <head>).
   ══════════════════════════════════════════════════════════════════ */

/* A barra fixa de título (post-head-sticky) fica deslocada e redundante
   com o título grande centralizado — some no Especiais. */
.template-especiais .post-head-sticky {
	display: none;
}

/* Cabeçalho centralizado. */
.template-especiais .post-header .container {
	text-align: center;
}

.template-especiais .post-header .post-meta-wrapper,
.template-especiais .post-header .post-meta {
	justify-content: center;
}

/* Título e subtítulo deixam de fluir na mesma linha: cada um no seu
   bloco, centralizados. (No post normal são display:inline.) */
.template-especiais .post-header .post-title-row .post-title {
	display: block;
}

.template-especiais .post-header .post-title-row .post-excerpt {
	display: block;
	margin-top: var(--spacing-2);
	/* subtítulo um pouco menor que o título, ainda centralizado. */
	font-size: 1.25rem;
}

/* Imagem de destaque ocupa mais espaço na tela. */
.template-especiais .post-media {
	max-width: var(--container-site--width, 1100px);
}

/* ══════════════════════════════════════════════════════════════════
   FEATURED CARD — gradiente mais forte sobre a imagem
   O gradiente compilado (built/index.css) cobre só 60% da altura
   com opacidade máx. de 0.6 — insuficiente no mobile sobre fotos
   carregadas. Substituímos por um gradiente de altura total que
   escurece bastante a metade inferior, mantendo o topo respirando.
   ══════════════════════════════════════════════════════════════════ */
.card-post.card-has-image .card-image::before {
	background-image: linear-gradient(
		to bottom,
		hsla(0, 0%, 0%, 0) 0%,
		hsla(0, 0%, 0%, 0.08) 25%,
		hsla(0, 0%, 0%, 0.35) 50%,
		hsla(0, 0%, 0%, 0.62) 70%,
		hsla(0, 0%, 0%, 0.82) 100%
	) !important;
	background-position: 0 0 !important;
	background-size: 100% 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   TAG CARDS (home mobile) — sem imagem de fundo
   As feature_images das tags poluem visualmente os botões compactos.
   Esconde a imagem e o overlay ::after (que existia pra escurecê-la)
   em TODAS as tags da home, não só nas que têm tag-icon.
   ══════════════════════════════════════════════════════════════════ */
.section-tags .nav-link-image {
	display: none !important;
}

.section-tags .nav-link::after {
	display: none;
}
/* ══════════════════════════════════════════════════════════════════
   /news — página de newsletters (signup do não-logado + gerenciar logado)
   ══════════════════════════════════════════════════════════════════ */
.news {
	max-width: var(--container-wide--width);
	margin-inline: auto;
	padding-top: var(--spacing-4);
}

.news-title {
	margin: 0 0 var(--spacing-2);
}

.news-sub {
	margin: 0 0 var(--spacing-4);
	color: var(--color-secondary);
}

/* Card do signup (deslogado) e do gerenciar (logado) com o mesmo respiro. */
.news .conta-card {
	margin-top: var(--spacing-3);
}

/* Dentro do <form>, o forms.css injeta estilos em label/input (margins
   negativos no label, width:100%/padding no input) que bagunçam os
   toggles — no /conta é um <section>, sem isso. Reforça o layout: linha
   full-width, nome flexível, switch fixo à direita (mesmo eixo vertical). */
.news-form .conta-nl-row {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
}

.news-form .conta-nl-name {
	flex: 1 1 auto;
	min-width: 0;
}

.news-form .conta-nl-check {
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	padding: 0;
	margin: 0;
}

/* "Receber todas" no TOPO, em destaque, com separador abaixo. */
.news-form .news-nl-all {
	margin-bottom: var(--spacing-1);
	padding-bottom: var(--spacing-2);
	border-bottom: var(--line) solid var(--color-border);
}

.news-form .news-nl-all .conta-nl-name {
	color: var(--ghost-accent-color);
	font-weight: var(--font-weight-semibold);
}

/* E-mail estilo homepage (pill; o botão "vaza" 12px pra baixo). */
.news-form .signup-cta-form {
	max-width: 100%;
	margin: var(--spacing-4) 0 var(--spacing-3);
}

.news-form.loading .signup-cta-submit {
	pointer-events: none;
	opacity: 0.85;
}

/* Status: some quando vazio (não empurra o link pra longe do input). */
.news-form .conta-nl-status {
	margin: 0;
}

.news-form .conta-nl-status:empty {
	display: none;
}

.news-form.success .conta-nl-status {
	margin-top: var(--spacing-2);
	color: var(--ghost-accent-color);
}

/* Link de login (estilo homepage), logo abaixo do input, à esquerda. */
.news-form .signup-cta-links {
	justify-content: flex-start;
	margin-top: 0;
}

/* Página dedicada da tag: quando a tag tem imagem atribuída, ela fica
   maior no hero (o figure do hero small é limitado a 100px por padrão). */
.tag-template .section-hero-small > figure:not(.section-hero-images) {
	width: clamp(160px, 26vw, 260px);
}

/* ══════════════════════════════════════════════════════════════════
   TOC (sumário) — itens em zebra + hover legível (accent, não preto/preto)
   ══════════════════════════════════════════════════════════════════ */
.toc > ul {
	padding: 0.3rem;
}

.toc > ul li > a {
	display: block;
	padding: 5px 10px;
	border-radius: var(--radius-1);
	color: var(--color-foreground);
	text-decoration-color: transparent;
	transition: background-color 0.1s ease, color 0.1s ease;
}

/* Zebra: linhas pares num tom sutil (mode-agnostic). */
.toc > ul > li:nth-child(even) > a {
	background-color: rgb(128 128 128 / 10%);
}

/* Hover dos itens: fundo accent + texto branco (legível). */
.toc > ul li > a:hover {
	background-color: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
	text-decoration-color: transparent;
}

/* Botão de recolher: hover no accent + ícone branco (antes ficava
   quase-preto no quase-preto e o ícone sumia). */
.toc-button:hover {
	background-color: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

/* ── FABs do assinante pago: Indique (accent) + Onboarding (discreto),
   empilhados para não sobreporem. O grupo assume o position:fixed. ──── */
.member-fab-group {
	position: fixed;
	left: var(--padding-h);
	bottom: 20px;
	z-index: 90;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 8px;
}

.member-fab-group .member-fab {
	position: static;
}

/* Onboarding: outline discreto (fundo do tema + borda), no lugar do roxo. */
.member-fab--onboarding {
	background: var(--color-background);
	color: var(--color-contrast);
	border: var(--line) solid var(--color-border);
	box-shadow: var(--hard-shadow-sm);
}

.member-fab--onboarding:hover {
	background: var(--color-contrast);
	color: var(--color-background);
}

/* Painel de navegação colapsado: acompanha o trilho (como os outros FABs). */
html.wm-nav-collapsed .member-fab-group {
	left: calc(var(--wm-rail-w) + 16px);
}

/* Mobile: acima da nav fixa. Botões compactos (padding/fonte menores)
   pra ocupar menos tela — desktop segue com o tamanho padrão. */
@media (max-width: 950px) {
	.member-fab-group {
		left: 12px;
		bottom: calc(var(--nav-mobile--min-height, 47px) + 12px);
		gap: 6px;
	}

	.member-fab-group .member-fab {
		padding: 6px 12px;
		font-size: 0.65rem;
	}
}

/* ══════════════════════════════════════════════════════════════════
   TEMPLATE "POST SEM IMAGEM" — colapsa a imagem de destaque
   Tudo o mais (autor, data, comentários, share, conteúdo) segue igual.
   ══════════════════════════════════════════════════════════════════ */
.template-post-sem-imagem .post-media {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════
   LISTAGEM DE NEWSLETTERS (/newsletters/) — densidade maior
   A coleção usa o tag.hbs; escopado pela body-class .tag-newsletters
   pra não afetar as outras listas de tag.
   ══════════════════════════════════════════════════════════════════ */
.tag-newsletters .section-list {
	gap: 4px;
}

.tag-newsletters .section-list > .card {
	padding: var(--spacing-1) var(--spacing-2);
}

/* ══════════════════════════════════════════════════════════════════
   TEMPLATE "PAPO ABERTO" — post enxuto, comentários em destaque
   ══════════════════════════════════════════════════════════════════ */
.papo-header {
	padding-top: var(--spacing-4);
}

.papo-eyebrow {
	margin: 0 0 var(--spacing-1);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ghost-accent-color);
}

.papo-title {
	margin: 0 0 var(--spacing-2);
}

.papo-date {
	display: block;
	font-size: var(--font-small);
	color: var(--color-secondary);
}

.papo-content {
	margin-top: var(--spacing-4);
}

/* Comentários em destaque: mais respiro, título maior e uma linha dura
   separando do corpo — é o centro do formato. */
.template-papo-aberto .post-comments {
	margin-top: var(--spacing-5);
	padding-top: var(--spacing-4);
	border-top: var(--line) solid var(--color-contrast);
}

.template-papo-aberto .post-comments-header h2 {
	font-size: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   TEMPLATE "JOGO RÁPIDO" — card condensado + feed de curtas
   Largura igual à do corpo dos posts normais (--container--width).
   ══════════════════════════════════════════════════════════════════ */
.jr-card,
.jr-feed,
.template-jogo-rapido .post-comments {
	max-width: var(--container--width);
	margin-inline: auto;
}

.jr-card {
	padding-top: var(--spacing-4);
}

/* Cabeçalho: data + contagem de comentários. */
.jr-head {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.04em;
	color: var(--color-secondary);
}

.jr-head-comments {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	color: inherit;
	text-decoration: none;
}

.jr-head-comments:hover {
	color: var(--ghost-accent-color);
}

.jr-head-comments svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* Autor: avatar + nome, logo abaixo do cabeçalho. */
/* Topo do card: autor à esquerda, data à direita, mesma linha. */
.jr-top {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}

.jr-top .jr-date {
	margin-left: auto;
	flex: 0 0 auto;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	color: var(--color-secondary);
	white-space: nowrap;
}

.jr-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-contrast);
	text-decoration: none;
}

.jr-author img {
	width: 28px;
	height: 28px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--color-border);
}

/* Corpo: título próprio (bloco), colado ao autor (gap curto). Estes posts
   não têm excerpt, então o título NÃO fica na mesma linha do conteúdo. */
.jr-body {
	margin-top: 4px;
}

/* Tag "Jogo Rápido" na meta, depois do ícone de comentar — discreta. */
.jr-tag {
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.04em;
	color: var(--color-secondary);
}

/* Como link (tags do post no pé do card). */
a.jr-tag {
	text-decoration: none;
}

a.jr-tag:hover {
	color: var(--ghost-accent-color);
}

/* Ajuste pedido: conteúdo do post normal mais perto do cabeçalho. */
.post-template .post-content {
	margin-top: var(--spacing-1);
}

.jr-title {
	display: block;
	font-family: var(--font-family-headings);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-contrast);
}

/* Meta do card (comentários + tags) — vive no pé, dentro do .jr-actions.
   Com muitas tags: cada uma é indivisível (nowrap) e a linha quebra por
   item inteiro, com gap curto — nada de palavra picotada na vertical. */
.jr-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 6px 0 var(--spacing-2);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.03em;
	color: var(--color-secondary);
}

.jr-meta > * {
	flex: 0 0 auto;
	white-space: nowrap;
}

.jr-comments-btn,
.jr-comments-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.jr-comments-btn:hover,
.jr-comments-link:hover {
	color: var(--ghost-accent-color);
}

.jr-comments-btn svg,
.jr-comments-link svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.jr-actions {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 14px;
	margin-top: var(--spacing-3);
}

/* No pé do card: o copiar link fica ancorado à direita (não desce);
   a meta ocupa o resto e as tags quebram de linha dentro dela. */
.jr-actions .jr-meta {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.jr-actions .jr-copy {
	flex: 0 0 auto;
}

/* Botão copiar link (card e itens do feed). */
.jr-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: var(--line) solid var(--color-border);
	border-radius: var(--radius-1);
	background: var(--color-background);
	color: var(--color-secondary);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	cursor: pointer;
	transition: color 0.1s ease, border-color 0.1s ease;
}

.jr-copy:hover {
	color: var(--ghost-accent-color);
	border-color: var(--color-contrast);
}

.jr-copy svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.jr-copy--sm {
	padding: 2px 6px;
	border: 0;
}

.jr-copy--sm .jr-copy-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Feed: densidade meio-termo (linha fina separando os itens) ──── */
.jr-feed {
	margin-top: var(--spacing-5);
	padding-top: var(--spacing-3);
	border-top: var(--line) solid var(--color-border);
}

.jr-feed-title {
	margin: 0 0 var(--spacing-2);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-secondary);
}

.jr-feed-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Item do feed = card COMPLETO, igual ao principal (mesmo cabeçalho,
   autor, título bold colado ao conteúdo e copiar link). Só o respiro é
   menor e há uma linha fina separando um do outro. */
.jr-item.jr-card {
	max-width: none;
	margin-inline: 0;
	padding-top: var(--spacing-3);
	padding-bottom: var(--spacing-2);
}

.jr-item + .jr-item {
	border-top: 1px solid rgb(128 128 128 / 25%);
}

/* Título do item: é link pra URL própria daquele post. */
.jr-title-link {
	text-decoration: none;
}

.jr-title-link:hover .jr-title {
	color: var(--ghost-accent-color);
}

/* Autor no item do feed não é link (o título já leva ao post). */
.jr-item .jr-author img {
	width: 24px;
	height: 24px;
}

.jr-feed-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	margin-top: var(--spacing-3);
}

.jr-more {
	padding: 9px 18px;
	border: var(--line) solid var(--color-contrast);
	border-radius: var(--radius-1);
	background: var(--color-background);
	color: var(--color-contrast);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--hard-shadow-sm);
}

.jr-more:hover {
	background: var(--ghost-accent-color);
	color: var(--color-accent-foreground);
}

.jr-all {
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jr-all:hover {
	color: var(--ghost-accent-color);
}

.jr-feed-status {
	margin: var(--spacing-1) 0 0;
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	color: var(--color-secondary);
}

/* Label "Jogo Rápido" no topo — discreto (mono, cinza), sem a pílula
   accent das tags dos posts normais. */
.jr-eyebrow {
	margin: 0 0 var(--spacing-1);
	font-family: var(--font-family-mono);
	font-size: var(--font-x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-secondary);
}

/* ── Comentários em MODAL (sumidos por default; abrem pelo toggle) ── */
.jr-modal[hidden] {
	display: none;
}

.jr-modal {
	position: fixed;
	inset: 0;
	/* Acima do header (.header z-index 9999) — antes o topo do site
	   aparecia por cima do modal, sem escurecer. */
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3);
}

.jr-modal-overlay {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgb(0 0 0 / 55%);
	cursor: pointer;
}

.jr-modal-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	background: var(--color-background);
	border: var(--line) solid var(--color-contrast);
	border-radius: var(--radius-2);
	box-shadow: var(--hard-shadow);
	overflow: hidden;
}

.jr-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-3);
	border-bottom: var(--line) solid var(--color-border);
}

.jr-modal-head h2 {
	margin: 0;
	font-family: var(--font-family-mono);
	font-size: var(--font-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jr-modal-close {
	display: inline-flex;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--color-contrast);
	cursor: pointer;
}

.jr-modal-close:hover {
	color: var(--ghost-accent-color);
}

.jr-modal-close svg {
	width: 20px;
	height: 20px;
}

.jr-modal-body {
	padding: var(--spacing-3);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE ESPAÇAMENTO — conteúdo de posts/páginas (jul/2026)
   ══════════════════════════════════════════════════════════════════ */

/* Gap entre os blocos da coluna principal: spacing-7 → spacing-5
   (estava longe demais do fim da página). O .header é filho do .content
   e tem margin-bottom negativa calibrada pra spacing-7; recalibramos pro
   gap novo pra manter o ~spacing-4 abaixo do header (senão o net fica
   negativo e o header sobrepõe o conteúdo). A home já usa spacing-5 à parte. */
.content,
.page {
	gap: var(--spacing-5);
}

.header {
	margin-bottom: calc(var(--spacing-5) * -1 + var(--spacing-4));
}

.scroll-progress-wrapper {
	margin-bottom: calc(var(--spacing-5) * -1 + var(--padding-h) * 2);
}

/* h3 quase colado no bloco seguinte (parágrafo). A distância pro bloco
   ANTERIOR — o margin-top do próprio h3 — continua igual. */
.post-content > h3 + * {
	margin-top: 0.4rem;
}

/* h3 em negrito (bold aplicado no editor → <strong>/<b>) vira accent-color. */
.post-content h3 :is(strong, b) {
	color: var(--ghost-accent-color);
}

/* ══════════════════════════════════════════════════════════════════
   ESPAÇAMENTO ENTRE PARÁGRAFOS (jul/2026)
   O bundle dá p { margin-block-end: 25px } (reboot.css) e
   .post-content > * { margin-top: spacing-3 (20→25px) } — os dois
   colapsam pra ~25px de vão. Aqui encurtamos uns pontinhos no site
   todo e mais forte nos cards do Jogo Rápido (notas compactas).
   O p:last-child { margin-block-end: 0 } do bundle (0,1,1) vence a
   regra global p (0,0,1) abaixo — último parágrafo segue zerado.
   ══════════════════════════════════════════════════════════════════ */

/* Site todo: 25px → 19px entre parágrafos. */
p {
	margin-block-end: 19px;
}

/* No corpo dos posts, o vão vinha do colapso com o margin-top do
   irmão (.post-content > * = spacing-3): aproxima só os <p> (imagens,
   embeds e headings mantêm o respiro original). O *:first-child do
   bundle (0,2,0) segue zerando o primeiro filho. */
.post-content > p {
	margin-top: var(--spacing-2);
}

/* Jogo Rápido: nota compacta — parágrafos quase colados (spacing-0),
   e o título com um respiro pequeno do cabeçalho autor/data.
   .jr-body .jr-title (0,2,0) empata com o *:first-child do bundle e
   vence por vir depois — vale também pro card principal do template. */
.jr-body > p {
	margin-top: var(--spacing-0);
}

.jr-body p {
	margin-block-end: var(--spacing-0);
}

.jr-body .jr-title {
	margin-top: 0.85em;
}