/*
 * Componenti — unpodavedere.it
 * Nessun framework. I valori vengono dai token in tokens.css.
 */

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

/*
 * Rete di sicurezza contro lo scorrimento orizzontale. `clip` e non `hidden`:
 * hidden su body romperebbe il `position: sticky` della colonna scheda e della
 * barra filtri.
 */
html, body { max-width: 100%; overflow-x: clip; }

body {
	margin: 0;
	background: var(--c-pagina);
	color: var(--c-testo);
	font-family: var(--f-testo);
	font-size: var(--t-16);
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 300;
	color: var(--c-nero);
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
	margin: 0 0 var(--s-20);
}

/* Sotto i 34px il display passa a 400: a 300 diventerebbe troppo esile. */
h3, h4 { font-weight: 400; }

h1 { font-size: var(--t-52); }
h2 { font-size: var(--t-34); }
h3 { font-size: var(--t-20); }

p { margin: 0 0 var(--s-18); text-wrap: pretty; }

a { color: inherit; text-decoration-color: var(--c-oro); text-underline-offset: 3px; transition: color var(--tr); }
a:hover { color: var(--c-oro); }

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

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--c-oro); outline-offset: 3px; }

.occhiello {
	font-size: var(--t-12);
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--c-oro);
	margin-bottom: var(--s-14);
}

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

.salta-al-contenuto { position: absolute; left: -9999px; }
.salta-al-contenuto:focus {
	left: var(--s-12); top: var(--s-12); z-index: 100;
	background: var(--c-nero); color: var(--c-pagina); padding: var(--s-12) var(--s-18);
}

/* ============================ Testata ============================ */

.testata { background: var(--c-nero); }

.testata__interno {
	display: flex;
	align-items: center;
	gap: var(--s-32);
	padding: var(--s-22) var(--pad-sezione);
}

.testata__logo {
	font-family: var(--f-display);
	font-size: var(--t-20);
	color: var(--c-pagina);
	text-decoration: none;
	line-height: 1.1;
	max-width: 8ch;
}

.testata__nav { flex: 1; }

.testata__voci {
	display: flex;
	justify-content: center;
	gap: var(--s-28);
	flex-wrap: wrap;
}

.testata__voci a {
	font-size: var(--t-14);
	color: var(--c-crema);
	text-decoration: none;
}

.testata__voci a:hover { color: var(--c-oro); }

/* Voce attiva: sottolineata, come nel mock. */
.testata__voci .current-menu-item > a,
.testata__voci .current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-color: var(--c-oro);
}

/* --- Sottomenu: si apre al passaggio e col focus da tastiera --- */
.testata__voci li { position: relative; }

.testata__voci .sub-menu {
	position: absolute;
	top: 100%;
	left: calc(var(--s-14) * -1);
	z-index: 20;
	min-width: 210px;
	padding: var(--s-10) 0;
	background: var(--c-nero-profondo);
	border-top: 2px solid var(--c-oro);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tr), visibility var(--tr);
}

.testata__voci li:hover > .sub-menu,
.testata__voci li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

.testata__voci .sub-menu a { display: block; padding: var(--s-8) var(--s-14); font-size: var(--t-13); }

/* Il genitore che ha figli lo dichiara, cosi' si capisce prima di provarci. */
.testata__voci .menu-item-has-children > a::after {
	content: "·";
	margin-left: var(--s-6);
	color: var(--c-oro);
}

.testata__whatsapp { font-size: var(--t-12); padding: var(--s-12) var(--s-18); white-space: nowrap; }

/* ============================ Bottoni ============================ */

.bottone {
	display: inline-block;
	padding: var(--s-14) var(--s-26);
	border: 1px solid transparent;
	border-radius: var(--r-bottone);
	font-size: var(--t-15);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--tr), color var(--tr), border-color var(--tr);
}

/* Mai bianco su bianco: e' il bug del sito attuale. */
.bottone--primario { background: var(--c-pagina); color: var(--c-nero); }
.bottone--primario:hover { background: var(--c-crema); color: var(--c-nero); }
.bottone--su-chiaro { background: var(--c-nero); color: var(--c-pagina); }
.bottone--su-chiaro:hover { background: var(--c-testo); color: var(--c-pagina); }
.bottone--secondario { border-color: var(--c-taupe); color: var(--c-crema); }
.bottone--secondario:hover { border-color: var(--c-oro); color: var(--c-oro); }
.bottone--whatsapp { background: var(--c-oro); color: var(--c-nero); }
.bottone--whatsapp:hover { background: var(--c-crema); color: var(--c-nero); }

/* ============================ Briciole ============================ */

.briciole { padding: var(--s-18) var(--pad-sezione); font-size: var(--t-13); color: var(--c-grigio); }
.briciole ol { display: flex; flex-wrap: wrap; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.briciole li + li::before { content: "/"; margin-right: var(--s-8); color: var(--c-bordo); }
.briciole a { text-decoration: none; }

/* ============================ Media ============================ */

.media {
	background: var(--c-contenitore);
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: var(--s-22);
	position: relative;
}

.media img { width: 100%; height: 100%; object-fit: contain; }

.media__vuoto { display: grid; justify-items: center; gap: var(--s-12); }

.media__iniziale {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border: 1px solid var(--c-bordo);
	font-family: var(--f-display);
	font-size: var(--t-20);
	color: var(--c-oro);
}

.media__attesa {
	font-size: var(--t-10);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--c-grigio-chiaro);
}

/* ============================ Stato ============================ */

.stato {
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
	font-size: var(--t-11);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--c-taupe);
}

.stato::before {
	content: "";
	width: var(--s-6); height: var(--s-6);
	border-radius: var(--r-chip);
	background: var(--c-oro);
}

.stato[data-stato="venduto"]::before,
.stato[data-stato="non-disponibile"]::before { background: var(--c-su-scuro); }

.badge {
	display: inline-block;
	background: var(--c-pagina);
	border: 1px solid var(--c-bordo);
	color: var(--c-taupe);
	font-size: var(--t-10);
	text-transform: uppercase;
	letter-spacing: .16em;
	padding: var(--s-6) var(--s-10);
}

.card__media .badge { position: absolute; top: var(--s-12); right: var(--s-12); z-index: 2; }

/* ============================ Griglie e card ============================ */

.griglia { display: grid; gap: var(--s-40) var(--s-28); }
.griglia--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-40) var(--s-32); }
.griglia--4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-40) var(--s-28); }

.card__link { text-decoration: none; display: block; }
.card__media { position: relative; margin-bottom: var(--s-12); }

/* Hover sobrio: l'immagine si alza appena, niente ombre pesanti o zoom. */
.card__media .media { transition: transform var(--tr); }
.card__link:hover .media { transform: translateY(-3px); }

.card--ceduta .media img { opacity: .85; }

.card__titolo { font-size: var(--t-20); margin: var(--s-6) 0 var(--s-4); }
.card__meta { font-size: var(--t-13); color: var(--c-taupe); margin: 0; }

/* ============================ Sezioni ============================ */

.sezione { padding: var(--s-72) var(--pad-sezione); }
.sezione--testo { max-width: 68ch; }

.sezione__testata {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-20);
	margin-bottom: var(--s-40);
	flex-wrap: wrap;
}

.sezione__testata h2 { margin: 0; }
.sezione__testata a { font-size: var(--t-14); text-decoration: none; color: var(--c-taupe); }
.sezione__testata a:hover { color: var(--c-oro); }

/* ============================ Home ============================ */

.hero { display: grid; grid-template-columns: 1fr 1fr; background: var(--c-nero); }

.hero__testo { padding: var(--s-96) var(--s-64) var(--s-96) var(--pad-sezione); align-self: center; }
.hero__testo h1 { color: var(--c-pagina); font-size: var(--t-62); line-height: 1.06; }
.hero__intro { color: var(--c-su-scuro); font-size: var(--t-17); max-width: 44ch; margin-bottom: var(--s-32); }
.hero__bottoni { display: flex; gap: var(--s-14); flex-wrap: wrap; }

.hero__media { position: relative; min-height: 560px; }
/* Unico punto del sito dove `cover` e' ammesso. */
.hero__foto { width: 100%; height: 100%; object-fit: cover; }

.hero__didascalia {
	position: absolute;
	left: 0; bottom: var(--s-32);
	background: rgba(26, 25, 23, .72);
	border-left: 2px solid var(--c-oro);
	padding: var(--s-12) var(--s-20);
	display: grid;
	gap: var(--s-3);
}

.hero__didascalia a { color: var(--c-pagina); font-family: var(--f-display); font-size: var(--t-19); text-decoration: none; }
.hero__didascalia span { color: var(--c-su-scuro); font-size: var(--t-13); }

.artisti-home {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: var(--s-64);
	background: var(--c-nero);
	padding: var(--s-80) var(--pad-sezione);
}

.artisti-home h2 { color: var(--c-pagina); }
.artisti-home p { color: var(--c-su-scuro); }

.artisti-home__elenco { columns: 3; column-gap: var(--s-40); }
.artisti-home__elenco li { border-bottom: 1px solid #2E2C28; padding: var(--s-10) 0; break-inside: avoid; }
.artisti-home__elenco a { color: var(--c-crema); font-family: var(--f-display); font-size: var(--t-19); text-decoration: none; }

.coppia { display: grid; grid-template-columns: 1fr 1fr; }

.coppia__antiquariato, .coppia__libri {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: flex-end;
	padding: var(--s-40);
	text-decoration: none;
	overflow: hidden;
}

.coppia__antiquariato { background: var(--c-nero); }
.coppia__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.coppia__antiquariato .coppia__testo { position: relative; }
.coppia__antiquariato h2 { color: var(--c-pagina); }
.coppia__antiquariato span { color: var(--c-crema); font-size: var(--t-14); }

.coppia__libri { background: var(--c-crema); }
.coppia__libri span { color: var(--c-testo); font-size: var(--t-14); }

.cta-finale { background: var(--c-contenitore); padding: var(--s-80) var(--pad-sezione); text-align: center; }
.cta-finale p { max-width: 52ch; margin-inline: auto; }
.cta-finale__bottoni { display: flex; gap: var(--s-14); justify-content: center; flex-wrap: wrap; margin-top: var(--s-28); }

/* ============================ Archivi ============================ */

.archivio__testata { padding: var(--s-72) var(--pad-sezione) var(--s-40); }
.archivio__testata--crema { background: var(--c-crema); }
.archivio__intro { max-width: 760px; font-size: var(--t-17); }

.filtri {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--c-pagina);
	border-top: 1px solid var(--c-nero);
	border-bottom: 1px solid var(--c-divisore);
	padding: var(--s-18) var(--pad-sezione);
}

.filtri__chip { display: flex; gap: var(--s-10); flex-wrap: wrap; margin-bottom: var(--s-14); }

.chip {
	display: inline-flex;
	align-items: baseline;
	gap: var(--s-6);
	border: 1px solid var(--c-bordo);
	border-radius: var(--r-chip);
	padding: var(--s-8) var(--s-18);
	font-size: var(--t-14);
	text-decoration: none;
	transition: background var(--tr), color var(--tr), border-color var(--tr);
}

.chip:hover { border-color: var(--c-nero); color: inherit; }
.chip.e-attiva { background: var(--c-nero); color: var(--c-pagina); border-color: var(--c-nero); }
.chip__n { font-size: var(--t-11); opacity: .7; }

.filtri__controlli { display: flex; align-items: center; gap: var(--s-22); flex-wrap: wrap; }
.filtri__contatore { margin: 0 0 0 auto; font-size: var(--t-13); color: var(--c-taupe); }

.filtri__select select {
	font-family: inherit;
	font-size: var(--t-14);
	padding: var(--s-8) var(--s-12);
	border: 1px solid var(--c-bordo);
	border-radius: var(--r-bottone);
	background: var(--c-pagina);
	color: inherit;
}

.interruttore { display: inline-flex; align-items: center; gap: var(--s-10); font-size: var(--t-14); cursor: pointer; }
.interruttore input { position: absolute; opacity: 0; }

.interruttore__leva {
	width: 38px; height: 20px;
	border-radius: var(--r-chip);
	background: var(--c-nero);
	position: relative;
	transition: background var(--tr);
	flex: none;
}

.interruttore__leva::after {
	content: "";
	position: absolute;
	top: 3px; left: 21px;
	width: 14px; height: 14px;
	border-radius: var(--r-chip);
	background: var(--c-pagina);
	transition: left var(--tr);
}

/* La spunta significa "nascondi le vendute": a riposo il toggle e' acceso. */
.interruttore input:checked + .interruttore__leva { background: var(--c-bordo); }
.interruttore input:checked + .interruttore__leva::after { left: 3px; }
.interruttore input:focus-visible + .interruttore__leva { outline: 2px solid var(--c-oro); outline-offset: 2px; }

.filtri__apri { display: none; }

.archivio .griglia { padding: var(--s-48) var(--pad-sezione); }
.vuoto { padding: var(--s-72) var(--pad-sezione); color: var(--c-taupe); }

.pagination, .navigation.pagination { padding: 0 var(--pad-sezione) var(--s-80); }
.nav-links { display: flex; gap: var(--s-8); justify-content: center; flex-wrap: wrap; }

.page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: var(--s-8) var(--s-12);
	border: 1px solid var(--c-bordo);
	text-align: center;
	text-decoration: none;
	font-size: var(--t-14);
}

.page-numbers.current { background: var(--c-nero); color: var(--c-pagina); border-color: var(--c-nero); }

/* ============================ Scheda opera ============================ */

.scheda {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: var(--s-56);
	padding: 0 var(--pad-sezione) var(--s-72);
	align-items: start;
}

.galleria__principale { box-shadow: var(--ombra-opera); padding: var(--s-40); }
.galleria__miniature { display: flex; gap: var(--s-12); margin-top: var(--s-18); flex-wrap: wrap; }

.galleria__miniatura {
	width: 104px; height: 104px;
	padding: var(--s-6);
	background: var(--c-contenitore);
	border: 1px solid var(--c-divisore);
	cursor: pointer;
}

.galleria__miniatura.e-attiva { border-color: var(--c-nero); }
.galleria__miniatura img { width: 100%; height: 100%; object-fit: contain; }

.scheda__sticky { position: sticky; top: var(--s-26); }
.scheda__stato { display: flex; align-items: center; gap: var(--s-14); margin-bottom: var(--s-18); }
.scheda__categoria { font-size: var(--t-13); color: var(--c-taupe); }
.scheda__titolo { font-size: var(--t-42); font-weight: 400; margin-bottom: var(--s-8); }
.scheda__autore { font-size: var(--t-16); color: var(--c-taupe); }
.scheda__autore a { text-decoration: underline; text-decoration-color: var(--c-oro); }
.scheda__abstract { font-size: var(--t-16); margin-bottom: var(--s-28); }
.scheda__rimando { margin-top: var(--s-20); font-size: var(--t-14); }

.tecnica { border-top: 1px solid var(--c-nero); margin: 0 0 var(--s-32); }
.tecnica__riga {
	display: flex;
	justify-content: space-between;
	gap: var(--s-20);
	padding: var(--s-12) 0;
	border-bottom: 1px solid var(--c-divisore);
	font-size: var(--t-14);
}
.tecnica dt { color: var(--c-grigio); flex: none; }
/* I valori sono testo libero e possono essere lunghi: devono andare a capo. */
.tecnica dd { color: var(--c-nero); margin: 0; text-align: right; min-width: 0; overflow-wrap: break-word; }

/* ============================ Form ============================ */

.form { padding: var(--s-32); }
.form--scheda, .form--completo { background: var(--c-nero); }
.form--simile { background: var(--c-crema); }
.form--completo { margin: 0 var(--pad-sezione); }

.form--scheda .form__titolo, .form--completo .form__titolo { color: var(--c-pagina); }
.form--scheda .form__intro, .form--completo .form__intro { color: var(--c-su-scuro); font-size: var(--t-14); }
.form__titolo { font-size: var(--t-26); margin-bottom: var(--s-10); }

.form__campi { display: grid; gap: var(--s-12); }
.form__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }

/*
 * Le etichette non si vedono ma devono restare leggibili dagli screen reader:
 * `display: none` le toglierebbe anche dall'albero di accessibilita', e il
 * form resterebbe una sequenza di caselle senza nome. A vista il nome del
 * campo lo da' il placeholder.
 */
.form__etichetta {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.form__input {
	width: 100%;
	padding: var(--s-12) var(--s-14);
	border-radius: var(--r-bottone);
	font-family: inherit;
	font-size: var(--t-15);
}

.form--scheda .form__input, .form--completo .form__input {
	background: var(--c-campo);
	border: 1px solid #3A3833;
	color: var(--c-pagina);
}

.form--scheda .form__input::placeholder, .form--completo .form__input::placeholder { color: var(--c-grigio); }

.form--simile .form__input { background: var(--c-pagina); border: 1px solid var(--c-bordo); color: var(--c-nero); }

.form__input--area { resize: vertical; min-height: 90px; }

.form__consenso { display: flex; gap: var(--s-10); align-items: flex-start; font-size: var(--t-13); margin: var(--s-6) 0; }
.form--scheda .form__consenso, .form--completo .form__consenso { color: var(--c-su-scuro); }
.form__consenso input { margin-top: 5px; flex: none; }

.form__trappola { position: absolute; left: -9999px; }

.form__esito { padding: var(--s-12) var(--s-14); font-size: var(--t-14); border-left: 2px solid var(--c-oro); }
.form__esito--ok { background: rgba(184, 149, 106, .16); color: var(--c-crema); }
.form__esito--ko { background: rgba(184, 149, 106, .10); color: var(--c-crema); border-left-color: #B85C5C; }
.form--simile .form__esito { color: var(--c-testo); }

.garanzie { margin-top: var(--s-20); display: grid; gap: var(--s-8); }
.garanzie li { font-size: var(--t-13); color: var(--c-taupe); display: flex; gap: var(--s-10); }
.garanzie li::before { content: "✓"; color: var(--c-oro); }

/*
 * Dentro il form scuro il taupe scende sotto 2.5:1 di contrasto e le tre
 * garanzie diventano illeggibili. Su fondo scuro serve il grigio chiaro.
 */
.form--scheda .garanzie li,
.form--completo .garanzie li { color: var(--c-su-scuro); }

/* ============================ Storia e artista ============================ */

.storia { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-40); padding: var(--s-72) var(--pad-sezione); }
.storia__titolo { font-size: var(--t-30); margin: 0; }
.storia__testo { max-width: 68ch; font-size: var(--t-17); line-height: 1.85; }
.storia__testo blockquote {
	margin: var(--s-28) 0;
	padding-left: var(--s-20);
	border-left: 2px solid var(--c-oro);
	font-family: var(--f-display);
	font-size: var(--t-22);
}

.blocco-artista { background: var(--c-contenitore); padding: var(--s-56) var(--pad-sezione); }
.blocco-artista__interno { display: flex; align-items: center; gap: var(--s-28); flex-wrap: wrap; }
.blocco-artista__testo { flex: 1; min-width: 240px; }
.blocco-artista__testo h2 { font-size: var(--t-26); margin-bottom: var(--s-8); }
.blocco-artista__testo p { margin: 0; font-size: var(--t-15); color: var(--c-taupe); }

.blocco-artista__avatar,
.artista-riga__avatar {
	display: grid;
	place-items: center;
	width: 72px; height: 72px;
	border-radius: var(--r-chip);
	background: var(--c-crema);
	font-family: var(--f-display);
	font-size: var(--t-24);
	color: var(--c-nero);
	flex: none;
}

.correlate { padding: 0 var(--pad-sezione) var(--s-80); }

/* ============================ Barra mobile ============================ */

.barra-mobile { display: none; }

/* ============================ Lightbox ============================ */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(17, 16, 16, .94);
	display: grid;
	place-items: center;
	padding: var(--s-40);
}

.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }

.lightbox__chiudi {
	position: absolute;
	top: var(--s-20); right: var(--s-20);
	background: none;
	border: 1px solid var(--c-taupe);
	color: var(--c-pagina);
	font-size: var(--t-24);
	width: 44px; height: 44px;
	cursor: pointer;
}

/* ============================ Artista ============================ */

.artista__testata { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-56); padding: var(--s-40) var(--pad-sezione) var(--s-56); align-items: start; }
.artista__testata h1 { font-size: var(--t-56); }
.artista__abstract { font-size: var(--t-18); max-width: 60ch; }

.contatori { display: flex; gap: var(--s-40); margin: var(--s-28) 0 0; }
.contatori dt { font-size: var(--t-11); text-transform: uppercase; letter-spacing: .16em; color: var(--c-grigio); }
.contatori dd { margin: var(--s-4) 0 0; font-family: var(--f-display); font-size: var(--t-34); color: var(--c-nero); }

.biografia { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-40); padding: 0 var(--pad-sezione) var(--s-72); }
.biografia--senza-indice { grid-template-columns: 1fr; }
.biografia__indice { position: sticky; top: var(--s-26); align-self: start; }
.biografia__indice li { border-left: 2px solid var(--c-divisore); padding: var(--s-6) var(--s-12); }
.biografia__indice li.e-attiva { border-left-color: var(--c-oro); }
.biografia__indice a { font-size: var(--t-14); text-decoration: none; }
.biografia__testo { max-width: 68ch; line-height: 1.85; }
.biografia__testo > p:first-of-type { font-size: var(--t-18); color: var(--c-nero); }
.biografia__testo p { font-size: var(--t-17); color: var(--c-testo); }

.richiesta-info { background: var(--c-crema); padding: var(--s-56) var(--pad-sezione); }
.richiesta-info p { max-width: 60ch; }

.elenco-artisti { padding: var(--s-40) var(--pad-sezione); border-top: 1px solid var(--c-divisore); }
.artista-riga { border-bottom: 1px solid var(--c-divisore); }
.artista-riga a { display: flex; align-items: center; gap: var(--s-20); padding: var(--s-18) 0; text-decoration: none; }
.artista-riga__avatar { width: 52px; height: 52px; font-size: var(--t-17); }
.artista-riga__nome { font-family: var(--f-display); font-size: var(--t-22); flex: 1; }
.artista-riga__n { font-size: var(--t-13); color: var(--c-grigio); }

/* ============================ Libro ============================ */

.libro { display: grid; grid-template-columns: 420px 1fr; gap: var(--s-56); padding: 0 var(--pad-sezione) var(--s-72); align-items: start; }
.libro__copertina { position: sticky; top: var(--s-26); }
.libro__copertina .media { padding: var(--s-32); box-shadow: var(--ombra-opera); }
.libro__colonna h1 { font-size: var(--t-40); }
.libro__mancanti { font-size: var(--t-15); color: var(--c-taupe); }
.libro__testo { max-width: 68ch; margin-bottom: var(--s-32); }

/* Non una tabella: coppie etichetta/valore che vanno a capo da sole. */
.bibliografia {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-22) var(--s-40);
	border-top: 1px solid var(--c-nero);
	padding-top: var(--s-20);
	margin: 0 0 var(--s-32);
}

.bibliografia dt { font-size: var(--t-11); text-transform: uppercase; letter-spacing: .16em; color: var(--c-grigio); }
.bibliografia dd { margin: var(--s-4) 0 0; font-size: var(--t-17); color: var(--c-nero); }

/* ============================ Pagine di testo ============================ */

.pagina { padding: var(--s-72) var(--pad-sezione) var(--s-80); }
.pagina__testata { max-width: 68ch; margin-bottom: var(--s-40); }
.pagina__testata h1 { margin-bottom: var(--s-10); }
.pagina__aggiornata { font-size: var(--t-13); color: var(--c-grigio); margin: 0; }

/* La colonna di lettura del resto del sito: 68ch, corpo 17, interlinea 1.85. */
.pagina__testo {
	max-width: 68ch;
	font-size: var(--t-17);
	line-height: 1.85;
}

.pagina__testo h2 { font-size: var(--t-26); margin: var(--s-48) 0 var(--s-14); }
.pagina__testo h3 { font-size: var(--t-20); margin: var(--s-32) 0 var(--s-10); }
.pagina__testo h4 { font-size: var(--t-17); margin: var(--s-26) 0 var(--s-8); }

.pagina__testo a { text-decoration: underline; }

/*
 * Il reset globale toglie i marcatori a tutti gli elenchi perche' quasi tutti
 * quelli del sito sono strutture di layout. Nel testo lungo servono davvero:
 * qui si rimettono.
 */
.pagina__testo ul,
.pagina__testo ol {
	padding-left: var(--s-26);
	margin: 0 0 var(--s-18);
}

.pagina__testo ul { list-style: disc; }
.pagina__testo ol { list-style: decimal; }
.pagina__testo li { margin-bottom: var(--s-6); }
.pagina__testo li::marker { color: var(--c-oro); }

.pagina__testo blockquote {
	margin: var(--s-26) 0;
	padding-left: var(--s-20);
	border-left: 2px solid var(--c-oro);
	font-family: var(--f-display);
	font-size: var(--t-20);
}

/* Le tabelle delle cookie policy sono larghe: scorrono da sole. */
.pagina__testo table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-14);
	margin: 0 0 var(--s-26);
}

.pagina__testo th,
.pagina__testo td {
	text-align: left;
	padding: var(--s-10) var(--s-12);
	border-bottom: 1px solid var(--c-divisore);
	vertical-align: top;
}

.pagina__testo th { border-bottom-color: var(--c-nero); font-weight: 500; }

/* Wrapper che WordPress mette attorno alle tabelle larghe, piu' il fallback. */
.pagina__testo .wp-block-table,
.pagina__testo figure { overflow-x: auto; max-width: 100%; margin: 0 0 var(--s-26); }

/* Gli URL lunghi delle informative non devono sfondare la colonna. */
.pagina__testo { overflow-wrap: break-word; }

/* ============================ Ricerca ============================ */

.search-form {
	display: flex;
	gap: var(--s-10);
	max-width: 46ch;
	margin: var(--s-20) 0;
}

.search-form label { flex: 1; }

.search-form .search-field {
	width: 100%;
	padding: var(--s-12) var(--s-14);
	border: 1px solid var(--c-bordo);
	border-radius: var(--r-bottone);
	background: var(--c-pagina);
	font-family: inherit;
	font-size: var(--t-15);
	color: inherit;
}

.search-form .search-submit {
	padding: var(--s-12) var(--s-22);
	border: 0;
	border-radius: var(--r-bottone);
	background: var(--c-nero);
	color: var(--c-pagina);
	font-family: inherit;
	font-size: var(--t-15);
	font-weight: 500;
	cursor: pointer;
}

/* ============================ Contatti ============================ */

.canali { padding: 0 var(--pad-sezione); }
.canale { display: flex; align-items: center; justify-content: space-between; gap: var(--s-28); padding: var(--s-32) 0; border-bottom: 1px solid var(--c-divisore); flex-wrap: wrap; }
.canale h2 { font-size: var(--t-30); margin-bottom: var(--s-6); }
.canale p { margin: 0; color: var(--c-taupe); max-width: 60ch; }

.riquadri { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-28); padding: var(--s-56) var(--pad-sezione) var(--s-80); }
.riquadro { background: var(--c-contenitore); padding: var(--s-32); }
.riquadro h2 { font-size: var(--t-22); }
.riquadro p { margin: 0; font-size: var(--t-15); }

/* ============================ Footer ============================ */

.pieno { background: var(--c-nero); color: var(--c-su-scuro); padding: var(--s-64) var(--pad-sezione); }
.pieno__interno { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-40); }
.pieno__nome { font-family: var(--f-display); font-size: var(--t-24); color: var(--c-pagina); margin-bottom: var(--s-10); }
.pieno__riga { font-size: var(--t-14); margin: 0 0 var(--s-6); }
.pieno a { text-decoration: none; }
.pieno__voci li { margin-bottom: var(--s-6); font-size: var(--t-14); }

/* ============================ Mobile ============================ */

@media (max-width: 1100px) {
	.scheda { grid-template-columns: 1fr; }
	.libro { grid-template-columns: 320px 1fr; }
	.artisti-home { grid-template-columns: 1fr; gap: var(--s-32); }
	.artisti-home__elenco { columns: 2; }
	.griglia--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.testata__interno { flex-wrap: wrap; gap: var(--s-14); }
	.testata__nav { order: 3; flex-basis: 100%; }
	.testata__voci { justify-content: flex-start; gap: var(--s-18); }

	/*
	 * Su mobile niente tendina: senza hover resterebbe irraggiungibile.
	 * Le sottovoci diventano una riga sotto il genitore, piu' piccole.
	 */
	.testata__voci { flex-direction: column; align-items: stretch; gap: var(--s-10); }

	/*
	 * Le voci devono occupare tutta la larghezza disponibile: con
	 * `align-items: flex-start` si dimensionavano sul contenuto, e la riga
	 * delle sottovoci ("Quadri · Sculture · Oggetti in vetro · Oggetti in
	 * ceramica") sfondava il viewport trascinando l'intera pagina in
	 * scorrimento orizzontale.
	 */
	.testata__voci > li { width: 100%; min-width: 0; }

	.testata__voci .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		padding: var(--s-6) 0 0;
		background: none;
		border-top: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-6) var(--s-14);
	}
	.testata__voci .sub-menu a { padding: 0; color: var(--c-grigio); }
	.testata__voci .menu-item-has-children > a::after { content: none; }

	.hero { grid-template-columns: 1fr; }
	.hero__media { min-height: 360px; order: -1; }
	.hero__testo { padding: var(--s-48) var(--pad-sezione); }
	.hero__bottoni .bottone { width: 100%; }

	.coppia, .riquadri, .pieno__interno { grid-template-columns: 1fr; }
	.griglia--3, .griglia--4 { grid-template-columns: repeat(2, 1fr); }
	.artisti-home__elenco { columns: 1; }

	.storia, .biografia, .artista__testata, .libro { grid-template-columns: 1fr; }
	.libro__copertina, .scheda__sticky, .biografia__indice { position: static; }

	.galleria__principale { height: 380px !important; padding: var(--s-18); }
	.galleria__miniatura { width: 68px; height: 68px; }

	/* Il pannello filtri si apre col bottone; i chip restano sempre visibili. */
	.filtri { position: static; }
	.filtri__apri {
		display: inline-block;
		border: 1px solid var(--c-bordo);
		border-radius: var(--r-bottone);
		background: var(--c-pagina);
		padding: var(--s-10) var(--s-18);
		font: inherit;
		font-size: var(--t-14);
		cursor: pointer;
	}
	.filtri__controlli { display: none; width: 100%; }
	.filtri__controlli.e-aperto { display: grid; gap: var(--s-14); margin-top: var(--s-14); }
	.filtri__contatore { margin: 0; }

	/* Barra fissa in basso: sempre visibile, non compare e scompare allo scroll. */
	.barra-mobile {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-14);
		background: var(--c-nero-profondo);
		padding: var(--s-10) var(--s-14);
	}
	.barra-mobile__testo { display: grid; min-width: 0; }
	.barra-mobile__titolo {
		font-family: var(--f-display);
		font-size: var(--t-15);
		color: var(--c-pagina);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.barra-mobile__nota { font-size: var(--t-11); color: var(--c-grigio); }
	.barra-mobile .bottone { width: auto; padding: var(--s-10) var(--s-18); flex: none; }

	/* Spazio perche' la barra non copra il footer. */
	body.single-opera, body.single-oggetto { padding-bottom: 72px; }
}

@media (max-width: 520px) {
	.griglia--3, .griglia--4 { grid-template-columns: 1fr; }
	.form__coppia { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}