/**
 * Il repertorio sul sito pubblico.
 *
 * Nessun colore scritto qui dentro: tutto passa per le variabili del tema,
 * così la sezione prende da sola il colore del registro in cui si trova.
 * Se domani il repertorio diventa blu, questo file non si tocca.
 */

/* --------------------------------------------------------------------------
 * Testata di brano e di genere
 * ----------------------------------------------------------------------- */
/* La testata a tinta piena attacca sotto quella del sito. Lo spazio che il
   tema lascia in cima al contenuto qui aprirebbe una fascia chiara fra le
   due. Si vince per specificita' e non per ordine: il foglio del plugin puo'
   essere stampato prima di quello del tema. */
.site-main.brano,
.site-main.genere {
	padding-block-start: 0;
}

.brano__testata {
	background: var(--sc-color-accent, #333);
	color: var(--sc-color-on-accent, #fff);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.brano__genere {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.brano__genere a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.brano__testata a:hover,
.brano__testata a:focus {
	color: color-mix(in srgb, var(--sc-button-bg, #E8C248) 94%, white);
	text-decoration: none;
	border-bottom-color: transparent;
	outline-color: currentColor;
}

.brano__titolo {
	margin: 0;
	color: inherit;
	line-height: 1.05;
}

.brano__varianti,
.brano__provenienza {
	margin: 0.6rem 0 0;
}

.brano__varianti {
	font-style: italic;
	opacity: 0.82;
}

.brano__provenienza {
	color: color-mix(in srgb, var(--sc-color-on-accent, #fff) 82%, transparent);
}

/* --------------------------------------------------------------------------
 * Corpo: il verso, la prosa, i dati
 *
 * Tre contenuti con tre misure naturali diverse, misurate sul repertorio:
 * il verso sta in venticinque caratteri (novantesimo percentile: 46), la
 * storia — che c'e' su tutti i brani — sono seicento-settecento caratteri di
 * prosa, i dati sono coppie brevi. Dare a tutti e tre la stessa colonna larga
 * significa un verso che occupa un terzo della riga e una storia spinta sotto
 * la piega. Su schermo largo stanno affiancati; scendendo si accorpano.
 *
 * La larghezza la governa questo foglio: la misura di lettura del tema — 48rem
 * — e' giusta per una colonna sola e stretta per tre.
 * ----------------------------------------------------------------------- */
.brano__griglia {
	--sc-container: 48rem;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

/*
 * Due colonne gia' dal tablet: il testo a sinistra con la storia e i materiali
 * sotto, i dati di fianco. Prima le due colonne aspettavano il desktop e in
 * mezzo restava una pagina larga con una colonna sola e i dati in fondo, che
 * e' lo spazio sprecato piu' vistoso del sito.
 *
 * La misura di lettura del tema qui non basta: con i dati di fianco la prosa
 * resterebbe sui quaranta caratteri.
 */
@media (min-width: 48rem) {
	.brano__griglia {
		--sc-container: 64rem;
		grid-template-columns: minmax(0, 1fr) 17rem;
		align-items: start;
	}

	/* Fra le due e le tre colonne il verso non ha ancora una colonna sua: sta
	   in cima, con la storia e i materiali sotto, e i dati corrono accanto a
	   tutti e due. */
	.brano__griglia--tre .brano__verso {
		grid-column: 1;
		grid-row: 1;
	}

	.brano__griglia--tre .brano__corpo {
		grid-column: 1;
		grid-row: 2;
	}

	.brano__griglia--tre .brano__dati {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/*
 * Tre colonne, col testo in mezzo: e' quello per cui si apre la pagina, e sta
 * al centro dove cade l'occhio. La storia gli fa spalla a sinistra, piu'
 * stretta — e' prosa di contorno, e una colonna da giornale la regge — e i
 * dati chiudono a destra nella loro misura fissa. Il testo si prende quello che
 * resta, che e' la colonna piu' ampia: le sigle allargano ogni parola, e una
 * strofa che va a capo per una sillaba si legge male.
 *
 * A 86rem la scheda smette di crescere: oltre, le righe si sfilaccerebbero.
 *
 * L'ordine sullo schermo non e' quello del documento — nel documento il testo
 * viene per primo, ed e' giusto cosi' sul telefono, dove si apre la pagina
 * durante la prova e il testo deve stare in cima.
 */
@media (min-width: 68.75rem) {
	.brano__griglia--tre {
		--sc-container: 86rem;
		/*
		 * Il verso non deve andare a capo: e' la ragione per cui questa
		 * colonna esiste. Il piu' lungo del repertorio sta in 370 px, quindi
		 * 24rem di minimo con un po' di margine. A stringersi e' la prosa,
		 * che a capo ci va per mestiere — abbassando la soglia senza questo
		 * minimo il testo scendeva a 263 px e sette versi su diciannove si
		 * spezzavano, cioe' le tre colonne guadagnate perdevano la cosa per
		 * cui erano tre.
		 */
		grid-template-columns: minmax(0, 22rem) minmax(24rem, 1fr) 17rem;
		/* Su uno schermo appena largo abbastanza i vuoti fra le colonne sono
		   spazio tolto al verso: qui contano meno della misura del testo. */
		column-gap: clamp(2rem, 3vw, 3.5rem);
	}

	.brano__griglia--tre .brano__corpo {
		grid-column: 1;
		grid-row: 1;
	}

	.brano__griglia--tre .brano__verso {
		grid-column: 2;
		grid-row: 1;
	}

	.brano__griglia--tre .brano__dati {
		grid-column: 3;
		grid-row: 1;
	}

	/* Nella colonna di mezzo il tetto di lettura non serve piu': la colonna
	   e' gia' la misura giusta, e il tetto la lascerebbe scentrata. */
	.brano__griglia--tre .brano__testo-corpo {
		max-width: none;
	}
}

/*
 * Nella colonna della prosa le sezioni non hanno un campo che le chiuda: a
 * separarle c'e' solo il vuoto, e quindi il vuoto deve essere generoso — piu'
 * dello stacco fra un paragrafo e l'altro dentro la stessa sezione, o «Da dove
 * viene» e «Materiali didattici» si leggono come un blocco solo.
 */
.brano__sezione + .brano__sezione {
	margin-top: clamp(3.5rem, 5vw, 4.5rem);
}

/*
 * Sul telefono e' tutto incolonnato, e una sezione dopo l'altra si legge come
 * un nastro solo: il vuoto fra due blocchi e il vuoto dentro un blocco
 * finiscono per somigliarsi. Un campo di colore li chiude, e si vede dove uno
 * finisce e comincia l'altro.
 *
 * Una tinta sola, il verde del registro, a due intensita': i materiali un po'
 * piu' carichi perche' sono la parte da usare, la storia appena velata perche'
 * si legge e basta. La mescola e' trasparente, cosi' regge su qualunque fondo.
 *
 * Sopra i 48rem le sezioni stanno gia' in colonne diverse e il campo non
 * serve: sarebbe decorazione.
 */
@media (max-width: 47.999rem) {
	.brano__storia,
	.brano__corpo .materiali {
		padding: 1.3rem 1.1rem 1.5rem;
		border-radius: 6px;
	}

	/*
	 * Col campo di colore i blocchi hanno un bordo visibile, e il vuoto fra
	 * l'uno e l'altro deve battere la spaziatura dentro — 21 px in alto, 24
	 * in basso — o si legge come un blocco solo diviso male. Prima erano 32
	 * px, e infatti sembravano appiccicati.
	 */
	.brano__griglia {
		row-gap: 3rem;
	}

	.brano__sezione + .brano__sezione {
		margin-top: 3rem;
	}

	.brano__storia {
		background: color-mix(in srgb, var(--sc-color-accent, #2f5d45) 5%, transparent);
	}

	.brano__corpo .materiali {
		background: color-mix(in srgb, var(--sc-color-accent, #2f5d45) 10%, transparent);
	}
}

/* Le intestazioni di sezione prendevano la misura piena dei titoli del
   tema — 48px contro i 57 del titolo della scheda — e finivano per
   competerci. Sono sottotitoli: devono stare sotto, non accanto.
   Escluso il richiamo all'area riservata, che ha una misura sua. */
.brano__sezione:not(.brano__riservato) > h2,
.brano__testo-testata > h2 {
	margin-top: 0;
	/* Erano 31 px, vicini ai 57 del titolo del brano e una volta e mezzo il
	   verso. Sono sottotitoli di sezione: 24 px stanno un quarto sopra il
	   verso, che basta a distinguerli senza contendergli la pagina. */
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.15;
	margin-bottom: 0;
}

/*
 * Il vuoto sotto un titolo sta su quello che segue, non sul titolo: cosi' un
 * sottotitolo puo' chiederne di meno senza eccezioni sul titolo stesso.
 */
.brano__sezione:not(.brano__riservato) > h2 + * {
	margin-top: 0.85rem;
}

/* «Materiali didattici» e «Testo e pronuncia» sono un titolo doppio: fra i
   due il vuoto e' minore di quello che li stacca dal contenuto, o si leggono
   come due sezioni diverse. */
.brano__sezione > h2 + .materiali__gruppo {
	margin-top: 0.3rem;
}

.brano__testo-corpo {
	/* Le andate a capo di una strofa sono informazione, non impaginazione. */
	max-width: 34rem;
	/* Il testo si legge cantando, spesso col telefono su un leggio o tenuto
	   lontano: vuole piu' corpo della prosa. Un gradino sopra, col suo
	   pavimento — il gradino `medium` scende fino a 14 px sullo stretto, che
	   qui sarebbe meno di adesso proprio dove serve di piu'. */
	font-size: max(1.15rem, var(--wp--preset--font-size--medium, 18px));
	color: var(--sc-color-text, #241318);
}

/* I comandi appartengono al testo e stanno sulla sua stessa riga. */
.brano__testo-testata {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.brano__azioni {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	flex: none;
	gap: 0.4rem;
	align-items: center;
}

.brano__azioni[hidden] {
	display: none;
}

.brano__azione {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.35rem;
	border: 0;
	border-radius: var(--sc-button-radius, 0);
	background: color-mix(in srgb, var(--sc-color-muted, #1a1c1f) 7%, transparent);
	color: var(--sc-color-text, #241318);
	font: 600 0.9rem/1.2 var(--sc-font-ui, inherit);
	cursor: pointer;
}

.brano__azione:hover,
.brano__azione:focus-visible {
	background: color-mix(in srgb, var(--sc-color-accent, #2f5d45) 13%, transparent);
	color: var(--sc-color-text, #241318);
}

.brano__azione:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.brano__azione-accordo {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 1.45rem;
	padding: 0.02em 0.3em;
	border: 1px solid var(--colectivo-color-warning-border, #b58a00);
	border-radius: 3px;
	background: var(--colectivo-color-warning-bg, #fff3c4);
	color: var(--colectivo-color-warning-ink, #5c4400);
	font: 700 0.78rem/1.2 var(--sc-font-ui, inherit);
	letter-spacing: 0.03em;
}

.brano__azione--accordi[aria-pressed="false"] .brano__azione-accordo {
	border-color: var(--sc-color-border, rgba(0, 0, 0, 0.25));
	background: color-mix(in srgb, var(--sc-color-muted, #1a1c1f) 8%, transparent);
	color: color-mix(in srgb, var(--sc-color-text, #241318) 55%, transparent);
}

.brano__azione--accordi[aria-pressed="false"] .brano__azione-accordo::after {
	position: absolute;
	top: 50%;
	left: -8%;
	width: 116%;
	height: 1px;
	background: currentColor;
	content: "";
	transform: rotate(-32deg);
}

.brano__icona {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.brano__icona--riduci,
.brano__azione-esci {
	display: none;
}

.brano__studio-dati {
	display: none;
}

/*
 * Lo spazio per le sigle si paga solo dove ci sono. La sigla della prima riga
 * sporge sopra il riquadro del paragrafo, e senza questi dieci pixel salirebbe
 * addosso al titolo: sono quanto sporge, non una misura a occhio — la sigla ha
 * corpo fisso, quindi anche questo.
 */
.brano__testo-corpo--accordi {
	padding-top: 10px;
}

/* Togliere le sigle restituisce al verso il flusso e l'interlinea normali. */
.brano--senza-accordi .brano__testo-corpo--accordi {
	padding-top: 0;
}

.brano--senza-accordi .brano__testo-corpo--accordi p {
	line-height: 1.7;
}

.brano--senza-accordi .brano__accordato {
	display: inline;
	white-space: normal;
	line-height: inherit;
}

.brano--senza-accordi .brano__accordo,
.brano--senza-accordi .brano__accordato--sola {
	display: none;
}

.brano__avviso {
	padding: 0.9rem 1.1rem;
	border-left: 4px solid var(--sc-color-accent, #333);
	background: var(--sc-color-surface, rgba(0, 0, 0, 0.04));
}

/* Il pulsante per entrare nell'area riservata. Il colore arriva da fuori:
   il plugin non conosce la tavolozza del sito, e chi lo usa lo pinta con
   `--colectivo-entra-bg`. Senza quella, prende l'accento della sezione. */
.colectivo-accesso-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1rem;
}

.colectivo-entra {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.3rem;
	background: var(--colectivo-entra-bg, var(--sc-color-accent, #333));
	color: var(--colectivo-entra-ink, #fff);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: var(--sc-button-radius, 0);
	transition: opacity 0.18s ease;
}

.colectivo-entra:hover,
.colectivo-entra:focus-visible {
	color: var(--colectivo-entra-ink, #fff);
	opacity: 0.88;
}

.colectivo-entra__altro {
	font-size: 1.05rem;
	opacity: 0.75;
}

.brano__note {
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.18));
}

/* --------------------------------------------------------------------------
 * La colonna dei dati
 * ----------------------------------------------------------------------- */
.brano__dati dl {
	margin: 0;
}

/*
 * Sul tablet i dati non stanno accanto — non ci sta una terza colonna — ma
 * finiscono in fondo alla pagina, dove una fila di coppie corte diventa un
 * elenco lungo e magro in mezzo al vuoto. Li' si aprono su due colonne, che
 * e' la larghezza che hanno a disposizione.
 */
@media (min-width: 34rem) and (max-width: 47.999rem) {
	.brano__dati dl {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 4vw, 2.5rem);
	}

	/* Il filo sopra separa le righe, non le colonne: sulla prima riga di
	   ogni colonna va tolto, o sembra un bordo di tabella. */
	.brano__dati dl .brano-dato:nth-child(-n + 2) {
		border-top: 0;
	}
}

.brano-dato {
	padding-block: 0.55rem;
	border-top: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.14));
}

.brano-dato:first-child {
	border-top: 0;
}

.brano-dato dt {
	margin: 0;
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.brano-dato dd {
	margin: 0.15rem 0 0;
}

.brano__fonti {
	margin-top: 1.8rem;
}

.brano__fonti h2 {
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0 0 0.4rem;
}

.brano__fonti ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: var(--sc-body-size, 1rem);
	word-break: break-word;
}

/* Il resoconto da inserire nelle pagine editoriali: una riga, non un blocco
   da cruscotto. I paesi restano comodi da aprire anche col pollice. */
.repertorio-resoconto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem clamp(1.5rem, 4vw, 3rem);
	margin-block: 1.5rem;
	padding-block: 1rem;
	border-block: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.14));
}

.repertorio-resoconto ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.repertorio-resoconto .repertorio-resoconto__numeri {
	margin-right: auto;
	font-family: var(--sc-font-ui, inherit);
}

.repertorio-resoconto__numeri li {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.repertorio-resoconto__numeri strong {
	font-size: clamp(1.35rem, 2.5vw, 1.7rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.repertorio-resoconto .repertorio-resoconto__paesi {
	gap: 0.1rem;
}

.repertorio-resoconto__paesi a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.45rem;
	color: inherit;
	text-decoration: none;
}

.repertorio-resoconto__paesi a:hover {
	background: color-mix(in srgb, var(--sc-button-bg, #E8C248) 20%, transparent);
}

.repertorio-resoconto__paesi a:focus-visible {
	outline: 2px solid var(--sc-color-accent, currentColor);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * L'indice: viste, ricerca, filtri
 * ----------------------------------------------------------------------- */
.repertorio-strumenti {
	margin-bottom: clamp(1.8rem, 4vw, 2.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: color-mix(in srgb, var(--sc-color-muted, #5C4A50) 8%, transparent);
}

.repertorio-viste {
	display: flex;
	gap: 1.2rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.14));
}

.repertorio-vista {
	/* Su un telefono si preme col dito: le due viste sono il comando
	   principale di questa pagina e devono essere alte da premere, non solo
	   larghe da leggere. Sopra e sotto il testo, cosi' la riga di sottolineatura
	   resta attaccata alla parola. */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-bottom: -1px;
	padding-top: 0.55rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid transparent;
	color: inherit;
	text-decoration: none;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.55;
}

.repertorio-vista.is-attiva {
	border-bottom-color: var(--sc-color-accent, #333);
	opacity: 1;
}

/* Il markup nasce con hidden e lo scopre lo script: senza JavaScript la
   barra non deve comparire, perche' cercare e filtrare li fa lo script. Il
   display qui sotto batterebbe il display:none di [hidden], quindi si spegne
   a mano. */
.repertorio-barra[hidden] {
	display: none;
}

.repertorio-barra {
	display: grid;
	gap: 1.2rem;
}

.repertorio-cerca-riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.5rem;
}

.repertorio-barra__etichetta {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--sc-font-ui, inherit);
	font-size: var(--wp--preset--font-size--small, 13px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.72;
}

.repertorio-cerca input {
	width: 100%;
	max-width: 35rem;
	min-height: 2.85rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.24));
	background: var(--sc-color-surface, #fff);
	color: inherit;
	font: inherit;
	/* Dopo la scorciatoia «font», che altrimenti lo riazzera. Sotto 1rem
	   iOS ingrandisce la pagina da solo quando ci si scrive dentro. */
	/* Non sotto i 16px: piu' piccolo, iOS ingrandisce la pagina quando si
	   entra nel campo. E' un vincolo del mezzo, non una scelta di scala. */
	font-size: 1rem;
}

.repertorio-conteggio {
	padding-bottom: 0.7rem;
	font-family: var(--sc-font-ui, inherit);
	font-size: var(--wp--preset--font-size--normal, 15px);
	font-weight: 600;
	white-space: nowrap;
	opacity: 0.72;
}

.repertorio-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.repertorio-filtri--select {
	display: block;
}

.repertorio-selettore {
	width: min(100%, 22rem);
	min-height: 2.85rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.24));
	border-radius: 0;
	background: var(--sc-color-surface, #fff);
	color: inherit;
	font-family: var(--sc-font-ui, inherit);
	/* Non sotto i 16px: piu' piccolo, iOS ingrandisce la pagina quando si
	   entra nel campo. E' un vincolo del mezzo, non una scelta di scala. */
	font-size: 1rem;
}

.repertorio-filtro {
	/* Rimpicciolendo la scritta il pulsante si abbassava sotto la misura di
	   un polpastrello: lo spazio interno cresce di quanto cala il corpo. */
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.6rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.24));
	background: var(--sc-color-surface, #fff);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.repertorio-filtro:hover {
	border-color: var(--sc-color-accent, #333);
}

.repertorio-filtro.is-attiva {
	border-color: var(--sc-color-accent, #333);
	background: var(--sc-color-accent, #333);
	color: var(--sc-color-on-accent, #fff);
}

.repertorio-filtro__n {
	opacity: 0.6;
	font-size: 0.88em;
}

/* --------------------------------------------------------------------------
 * L'indice
 * ----------------------------------------------------------------------- */
.repertorio-gruppi {
	display: grid;
	row-gap: clamp(1.4rem, 3vw, 1.8rem);
	column-gap: clamp(2rem, 5vw, 3rem);
	align-items: start;
}

@media (min-width: 48rem) {
	.repertorio-gruppi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.repertorio-gruppo__titolo {
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sc-color-accent, #333);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.repertorio-gruppo__titolo a {
	color: inherit;
	text-decoration: none;
}

.repertorio-elenco {
	margin: 0;
	padding: 0;
	list-style: decimal outside;
}

.repertorio-voce::marker {
	color: var(--sc-color-muted, #5C4A50);
	font-family: var(--sc-font-body, inherit);
	font-size: var(--wp--preset--font-size--normal, 15px);
	font-variant-numeric: tabular-nums;
}

.repertorio-voce {
	min-height: 4.25rem;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.12));
}

.repertorio-voce:last-child {
	border-bottom: 0;
}

.repertorio-voce__titolo {
	display: block;
	font-weight: 600;
	text-decoration: none;
}

/* Una regola d'autore con display batte il display:none che il browser da'
   a [hidden], quindi la sottoscritta dell'altra vista va spenta a mano. */
.repertorio-voce__sotto[hidden] {
	display: none;
}

.repertorio-voce__sotto {
	display: block;
	margin-top: 0.2rem;
	opacity: 0.72;
}

@media (max-width: 35rem) {
	.repertorio-cerca-riga {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.repertorio-conteggio {
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
 * Bandiera e nome del paese sono una cosa sola
 *
 * Fra i due c'è già uno spazio insecabile, ma il collegamento intero non
 * deve spezzarsi nemmeno fra le parole di un nome composto: una bandiera in
 * fondo a una riga, col paese sulla successiva, si legge come due cose.
 * ----------------------------------------------------------------------- */
.repertorio-voce__sotto a,
.brano__provenienza a,
.brano-dato dd a,
.brano__genere a,
.repertorio-gruppo__titolo a,
.repertorio-filtro {
	white-space: nowrap;
}

/* Il richiamo all'area riservata, in fondo alla scheda del brano. */
.brano__riservato {
	padding: 1.3rem 1.5rem;
	border: 1px solid var(--sc-color-border, rgba(0, 0, 0, 0.16));
}

.brano__riservato h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.brano__riservato p {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Condividi: il codice da inquadrare
 *
 * Sta in fondo alla colonna dei dati, sotto le fonti, e prende il modo di
 * quelle intestazioni: e' una voce della scheda come le altre, non un
 * riquadro venuto da fuori. Chiuso finche' non serve — <details> lo apre da
 * solo, senza JavaScript.
 *
 * Il disegno resta scuro su bianco anche se la pagina e' scura: un lettore
 * decide chiaro o scuro sulla luminosita', e il margine chiaro intorno gli
 * serve per trovarlo. Non si stringe per gusto.
 * ----------------------------------------------------------------------- */
.colectivo-condividi {
	margin-top: 1.8rem;
}

.colectivo-condividi > summary {
	cursor: pointer;
	width: fit-content;
	/* Ventiquattro pixel non si prendono col pollice. */
	padding: 0.55rem 0;
	margin-bottom: 0.2rem;
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.colectivo-qr {
	display: block;
	/* Quanto la colonna concede: sotto le 60rem non c'e' colonna e il
	   codice non deve prendersi mezzo schermo. */
	width: min(13rem, 100%);
	height: auto;
	border-radius: 4px;
}

.colectivo-condividi__url {
	margin: 0.5rem 0 0;
	font-size: var(--sc-size-small, 0.875rem);
	word-break: break-all;
	opacity: 0.72;
}

/* Materiali didattici: player nativi, senza una seconda estetica. */
.materiali__gruppo + .materiali__gruppo {
	margin-top: 2rem;
}

.materiali__gruppo h3 {
	margin-bottom: .75rem;
	font-size: 1.15rem;
}

.materiale {
	padding-block: 1rem;
	border-top: 1px solid var(--sc-color-border, rgba(0, 0, 0, .14));
}

.materiale__testo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .55rem;
}

.materiale h4 {
	margin: 0;
	font-size: 1rem;
}

.materiale__funzione {
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
	opacity: .68;
}

.materiale audio,
.materiale video {
	display: block;
	width: 100%;
	max-height: 70vh;
}

.materiale__nota,
.materiali__generi {
	margin-top: .75rem;
}

.materiali__generi p {
	margin: .35rem 0;
}

/* --------------------------------------------------------------------------
 * Gli accordi sopra le sillabe
 *
 * Ogni accordo e la sua sillaba sono un pezzo solo che va a capo insieme: la
 * sigla non si stacca mai dalla parola a cui appartiene, e il verso si spezza
 * come qualunque testo. Niente monospaziato, niente scorrimento: quelli
 * servivano al modo vecchio, con le sigle allineate a colonne su una riga a
 * parte, che regge solo a larghezza fissa.
 *
 * Le righe fanno posto sopra di se' per la riga delle sigle, cosi' due versi
 * consecutivi non si accavallano.
 * ----------------------------------------------------------------------- */
/* Un verso senza accordi e' testo e basta: un po' piu' arioso della prosa,
   perche' le andate a capo contano, ma niente di piu'. */
.brano__testo-corpo p {
	line-height: 1.7;
}

.brano__testo-corpo--accordi p {
	/*
	 * Spazio sopra ogni riga per la fila delle sigle: senza, la riga di sotto
	 * verrebbe coperta. Le sigle hanno una misura loro e non crescono col
	 * verso, quindi il posto che chiedono resta lo stesso mentre il testo si
	 * allarga. Un moltiplicatore sbaglia in tutti e due i versi: con un corpo
	 * grande spreca, con uno piccolo la sigla arriva a toccare la riga sopra.
	 * Qui l'interlinea si dice per quello che e': una riga di testo piu'
	 * l'altezza di una sigla.
	 */
	line-height: calc(1.2em + 24px);
}

/*
 * L'accordo sta sopra la sua sillaba senza entrare nel flusso: la sillaba
 * resta una parola come le altre, sulla stessa linea di base delle vicine, e
 * la sigla le galleggia sopra. Con una colonna inline la sillaba scendeva di
 * una riga rispetto al resto del verso.
 */
.brano__accordato {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	/*
	 * Il riquadro dell'unita' deve stringersi attorno alla sillaba. Ereditando
	 * l'interlinea del verso era alto una riga intera, e `bottom: 100%`
	 * spingeva la sigla un'interlinea sopra la sillaba invece che appena
	 * sopra: dove un verso andava a capo, la sigla della riga nuova finiva
	 * dentro le parole di quella prima.
	 */
	line-height: 1.2;
}

.brano__accordo {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 0.14em;
	font-family: var(--sc-font-ui, inherit);
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.03em;
	/* I tre gialli del sito usati come sono nati: campo chiaro, inchiostro
	   scuro, bordo ocra. Sul bordo pieno il bianco starebbe a 3,2:1 e il
	   nero farebbe fango; cosi' la sigla sta a 8,3:1 e si stacca dal verso
	   senza confondersi col verde dei collegamenti. */
	color: var(--colectivo-color-warning-ink, #5c4400);
	background: var(--colectivo-color-warning-bg, #fff3c4);
	border: 1px solid var(--colectivo-color-warning-border, #b58a00);
	border-radius: 3px;
	padding: 0.02em 0.3em;
	white-space: nowrap;
}

/*
 * La copia invisibile sotto una sigla senza sillaba. Tiene il posto in
 * larghezza e nient'altro: la sigla vera e' fuori dal flusso e da sola
 * lascerebbe l'unita' larga zero, con le sigle una sopra l'altra.
 *
 * `visibility` e non `display`: cosi' lo spazio resta, e chi legge con la voce
 * non la sente due volte.
 */
.brano__accordo--misura {
	position: static;
	visibility: hidden;
}

/* --------------------------------------------------------------------------
 * I caratteri, allineati a quelli del sito
 *
 * Jost per i titoli e per i comandi, Alegreya Sans per quello che si legge,
 * come nel resto del sito.
 *
 * Le misure vengono dai gradini del tema, ma attenzione ai nomi: qui `medium`
 * (14–20px) e' piu' grande di `normal` (14–16px). Fidandomi dei nomi avevo
 * dato `normal` al titolo del brano e `medium` al sottotitolo e ai filtri, e
 * la scala era rovesciata: il nome dell'autore usciva del 23 per cento piu'
 * grande del titolo, e un pulsante era il testo piu' grande della pagina.
 *
 * L'ordine giusto lo detta la pagina: e' un indice, e in un indice il titolo
 * del brano e' quello che si cerca e si preme. Sta sopra a tutto. Sotto
 * vengono le informazioni che lo accompagnano, poi i comandi, che devono
 * essere leggibili e premibili ma non gridare piu' del contenuto, e infine le
 * etichette di sezione, che sono piccole ma in maiuscoletto spaziato con un
 * filo sotto: pesano per come sono fatte, non per quanto sono grandi.
 *
 *   titolo del brano   medium      14–20 px   Jost 600
 *   nome dell'autore   normal      14–16 px   Alegreya Sans
 *   filtri             normal      14–16 px   Jost
 *   etichette          etichetta   14 px      Jost, maiuscoletto
 *
 * `etichetta` e' un gradino aggiunto alla scala nel tema figlio. Non e' un
 * capriccio di questa pagina: le etichette in maiuscoletto spaziato — generi,
 * viste, voci della scheda, «Fonti», «Condividi» — si inventavano la misura in
 * sei punti diversi, fra 0,9rem e 13px. In maiuscolo la stessa misura si legge
 * piu' piccola che in tondo, e la scala del tema non aveva un gradino per
 * questo: ora ce l'ha, e i sei numeri sparsi sono diventati uno.
 * ----------------------------------------------------------------------- */
.repertorio-voce__titolo {
	font-family: var(--sc-font-heading, inherit);
	/* I due gradini si restringono col viewport e sul telefono finiscono
	   sullo stesso fondo: 14,3 px il titolo e 14,1 il nome dell'autore, cioe'
	   nessuna gerarchia proprio dove serve di piu'. Il titolo tiene un
	   pavimento suo e continua a crescere sul largo. */
	font-size: max(1.05rem, var(--wp--preset--font-size--medium, 18px));
	font-weight: 600;
	letter-spacing: 0.01em;
}

.repertorio-voce__sotto {
	font-family: var(--sc-font-body, inherit);
	font-size: var(--wp--preset--font-size--normal, 15px);
}

.repertorio-gruppo__titolo {
	font-family: var(--sc-font-heading, inherit);
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
}

.repertorio-vista,
.repertorio-filtro,
.colectivo-condividi > summary {
	font-family: var(--sc-font-ui, inherit);
}

.repertorio-vista {
	font-size: var(--wp--preset--font-size--etichetta, 0.875rem);
}

.repertorio-filtro {
	font-size: var(--wp--preset--font-size--normal, 15px);
}

.repertorio-cerca input[type="search"] {
	font-family: var(--sc-font-body, inherit);
}

/* --------------------------------------------------------------------------
 * Modalita' studio e stampa
 * ----------------------------------------------------------------------- */
html.colectivo-studio {
	margin-top: 0 !important;
	background: #fff;
}

body.colectivo-studio {
	background: #fff;
	color: #171315;
}

.colectivo-studio #wpadminbar,
.colectivo-studio .site-header,
.colectivo-studio .site-footer {
	display: none !important;
}

.brano--studio .brano__testata {
	padding-block: clamp(1.5rem, 4vw, 2.5rem) 0.35rem;
	background: #fff;
	color: #171315;
	border-bottom: 0;
}

.brano--studio .brano__testata a,
.brano--studio .brano__testata a:hover,
.brano--studio .brano__testata a:focus,
.brano--studio .brano__provenienza {
	color: inherit;
}

.brano--studio .brano__griglia {
	--sc-container: 52rem;
	display: block;
	margin-block: 0.5rem 4rem;
}

.brano--studio .brano__corpo,
.brano--studio .brano__dati {
	display: none;
}

.brano--studio .brano__studio-dati {
	display: block;
	margin-bottom: 2rem;
}

.brano--studio .brano__studio-dati dl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 2rem;
	margin: 0;
}

.brano--studio .brano__studio-dati .brano-dato {
	display: flex;
	gap: 0.45rem;
	padding: 0;
	border: 0;
}

.brano--studio .brano__studio-dati dd {
	margin: 0;
}

.brano--studio .brano__testo-corpo {
	max-width: none;
	color: #000;
}

.brano--studio .brano__testo-testata {
	margin-bottom: 0;
}

.brano--studio .brano__testo-testata > h2 {
	display: none;
}

.brano--studio .brano__azioni {
	position: fixed;
	z-index: 100000;
	top: max(1rem, env(safe-area-inset-top));
	right: max(1rem, env(safe-area-inset-right));
	transform: none;
	padding: 0.4rem;
	border: 1px solid #d8d3cf;
	background: #fff;
	color: #171315;
	box-shadow: 0 0.35rem 1.4rem rgba(23, 19, 21, 0.12);
}

.brano--studio .brano__azione,
.brano--studio .brano__azione:hover,
.brano--studio .brano__azione:focus-visible {
	color: #171315;
}

.brano--studio .brano__azione--studio {
	width: auto;
	padding-inline: 0.65rem;
}

.brano--studio .brano__icona--espandi {
	display: none;
}

.brano--studio .brano__icona--riduci,
.brano--studio .brano__azione-esci {
	display: inline;
}