/* ==========================================================================
   Quixotesco Editorial — v0.1.0

   Carregado no front e no editor. Todos os valores saem dos tokens do tema;
   os fallbacks existem só para o caso de o CSS do tema não ter carregado
   ainda no editor.
   ========================================================================== */

:root {
	--qx-ed-gold: var(--qx-gold-brand, #B59E5F);
	--qx-ed-gold-readable: var(--qx-gold-readable, #75683F);
	--qx-ed-line: var(--qx-line, rgba(16, 24, 32, .14));
	--qx-ed-mute: var(--wp--preset--color--ink-mute, #5C6670);
	--qx-ed-ui: var(--qx-ui, var(--wp--preset--font-family--mono));
	--qx-ed-petrol: var(--qx-petrol, #1F2D38);
	--qx-ed-ink-soft: var(--wp--preset--color--ink-soft, #2A3A47);

	/* Escala do repertório. Nenhum recurso introduz tamanho fora daqui. */
	--qx-res-label: .62rem;          /* rótulo de recurso, mono versalete   */
	--qx-res-label-track: .12em;
	--qx-res-body: .92em;            /* corpo de recurso, relativo ao texto */
	--qx-res-pad: 1.4em 1.6em;
	--qx-res-gap: 2.4em;
}

/* Rótulo de recurso. Uma anatomia só, usada por caixa, ficha, sumário,
   percurso e díptico — é o que faz o leitor reconhecer a família. */
.qx-caixa-rotulo,
.qx-ficha-selo,
.qx-toc-label,
.qx-percurso-rotulo {
	margin: 0 0 .9em;
	font-family: var(--qx-ed-ui);
	font-size: var(--qx-res-label);
	font-weight: 500;
	letter-spacing: var(--qx-res-label-track);
	text-transform: uppercase;
	color: var(--qx-ed-mute);
}

/* --------------------------------------------------------------------------
   Versalete
   Alegreya SC, versalete verdadeiro: as minúsculas já são desenhadas como
   versaletes. Escreva normalmente — "Melancholia" sai com M em caixa alta e
   o resto em versalete, como manda a tipografia. Não usar text-transform.
   -------------------------------------------------------------------------- */

.qx-sc {
	font-family: var(--wp--preset--font-family--smallcaps, 'Alegreya SC', Georgia, serif);
	font-variant-caps: normal;
	text-transform: none;
	font-size: 1em;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Separadores
   O <hr> mantém a semântica de quebra temática; só perde a linha.
   -------------------------------------------------------------------------- */

.wp-block-separator.is-style-qx-diamond,
.wp-block-separator.is-style-qx-diamonds,
.wp-block-separator.is-style-qx-asterisk {
	border: 0;
	height: auto;
	background: none;
	margin: 2.4em auto;
	text-align: center;
	color: var(--qx-ed-gold-readable);
	line-height: 1;
	max-width: none;
}

.wp-block-separator.is-style-qx-diamond::before {
	content: "◆";
	font-family: var(--qx-ed-ui);
	font-size: .7rem;
}

.wp-block-separator.is-style-qx-diamonds::before {
	content: "◆ ◆ ◆";
	font-family: var(--qx-ed-ui);
	font-size: .7rem;
	letter-spacing: 1.2em;
	/* O letter-spacing acrescenta espaço depois do último glifo; o recuo
	   devolve a centralização óptica. */
	margin-left: 1.2em;
}

.wp-block-separator.is-style-qx-asterisk::before {
	content: "*";
	font-family: var(--wp--preset--font-family--sub, Georgia, serif);
	font-size: 1.4rem;
	vertical-align: -.25em;
}

.wp-block-separator.is-style-qx-short {
	border: 0;
	height: 1px;
	width: 3rem;
	max-width: 3rem;
	margin: 2.4em auto;
	background: var(--qx-ed-line);
}

/* --------------------------------------------------------------------------
   Título com diamante
   -------------------------------------------------------------------------- */

.wp-block-heading.is-style-qx-marked::before {
	content: "◆";
	margin-right: .6em;
	font-family: var(--qx-ed-ui);
	font-size: .5em;
	font-style: normal;
	font-weight: 400;
	vertical-align: .28em;
	color: var(--qx-ed-gold);
}

/* --------------------------------------------------------------------------
   Citação
   -------------------------------------------------------------------------- */

.qx-reading-shell .wp-block-post-content .wp-block-quote {
	margin: 2.2em 0;
	padding-left: 1.7rem;
	/* Petróleo, não ouro: o ouro é a voz do autor. Quem fala aqui é outro. */
	border-left: 1px solid var(--qx-ed-petrol);
	font-style: italic;
	text-align: left;
	hyphens: manual;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote p {
	margin-bottom: .6em;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote cite,
.qx-reading-shell .wp-block-post-content .wp-block-pullquote cite {
	display: block;
	margin-top: .8em;
	font-family: var(--qx-ed-ui);
	font-size: .66rem;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qx-ed-mute);
}

.qx-reading-shell .wp-block-post-content .wp-block-quote cite::before,
.qx-reading-shell .wp-block-post-content .wp-block-pullquote cite::before {
	content: "— ";
	color: var(--qx-ed-gold-readable);
}

/* Epígrafe: sem filete, recuada à direita da coluna. */
.qx-reading-shell .wp-block-post-content .wp-block-quote.is-style-qx-epigraph {
	border-left: 0;
	padding-left: 0;
	margin: 2.6em 0 2.6em auto;
	max-width: 30ch;
	font-family: var(--wp--preset--font-family--sub, Georgia, serif);
	font-size: 1.15em;
	line-height: 1.35;
	text-align: right;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote.is-style-qx-epigraph cite {
	text-align: right;
}

/* Citação em destaque. Não usar alignwide nem alignfull: a coluna de leitura
   é estreita de propósito, e alargar quebra a medida. */
.qx-reading-shell .wp-block-post-content .wp-block-pullquote {
	margin: 2.6em 0;
	padding: 1.6em 0;
	border-top: 1px solid var(--qx-ed-gold);
	border-bottom: 1px solid var(--qx-ed-gold);
	background: none;
	text-align: left;
	hyphens: manual;
}

.qx-reading-shell .wp-block-post-content .wp-block-pullquote blockquote {
	margin: 0;
	border: 0;
	padding: 0;
}

.qx-reading-shell .wp-block-post-content .wp-block-pullquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
	line-height: 1.1;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.qx-reading-shell .wp-block-post-content .wp-block-pullquote p::before {
	content: "◆ ";
	font-family: var(--qx-ed-ui);
	font-size: .38em;
	font-style: normal;
	font-weight: 400;
	vertical-align: .5em;
	color: var(--qx-ed-gold);
}

/* --------------------------------------------------------------------------
   Notas de rodapé (bloco nativo do WordPress 6.3+)
   -------------------------------------------------------------------------- */

.qx-reading-shell .wp-block-post-content sup a,
.qx-reading-shell .wp-block-post-content .fn a {
	font-family: var(--qx-ed-ui);
	font-size: .62em;
	text-decoration: none;
	padding: 0 .12em;
	color: var(--qx-ed-gold-readable);
}

.qx-reading-shell .wp-block-post-content .wp-block-footnotes {
	margin-top: 3em;
	padding-top: 1.4em;
	position: relative;
	font-size: .88em;
	line-height: 1.5;
	text-align: left;
	hyphens: manual;
}

.qx-reading-shell .wp-block-post-content .wp-block-footnotes::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3rem;
	height: 1px;
	background: var(--qx-ed-gold);
}

.qx-reading-shell .wp-block-post-content .wp-block-footnotes li::marker {
	font-family: var(--qx-ed-ui);
	font-size: .8em;
	color: var(--qx-ed-gold-readable);
}

/* --------------------------------------------------------------------------
   Tabela editorial
   Sem bordas verticais, sem zebra, sem caixa: só filetes entre as linhas.
   -------------------------------------------------------------------------- */

.wp-block-table.is-style-qx-editorial table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-qx-editorial :is(td, th) {
	border: 0;
	border-bottom: 1px solid var(--qx-ed-line);
	padding: .6em .8em .6em 0;
	text-align: left;
	vertical-align: top;
	hyphens: manual;
}

.wp-block-table.is-style-qx-editorial :is(td, th):last-child {
	padding-right: 0;
}

.wp-block-table.is-style-qx-editorial thead th {
	border-bottom-color: var(--qx-ed-gold);
	font-family: var(--qx-ed-ui);
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qx-ed-mute);
	background: none;
}

.wp-block-table.is-style-qx-editorial tbody td {
	font-size: .92em;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-qx-editorial tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-qx-editorial :is(td, th).has-text-align-right {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-qx-editorial figcaption {
	margin-top: .8em;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Figura
   Um passo de dessaturação para a fotografia não gritar sobre o papel.
   -------------------------------------------------------------------------- */

.wp-block-image.is-style-qx-figure {
	margin: 2.4em 0;
}

.wp-block-image.is-style-qx-figure img {
	filter: saturate(.92);
	width: 100%;
	height: auto;
}

.wp-block-image.is-style-qx-figure figcaption {
	text-align: left;
}

/* --------------------------------------------------------------------------
   Padrão bilíngue: filete entre as colunas
   -------------------------------------------------------------------------- */

.qx-bilingue .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--qx-ed-line);
	padding-left: clamp(1rem, 2.4vw, 2rem);
}

.qx-bilingue .qx-bilingue-label {
	margin: 0 0 .9em;
	font-family: var(--qx-ed-ui);
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--qx-ed-gold-readable);
}

/* --------------------------------------------------------------------------
   Modo noite
   Todo recurso acima precisa de contraparte. Critério: nenhum texto abaixo
   de 4.5:1 sobre --qx-reading-night.
   -------------------------------------------------------------------------- */

html[data-qx-reading="night"] {
	--qx-ed-gold-readable: var(--qx-gold-brand, #B59E5F);
	--qx-ed-line: rgba(237, 237, 232, .16);
	--qx-ed-mute: rgba(237, 237, 232, .62);
}

html[data-qx-reading="night"] .qx-reading-shell .wp-block-post-content :is(.wp-block-quote, .wp-block-pullquote, .wp-block-footnotes) {
	color: var(--qx-reading-night-ink, #EDEDE8);
}

html[data-qx-reading="night"] .wp-block-table.is-style-qx-editorial :is(td, th) {
	color: var(--qx-reading-night-ink, #EDEDE8);
}

html[data-qx-reading="night"] .wp-block-image.is-style-qx-figure img {
	filter: saturate(.78) brightness(.88);
}

/* ==========================================================================
   REPERTÓRIO EDITORIAL — v0.2.0

   Duas vozes atravessam tudo o que vem abaixo. A voz do autor é marcada em
   OURO (olho, "À margem", ◆). A voz de terceiros é PETRÓLEO e ausência de
   ornamento (citação, "Contexto", notas de referência). O leitor sabe quem
   fala sem precisar ler.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Subtítulos numerados
   O contador é do CSS: o autor aplica o estilo e o algarismo aparece.
   -------------------------------------------------------------------------- */

.qx-reading-shell .wp-block-post-content {
	counter-reset: qx-secao;
}

.qx-reading-shell .wp-block-post-content h2.is-style-qx-numbered {
	counter-increment: qx-secao;
}

.qx-reading-shell .wp-block-post-content h2.is-style-qx-numbered::before {
	content: counter(qx-secao, upper-roman);
	margin-right: .8em;
	font-family: var(--qx-ed-ui);
	font-size: .42em;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .1em;
	vertical-align: .5em;
	color: var(--qx-ed-gold);
}

/* O h3 se subordina mais claramente ao h2. */
.qx-reading-shell .wp-block-post-content h3 {
	margin-top: 1.6em;
}

/* --------------------------------------------------------------------------
   Sumário
   -------------------------------------------------------------------------- */

.qx-toc {
	margin: 0 0 var(--qx-res-gap);
}

.qx-toc-shell {
	border-top: 1px solid var(--qx-ed-line);
	border-bottom: 1px solid var(--qx-ed-line);
	padding: 1.1em 0;
}

.qx-toc-label {
	cursor: pointer;
	list-style: none;
	margin-bottom: 0;
}

.qx-toc-label::-webkit-details-marker {
	display: none;
}

.qx-toc-list {
	counter-reset: qx-toc;
	list-style: none;
	margin: 1.1em 0 0;
	padding: 0;
}

.qx-toc-item {
	counter-increment: qx-toc;
	margin: 0 0 .55em;
	padding-left: 2.2em;
	position: relative;
	line-height: 1.35;
}

.qx-toc-item::before {
	content: counter(qx-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: .15em;
	font-family: var(--qx-ed-ui);
	font-size: .58rem;
	letter-spacing: .08em;
	color: var(--qx-ed-gold-readable);
}

.qx-toc-item--h3 {
	padding-left: 3.4em;
	font-size: .92em;
}

.qx-toc-item--h3::before {
	left: 1.2em;
	content: "";
	width: .5em;
	height: 1px;
	top: .7em;
	background: var(--qx-ed-line);
}

.qx-toc-item a {
	font-size: .88em;
	text-decoration: none;
	color: var(--qx-ed-ink-soft);
	transition: color 150ms ease;
}

.qx-toc-item a:hover,
.qx-toc-item a:focus-visible {
	color: inherit;
}

.qx-toc-item a[aria-current="true"] {
	color: inherit;
	font-weight: 600;
}

.qx-toc-item a[aria-current="true"]::after {
	content: " ◆";
	font-family: var(--qx-ed-ui);
	font-size: .5em;
	vertical-align: .35em;
	color: var(--qx-ed-gold);
}

.qx-toc-hint {
	margin: .6em 0 0;
	font-size: .8em;
	color: var(--qx-ed-mute);
}

/* A partir de 1280px o sumário sai da coluna e acompanha a leitura. */
@media (min-width: 1280px) {
	.qx-reading-shell .qx-toc {
		float: left;
		clear: left;
		width: var(--qx-margin-w, 250px);
		margin-left: calc(-1 * (var(--qx-margin-w, 250px) + var(--qx-margin-gap, 2.75rem)));
		position: sticky;
		top: 6rem;
	}
	.qx-toc-shell {
		border: 0;
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   Caixas
   Três funções, e cada uma se distingue por UMA coisa que diz a função:
   Contexto tem fundo (é apoio), Contraponto tem filetes em cima e embaixo
   (é interrupção), À margem sai da coluna (é digressão).
   -------------------------------------------------------------------------- */

.qx-caixa {
	margin: var(--qx-res-gap) 0;
	padding: var(--qx-res-pad);
}

.qx-caixa-corpo {
	font-size: var(--qx-res-body);
	line-height: 1.55;
	text-align: left;
	hyphens: manual;
}

.qx-caixa-corpo > *:last-child {
	margin-bottom: 0;
}

.qx-caixa--contexto {
	border-left: 1px solid var(--qx-ed-petrol);
	background: color-mix(in srgb, var(--qx-ed-petrol) 5%, transparent);
}

.qx-caixa--contraponto {
	border-top: 1px solid var(--qx-ed-gold);
	border-bottom: 1px solid var(--qx-ed-gold);
	padding-inline: 0;
}

.qx-caixa--margem {
	border-left: 1px solid var(--qx-ed-gold);
	padding-block: .2em;
}

@media (min-width: 1280px) {
	.qx-reading-shell .qx-caixa--margem {
		float: left;
		clear: left;
		width: var(--qx-margin-w, 250px);
		margin-left: calc(-1 * (var(--qx-margin-w, 250px) + var(--qx-margin-gap, 2.75rem)));
		margin-block: 0 1.6em;
	}
}

/* No celular "À margem" perde o pendurado; o itálico mantém a distinção. */
@media (max-width: 1279px) {
	.qx-caixa--margem .qx-caixa-corpo {
		font-style: italic;
	}
}

/* --------------------------------------------------------------------------
   Olho editorial
   A voz do autor ampliada: Bluu Next, ouro, sem cite, sem aspas.
   Ultrapassa a coluna só pela esquerda — a borda direita do texto fica
   intacta, e a assimetria é o que dá o impacto.
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
	.qx-reading-shell .wp-block-post-content .wp-block-pullquote.alignleft {
		float: left;
		clear: left;
		width: calc(var(--qx-margin-w, 250px) + 220px);
		margin-left: calc(-1 * (var(--qx-margin-w, 250px) + var(--qx-margin-gap, 2.75rem)));
		margin-right: 2rem;
		margin-block: .4em 1.6em;
	}
}

/* --------------------------------------------------------------------------
   Transcrição
   Diálogo de filme e entrevista. Sem itálico: diálogo em itálico cansa.
   -------------------------------------------------------------------------- */

.qx-reading-shell .wp-block-post-content .wp-block-quote.is-style-qx-transcript {
	font-style: normal;
	font-size: .95em;
	line-height: 1.5;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote.is-style-qx-transcript p {
	margin-bottom: .5em;
}

/* --------------------------------------------------------------------------
   Notas na margem
   -------------------------------------------------------------------------- */

.qx-sidenote {
	font-size: .82em;
	line-height: 1.45;
	color: var(--qx-ed-ink-soft);
	text-align: left;
	hyphens: manual;
}

.qx-sidenote-num {
	font-family: var(--qx-ed-ui);
	font-size: .72em;
	margin-right: .5em;
	color: var(--qx-ed-gold-readable);
}

.qx-sidenote p {
	display: inline;
	margin: 0;
}

.qx-sidenote--inline {
	margin: -.4em 0 1.4em 1.6em;
	padding-left: 1em;
	border-left: 1px solid var(--qx-ed-line);
}

.qx-reading-shell .wp-block-post-content sup a[aria-expanded="true"] {
	color: var(--qx-ed-gold);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Ficha da obra
   -------------------------------------------------------------------------- */

.qx-ficha {
	margin: var(--qx-res-gap) 0;
	padding: 1.1em 0;
	border-top: 1px solid var(--qx-ed-line);
	border-bottom: 1px solid var(--qx-ed-line);
}

.qx-ficha-imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	margin-bottom: 1em;
}

.qx-ficha-obra {
	margin: 0 0 .8em;
	font-family: var(--wp--preset--font-family--smallcaps, 'Alegreya SC', Georgia, serif);
	font-size: 1.02em;
	font-weight: 500;
	line-height: 1.25;
}

.qx-ficha-dados {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35em .9em;
}

.qx-ficha-linha {
	display: contents;
}

.qx-ficha-rotulo {
	margin: 0;
	font-family: var(--qx-ed-ui);
	font-size: .58rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qx-ed-mute);
	padding-top: .25em;
}

.qx-ficha-valor {
	margin: 0;
	font-size: .85em;
	line-height: 1.4;
}

@media (min-width: 1280px) {
	.qx-reading-shell .qx-ficha {
		float: right;
		clear: right;
		width: var(--qx-margin-w, 250px);
		margin-right: calc(-1 * (var(--qx-margin-w, 250px) + var(--qx-margin-gap, 2.75rem)));
		margin-block: .4em 1.6em;
	}
}

/* --------------------------------------------------------------------------
   Crédito, díptico
   -------------------------------------------------------------------------- */

.qx-credit {
	font-family: var(--qx-ed-ui);
	font-size: .58rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qx-ed-mute);
}

.qx-credit::before {
	content: " · ";
}

.qx-diptych {
	margin: var(--qx-res-gap) 0;
}

.qx-diptych .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--qx-ed-line);
	padding-left: clamp(.8rem, 1.8vw, 1.5rem);
}

.qx-diptych .wp-block-image {
	margin: 0;
}

.qx-diptych-caption {
	margin: 1em 0 0;
	font-size: .85em;
	line-height: 1.45;
	color: var(--qx-ed-mute);
	text-align: left;
	hyphens: manual;
}

/* --------------------------------------------------------------------------
   Revelação (spoiler)
   -------------------------------------------------------------------------- */

.wp-block-details.is-style-qx-spoiler {
	margin: var(--qx-res-gap) 0;
	padding: 1.1em 0;
	border-top: 1px solid var(--qx-ed-line);
	border-bottom: 1px solid var(--qx-ed-line);
}

.wp-block-details.is-style-qx-spoiler summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--qx-ed-ui);
	font-size: var(--qx-res-label);
	font-weight: 500;
	letter-spacing: var(--qx-res-label-track);
	text-transform: uppercase;
	color: var(--qx-ed-mute);
}

.wp-block-details.is-style-qx-spoiler summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-qx-spoiler summary::before {
	content: "◆";
	display: inline-block;
	margin-right: .7em;
	font-size: .8em;
	color: var(--qx-ed-gold);
	transition: transform 220ms ease;
}

.wp-block-details.is-style-qx-spoiler[open] summary::before {
	transform: rotate(90deg);
}

.wp-block-details.is-style-qx-spoiler > *:not(summary) {
	padding-top: 1.2em;
}

/* --------------------------------------------------------------------------
   Percurso de leitura
   -------------------------------------------------------------------------- */

.qx-percurso {
	margin: 3em 0 0;
	padding-top: 1.2em;
	border-top: 1px solid var(--qx-ed-line);
}

.qx-percurso-item {
	margin: 0 0 .9em;
	font-size: .9em;
	line-height: 1.5;
	color: var(--qx-ed-ink-soft);
	text-align: left;
	hyphens: manual;
}

.qx-percurso-item a {
	font-family: var(--wp--preset--font-family--smallcaps, 'Alegreya SC', Georgia, serif);
	font-size: 1.06em;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--qx-ed-gold);
}

/* --------------------------------------------------------------------------
   Modo noite do repertório
   -------------------------------------------------------------------------- */

html[data-qx-reading="night"] {
	--qx-ed-petrol: #8EA3B4;
	--qx-ed-ink-soft: rgba(237, 237, 232, .78);
}

html[data-qx-reading="night"] .qx-caixa--contexto {
	background: rgba(142, 163, 180, .09);
}

html[data-qx-reading="night"] :is(.qx-toc-item a, .qx-sidenote, .qx-percurso-item, .qx-ficha-valor, .qx-caixa-corpo) {
	color: rgba(237, 237, 232, .82);
}

html[data-qx-reading="night"] :is(.qx-toc-shell, .qx-ficha, .qx-percurso, .wp-block-details.is-style-qx-spoiler) {
	border-color: rgba(237, 237, 232, .16);
}

/* --------------------------------------------------------------------------
   Nota do autor
   Paratexto: o autor falando SOBRE o texto, não dentro dele. Por isso não é
   uma quarta caixa — é de outra ordem, e a forma diz isso: sem caixa, sem
   fundo, com filete curto de ouro acima e o rótulo em versalete Alegreya SC.
   O mono é a voz da interface; o versalete é a sua. Rima com a assinatura de
   abertura: uma abre o texto, a outra o fecha.
   -------------------------------------------------------------------------- */

.qx-nota-autor {
	margin: 3em 0 0;
	padding-top: 1.3em;
	position: relative;
}

.qx-nota-autor::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3rem;
	height: 1px;
	background: var(--qx-ed-gold);
}

.qx-nota-autor-rotulo {
	margin: 0 0 .7em;
	font-family: var(--wp--preset--font-family--smallcaps, 'Alegreya SC', Georgia, serif);
	font-size: 1em;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--qx-ed-gold-readable);
}

.qx-nota-autor-corpo {
	font-size: var(--qx-res-body);
	font-style: italic;
	line-height: 1.55;
	color: var(--qx-ed-ink-soft);
	text-align: left;
	hyphens: manual;
}

.qx-nota-autor-corpo > *:last-child {
	margin-bottom: 0;
}

html[data-qx-reading="night"] .qx-nota-autor-corpo {
	color: rgba(237, 237, 232, .82);
}