/*
Theme Name: GTA VI News
Author: Grupo GTA VI News (Faculdade Cásper Líbero)
Description: Tema do GTA VI News, projeto acadêmico de Jornalismo sobre a espera por GTA VI. Edições do dia e da noite, modelo de matéria com gênero, linha fina, fontes e crédito em toda imagem.
Version: 0.12.7
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: gta-vi-news
*/

/* ---------- Tokens. Duas edições: a da noite é o padrão; a do dia redefine só as cores. */

:root {
	--fundo: #0c0a09;
	--painel: #171311;
	--texto: #f2ebdd;
	--texto-2: #b5aa9a;
	--linha: rgba(242, 235, 221, 0.16);
	--linha-forte: rgba(242, 235, 221, 0.4);
	--sinal: #f8a600;
	--sobre-sinal: #0c0a09;
	--sinal-texto: #f8a600; /* âmbar usado como cor de texto ou fio */
	--flamingo: #ff4f8b;
	--agua: #2ee6d0;
	--vazamento: #c9b8ff;
	--noite: #15102a;
	--tinta: #0c0a09;
	--papel: #f2ebdd;
	--hachura: rgba(242, 235, 221, 0.07);
	--foco: #f8a600; /* anel de foco; sobre blocos âmbar vira tinta */

	--f-titulo: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
	--f-texto: 'Newsreader', Georgia, serif;
	--f-ui: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;

	--raio: 28px 4px 4px 4px; /* um canto curvo só, à maneira do déco de Miami */
	--raio-p: 10px 2px 2px 2px;
	--horizonte: linear-gradient(90deg, #f8a600 0%, #ff7a59 33%, #ff4f8b 66%, #7a4bd6 100%);
	--curva: cubic-bezier(0.32, 0.72, 0, 1);
	--troca: 1.4s;
	--topo: 0px; /* barra de administração do WordPress, quando há alguém logado */

	/* textura: grão de impressão por cima de tudo (claro de noite, escuro de dia) e meio-tom de gráfica */
	--grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.2 0 0 0 -1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	--grao-forca: 0.1;
	--meiotom: radial-gradient(circle, rgba(255, 79, 139, 0.3) 1.1px, transparent 1.7px) 0 0 / 7px 7px;

	/* céu da capa e da abertura das matérias */
	--ceu: linear-gradient(180deg, #0c0a09 0%, #15102a 38%, #34205a 72%, #6b2a68 100%);
	--brilho: rgba(255, 79, 139, 0.5);
	--predio-longe: #251a40;
	--palmeira: #0c0a09;

	/* fundo da capa: piso de terrazzo de saguão de Ocean Drive (frisos de latão, lascas, sol do rodapé) */
	--tz-leques: 0.095;
	--tz-lascas: 0.27;
	--tz-sol: rgba(192, 122, 16, 0.07);

	color-scheme: dark;
}

/* Edição do dia: areia de praia ao sol, pastel, em vez de branco */
:root[data-edicao='dia'] {
	--fundo: #fce8cd;
	--painel: #f8d5c4;
	--texto: #1a120d;
	--texto-2: #6b5446;
	--linha: rgba(26, 18, 13, 0.16);
	--linha-forte: rgba(26, 18, 13, 0.42);
	--sinal-texto: #8a4f00;
	--vazamento: #5b3fb8;
	--hachura: rgba(26, 18, 13, 0.06);
	--foco: #1a120d;
	--grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .08 3.2 0 0 0 -1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	--grao-forca: 0.2;
	--meiotom: radial-gradient(circle, rgba(255, 92, 138, 0.32) 1.1px, transparent 1.7px) 0 0 / 7px 7px;
	--ceu: linear-gradient(180deg, #86d3f2 0%, #bfe9f3 36%, #ffdcd4 70%, #ffc89e 100%);
	--brilho: rgba(255, 150, 110, 0.55);
	--predio-longe: #f6cfe0;
	--palmeira: #f2a68c;
	--tz-leques: 0.1;
	--tz-lascas: 0.15; /* acima disso, lascas rosa e roxas sob texto pequeno ficam abaixo de 4,5:1 */
	--tz-sol: rgba(192, 122, 16, 0.08);
	color-scheme: light;
}

:root[data-movimento='reduzido'] {
	--troca: 0.7s;
}

/* ---------- Base */

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

html {
	-webkit-text-size-adjust: 100%;
	/* âncoras param abaixo do cabeçalho fixo (e da barra do WordPress, para quem está logado) */
	scroll-padding-top: calc(9rem + var(--wp-admin--admin-bar--height, 0px));
}

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--f-ui);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* o grão cobre a página inteira, imagens incluídas, como papel impresso; não recebe clique */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 80;
	pointer-events: none;
	background-image: var(--grao);
	opacity: var(--grao-forca);
}

body.admin-bar {
	--topo: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--topo: 46px;
	}
}

h1,
h2,
h3,
p,
figure {
	margin: 0;
}

h1,
h2,
h3 {
	font-family: var(--f-titulo);
	font-weight: 400;
	line-height: 0.95;
	text-wrap: balance;
	overflow-wrap: anywhere; /* palavra longa não vaza da caixa, mesmo antes de a fonte carregar */
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

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

:focus-visible {
	outline: 3px solid var(--foco);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Peças comuns */

/* a página cresce com a tela até 1840 px; só o texto corrido fica na largura de leitura */
.miolo {
	width: 100%;
	max-width: 1840px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 64px);
}

.miolo-abertura {
	width: 100%;
	max-width: calc(1040px + 2 * clamp(16px, 4vw, 40px));
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

.miolo-texto {
	--coluna: 680px;
	width: 100%;
	max-width: calc(var(--coluna) + 2 * clamp(16px, 4vw, 40px));
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

/* no computador a coluna de leitura cresce com a tela, e a letra do texto cresce junto (ver .corpo) */
@media (min-width: 1200px) {
	.miolo-texto {
		--coluna: 780px;
	}
}

@media (min-width: 1600px) {
	.miolo-texto {
		--coluna: 860px;
	}
}

@media (min-width: 1900px) {
	.miolo-texto {
		--coluna: 920px;
	}
}

.so-leitor,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pular {
	position: absolute;
	left: 16px;
	top: -80px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--sinal);
	color: var(--sobre-sinal);
	font-weight: 700;
	text-decoration: none;
}

.pular:focus {
	top: calc(var(--topo) + 12px);
}

.rotulo {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--texto-2);
}

.frisos {
	height: 14px;
	background: repeating-linear-gradient(
		to bottom,
		var(--sinal) 0,
		var(--sinal) 2px,
		transparent 2px,
		transparent 6px
	);
}

.painel {
	background: var(--painel);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}

.pilula {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 9999px;
	background: var(--sinal);
	color: var(--sobre-sinal);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.pilula.contorno {
	background: none;
	border: 2px solid currentColor;
	color: inherit;
}

.pilula.tinta {
	background: var(--tinta);
	color: var(--sinal);
}

.link-texto {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sinal-texto);
	text-underline-offset: 3px;
}

.link-texto.breve,
.breve {
	color: var(--texto-2);
}

.vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	border: 1px dashed var(--linha-forte);
	background: repeating-linear-gradient(
		135deg,
		var(--hachura) 0,
		var(--hachura) 2px,
		transparent 2px,
		transparent 12px
	);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texto-2);
}

.linha-fina {
	font-family: var(--f-texto);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.35;
}

.assinatura {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- A troca de edição: um véu de entardecer (ou de amanhecer) cobre a página
   enquanto as cores mudam por baixo. É só opacidade, sem deslocamento. */

.veu {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(180deg, #7a4bd6 0%, #ff4f8b 45%, #ff7a59 75%, #f8a600 100%);
}

:root[data-trocando='dia'] .veu {
	background: linear-gradient(180deg, #9fe0f7 0%, #ffb6c8 45%, #ffb36b 80%, #f8a600 100%);
}

:root[data-trocando] .veu {
	animation: veu var(--troca) ease-in-out;
}

@keyframes veu {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0.97;
	}
	55% {
		opacity: 0.97;
	}
	100% {
		opacity: 0;
	}
}

/* ---------- Cabeçalho */

.cabecalho {
	position: sticky;
	top: var(--topo);
	z-index: 40;
	background: var(--fundo);
}

/* no celular a barra do WordPress rola com a página; o cabeçalho cola no topo */
@media (max-width: 600px) {
	body.admin-bar .cabecalho {
		top: 0;
	}
}

.cabecalho-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 10px;
}

.logo {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* logotipo C aprovado: a etiqueta NEWS fica embaixo, à direita; o tamanho vem da altura */
.logo img {
	width: auto;
	height: clamp(54px, 13vw, 76px);
}

.cabecalho-acoes {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* alternância de edição: sol à esquerda de dia, lua à direita de noite */
.edicao-botao {
	position: relative;
	flex-shrink: 0;
	width: 80px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--linha-forte);
	border-radius: 9999px;
	background: #2a1b4a;
	cursor: pointer;
	transition: background-color var(--troca) ease-in-out;
}

.edicao-astro {
	position: absolute;
	left: 2px;
	top: 2px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--papel);
	transform: translateX(36px);
	transition:
		transform 0.5s var(--curva),
		background-color var(--troca) ease-in-out;
}

:root[data-edicao='dia'] .edicao-botao {
	background: #1f5e8c;
}

:root[data-edicao='dia'] .edicao-astro {
	background: var(--sinal);
	transform: translateX(0);
}

:root[data-movimento='reduzido'] .edicao-astro {
	transition: none;
}

.botao-mapa {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.botao-mapa .aro {
	fill: var(--painel);
	stroke: var(--texto-2);
	stroke-width: 1.5;
}

.botao-mapa .rota {
	fill: none;
	stroke: var(--texto-2);
	stroke-width: 1.5;
}

.botao-mapa .ponto-a {
	fill: var(--sinal);
}

.botao-mapa .ponto-b {
	fill: var(--flamingo);
}

.botao-mapa .norte {
	fill: var(--texto);
}

.horizonte {
	height: 3px;
	background: var(--horizonte);
}

/* leitura: uma estrela a cada 20% do texto, e a faixa do horizonte como barra de progresso */
.leitura {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding-bottom: 8px;
}

.estrelas {
	display: flex;
	gap: 4px;
}

.estrelas path {
	fill: none;
	stroke: var(--texto-2);
	stroke-width: 1.5;
}

.estrelas .cheia path {
	fill: var(--sinal);
	stroke: var(--sinal-texto);
}

.porcento {
	min-width: 3ch;
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.leitura-trilho {
	height: 6px;
	background: linear-gradient(var(--linha-forte), var(--linha-forte)) center / 100% 2px no-repeat;
}

.leitura-trilho .horizonte {
	width: 0;
	height: 6px;
	border-radius: 0 6px 6px 0;
}

/* ---------- Mapa do site */

.mapa-site {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 20px 22px 26px;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--painel);
	color: var(--texto);
}

.mapa-site::backdrop {
	background: rgba(12, 10, 9, 0.7);
}

.mapa-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
}

.mapa-topo .pilula {
	min-height: 44px;
	padding: 0 18px;
}

.mapa-secoes li {
	border-top: 1px solid var(--linha);
}

.mapa-secoes a {
	display: flex;
	align-items: baseline;
	min-height: 56px;
	padding-block: 10px;
	font-family: var(--f-titulo);
	font-size: 2.25rem;
	line-height: 1;
	text-decoration: none;
}

.mapa-secoes a:hover {
	color: var(--sinal-texto);
}

.mapa-veiculo {
	padding-top: 18px;
	border-top: 1px solid var(--linha);
}

.mapa-institucionais {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
	font-size: 0.875rem;
	font-weight: 600;
}

.mapa-institucionais a,
.mapa-institucionais .breve {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Rodapé: sobre o projeto, seções e páginas do veículo */

.rodape {
	margin-top: clamp(64px, 8vw, 120px);
	padding-bottom: 40px;
}


.rodape-dentro {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.rodape-grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 48px;
}

.rodape-sobre {
	grid-column: 1 / -1;
}

.rodape-coluna > button {
	font-size: 0.875rem;
}

@media (min-width: 900px) {
	.rodape-sobre {
		grid-column: auto;
	}

	.rodape-grade {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.rodape h2.rotulo,
h2.videos-rotulo {
	font-family: var(--f-ui);
	line-height: 1.5;
}

.rodape-sobre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 62ch;
}

.rodape-logo {
	align-self: flex-start;
	width: auto;
	height: 56px;
	margin-bottom: 8px;
}

.rodape-sobre p {
	font-family: var(--f-texto);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--texto-2);
}

.rodape-coluna ul {
	display: flex;
	flex-direction: column;
	padding-top: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.rodape a,
.rodape .breve,
.rodape button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

.rodape a {
	text-underline-offset: 3px;
}

.rodape a:hover {
	color: var(--sinal-texto);
}

.rodape button {
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.rodape button[aria-pressed='true'] {
	color: var(--sinal-texto);
}

.rodape-linha {
	padding-top: 18px;
	border-top: 1px solid var(--linha);
	font-size: 0.75rem;
	color: var(--texto-2);
}

/* ---------- Abertura da capa: o céu de Leonida com a contagem dentro. De dia, sol retrô de
   faixas; de noite, lua, estrelas e a cidade acesa. A cidade da frente e as palmeiras são
   recortadas na cor do fundo da página, então o céu parece ficar atrás delas. */

.abre-capa {
	--cidade: clamp(64px, 7.5vw, 136px); /* altura da faixa da cidade da frente */
	--sol: clamp(110px, 12vw, 200px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(14px, 2.2vw, 32px);
	/* a contagem pode descer por cima da cidade: o céu fica baixo */
	padding-bottom: calc(var(--cidade) * 0.5 + 8px);
}

.ceu {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ceu-camada {
	position: absolute;
	inset: 0;
}

.ceu-dia {
	background: linear-gradient(180deg, #86d3f2 0%, #bfe9f3 36%, #ffdcd4 70%, #ffc89e 100%);
}

.ceu-noite {
	background: linear-gradient(180deg, #0c0a09 0%, #15102a 38%, #34205a 72%, #6b2a68 100%);
	transition: opacity var(--troca) ease-in-out;
}

/* três camadas de estrelas em grades de passos primos: o olho não acha a grade */
.ceu-estrelas {
	opacity: 0.9;
	background-image:
		radial-gradient(circle, #f2ebdd 1.3px, transparent 2px),
		radial-gradient(circle, rgba(242, 235, 221, 0.8) 0.9px, transparent 1.4px),
		radial-gradient(circle, rgba(201, 184, 255, 0.7) 0.8px, transparent 1.3px);
	background-size:
		149px 113px,
		97px 83px,
		61px 71px;
	background-position:
		17px 23px,
		53px 61px,
		31px 7px;
	mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
	transition: opacity var(--troca) ease-in-out;
}

/* meio-tom de gráfica subindo do horizonte */
.ceu-meiotom {
	background: var(--meiotom);
	mask-image: linear-gradient(0deg, #000 0%, transparent 62%);
}

/* o brilho do horizonte: o sol que se põe, ou a cidade acesa */
.ceu-brilho {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 85%;
	background: radial-gradient(ellipse 70% 60% at 76% 100%, var(--brilho), transparent 70%);
}

.ceu-astro {
	position: absolute;
	border-radius: 50%;
	transition: transform var(--troca) ease-in-out;
}

/* sol retrô: degradê do amarelo ao flamingo, cortado em faixas que se abrem para baixo */
.ceu-sol {
	right: 9%;
	bottom: calc(var(--cidade) * 0.45);
	width: var(--sol);
	aspect-ratio: 1;
	background: linear-gradient(180deg, #ffe066 0%, #ffb347 42%, #ff7f7f 72%, #ff5fa2 100%);
	mask-image: linear-gradient(
		180deg,
		#000 0 52%,
		transparent 52% 55%,
		#000 55% 63%,
		transparent 63% 67%,
		#000 67% 74%,
		transparent 74% 79%,
		#000 79% 85%,
		transparent 85% 91%,
		#000 91%
	);
	transform: translateY(140%);
}

.ceu-lua {
	right: 22%;
	top: 14%;
	width: clamp(34px, 4.4vw, 68px);
	aspect-ratio: 1;
	background: #f2ebdd;
	box-shadow:
		0 0 28px rgba(242, 235, 221, 0.55),
		0 0 90px rgba(201, 184, 255, 0.35);
}

:root[data-edicao='dia'] .ceu-noite,
:root[data-edicao='dia'] .ceu-estrelas {
	opacity: 0;
}

:root[data-edicao='dia'] .ceu-sol {
	transform: translateY(0);
}

:root[data-edicao='dia'] .ceu-lua {
	transform: translateY(600px);
}

:root[data-movimento='reduzido'] .ceu-astro {
	transition: none;
}

.ceu-cidade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: clamp(2px, 0.5vw, 6px);
	height: var(--cidade);
}

.predio {
	flex-basis: 0;
	background: var(--fundo);
}

/* os prédios da frente pisam num chão comum: os vãos entre eles não descem até a base */
.ceu-cidade:not(.longe) {
	background: linear-gradient(var(--fundo), var(--fundo)) bottom / 100% 22% no-repeat;
}

/* a cidade ao longe: mais alta, na cor da névoa; de noite, com as janelas acesas */
.ceu-cidade.longe {
	height: calc(var(--cidade) * 1.5);
	padding-inline: 4%;
	gap: clamp(4px, 1vw, 14px);
}

.longe .predio {
	background-color: var(--predio-longe);
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 9px);
}

:root:not([data-edicao='dia']) .longe .predio {
	background-image:
		radial-gradient(circle, rgba(255, 214, 130, 0.85) 0.9px, transparent 1.5px),
		radial-gradient(circle, rgba(46, 230, 208, 0.55) 0.9px, transparent 1.5px);
	background-size:
		9px 13px,
		23px 17px;
	background-position:
		2px 5px,
		7px 9px;
}

/* formas do déco de Miami: topo arredondado, antena, escalonado, canto curvo */
.predio.t {
	border-radius: 999px 999px 0 0;
}

.predio.a {
	clip-path: polygon(0 12%, 42% 12%, 42% 0, 58% 0, 58% 12%, 100% 12%, 100% 100%, 0 100%);
}

.predio.e {
	clip-path: polygon(0 16%, 22% 16%, 22% 8%, 38% 8%, 38% 0, 62% 0, 62% 8%, 78% 8%, 78% 16%, 100% 16%, 100% 100%, 0 100%);
}

.predio.d {
	border-radius: 18px 0 0 0;
}

.ceu-palmeiras {
	position: absolute;
}

.palmeira {
	position: absolute;
	bottom: 0;
	height: calc(var(--cidade) * var(--altura) / 100);
	width: auto;
	aspect-ratio: 124 / 200;
	fill: var(--palmeira);
	transform: translateX(-50%);
}

/* sem as placas (o tema.js não rodou, ou depois do lançamento) a abertura ficaria baixa e cortaria o sol */
@media (min-width: 700px) {
	.abre-capa {
		min-height: calc(var(--sol) + var(--cidade) * 0.45 + 16px);
	}
}

/* no celular, a cidade ao longe e o sol encolhem para a contagem caber acima deles */
@media (max-width: 699px) {
	.abre-capa {
		padding-bottom: calc(var(--cidade) * 0.6 + 8px);
	}

	.ceu-cidade.longe {
		height: calc(var(--cidade) * 1.1);
	}

	.ceu-sol {
		right: 6%;
		width: 104px;
		bottom: calc(var(--cidade) * 0.35);
	}
}

.palmeira.virada {
	transform: translateX(-50%) scaleX(-1);
}

/* ---------- Contagem: placas de aeroporto (split-flap) no céu */

.contagem {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	/* a contagem passa por cima da cidade: um halo da cor do fundo mantém o texto legível sobre as janelas acesas */
	text-shadow:
		0 1px 2px var(--fundo),
		0 0 10px var(--fundo);
}

[data-contagem-miolo] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contagem-numero {
	display: flex;
	align-items: flex-end;
	gap: clamp(10px, 1.2vw, 18px);
}

.placas {
	display: flex;
	gap: clamp(5px, 0.5vw, 8px);
}

.placa {
	position: relative;
	width: clamp(40px, 4.4vw, 76px);
	height: clamp(58px, 6.3vw, 108px);
	background: linear-gradient(180deg, #ffbd3a 0 50%, #f8a600 50% 100%);
	color: var(--sobre-sinal);
	font-family: var(--f-titulo);
	font-size: clamp(58px, 6.3vw, 108px);
	line-height: clamp(58px, 6.3vw, 108px);
	text-align: center;
	border-radius: 4px;
	box-shadow:
		0 3px 0 rgba(12, 10, 9, 0.25),
		0 14px 30px rgba(12, 10, 9, 0.18);
	text-shadow: none;
}

/* a dobra da placa */
.placa::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 1px);
	height: 2px;
	background: rgba(12, 10, 9, 0.35);
}

.placa:first-child {
	border-radius: 16px 4px 4px 4px;
}

.contagem-unidade {
	font-family: var(--f-titulo);
	font-size: clamp(32px, 3.4vw, 58px);
	line-height: 0.85;
}

.contagem-quando {
	font-size: clamp(0.875rem, 1.1vw, 1.125rem);
	font-weight: 500;
}

.contagem .rotulo {
	color: var(--texto);
}

.contagem-origem {
	font-size: 0.75rem;
	color: var(--texto-2);
}

/* de dia ela passa por cima das palmeiras e do horizonte rosa: no tom do texto, para não cair abaixo de 4,5:1 */
:root[data-edicao='dia'] .contagem-origem {
	color: var(--texto);
}

/* ---------- Selo de gênero */

.selo {
	display: inline-block;
	padding: 6px 10px 5px;
	border-radius: var(--raio-p);
	background: var(--sinal);
	color: var(--sobre-sinal);
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.selo.invertido {
	background: var(--tinta);
	color: var(--sinal);
}

.selo.contorno {
	background: none;
	color: var(--sinal-texto);
	box-shadow: inset 0 0 0 1px var(--sinal-texto);
}

.selo.provisorio {
	background: none;
	color: inherit;
	box-shadow: none;
	outline: 1px dashed currentColor;
	outline-offset: -1px;
}

/* Opinião nunca se confunde com os gêneros informativos */
.selo.opiniao {
	background: var(--texto);
	color: var(--fundo);
	box-shadow: none;
	font-family: var(--f-texto);
	font-style: italic;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Carimbos do detector: confirmado e falso cheios (com ícone),
   vazamento tracejado, boato pontilhado */

.carimbo {
	--cor: var(--texto);
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.2em 0.42em 0.1em;
	border: 3px solid var(--cor);
	border-radius: 3px;
	color: var(--cor);
	font-family: var(--f-titulo);
	font-size: 1.875rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(-2deg);
}

.carimbo.p {
	font-size: 1.375rem;
	border-width: 2px;
}

.carimbo svg {
	width: 0.6em;
	height: 0.6em;
}

.carimbo path {
	fill: none;
	stroke: currentColor;
	stroke-width: 3.5;
}

.carimbo.confirmado {
	--cor: var(--agua);
	background: var(--agua);
	color: var(--tinta);
}

.carimbo.falso {
	--cor: var(--flamingo);
	background: var(--flamingo);
	color: var(--tinta);
	transform: rotate(2deg);
}

.carimbo.vazamento {
	--cor: var(--vazamento);
	border-style: dashed;
	transform: rotate(2deg);
}

.carimbo.boato {
	border-style: dotted;
}

/* ---------- Imagem com legenda e crédito (destaque e blocos do texto) */

.figura img,
.figura .vazio {
	width: 100%;
}

.figura .proporcao {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.figura figcaption,
.corpo figcaption {
	padding-top: 8px;
	font-family: var(--f-texto);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-align: left;
}

.credito {
	display: block;
	margin-top: 2px;
	font-family: var(--f-ui);
	font-size: 0.75rem;
	color: var(--texto-2);
}

/* na galeria a legenda fica embaixo da foto, como no resto do texto: por cima, no celular, ela cobria a foto e o crédito */
.corpo .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	padding: 8px 0 0;
	background: none;
	color: inherit;
	text-shadow: none;
	text-align: left;
}

.corpo .wp-block-gallery.has-nested-images figure.wp-block-image::before {
	content: none;
}

/* com a legenda embaixo, a foto não pode ocupar só a altura que sobra (uma legenda longa a esmagava até zero) */
.corpo .wp-block-gallery.has-nested-images figure.wp-block-image {
	justify-content: flex-start;
}

/* o :not(#individual-image) é o mesmo truque do CSS da galeria do WordPress, para vencer a regra dele */
.corpo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	flex: none;
	height: auto;
}

/* o corte em 3:2 só quando a galeria pede ("Cortar imagens"); sem ele, a foto em pé fica inteira */
.corpo .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* imagem de destaque da matéria inteira, no tamanho dela (retrato não corta; foto pequena não estica) */
.capa-materia .figura .proporcao {
	aspect-ratio: auto;
	width: auto;
	max-height: 85vh;
	margin-inline: auto;
}

/* foto menor que o quadro: a figura fica do tamanho dela, e a legenda e o crédito começam com a foto */
.capa-materia .figura {
	display: table;
	margin-inline: auto;
}

.capa-materia figcaption {
	display: table-caption;
	caption-side: bottom;
}

/* ---------- Capa */

.capa {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(48px, 8vw, 88px);
	padding-top: clamp(20px, 2.6vw, 40px);
}

/* Fundo da capa: abaixo da cidade, o preto vira o piso de um saguão de Ocean Drive. Leques de latão
   desencontrados (body::before), lascas de terrazzo em duas grades de passos diferentes (main::before),
   um véu na cor do fundo que faz o piso entrar em degradê no pé da abertura (.capa::before, sem top nem
   bottom: fica na posição estática, o começo da .capa) e, depois do friso do rodapé, um sol de latão
   nascendo do chão. Tudo atrás do conteúdo, só CSS e SVG. */
body.home,
body.home .rodape {
	position: relative;
}

/* com o body posicionado, o que é absoluto dentro dele conta a margem que o WordPress põe no html para
   quem está logado (--topo): a barra do WordPress (absoluta até 600 px) e o "Pular" voltam ao lugar */
body.home .pular {
	top: calc(-80px - var(--topo));
}

body.home .pular:focus {
	top: 12px;
}

@media screen and (max-width: 600px) {
	body.home #wpadminbar {
		top: calc(-1 * var(--topo));
	}
}

/* sem top/bottom no véu: ele fica na posição estática (início da .capa); os outros cobrem o body */
body.home::before,
body.home main::before,
body.home .capa::before,
body.home .rodape::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

/* frisos de latão: leques desencontrados, como o piso dos hotéis de Miami Beach */
body.home::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='%23c07a10'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M0 100A100 100 0 0 1 200 100M8 100A92 92 0 0 1 192 100M44 100A56 56 0 0 1 156 100M114 95L187 72M112 91L145 67M109 88L154 26M105 86L117 47M100 85L100 8M95 86L83 47M91 88L46 26M88 91L55 67M86 95L13 72' fill='none' stroke='%23c07a10' stroke-width='1.4'/%3E%3Cpath d='M85 100a15 15 0 0 1 30 0z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f'/%3E%3Cuse href='%23f' x='-100' y='100'/%3E%3Cuse href='%23f' x='100' y='100'/%3E%3Cpath d='M100 127l6 8-6 8-6-8z'/%3E%3C/svg%3E") 50% 0 / 200px;
	opacity: var(--tz-leques);
}

/* lascas do terrazzo, por cima dos frisos; duas grades de passos diferentes, o olho não acha a repetição */
body.home main::before {
	z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='167' height='167'%3E%3Cpath fill='%23c27552' fill-opacity='0.36' d='M57 25l0 8-4-1zM47 91l-3 4-2-4zM88 25l7-1-2 6zM114 90l5 1 2 4-6 2-3-3zM144 121l-6 0 2-6zM122 99l0-7 3-1 1 6zM118 59l-3-3 2-4 4-2 1 5zM65 142l-1-3 5-2 1 4-2 1zM31 110l-4-2 5-3 1 3z'/%3E%3Cpath fill='%23f2ebdd' fill-opacity='0.45' d='M109 17l0-3 3 0 1 0-1 3zM90 151l0 3-2-2zM137 161l-2-3 2-1 1 0 1 3zM146 122l3 1-3 1zM59 39l0 2-2 1-1-1zM48 111l0 3 0 1-3-1 1-3zM8 145l0 2-2-1zM103 20l-1-2 3 0 2 3-3 2zM81 151l-1 1-2-1 1-2z'/%3E%3Cpath fill='%23ff4f8b' fill-opacity='0.6' d='M11 41l-1-2 1-2 2 3zM149 83l-2 2-2-1zM25 14l2 2-1 3-3-1 1-3zM99 85l2-3 2 2-1 2z'/%3E%3Cpath fill='%232ee6d0' fill-opacity='0.55' d='M150 137l1-3 1 2zM127 154l-3-1 0-4 5 1zM31 74l0-2 3 0-1 3zM53 153l0 2-2-1 1-2z'/%3E%3Cpath fill='%23f8a600' fill-opacity='0.6' d='M132 46l2 0 0 1-2 1-1-1zM20 139l-3 1-2-1 3-1zM34 151l-1-2 2-1 2 3zM35 77l4 3-5 1z'/%3E%3Cpath fill='%239b84f0' fill-opacity='0.6' d='M39 43l0-1 2 0 0 1zM135 139l1 0 2 2-4 2zM56 14l-1-3 2-1 1 3zM20 69l0-3 2 1z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113' height='113'%3E%3Cpath fill='%23c27552' fill-opacity='0.36' d='M48 62l2-4 4 2 1 3-4 6zM68 64l3-2 2 4-3 2-4-1zM95 57l-3 6-4-4-2-3 5 0zM59 19l2-2 5 0-2 4z'/%3E%3Cpath fill='%23f2ebdd' fill-opacity='0.45' d='M14 70l-2-2 3-1 1 3zM56 75l-1 1-1-2 2-1zM64 106l0-1 2 0 0 2zM38 14l-1 2-2-2 1-1z'/%3E%3Cpath fill='%23ff4f8b' fill-opacity='0.6' d='M39 32l-3-2 1-2 2 0zM57 35l-1-2 1-2 2-1 1 4z'/%3E%3Cpath fill='%232ee6d0' fill-opacity='0.55' d='M36 98l-2 1 1-3zM15 19l2 1 1 2-4 0z'/%3E%3Cpath fill='%23f8a600' fill-opacity='0.6' d='M8 71l-1-2 4-1 0 3zM99 40l-2 4-1-3z'/%3E%3Cpath fill='%239b84f0' fill-opacity='0.6' d='M66 68l-2 1 0-3zM90 17l0-3 3 2z'/%3E%3C/svg%3E") 41px 59px;
	opacity: var(--tz-lascas);
}

body.home .capa::before {
	z-index: -1;
	top: auto;
	bottom: auto;
	margin-top: -160px;
	height: 760px;
	background: linear-gradient(var(--fundo) 160px, transparent);
}

/* a soleira: depois do friso do rodapé, o campo de leques dá lugar a um sol de latão nascendo do chão */
body.home .rodape::before {
	background:
		radial-gradient(farthest-side at 50% 100%, transparent 35%, var(--fundo)),
		repeating-conic-gradient(from -90deg at 50% 100%, var(--tz-sol) 0 3deg, transparent 3deg 7.5deg),
		var(--fundo);
	mask-image: linear-gradient(transparent, #000 180px);
}

@media (max-width: 699px) {
	body.home::before {
		background-size: 136px;
	}

	body.home .capa::before {
		height: 520px;
	}
}

/* cada seção abre com os três frisos do déco */
.secao-cabeca {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 30px;
	padding-bottom: 22px;
	background: repeating-linear-gradient(to bottom, var(--sinal) 0 2px, transparent 2px 6px) top / 100% 14px no-repeat;
}

.secao-cabeca h2,
.apuramos h2 {
	font-size: clamp(2.5rem, 6vw, 5rem);
}

.materias {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.manchete {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.manchete-bloco {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 18px 24px;
	background:
		radial-gradient(circle, rgba(12, 10, 9, 0.09) 1px, transparent 1.6px) 0 0 / 6px 6px,
		var(--sinal);
	color: var(--sobre-sinal);
	border-radius: 4px 4px 4px 40px;
	--foco: var(--tinta);
}

.manchete h3 {
	font-size: clamp(3.25rem, 11vw, 6.25rem);
}

.manchete-bloco .linha-fina {
	max-width: 60ch;
}

.manchete h3 a {
	text-decoration: none;
}

.manchete h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.manchete:hover h3,
.manchete:focus-within h3 {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* rádio: fica sempre de noite, nas duas edições */
.radio {
	--foco: #f8a600;
	display: grid;
	gap: 28px;
	padding: clamp(24px, 5vw, 64px);
	background: var(--radio-fundo);
	color: var(--papel);
	border-radius: 40px 4px 4px 4px;
}

/* o rádio à noite: néon do horizonte, um clarão violeta e linhas de varredura de tela antiga */
:root {
	--radio-fundo:
		repeating-linear-gradient(0deg, rgba(242, 235, 221, 0.035) 0 1px, transparent 1px 4px),
		radial-gradient(ellipse 70% 60% at 85% 115%, rgba(255, 79, 139, 0.5), transparent 70%),
		radial-gradient(ellipse 55% 55% at 5% -15%, rgba(122, 75, 214, 0.55), transparent 70%),
		#15102a;
}

.radio-texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.radio h2 {
	font-size: clamp(2.75rem, 9vw, 4.5rem);
}

.radio .linha-fina {
	color: #d9d0c0;
	max-width: 34ch;
}

.no-ar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.luz {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--flamingo);
	box-shadow:
		0 0 6px var(--flamingo),
		0 0 14px var(--flamingo);
}

.breve-radio {
	padding: 10px 18px;
	border: 2px solid var(--sinal);
	border-radius: 9999px;
	color: var(--sinal);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dial {
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.regua {
	position: relative;
	height: 34px;
}

.regua::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 12px;
	height: 14px;
	background: repeating-linear-gradient(
		90deg,
		rgba(242, 235, 221, 0.5) 0,
		rgba(242, 235, 221, 0.5) 1px,
		transparent 1px,
		transparent 10px
	);
}

/* a agulha marca 1983, o ano de "Billie Jean" no topo da parada */
.agulha {
	position: absolute;
	left: 36.8%;
	top: 0;
	width: 3px;
	height: 34px;
	border-radius: 3px;
	background: var(--sinal);
	box-shadow:
		0 0 6px var(--sinal),
		0 0 14px rgba(248, 166, 0, 0.7);
}

.anos {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: #b5aa9a;
}

.par {
	display: grid;
	gap: clamp(48px, 8vw, 88px) 40px;
}

.apuramos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	align-self: start;
	padding: 24px 22px 26px;
	border: 2px solid var(--sinal-texto);
	border-radius: 40px 4px 4px 4px;
}

.apuramos p:not(.rotulo) {
	font-family: var(--f-texto);
	font-size: 1.125rem;
	line-height: 1.45;
}

.videos {
	display: grid;
	gap: 36px 48px;
}

.videos-rotulo,
.mosaico-rotulo {
	padding-bottom: 8px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--texto);
}

.entrevistas,
.ultimas {
	display: flex;
	flex-direction: column;
}

.entrevistas li,
.ultimas li {
	padding-block: 16px;
	border-bottom: 1px solid var(--linha);
}

.entrevistas li:first-child,
.ultimas li:first-child {
	padding-top: 8px;
}

.oficiais h3,
.serie :is(h2, h3) {
	font-size: 1.75rem;
	line-height: 1;
}

.cargo {
	font-size: 0.875rem;
	padding-block: 2px 6px;
}

.oficiais {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 8px;
}

.oficial {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	background: var(--painel);
	border-radius: var(--raio);
}

/* a "tela" do vídeo: a imagem da análise (ou o retângulo da noite) com o play por cima */
.oficial .oficial-tela {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(104px, 30%, 150px);
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	background: var(--radio-fundo);
	color: var(--sinal);
}

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

.oficial-tela svg {
	position: relative;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 6px 5px 6px 7px;
	border-radius: 50%;
	background: rgba(12, 10, 9, 0.75);
	fill: currentColor;
}

.serie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); /* 130: os cinco cabem numa linha no tablet */
	gap: 12px;
}

.serie li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

/* a imagem da crítica no topo do cartão do jogo */
.serie-imagem {
	margin-bottom: 6px;
}

.ano {
	font-family: var(--f-titulo);
	font-size: clamp(3.5rem, 12vw, 4.5rem);
	line-height: 0.9;
	color: var(--sinal-texto);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
	.radio {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}

	.videos {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

/* as 4 fichas da capa em 2×2 (em 3 colunas sobrava uma sozinha) */
@media (min-width: 700px) {
	.par .fichas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* tela larga: o detector com as fichas em duas colunas ao lado do "Como apuramos" */
@media (min-width: 1280px) {
	.par {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	}
}

/* ---------- Navegação do cabeçalho (no celular, o mapa do site faz esse papel) */

.cabecalho-nav {
	display: none;
}

@media (min-width: 768px) {
	.cabecalho-nav {
		display: block;
		margin-left: auto;
		margin-right: clamp(8px, 1.5vw, 24px);
	}

	.cabecalho-nav ul {
		display: flex;
		gap: clamp(14px, 1.6vw, 30px);
	}

	.cabecalho-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		border-bottom: 2px solid transparent;
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-decoration: none;
	}

	.cabecalho-nav a:hover,
	.cabecalho-nav a[aria-current='page'] {
		border-bottom-color: var(--sinal);
		color: var(--sinal-texto);
	}
}

/* ---------- Cartões de matéria e o mosaico da capa */

/* a cor de cada gênero: na capa tipográfica dos cartões sem imagem e no pontinho dos filtros */
.genero-reportagem { --cor-genero: #f8a600; }
.genero-analise { --cor-genero: #c9b8ff; }
.genero-critica { --cor-genero: #ff4f8b; }
.genero-entrevista { --cor-genero: #2ee6d0; }
.genero-opiniao { --cor-genero: #f2ebdd; }
.genero-checagem { --cor-genero: #8fe3a8; }
.genero-dados { --cor-genero: #ff8a5c; }
.genero-nenhum { --cor-genero: #b5aa9a; }

.cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}

.cartao-imagem {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--raio-p);
	background: var(--painel);
}

.cartao-imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--curva);
}

.cartao:hover .cartao-imagem img {
	transform: scale(1.04);
}

:root[data-movimento='reduzido'] .cartao-imagem img {
	transition: none;
	transform: none;
}

/* moldura de painel, como nas capas dos jogos da série: borda de tinta e, por dentro, um filete claro
   (de noite a borda some no fundo e fica o filete; de dia aparece o painel inteiro). No mouse, o filete
   vira âmbar. Fica por dentro da imagem: não mexe no tamanho do cartão. */
.cartao-imagem::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 4px var(--tinta), inset 0 0 0 7px var(--papel);
	pointer-events: none;
	transition: box-shadow 0.2s ease-in-out;
}

.cartao.compacto .cartao-imagem::after {
	box-shadow: inset 0 0 0 3px var(--tinta), inset 0 0 0 5px var(--papel);
}

.cartao:hover .cartao-imagem::after {
	box-shadow: inset 0 0 0 4px var(--tinta), inset 0 0 0 7px var(--sinal);
}

.cartao.compacto:hover .cartao-imagem::after {
	box-shadow: inset 0 0 0 3px var(--tinta), inset 0 0 0 5px var(--sinal);
}

/* a foto da manchete é um <img> solto (não tem ::after): borda de tinta e filete por dentro */
.manchete .figura img {
	border: 4px solid var(--tinta);
	outline: 3px solid var(--papel);
	outline-offset: -7px;
	transition: outline-color 0.2s ease-in-out;
}

.manchete:hover .figura img {
	outline-color: var(--sinal);
}

/* sem imagem de destaque: a capa é o nome do gênero, grande, na cor dele, com meio-tom */
.cartao-tipografico {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 10px 14px;
	background:
		radial-gradient(circle, rgba(12, 10, 9, 0.13) 1px, transparent 1.6px) 0 0 / 7px 7px,
		var(--cor-genero);
	color: rgba(12, 10, 9, 0.85);
	font-family: var(--f-titulo);
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	line-height: 0.85;
	text-transform: uppercase;
}

.cartao-texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.cartao-titulo {
	font-size: clamp(1.75rem, 2.2vw, 2.25rem);
	line-height: 1;
}

.cartao-titulo a {
	text-decoration: none;
}

.cartao-titulo a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.cartao:hover .cartao-titulo,
.cartao:focus-within .cartao-titulo {
	color: var(--sinal-texto);
}

.cartao .assinatura {
	color: var(--texto-2);
}

.cartao.grande .cartao-titulo {
	font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.cartao.compacto {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.cartao.compacto .cartao-imagem {
	flex: 0 0 clamp(84px, 26%, 120px);
	aspect-ratio: 1;
}

.cartao.compacto .cartao-tipografico {
	padding: 6px 8px;
	font-size: 1.375rem;
}

.cartao.compacto .cartao-titulo {
	font-size: clamp(1.375rem, 1.7vw, 1.75rem);
}

.mosaico {
	display: grid;
	gap: 36px;
}

.mosaico-lateral {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mosaico-base {
	display: grid;
	gap: 36px 28px;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (min-width: 1000px) {
	.mosaico {
		grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
		gap: 40px clamp(28px, 3vw, 48px);
		align-items: start;
	}

	.mosaico-base {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-top: 30px;
		background: repeating-linear-gradient(to bottom, var(--sinal) 0 2px, transparent 2px 6px) top / 100% 14px no-repeat;
	}
}

/* tela larga: as "Últimas" se espalham na altura da manchete, sem buraco embaixo */
@media (min-width: 1280px) {
	.mosaico-lateral {
		align-self: stretch;
	}

	.ultimas {
		flex: 1;
	}

	.ultimas li {
		display: flex;
		flex: 1;
		align-items: center;
	}
}

/* tablet: as "Últimas" em 2 colunas e a fileira de 3 cartões inteira (antes ficava 2+1) */
@media (min-width: 700px) and (max-width: 999px) {
	.mosaico-base {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ultimas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}

	.ultimas li:nth-child(2) {
		padding-top: 8px;
	}
}

.assinatura .data {
	white-space: nowrap;
}

/* manchete sem imagem: a capa tipográfica dos cartões, maior */
.manchete-tipografica {
	aspect-ratio: 16 / 9;
}

.manchete-tipografica .cartao-tipografico {
	padding: 16px 22px;
	font-size: clamp(4rem, 10vw, 9rem);
}

/* capa tipográfica clara (Opinião) não some no fundo do dia */
:root[data-edicao='dia'] .genero-opiniao .cartao-imagem {
	box-shadow: inset 0 0 0 1.5px var(--linha-forte);
}

.ver-tudo {
	align-self: flex-start;
}

.ver-tudo::after {
	content: ' →';
	white-space: pre;
}

.secao-cabeca h2 a {
	text-decoration: none;
}

.secao-cabeca h2 a:hover {
	color: var(--sinal-texto);
}

/* atalhos por gênero, na capa e na página Matérias */
.generos ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.generos a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--linha-forte);
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.generos a::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cor-genero, var(--texto));
	box-shadow: 0 0 0 1px var(--linha-forte);
}

.generos a span {
	font-variant-numeric: tabular-nums;
	color: var(--texto-2);
}

.generos a:hover,
.generos a[aria-current='page'] {
	border-color: var(--texto);
	background: var(--texto);
	color: var(--fundo);
}

.generos a:hover span,
.generos a[aria-current='page'] span {
	color: inherit;
}

/* listas de cartões: página Matérias e listas por gênero */
.grade-cartoes {
	display: grid;
	gap: 40px 28px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - 3 * 28px) / 4))), 1fr));
}

/* o cartão grande ocupa duas colunas e duas linhas; os seguintes preenchem o lado dele */
@media (min-width: 1100px) {
	.grade-cartoes {
		grid-auto-flow: dense;
	}

	.grade-cartoes > li:has(.cartao.grande) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* ---------- Detector de boatos: fichas, placar e filtros */

.fichas {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - 3 * 16px) / 4))), 1fr));
}

.ficha {
	--cor: var(--linha-forte);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px 14px;
	border: 2px solid var(--cor);
	border-radius: var(--raio);
	background: var(--painel);
}

.ficha.confirmado {
	--cor: var(--agua);
}

.ficha.falso {
	--cor: var(--flamingo);
}

.ficha.vazamento {
	--cor: var(--vazamento);
	border-style: dashed;
}

.ficha.boato {
	border-style: dotted;
}

.ficha[hidden],
.detector .vazio[hidden] {
	display: none;
}

.ficha-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
}

.ficha-data {
	flex-basis: 100%;
	font-size: 0.75rem;
	color: var(--texto-2);
}

.ficha-afirmacao {
	font-family: var(--f-texto);
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.3;
}

.ficha-afirmacao::before {
	content: '“';
}

.ficha-afirmacao::after {
	content: '”';
}

.ficha-checagem {
	margin-top: auto;
	border-top: 1px solid var(--linha);
}

.ficha-checagem summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--sinal-texto);
	list-style: none;
	cursor: pointer;
}

.ficha-checagem summary::-webkit-details-marker {
	display: none;
}

.ficha-checagem summary::after {
	content: '+';
	content: '+' / '';
	font-size: 1.25rem;
	line-height: 1;
}

.ficha-checagem[open] summary::after {
	content: '−';
	content: '−' / '';
}

.ficha-obs {
	font-family: var(--f-texto);
	font-size: 1rem;
	line-height: 1.45;
}

.ficha-fonte {
	padding-block: 10px 6px;
	font-size: 0.8125rem;
	color: var(--texto-2);
}

.ficha-fonte a {
	color: var(--sinal-texto);
	overflow-wrap: anywhere;
	text-underline-offset: 3px;
}

/* o placar: a proporção de cada carimbo */
.placar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(720px, 100%);
}

.placar-total strong {
	margin-right: 6px;
	font-family: var(--f-titulo);
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 1;
}

.placar-barra {
	display: flex;
	gap: 3px;
	height: 14px;
}

.placar-barra span {
	border-radius: 3px;
	background: var(--cor);
}

.placar .confirmado {
	--cor: var(--agua);
}

.placar .falso {
	--cor: var(--flamingo);
}

.placar .vazamento {
	--cor: var(--vazamento);
}

.placar .boato {
	--cor: var(--texto-2);
}

.placar-barra .boato {
	background: repeating-linear-gradient(90deg, var(--cor) 0 4px, transparent 4px 7px);
	box-shadow: inset 0 0 0 1px var(--cor);
}

.placar-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 0.8125rem;
}

.placar-legenda li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.placar-cor {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cor);
}

.detector {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.detector-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.detector-filtros[hidden] {
	display: none;
}

.detector-tipos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filtro {
	--cor: var(--texto);
	--sobre: var(--fundo);
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--cor);
	border-radius: 9999px;
	background: none;
	color: var(--texto);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.filtro.confirmado {
	--cor: var(--agua);
	--sobre: var(--tinta);
}

.filtro.falso {
	--cor: var(--flamingo);
	--sobre: var(--tinta);
}

.filtro.vazamento {
	--cor: var(--vazamento);
}

.filtro.boato {
	border-style: dotted;
}

.filtro[aria-pressed='true'] {
	background: var(--cor);
	color: var(--sobre);
}

:root[data-edicao='dia'] .filtro[aria-pressed='true'] {
	border-color: var(--texto);
}

.detector-busca {
	width: min(320px, 100%);
}

.detector-busca input {
	width: 100%;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--texto-2);
	border-radius: 9999px;
	background: var(--fundo);
	color: var(--texto);
	font: inherit;
	font-size: 0.875rem;
}

.detector-status {
	font-size: 0.8125rem;
	color: var(--texto-2);
}

.detector-busca input::placeholder {
	color: var(--texto-2);
	opacity: 1;
}

/* vazio, o status sai do fluxo mas continua na árvore de acessibilidade (o anúncio do filtro chega) */
.detector-status:empty {
	position: absolute;
}

/* ---------- Cabeçalho das páginas de seção */

.pagina-cabeca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: clamp(24px, 4vw, 44px);
}

.pagina .pagina-cabeca h1 {
	font-size: clamp(3rem, 9vw, 6.5rem);
}

.pagina-cabeca .linha-fina {
	max-width: 46ch;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	color: var(--texto-2);
}

.serie.completa {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.serie-linha-fina {
	font-family: var(--f-texto);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* ---------- Matéria */

.materia {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* a abertura numa faixa de céu; a imagem de destaque entra por cima da borda de baixo */
.materia-topo {
	--sob: clamp(64px, 16vw, 300px); /* quanto da imagem fica abaixo da faixa */
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: clamp(28px, 5vw, 72px);
}

.materia-topo::before,
.materia-topo::after {
	content: '';
	position: absolute;
	inset: 0 0 var(--sob) 0;
	z-index: -1;
}

.materia-topo::before {
	background:
		radial-gradient(ellipse 60% 70% at 85% 100%, var(--brilho), transparent 70%),
		var(--ceu);
	mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
}

/* o meio-tom sobe do pé da faixa e some antes do título */
.materia-topo::after {
	background: var(--meiotom);
	mask-image: linear-gradient(0deg, transparent 0, #000 48px, transparent 55%);
}

/* sem imagem de destaque, a faixa vai até o fim da abertura */
.materia-topo:not(:has(.capa-materia)) {
	padding-bottom: clamp(36px, 5vw, 64px);
}

.materia-topo:not(:has(.capa-materia))::before {
	bottom: 0;
}

.materia-topo:not(:has(.capa-materia))::after {
	display: none;
}

.materia-topo:not(:has(.capa-materia)) .credenciais .quando {
	color: var(--texto);
}

.materia-texto {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.faixa {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 14px;
	background: var(--texto);
	color: var(--fundo);
	font-size: 0.875rem;
}

.faixa span {
	font-family: var(--f-texto);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1;
}

.abertura {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.abertura h1 {
	font-size: clamp(3.5rem, 8vw, 7.5rem);
}

.abertura .linha-fina {
	max-width: 46ch;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	color: var(--texto-2);
}

.credenciais {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.credenciais .assinatura {
	font-size: 0.8125rem;
}

.credenciais .quando {
	font-size: 0.75rem;
	color: var(--texto-2);
}

.capa-materia {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

.capa-materia figcaption {
	padding-inline: clamp(16px, 4vw, 40px);
}

/* o texto da matéria, como sai do editor de blocos */
.corpo {
	display: flex;
	flex-direction: column;
	gap: 22px;
	overflow-wrap: break-word; /* endereço colado por extenso não empurra a página para o lado no celular */
}

.corpo > p,
.corpo > ul,
.corpo > ol {
	margin: 0;
	font-family: var(--f-texto);
	font-size: 1.1875rem;
	line-height: 1.6;
}

@media (min-width: 1200px) {
	.corpo > p,
	.corpo > ul,
	.corpo > ol {
		font-size: 1.3125rem;
	}
}

@media (min-width: 1600px) {
	.corpo > p,
	.corpo > ul,
	.corpo > ol {
		font-size: 1.4375rem;
	}
}

@media (min-width: 1900px) {
	.corpo > p,
	.corpo > ul,
	.corpo > ol {
		font-size: 1.5rem;
	}
}

.corpo li + li {
	margin-top: 6px;
}

.corpo h2,
.corpo h3 {
	padding-top: 10px;
	line-height: 1;
}

.corpo h2 {
	font-size: clamp(2rem, 7vw, 2.5rem);
}

@media (min-width: 1600px) {
	.corpo h2 {
		font-size: 3rem;
	}
}

.corpo h3 {
	font-size: clamp(1.625rem, 5vw, 2rem);
}

/* H4 a H6 só entram por colagem de blocos de outra matéria: saem como H3 */
.corpo h4,
.corpo h5,
.corpo h6 {
	margin: 0;
	padding-top: 10px;
	font-family: var(--f-titulo);
	font-weight: 400;
	line-height: 1;
	text-wrap: balance;
	font-size: clamp(1.625rem, 5vw, 2rem);
}

.corpo a {
	color: var(--sinal-texto);
	text-underline-offset: 3px;
}

.corpo figure {
	margin: 0;
}

.corpo blockquote {
	margin: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--sinal);
	font-family: var(--f-texto);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.4;
}

.corpo blockquote p {
	margin: 0;
}

.corpo blockquote p + p {
	margin-top: 1em;
}

.corpo blockquote cite {
	display: block;
	padding-top: 8px;
	font-family: var(--f-ui);
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--texto-2);
}

.corpo .wp-block-pullquote {
	margin: 0;
	padding: 20px 0;
	border-block: 2px solid var(--sinal-texto);
	text-align: left;
}

.corpo .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
	font-family: var(--f-titulo);
	font-style: normal;
	font-size: clamp(2rem, 7vw, 2.75rem);
	line-height: 1;
}

.corpo hr {
	width: 100%;
	height: 14px;
	margin: 8px 0;
	border: 0;
	background: repeating-linear-gradient(to bottom, var(--sinal) 0, var(--sinal) 2px, transparent 2px, transparent 6px);
}

.corpo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.corpo th,
.corpo td {
	padding: 8px 10px;
	border: 0; /* tira a grade do WordPress: só fios horizontais */
	border-bottom: 1px solid var(--linha);
	text-align: left;
}

.corpo thead {
	border-bottom: 2px solid var(--linha-forte);
}

.corpo .wp-block-table {
	overflow-x: auto;
}

.corpo .wp-block-embed {
	margin: 0;
}

/* boato no meio do texto: estilo "Boato" do bloco Citação */
.corpo .wp-block-quote.is-style-boato {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px 20px 20px;
	border: 2px dotted var(--linha-forte);
	border-radius: var(--raio);
	font-style: normal;
	font-size: 1.1875rem;
}

/* o carimbo "Boato" vem no HTML (inc/redacao.php), com o estilo dos carimbos do detector */
.corpo .wp-block-quote.is-style-boato cite {
	padding-top: 0;
	font-size: 0.75rem;
}

/* correção: estilo "Correção" do bloco Parágrafo; o rótulo vem no HTML (inc/redacao.php) */
.corpo p.is-style-correcao {
	--foco: var(--fundo);
	padding: 14px 16px;
	background: var(--texto);
	color: var(--fundo);
	border-radius: 3px;
	font-size: 1rem;
	line-height: 1.5;
}

.corpo p.is-style-correcao a {
	color: inherit;
}

.correcao-rotulo {
	display: block;
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.caixa-fontes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 20px 10px;
}

.caixa-fontes h2 {
	font-size: 1.875rem;
	line-height: 1;
}

.caixa-fontes ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-left: 1.2em;
	font-family: var(--f-texto);
	font-size: 1rem;
	line-height: 1.4;
}

.caixa-fontes ol a {
	color: var(--sinal-texto);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.caixa-fontes .sem {
	font-family: var(--f-texto);
	color: var(--texto-2);
}

/* no computador, citação, boato, correção e fontes crescem junto com o texto (.corpo > p) */
@media (min-width: 1200px) {
	.corpo blockquote {
		font-size: 1.5rem;
	}

	.corpo .wp-block-quote.is-style-boato {
		font-size: 1.3125rem;
	}

	.corpo p.is-style-correcao,
	.caixa-fontes ol {
		font-size: 1.0625rem;
	}

	.caixa-fontes ol {
		max-width: 70ch;
	}
}

@media (min-width: 1600px) {
	.corpo blockquote {
		font-size: 1.625rem;
	}

	.corpo .wp-block-quote.is-style-boato {
		font-size: 1.4375rem;
	}

	.corpo p.is-style-correcao,
	.caixa-fontes ol {
		font-size: 1.125rem;
	}
}

@media (min-width: 1900px) {
	.corpo blockquote {
		font-size: 1.75rem;
	}

	.corpo .wp-block-quote.is-style-boato {
		font-size: 1.5rem;
	}

	.corpo p.is-style-correcao,
	.caixa-fontes ol {
		font-size: 1.1875rem;
	}
}

/* "Pauta cumprida": o fim da leitura */
.cumprida {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 22px 26px;
	background:
		radial-gradient(circle, rgba(12, 10, 9, 0.09) 1px, transparent 1.6px) 0 0 / 6px 6px,
		var(--sinal);
	color: var(--sobre-sinal);
	border-radius: 40px 4px 4px 4px;
	--foco: var(--tinta);
}

.cumprida-titulo {
	font-family: var(--f-titulo);
	font-size: clamp(3rem, 12vw, 4.25rem);
	line-height: 0.9;
	text-transform: uppercase;
}

.cumprida-resumo {
	font-size: 0.9375rem;
}

.cumprida-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 4px;
}

/* ---------- Listas, páginas e erro */

.lista-pagina,
.pagina,
.erro {
	padding-top: clamp(32px, 6vw, 64px);
}

.lista-pagina h1,
.pagina h1,
.erro h1 {
	font-size: clamp(3rem, 12vw, 5rem);
}

.lista-pagina h1 {
	padding-bottom: 12px;
}

.lista-pagina .vazio {
	margin-top: 24px;
	min-height: 160px;
}

.paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding-top: 24px;
	font-weight: 600;
}

.paginacao a,
.paginacao span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.paginacao .current {
	color: var(--sinal-texto);
}

.pagina {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.erro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: clamp(48px, 10vw, 96px);
}