/* ==========================================================================
   Érnica — Papel
   O site é um programa de teatro impresso, não um blog: fundo branco,
   réguas fazendo a estrutura, cantos vivos, uma única cor de acento.
   Nada de cartão arredondado, nada de sombra — o que separa as coisas
   é a linha e o espaço, como na página impressa.
   ========================================================================== */

:root {
	/* === Paleta — tinta sobre papel, um acento === */
	--ec-papel: #ffffff;          /* fundo */
	--ec-papel-quente: #f4f1ec;   /* papel de miolo: ficha técnica e rodapé */
	--ec-tinta: #16130f;          /* texto e réguas grossas */
	--ec-tinta-media: #5c564e;    /* texto de apoio (7,2:1 no branco) */
	--ec-refletor: #e9633a;       /* acento: preenchimentos e réguas */
	--ec-refletor-tinta: #b84a26; /* o mesmo acento quando vira texto (5,2:1) */
	--ec-osso: #f7f3ea;           /* texto sobre foto escura */
	--ec-linha: #dcd6cc;          /* régua fina */

	/* === Tipografia === */
	--ec-font-display: "Montserrat", "Arial Black", system-ui, sans-serif;
	--ec-font-body: "Work Sans", system-ui, -apple-system, sans-serif;

	/* === Espaçamento === */
	--ec-space-1: 8px;
	--ec-space-2: 16px;
	--ec-space-3: 24px;
	--ec-space-4: 40px;
	--ec-space-5: 64px;
	--ec-space-6: 96px;

	/* === Layout === */
	--ec-shell-max: 1200px;
	--ec-shell-side: 22px;
}

/* ==========================================================================
   Travessia entre páginas
   Clicar numa obra não recarrega a página na cara do visitante: a foto da
   faixa vira a capa do espetáculo. Quem não tem suporte (Firefox, hoje)
   navega do jeito de sempre — nada quebra, só não anima.
   ========================================================================== */

@view-transition {
	navigation: auto;
}

/* Topo e rodapé são os mesmos nas duas páginas. Sem nome próprio eles
   entrariam no esmaecimento geral e piscariam a cada navegação; com nome,
   o navegador os reconhece e eles ficam parados. */
.ec-topo {
	view-transition-name: ec-topo;
}

.ec-rodape {
	view-transition-name: ec-rodape;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ==========================================================================
   Fundação
   ========================================================================== */

body {
	background-color: var(--ec-papel);
	color: var(--ec-tinta);
	font-family: var(--ec-font-body);
	-webkit-font-smoothing: antialiased;
}

.ec-shell {
	max-width: var(--ec-shell-max);
	margin-inline: auto;
	padding-inline: var(--ec-shell-side);
}

/* Canto vivo em tudo. Arredondamento é a assinatura visual do tema pronto —
   aqui a página é impressa, e papel não tem canto redondo. */
:where(
	.wp-block-image img,
	.wp-block-post-featured-image img,
	.wp-block-cover,
	.wp-block-button__link,
	.wp-block-search__input,
	.wp-block-search__button
) {
	border-radius: 0;
}

/* O acento do título: o <em> deixa de ser itálico e vira a palavra
   destacada em laranja. Vale para qualquer título do site. */
/* O <em> dentro de um título vira a palavra destacada em laranja — mas
   só quando é PARTE do título. Conteúdo antigo escreve o título inteiro
   em itálico, e aí o acento pintaria tudo: oito títulos laranja seguidos
   e o acento deixa de acentuar. `:not(:only-child)` separa os dois casos. */
:where(h1, h2, h3, .wp-block-post-title, .wp-block-heading, .ec-masthead-nome) em:not(:only-child) {
	font-style: normal;
	color: var(--ec-refletor);
}

/* Título inteiro em itálico: perde o itálico, mantém a tinta. */
:where(h1, h2, h3, .wp-block-post-title, .wp-block-heading) em:only-child {
	font-style: normal;
}

/* Título que é link herda a cor do próprio título; o laranja fica para o
   estado de foco e passagem do mouse. */
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	color: var(--ec-refletor-tinta);
}

/* Foco visível em tudo que recebe teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--ec-tinta);
	outline-offset: 3px;
}

/* ==========================================================================
   Rótulo de seção — régua de acento e versalete
   Era uma pílula com contorno; pílula é vocabulário de aplicativo.
   Na página impressa o rótulo mora embaixo de uma régua.
   ========================================================================== */

.ec-label {
	display: block;
	margin: 0 0 var(--ec-space-2);
	padding-top: 10px;
	border-top: 2px solid var(--ec-refletor);
	font-family: var(--ec-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ec-tinta);
}

.ec-label a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Masthead — a folha de rosto
   O nome ocupa a largura da página, quebrado em duas linhas, e a linha de
   funções se distribui embaixo como crédito de cartaz.
   ========================================================================== */

/* O nome vive sobre a fotografia, num bloco Capa. O posicionamento da
   imagem e do véu é do próprio bloco — não mexer no `display` dele, que
   já foi a causa de a foto parar de preencher a largura uma vez. */
.ec-masthead {
	margin-block: 0 var(--ec-space-5);
}

/* O véu é um degradê declarado no próprio bloco Capa (Sobreposição →
   Gradiente), não um pseudo-elemento meu: escurece só a faixa de baixo,
   onde o texto cai, deixando o rosto limpo em cima — e o nome continua
   legível **mesmo que a foto seja trocada** pelo editor.
   Tentei antes com `::after` e o degradê caiu por cima do texto: o
   z-index do bloco vence o meu. Deixar o bloco fazer o que ele já sabe. */

/* Texto encostado embaixo: o rosto está na metade de cima da foto e
   precisa continuar à vista. */
.ec-masthead .wp-block-cover__inner-container {
	align-self: end;
	margin-block-start: auto;
	margin-block-end: 0;
}

/* O corpo é calibrado para "RAFAEL" / "ÉRNICA" — seis letras por linha.
   Em Montserrat 900 com este entreletras a linha mede cerca de 4,1x o
   corpo; o teto de 190px deixa o nome largo sem cobrir o rosto. */
.ec-masthead-nome {
	margin: 0;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: clamp(44px, 13vw, 190px);
	line-height: 0.82;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	color: var(--ec-osso);
}

/* A distribuição em linha é do bloco Grupo, no modo flex — aqui só entra
   o que é de tipografia e régua. */
.ec-creditos {
	margin: clamp(18px, 2.5vw, 30px) 0 0;
	padding-top: 11px;
	border-top: 2px solid rgba(247, 243, 234, 0.55);
	font-size: clamp(11px, 1.15vw, 14px);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ec-osso);
}

.ec-creditos p {
	margin: 0;
}

/* O crédito da fotógrafa fica do outro lado da mesma régua das funções:
   é informação da foto, não uma terceira função. Um grau abaixo em peso
   e em opacidade, para creditar sem competir com o nome. */
.ec-credito-foto {
	font-weight: 600;
	letter-spacing: 0.12em;
	color: rgba(247, 243, 234, 0.75);
}

/* Abertura em díptico, sangrando de ponta a ponta da janela: duas montagens
   no mesmo quadro. As larguras são desiguais (1,15 / 0,85) para ecoar as
   faixas do repertório — meio a meio ficaria simétrico demais.
   A altura vem do contêiner, não de cada foto: com `aspect-ratio` em cada
   imagem os dois lados sairiam com alturas diferentes e o pé desalinharia. */
.ec-hero-diptico {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2px;
	aspect-ratio: 16 / 6.5;
	margin-block: 0 var(--ec-space-5);
	background: var(--ec-papel-quente);
}

/* As fotos são blocos Imagem, e o bloco traz margem própria e
   `height:auto` — os dois precisam ser desfeitos aqui, com seletor de
   peso suficiente para vencer o estilo do bloco. */
.ec-hero-diptico .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.ec-hero-diptico > * + * {
	margin-block-start: 0;
}

.ec-hero-diptico .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Abertura — parágrafo deslocado e as três conquistas
   Assimetria de propósito: o texto começa depois do meio da página, como
   numa folha de rosto, em vez de centralizado como em todo tema pronto.
   ========================================================================== */

.ec-abertura {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ec-space-3) var(--ec-space-4);
	margin-bottom: var(--ec-space-5);
}

.ec-abertura-texto {
	grid-column: 4 / 11;
	margin: 0;
	font-size: clamp(20px, 2.3vw, 30px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	color: var(--ec-tinta);
}

.ec-meta {
	grid-column: 4 / 13;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* Os itens são parágrafos dentro de um bloco Grupo. O fluxo do bloco
   empilharia margem entre eles, o que numa grade vira buraco. */
.ec-abertura > * + *,
.ec-meta > * + * {
	margin-block-start: 0;
}

.ec-meta > * {
	margin: 0;
	border-top: 1px solid var(--ec-linha);
	padding-top: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ec-tinta-media);
}

.ec-meta strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--ec-font-display);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--ec-tinta);
}

/* ==========================================================================
   Botões — retângulo, não pílula
   ========================================================================== */

.ec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 2px solid transparent;
	font-family: var(--ec-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ec-btn-primario {
	background: var(--ec-tinta);
	color: var(--ec-osso);
}

.ec-btn-primario:hover,
.ec-btn-primario:focus-visible {
	background: var(--ec-refletor);
	color: var(--ec-tinta);
	text-decoration: none;
}

/* O botão de contorno do WordPress também perde o arredondamento. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2px;
	border-color: var(--ec-tinta);
	color: var(--ec-tinta);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ec-tinta);
	color: var(--ec-osso);
}

/* ==========================================================================
   Cabeçalho — assinatura e índice, separados por régua grossa
   ========================================================================== */

.ec-topo {
	border-bottom: 2px solid var(--ec-tinta);
	background: var(--ec-papel);
}

.ec-topo .wp-block-site-title a {
	color: var(--ec-tinta);
	text-decoration: none;
}

.ec-topo .wp-block-site-title a:hover {
	color: var(--ec-refletor-tinta);
}

.ec-topo .wp-block-navigation {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ec-topo .wp-block-navigation a {
	color: var(--ec-tinta);
	text-decoration: none;
}

.ec-topo .wp-block-navigation a:hover,
.ec-topo .wp-block-navigation a:focus-visible {
	color: var(--ec-refletor-tinta);
	text-decoration: none;
}

/* O item da loja é o único do menu que muda de domínio. O laranja
   escuro (5,2:1 no branco) avisa que ali se sai do site, sem precisar
   de ícone nem de abrir aba nova. */
.ec-topo .wp-block-navigation .ec-nav-oficina a {
	color: var(--ec-refletor-tinta);
}

.ec-topo .wp-block-navigation .ec-nav-oficina a:hover,
.ec-topo .wp-block-navigation .ec-nav-oficina a:focus-visible {
	color: var(--ec-tinta);
}

/* Na home o nome já está escrito em corpo 280 logo abaixo: repetir a
   assinatura no topo seria dizer duas vezes a mesma coisa em 100px de
   distância. Sai a assinatura, o índice encosta à direita. */
.ernica-home .ec-topo .wp-block-site-title {
	display: none;
}

.ernica-home .ec-topo > .wp-block-group {
	justify-content: flex-end;
}

/* ==========================================================================
   Rodapé — colofão
   ========================================================================== */

.ec-rodape {
	background: var(--ec-papel-quente);
	border-top: 3px solid var(--ec-tinta);
	color: var(--ec-tinta-media);
	font-size: 13px;
}

/* Sublinhado, e não só a mudança de cor: entre a tinta do link e a tinta
   média do texto ao redor há 2,55:1, abaixo do mínimo de 3:1 exigido
   quando a cor é o único sinal de que aquilo é um link. */
.ec-rodape a {
	color: var(--ec-tinta);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.ec-rodape .wp-block-social-link {
	background: transparent;
}

/* ==========================================================================
   Conteúdo corrente
   ========================================================================== */

/* Medida de leitura confortável — mas alinhada à esquerda. O layout
   restrito do WordPress põe `margin-inline: auto` em todo filho, então
   limitar a largura sem zerar a margem esquerda CENTRALIZA o parágrafo
   e o texto descola da margem dos títulos. */
.ec-conteudo :where(p, ul, ol) {
	max-width: 68ch;
	/* O WordPress escreve `margin-left: auto !important` nos filhos do
	   layout restrito, então só um !important desfaz a centralização.
	   Sem isto o parágrafo estreito flutua no meio e descola da margem
	   dos títulos. */
	margin-inline-start: 0 !important;
}

.ec-conteudo figcaption {
	font-size: 13px;
	color: var(--ec-tinta-media);
}

/* ==========================================================================
   Em cartaz — o que está acontecendo agora
   Site de ator costuma ser só arquivo. Esta faixa responde o que ninguém
   responde: o que dá para assistir esta semana.
   ========================================================================== */

.ec-cartaz {
	background: var(--ec-refletor);
	color: var(--ec-tinta);
}

.ec-cartaz-dentro {
	max-width: var(--ec-shell-max);
	margin-inline: auto;
	padding: 12px var(--ec-shell-side);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
}

.ec-cartaz-selo {
	margin: 0;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ec-cartaz-nome {
	margin: 0;
	font-family: var(--ec-font-display);
	font-weight: 800;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.ec-cartaz-nome a {
	color: inherit;
	text-decoration: none;
}

.ec-cartaz-nome a:hover,
.ec-cartaz-nome a:focus-visible {
	text-decoration: underline;
}

.ec-cartaz-quando {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.ec-cartaz-btn {
	margin-inline-start: auto;
	padding: 7px 16px;
}

/* ==========================================================================
   Ficha técnica — a tipografia do programa de teatro
   Pares de termo e definição, alinhados numa coluna estreita de rótulos.
   ========================================================================== */

.ec-ficha {
	margin: 0;
	display: grid;
	gap: 0;
}

.ec-ficha-linha {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 4px 14px;
	padding-block: 7px;
	border-top: 1px solid var(--ec-linha);
}

.ec-ficha-linha dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-tinta-media);
	padding-top: 3px;
}

.ec-ficha-linha dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ec-tinta);
}

/* A linha de dados, logo abaixo do título do espetáculo.
   Duas camadas, como num programa impresso: aqui em cima o que identifica a
   montagem — papel, ano, realização, onde esteve, prêmio — e no fim da página
   a "Ficha técnica" escrita à mão, com elenco e equipe inteiros. Por isso este
   bloco é régua e tipo miúdo, e não um cartão: ele é legenda do título, não
   uma seção à parte. */
.ec-dados {
	margin-block: var(--ec-space-3) 0;
	border-block: 2px solid var(--ec-tinta);
}

/* A régua de cima é do bloco; a da primeira linha sobraria em cima dela. */
.ec-dados .ec-ficha-linha:first-child {
	border-top: 0;
}

.ec-dados .ec-ficha-linha dd {
	font-size: 14px;
}

.ec-ficha-nota {
	margin: var(--ec-space-2) 0 0;
	font-size: 13px;
	color: var(--ec-tinta-media);
}

/* ==========================================================================
   Repertório — o índice do programa
   Régua grossa em cima, uma linha fina entre as obras, a numeração correndo
   pela margem. É índice de programa, não lista de posts.
   ========================================================================== */

.ec-obras-faixas {
	display: grid;
}

.ec-obra {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--ec-space-3) var(--ec-space-4);
	align-items: center;
	padding-block: clamp(28px, 3.5vw, 48px);
	border-bottom: 1px solid var(--ec-linha);
}

/* Na faixa espelhada a foto vai para a direita — e a largura das colunas
   inverte junto, senão a foto cairia na coluna estreita. */
.ec-obra--espelhada {
	grid-template-columns: 0.85fr 1.15fr;
}

.ec-obra--espelhada .ec-obra-foto {
	order: 2;
}

.ec-obra-foto {
	display: block;
	overflow: hidden;
	background: var(--ec-papel-quente);
}

.ec-obra-foto img {
	display: block;
	width: 100%;
	/* Sem height:auto o atributo height do <img> vence e o aspect-ratio
	   é ignorado — a foto sai na altura original. */
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ec-obra:hover .ec-obra-foto img,
.ec-obra:focus-within .ec-obra-foto img {
	transform: scale(1.035);
}

.ec-obra-num {
	margin: 0 0 var(--ec-space-2);
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	color: var(--ec-refletor-tinta);
}

.ec-obra-papel {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ec-tinta-media);
}

.ec-obra-nome {
	margin: 0 0 var(--ec-space-2);
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
}

.ec-obra-nome a {
	color: var(--ec-tinta);
	text-decoration: none;
}

.ec-obra-nome a:hover,
.ec-obra-nome a:focus-visible {
	color: var(--ec-refletor-tinta);
}

.ec-obra-premio {
	margin: var(--ec-space-2) 0 0;
	display: inline-block;
	padding-top: 8px;
	border-top: 2px solid var(--ec-refletor);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ec-tinta);
}

.ec-obra-ano {
	margin: var(--ec-space-2) 0 0;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--ec-tinta-media);
}

/* ==========================================================================
   Ateliê — as duas fotos de máscara, encostadas
   ========================================================================== */

.ec-atelie-fotos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin-bottom: var(--ec-space-3);
}

.ec-atelie-fotos .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.ec-atelie-fotos > * + * {
	margin-block-start: 0;
}

.ec-atelie-fotos .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ==========================================================================
   Telas estreitas
   ========================================================================== */

@media (max-width: 900px) {
	/* Uma coluna só. Manter as 12 colunas aqui deixava 11 vãos de 40px —
	   440px que não encolhem — e a grade ficava mais larga que a tela. */
	.ec-abertura {
		grid-template-columns: 1fr;
	}

	.ec-abertura-texto,
	.ec-meta {
		grid-column: auto;
	}

	.ec-obra {
		grid-template-columns: 1fr;
		gap: var(--ec-space-2);
	}

	.ec-obra--espelhada .ec-obra-foto {
		order: 0;
	}

	.ec-ficha-linha {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* No celular o díptico vira duas fotos empilhadas: lado a lado, cada
	   uma ficaria estreita demais para se ler a cena. */
	.ec-hero-diptico {
		grid-template-columns: 1fr;
		aspect-ratio: auto;
	}

	.ec-hero-diptico .wp-block-image img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	.ec-meta {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ec-creditos {
		justify-content: flex-start;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-obra-foto img {
		transition: none;
	}

	.ec-obra:hover .ec-obra-foto img,
	.ec-obra:focus-within .ec-obra-foto img {
		transform: none;
	}
}

/* ==========================================================================
   Rótulo sem régua
   O .ec-label abre seção e por isso carrega a régua laranja. Dentro de uma
   lista, onde cada item já tem a sua linha, a régua vira ruído: aqui é só
   o versalete.
   ========================================================================== */

.ec-rotulo {
	display: block;
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ec-tinta-media);
}

.ec-rotulo a {
	color: inherit;
	text-decoration: none;
}

.ec-rotulo a:hover,
.ec-rotulo a:focus-visible {
	color: var(--ec-refletor-tinta);
}

/* ==========================================================================
   Índice — arquivo, busca e blog
   A mesma régua do repertório da home, em escala de lista: chapa pequena
   à esquerda, título e resumo à direita.
   ========================================================================== */

.ec-indice {
	border-top: 2px solid var(--ec-tinta);
}

.ec-indice-item {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--ec-space-3) var(--ec-space-4);
	align-items: start;
	padding-block: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--ec-linha);
}

.ec-indice-foto {
	margin: 0;
	overflow: hidden;
	background: var(--ec-papel-quente);
}

.ec-indice-foto img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ec-indice-item:hover .ec-indice-foto img,
.ec-indice-item:focus-within .ec-indice-foto img {
	transform: scale(1.035);
}

/* Post sem imagem destacada não deixa a coluna da foto vazia: o
   `post-featured-image` não imprime nada, então o texto sobra como filho
   único e ocupa a linha inteira. */
.ec-indice-item > .ec-indice-texto:only-child {
	grid-column: 1 / -1;
}

.ec-indice-texto .wp-block-post-title {
	margin: 0 0 10px;
}

.ec-indice-texto .wp-block-post-title a {
	color: var(--ec-tinta);
	text-decoration: none;
}

.ec-indice-texto .wp-block-post-title a:hover,
.ec-indice-texto .wp-block-post-title a:focus-visible {
	color: var(--ec-refletor-tinta);
}

.ec-indice-texto .wp-block-post-excerpt {
	margin: 0;
}

.ec-indice-texto .wp-block-post-excerpt p {
	margin: 0;
	max-width: 62ch;
}

.ec-paginacao {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-top: var(--ec-space-3);
}

.ec-paginacao .page-numbers.current {
	color: var(--ec-tinta);
	text-decoration: underline;
}

/* ==========================================================================
   Campo de busca — retângulo, sem sombra
   ========================================================================== */

/* O arredondamento do campo vem do tema pai. O reset geral lá em cima usa
   `:where()`, que tem especificidade zero e perde — aqui precisa de uma
   regra de peso normal para vencer. */
.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search .wp-block-search__input,
.wp-block-search .wp-block-search__button {
	border-radius: 0;
}

.wp-block-search__input {
	border: 2px solid var(--ec-tinta);
	padding: 11px 14px;
	font-family: var(--ec-font-body);
	font-size: 15px;
	background: var(--ec-papel);
	color: var(--ec-tinta);
}

.wp-block-search__button {
	border: 2px solid var(--ec-tinta);
	background: var(--ec-tinta);
	color: var(--ec-osso);
	padding: 11px 22px;
	font-family: var(--ec-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
	background: var(--ec-refletor);
	border-color: var(--ec-refletor);
	color: var(--ec-tinta);
}

/* ==========================================================================
   Conteúdo corrido — o texto das páginas e dos espetáculos
   ========================================================================== */

.ec-conteudo :where(h2, h3, h4) {
	margin-top: var(--ec-space-4);
	margin-bottom: var(--ec-space-2);
}

.ec-conteudo :where(ul, ol) {
	padding-inline-start: 1.2em;
}

.ec-conteudo li + li {
	margin-top: 4px;
}

.ec-conteudo .wp-block-quote {
	margin-block: var(--ec-space-4);
	font-family: var(--ec-font-display);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ec-conteudo .wp-block-quote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--ec-font-body);
	font-size: 13px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ec-tinta-media);
}

.ec-conteudo table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
}

.ec-conteudo :where(th, td) {
	border-bottom: 1px solid var(--ec-linha);
	padding: 9px 12px 9px 0;
	text-align: start;
}

.ec-conteudo th {
	font-family: var(--ec-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-tinta-media);
	border-bottom-color: var(--ec-tinta);
}

/* Legenda de foto solta (fora de galeria) continua abaixo da imagem. */
.ec-conteudo > figure figcaption,
.ec-conteudo .wp-block-image:not(.wp-block-gallery .wp-block-image) figcaption {
	position: static;
	max-width: none;
	margin: 0;
	padding: 8px 0 0;
	background: none;
	color: var(--ec-tinta-media);
	font-size: 12px;
	line-height: 1.4;
	text-align: start;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/* ==========================================================================
   Galerias em mosaico
   Colunas de CSS, não grade: cada foto mantém a altura real e as colunas
   se preenchem sozinhas. Forçar linhas de altura igual obrigaria a recortar,
   e as máscaras são retrato — um recorte em paisagem decapitaria todas.
   ========================================================================== */

.ec-conteudo .wp-block-gallery.has-nested-images {
	display: block;
	columns: 3;
	column-gap: 4px;
}

/* O bloco calcula a largura da figura para o layout flex dele (um terço
   da fileira). Trocado o layout por colunas, essa conta passa a valer
   sobre a coluna e encolhe a foto a um terço dela — daí o !important:
   não é teimosia, é anular uma medida que deixou de fazer sentido. */
.ec-conteudo .wp-block-gallery.has-nested-images figure.wp-block-image {
	display: block;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 0 4px;
	break-inside: avoid;
	position: relative;
}

.ec-conteudo .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.ec-conteudo .wp-block-gallery.has-nested-images { columns: 2; }
}

@media (max-width: 560px) {
	.ec-conteudo .wp-block-gallery.has-nested-images { columns: 1; }
}

/* ==========================================================================
   Crédito sobre a foto
   Na galeria o crédito volta para dentro da imagem, na faixa de baixo. O
   degradê existe para a legenda se ler sobre qualquer foto — faixa lisa
   deixaria uma borda dura e arbitrária no meio da fotografia.
   ========================================================================== */

.ec-conteudo .wp-block-gallery figure.wp-block-image figcaption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	margin: 0;
	padding: 26px 12px 9px;
	background: linear-gradient(to top, rgba(22, 19, 15, 0.88), rgba(22, 19, 15, 0));
	color: var(--ec-osso);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-align: start;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	max-width: none;
	pointer-events: none;
}

/* Numa página longa feita de entradas — uma máscara, um trabalho — o
   separador é o que divide uma da outra. Vira a mesma régua grossa do
   repertório, de margem a margem, em vez do filete curto e centralizado
   que o bloco desenha por padrão. */
.ec-conteudo .wp-block-separator {
	width: auto;
	max-width: none;
	margin-block: var(--ec-space-5);
	border: 0;
	border-top: 2px solid var(--ec-tinta);
	opacity: 1;
}

/* Depois da régua, o nome da entrada encosta nela. */
.ec-conteudo .wp-block-separator + h2 {
	margin-top: var(--ec-space-3);
}

/* ==========================================================================
   Telas estreitas — índice e conteúdo
   ========================================================================== */

@media (max-width: 700px) {
	.ec-indice-item {
		grid-template-columns: 1fr;
	}

	.ec-paginacao {
		gap: 12px;
	}
}

/* ==========================================================================
   Animações de rolagem
   A régua do site é impressa: nada se move que não se moveria numa página
   sendo manuseada. Nada voa de fora da tela, nada conta números, nenhuma
   letra aparece uma a uma. A rolagem revela — como quem vira a folha.

   O gesto que se repete é a RÉGUA SENDO DESENHADA, da esquerda para a
   direita. É o traço que já estrutura o site; animá-lo é animar o próprio
   vocabulário em vez de acrescentar um novo.

   ⚠️ Calibragem: a primeira versão usava faixas curtas (`entry … entry 50%`)
   e deslocamento de 14px. O movimento terminava quando o elemento mal tinha
   entrado, e o Rafael não viu nada no Edge. As faixas agora vão até dentro
   de `cover`, então o movimento acompanha a rolagem em vez de estourar no
   primeiro instante.

   Dois guardas:
   - @supports, porque `animation-timeline` ainda não existe no Firefox.
     Sem ele, o navegador mostra o estado final e nada quebra.
   - prefers-reduced-motion, porque quem pediu menos movimento ao sistema
     pediu por um motivo.
   Sem JavaScript, e rodando na linha de composição — não trava a rolagem.
   ========================================================================== */

@keyframes ec-regua {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes ec-revela {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ec-revela-curto {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ec-revela-desce {
	from { opacity: 0; transform: translateY(-30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ec-deriva {
	from { transform: scale(1.14) translateY(-4.5%); }
	to   { transform: scale(1.14) translateY(4.5%); }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* --- A foto atrás do nome anda mais devagar que a página ---------
		   O `scale` não é enfeite: sem ele o deslocamento vertical abriria
		   uma fresta na borda da foto. É a única paralaxe do site. */
		.ec-masthead img.wp-block-cover__image-background {
			animation: ec-deriva linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		/* --- A régua do rótulo de seção se desenha -----------------------
		   A borda vira transparente e um pseudo-elemento ocupa o lugar
		   dela, porque borda não se anima. Só aqui dentro: sem suporte, a
		   borda continua sendo a borda. */
		.ec-label {
			position: relative;
			border-top-color: transparent;
		}

		.ec-label::before {
			content: "";
			position: absolute;
			inset-block-start: -2px;
			inset-inline: 0;
			height: 2px;
			background: var(--ec-refletor);
			transform-origin: left center;
			animation: ec-regua linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 25%;
		}

		/* --- As três conquistas: réguas em sequência ---------------------- */
		.ec-meta > * {
			position: relative;
			border-top-color: transparent;
		}

		.ec-meta > *::before {
			content: "";
			position: absolute;
			inset-block-start: -1px;
			inset-inline: 0;
			height: 1px;
			background: var(--ec-linha);
			transform-origin: left center;
			animation: ec-regua linear both;
			animation-timeline: view();
		}

		.ec-meta > :nth-child(1)::before { animation-range: entry 0% cover 20%; }
		.ec-meta > :nth-child(2)::before { animation-range: entry 0% cover 26%; }
		.ec-meta > :nth-child(3)::before { animation-range: entry 0% cover 32%; }

		.ec-abertura-texto {
			animation: ec-revela-curto linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}

		/* --- O díptico assenta fora de compasso --------------------------- */
		.ec-hero-diptico .wp-block-image {
			animation: ec-revela linear both;
			animation-timeline: view();
		}

		.ec-hero-diptico .wp-block-image:first-child { animation-range: entry 0% cover 25%; }
		.ec-hero-diptico .wp-block-image:last-child  { animation-range: entry 0% cover 34%; }

		/* --- Faixa do repertório -----------------------------------------
		   A animação vai no <a>, não na imagem: a imagem já tem `transform`
		   própria no passar do mouse, e as duas brigariam. */
		.ec-obra-foto {
			animation: ec-revela linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 28%;
		}

		.ec-obra-info {
			animation: ec-revela linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 38%;
		}

		/* --- Ateliê: o par sendo comparado -------------------------------
		   Propriedades separadas de propósito: o atalho `animation` zera
		   `animation-timeline`, e depender da ordem das regras para
		   recuperá-la quebra em silêncio se alguém reordenar o arquivo. */
		.ec-atelie-fotos .wp-block-image {
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}

		.ec-atelie-fotos .wp-block-image:first-child { animation-name: ec-revela; }
		.ec-atelie-fotos .wp-block-image:last-child  { animation-name: ec-revela-desce; }

		/* --- Índice do arquivo e da busca --------------------------------- */
		.ec-indice-item {
			animation: ec-revela-curto linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 26%;
		}

		/* --- O rodapé fecha com o mesmo traço ----------------------------- */
		.ec-rodape {
			position: relative;
			border-top-color: transparent;
		}

		.ec-rodape::before {
			content: "";
			position: absolute;
			inset-block-start: -3px;
			inset-inline: 0;
			height: 3px;
			background: var(--ec-tinta);
			transform-origin: left center;
			animation: ec-regua linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}
	}
}

/* ==========================================================================
   Trabalhos antigos — o índice sem fotografia
   Os primeiros trabalhos não têm foto guardada. Em vez de inventar uma
   caixa vazia, a entrada vira o que ela é: ano, nome e uma linha. A régua
   e a numeração do ano fazem o mesmo papel que a foto faz no repertório.
   ========================================================================== */

.ec-antigas {
	border-top: 2px solid var(--ec-tinta);
	margin-bottom: var(--ec-space-5);
}

.ec-antigas > * + * {
	margin-block-start: 0;
}

.ec-antiga {
	padding-block: clamp(18px, 2.4vw, 26px);
	border-bottom: 1px solid var(--ec-linha);
}

.ec-antiga > * + * {
	margin-block-start: 0;
}

.ec-antiga-ano {
	margin: 0 0 6px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	color: var(--ec-refletor-tinta);
}

.ec-antiga-nome {
	margin: 0 0 8px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ec-tinta);
}

.ec-antiga p {
	margin: 0;
	max-width: 68ch;
	font-size: 15px;
	color: var(--ec-tinta-media);
}

.ec-antiga .wp-block-quote {
	margin: var(--ec-space-2) 0 0;
	padding-left: 20px;
	border-left: 3px solid var(--ec-refletor);
	font-family: var(--ec-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
}

.ec-antiga .wp-block-quote p {
	color: var(--ec-tinta);
}

/* ==========================================================================
   Máscaras — cada peça é uma seção
   Régua em cima, o nome, a história da encomenda e a galeria. A régua é o
   que separa uma máscara da outra: sem ela, o nome da peça seguinte cola no
   fim da galeria anterior e a página vira uma coluna só de fotos e títulos
   soltos. (Foi o que aconteceu enquanto esta página reusava a classe da
   lista do Portfólio, que não tem margem superior — lá o espaço vinha do
   contêiner de cada linha, que aqui não existe.)
   ========================================================================== */

.ec-mascara {
	margin-block-start: var(--ec-space-5);
	padding-block-start: var(--ec-space-3);
	border-top: 1px solid var(--ec-linha);
}

.ec-mascara > * + * {
	margin-block-start: var(--ec-space-2);
}

.ec-mascara-nome {
	margin: 0;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ec-tinta);
}

/* A galeria é o fim da seção: ela já traz o próprio respiro embaixo. */
.ec-mascara .wp-block-gallery {
	margin-block-start: var(--ec-space-3);
}

/* ==========================================================================
   Caminhos — a lista do "para que você veio"
   Mesma régua do repertório, mas em voz baixa: aqui são seis entradas de
   serviço, e o caixa-alta grande das obras viraria grito numa página de
   contato. O nome do caminho é o que se lê primeiro; o endereço vem em
   seguida, como instrução.
   ========================================================================== */

.ec-caminhos {
	border-top: 2px solid var(--ec-tinta);
	margin-block: var(--ec-space-3) var(--ec-space-5);
}

.ec-caminhos > * + * {
	margin-block-start: 0;
}

.ec-caminho {
	padding-block: clamp(14px, 1.8vw, 19px);
	border-bottom: 1px solid var(--ec-linha);
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: 4px 28px;
	align-items: baseline;
}

.ec-caminho > * + * {
	margin-block-start: 0;
}

.ec-caminho-nome {
	margin: 0;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--ec-tinta);
}

.ec-caminho p {
	margin: 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ec-tinta-media);
}

@media (max-width: 700px) {
	.ec-caminho {
		grid-template-columns: 1fr;
		gap: 5px;
	}
}

/* ==========================================================================
   "Você está aqui" no menu
   O item da página aberta recebe o acento e uma régua embaixo. A régua não
   é enfeite: o item da Oficina também é laranja, por ser o único link que
   sai do site, e sem ela os dois ficariam iguais.
   Peso de seletor alto de propósito — a regra geral de cor do menu tem o
   mesmo peso e venceria por ordem.
   ========================================================================== */

.ec-topo .wp-block-navigation .current-menu-item > a {
	color: var(--ec-refletor-tinta);
}

.ec-topo .wp-block-navigation .current-menu-item {
	position: relative;
}

.ec-topo .wp-block-navigation .current-menu-item::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -7px;
	height: 2px;
	background: var(--ec-refletor);
}

/* ==========================================================================
   Crédito dentro do lightbox
   O fundo do overlay vem do theme.json, ou seja, é o papel branco — por
   isso aqui o crédito é tinta, e não osso como na faixa sobre a foto.
   ========================================================================== */

/* Fixa e no fim do <body>, fora do overlay: se ficasse dentro, escrever
   nela realimentaria o observador do script e travaria o navegador. */
.ec-lightbox-credito {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 100001;
	margin: 0;
	padding: 18px 24px;
	font-family: var(--ec-font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ec-tinta-media);
	pointer-events: none;
}

.ec-lightbox-credito[hidden] {
	display: none;
}

/* O vídeo entra na mesma língua do resto: canto vivo e respiro de seção. */
.ec-conteudo .wp-block-embed {
	margin-block: var(--ec-space-3) var(--ec-space-4);
}

.ec-conteudo .wp-block-embed iframe {
	border-radius: 0;
	display: block;
	width: 100%;
}