/* ==========================================================================
   Studio Polo 1116 — stili
   Misure di riferimento: desktop 1440 × 900, griglia 1238 px (margini 101).
   ========================================================================== */

@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond-normal.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond-italic.woff2") format("woff2");
	font-weight: 400 800;
	font-style: italic;
	font-display: swap;
}

:root {
	--fg: #fff;
	--fg-90: rgba(255, 255, 255, .9);
	--fg-80: rgba(255, 255, 255, .8);
	--fg-60: rgba(255, 255, 255, .6);
	--fg-40: rgba(255, 255, 255, .4);
	--line: rgba(255, 255, 255, .3);
	--ink: #1b1c1e;
	--gap: 22px;
	--gut: max(clamp(20px, 5vw, 64px), calc((100vw - 1238px) / 2));
	--ease: cubic-bezier(.22, .61, .36, 1);
	--t-hover: .28s;
	--header-h: 128px;
	color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body {
	margin: 0;
	min-height: 100vh;
	background: transparent;
	color: var(--fg);
	font-family: "EB Garamond", Garamond, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1.25;
	font-kerning: normal;
	font-variant-numeric: oldstyle-nums proportional-nums;
	font-feature-settings: "kern", "liga";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
::selection { background: rgba(255, 255, 255, .85); color: var(--ink); }

.wrap { padding-inline: var(--gut); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 12px; background: #fff; color: var(--ink); }
.skip:focus { top: 12px; }

/* Maiuscoletto: sigle, anni, etichette */
.sc, .num { font-variant-caps: all-small-caps; letter-spacing: .03em; }
.label {
	font-size: 15px;
	line-height: 20px;
	letter-spacing: .06em;
	font-variant-caps: small-caps;
	color: var(--fg-60);
}

/* ---------- Sfondo (fisso) ---------- */
.bg, .site-header__bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.site-header__bg { position: absolute; height: 100vh; z-index: 0; }
.bg__photo {
	position: absolute;
	inset: -36px -58px;
	background: var(--ink) var(--sp-bg) center / cover no-repeat;
	filter: blur(6px);
	transform: translateZ(0);
}
.bg__scrim { position: absolute; inset: 0; background: rgba(20, 21, 24, .5); }
.is-contatti .bg__scrim { background: rgba(20, 21, 24, .7); }
.is-home .bg__photo { inset: 0; filter: none; }
.is-home .bg__scrim {
	background: linear-gradient(180deg,
		rgba(12, 14, 18, .45) 0%,
		rgba(12, 14, 18, .05) 30%,
		rgba(12, 14, 18, .15) 60%,
		rgba(12, 14, 18, .55) 100%);
}

/* ---------- Link con sottolineatura (menu, vista) ---------- */
.link {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
	color: var(--fg-60);
	transition: color var(--t-hover) var(--ease);
}
.link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	opacity: .6;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease);
}
.link:hover, .link:focus-visible { color: var(--fg); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link.is-active { color: var(--fg); }
.link.is-active::after { transform: scaleX(1); opacity: 1; }

.link-quiet { transition: opacity var(--t-hover) var(--ease); }
.link-quiet:hover { opacity: .65; }

.link-cover { /* home: sottolineatura 1,5 px */
	display: inline-block;
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
	transition: background-size var(--t-hover) var(--ease);
}
.link-cover:hover, .link-cover:focus-visible, .link-cover.is-hover { background-size: 100% 1.5px; }

/* ---------- Pulsanti tondi ---------- */
.btn-round {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border: 1px solid var(--fg-80);
	border-radius: 50%;
	color: var(--fg);
	font-size: 30px;
	line-height: 1;
	padding-bottom: 3px;
	font-variant-numeric: normal;
	transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
		border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.btn-round--chiudi { font-size: 44px; padding-bottom: 6px; }
.btn-round:hover, .btn-round:focus-visible,
.vicini__item:hover .btn-round, .vicini__item:focus-visible .btn-round {
	background: #fff;
	border-color: var(--fg-60);
	color: var(--ink);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}

/* ---------- Header delle pagine interne ---------- */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: var(--header-h);
	overflow: hidden;
	transition: transform .45s var(--ease);
	view-transition-name: sp-header;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 40px;
}
.site-header__logo { display: block; width: 300px; }
.site-header__nav { display: flex; align-items: flex-start; gap: 44px; padding-top: 17px; }
.menu { display: flex; gap: 30px; font-size: 20px; line-height: 26px; }
.menu-toggle { display: none; }

.logo { display: block; color: var(--fg); }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Lingua */
.lang { display: flex; align-items: flex-start; gap: 8px; font-size: 20px; line-height: 26px; padding-bottom: 4px; }
.lang__item { color: var(--fg-60); }
.lang__item.is-active { color: var(--fg); }
a.lang__item:hover { color: var(--fg); }
.lang__sep { color: var(--fg-40); }
.flag { display: flex; width: 18px; height: 12px; margin-top: 8px; outline: .5px solid rgba(255, 255, 255, .5); }
.flag--it i { flex: 1; }
.flag--it i:nth-child(1) { background: #009246; }
.flag--it i:nth-child(2) { background: #fff; }
.flag--it i:nth-child(3) { background: #ce2b37; }
.flag--en {
	background:
		linear-gradient(#c8102e, #c8102e) center / 100% 2px no-repeat,
		linear-gradient(#c8102e, #c8102e) center / 2px 100% no-repeat,
		linear-gradient(#fff, #fff) center / 100% 4px no-repeat,
		linear-gradient(#fff, #fff) center / 4px 100% no-repeat,
		#012169;
}

/* ==========================================================================
   Home
   ========================================================================== */
.is-home { overflow: hidden; }
.home {
	--line-y: 63.67svh;
	--logo-w: clamp(240px, 51.5svh, 620px);
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 520px;
	overflow: hidden;
}
.home__velo { position: absolute; inset: 0; background: #141518; opacity: 0; transition: opacity .45s var(--ease); }
.home__ombra {
	position: absolute;
	left: 0;
	top: calc(var(--line-y) - 11px);
	width: 76.4vw;
	height: 260px;
	background: radial-gradient(ellipse 58% 55% at 40% 46%, rgba(12, 13, 16, .62) 0%, rgba(12, 13, 16, .35) 55%, rgba(12, 13, 16, 0) 100%);
	opacity: 0;
	transition: opacity .45s var(--ease);
}
.home__logo {
	position: absolute;
	left: calc(var(--gut) + 39px);
	top: calc(var(--line-y) - 16px);
	width: var(--logo-w);
	margin: 0;
	transform: rotate(-90deg);
	transform-origin: 0 0;
	filter: drop-shadow(0 1px 16px rgba(0, 0, 0, .3));
}
.home__logo a { display: block; }
.home__linea {
	position: absolute;
	left: calc(var(--gut) + 58px);
	right: var(--gut);
	top: var(--line-y);
	height: 1.5px;
	background: #fff;
	transform-origin: left center;
}
.home__contatti {
	position: absolute;
	right: var(--gut);
	top: 11svh;
	font-size: 24px;
	line-height: 31px;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}
.home__nav {
	position: absolute;
	right: var(--gut);
	top: calc(var(--line-y) + 26px);
	text-align: right;
	font-size: 26px;
	line-height: 26px;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}
.home__nav li + li { margin-top: 10px; }
.home__nav a { padding-bottom: 4.5px; }
.home__anteprima {
	position: absolute;
	left: calc(var(--gut) + 58px);
	right: calc(var(--gut) + 220px);
	top: calc(var(--line-y) + 36px);
	display: grid;
	gap: 12px;
	font-size: 19px;
	line-height: 24px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s var(--ease), transform .35s var(--ease);
	pointer-events: none;
}
.home__anteprima li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home__anno { display: inline-block; margin-right: .75em; font-size: 18px; color: rgba(255, 255, 255, .75); font-variant-caps: all-small-caps; letter-spacing: .03em; }
.home__indirizzo {
	position: absolute;
	left: calc(var(--gut) + 58px);
	bottom: 40px;
	font-size: 14px;
	letter-spacing: .02em;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}
.home.is-preview .home__velo { opacity: .24; }
.home.is-preview .home__ombra { opacity: 1; }
.home [data-preview-list].is-active { opacity: 1; transform: none; }

/* Intro (solo alla prima visita della sessione) */
.intro .home__linea { animation: sp-linea 1.1s cubic-bezier(.65, 0, .35, 1) .15s both; }
.intro .home__logo { animation: sp-logo .9s var(--ease) .65s both; }
.intro .home__nav, .intro .home__contatti, .intro .home__indirizzo { animation: sp-sale .7s var(--ease) 1.15s both; }
@keyframes sp-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sp-logo { from { opacity: 0; translate: -16px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes sp-sale { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ==========================================================================
   Sezioni: galleria / registro
   ========================================================================== */
.sezione { padding-top: 145px; }
.vista { display: flex; align-items: flex-start; gap: 12px; font-size: 19px; line-height: 25px; }
.vista__sep { color: var(--line); }

/* Galleria */
.griglia {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
	margin-top: 27px;
}
.cella { min-width: 0; }
.cella__anno {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 20px;
	margin-bottom: 8px;
	margin-right: calc(-1 * var(--gap));
	font-size: 15px;
	color: var(--fg-80);
	font-variant-caps: all-small-caps;
	letter-spacing: .03em;
}
.cella__anno::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cella:not(.cella--anno) .cella__anno span { display: none; }
.griglia .cella:nth-child(4n) .cella__anno { margin-right: 0; }

.card {
	position: relative;
	display: block;
	aspect-ratio: 293 / 220;
	overflow: hidden;
	background: rgba(107, 102, 94, .9);
}
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 21, 24, .1) 0%, rgba(20, 21, 24, .3) 30%, rgba(20, 21, 24, .7) 60%, rgba(20, 21, 24, .9) 100%);
	opacity: 0;
	transition: opacity var(--t-hover) var(--ease);
}
.card__didascalia {
	position: absolute;
	left: 18px; right: 18px; bottom: 18px;
	display: grid;
	gap: 6px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.card__anno { font-size: 16px; line-height: 21px; color: var(--fg-80); font-variant-caps: all-small-caps; letter-spacing: .03em; }
.card__titolo { font-size: 21px; line-height: 1.18; }
.card:hover .card__velo, .card:focus-visible .card__velo,
.card:hover .card__didascalia, .card:focus-visible .card__didascalia { opacity: 1; transform: none; }
.card:hover .card__img { transform: scale(1.02); }

/* Registro */
.registro { margin-top: 30px; border-bottom: 1px solid var(--line); }
.registro__head, .riga {
	display: grid;
	grid-template-columns: 90px minmax(0, 520fr) minmax(0, 330fr) minmax(0, 250fr);
	column-gap: 16px;
}
.registro__head { padding-bottom: 7px; font-size: 15px; line-height: 20px; letter-spacing: .06em; font-variant-caps: small-caps; color: var(--fg-60); }
.riga {
	position: relative;
	padding: 15px 0;
	border-top: 1px solid var(--line);
	transition: background-color var(--t-hover) var(--ease);
}
.riga:hover, .riga:focus-visible { background: rgba(255, 255, 255, .1); }
.riga__anno { padding-top: 3.2px; font-size: 16px; line-height: 22px; font-variant-caps: all-small-caps; letter-spacing: .03em; }
.riga__titolo { font-size: 23px; line-height: 1.22; }
.riga__committente, .riga__tipologia { padding-top: 3.2px; font-size: 16px; line-height: 1.35; color: var(--fg-90); }
.riga__tipologia { font-style: italic; }
.riga__anteprima {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 5;
	width: 280px;
	aspect-ratio: 4 / 3;
	background: #6b665e;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
	pointer-events: none;
}
.riga__anteprima img { width: 100%; height: 100%; object-fit: cover; }
.riga:hover .riga__anteprima { opacity: 1; transform: none; }
.riga:hover { z-index: 6; }

/* ==========================================================================
   Scheda progetto
   ========================================================================== */
.progetto { padding-top: 176px; }
.progetto__head { position: relative; }
.progetto__sezione { font-size: 15px; line-height: 20px; color: var(--fg-60); font-variant-caps: all-small-caps; letter-spacing: .06em; }
.progetto__titolo { max-width: 923px; margin-top: 20px; font-size: 54px; line-height: 1; letter-spacing: 0; }
.progetto__azioni { position: absolute; top: -16px; right: 0; display: flex; gap: 12px; }
.progetto__azioni .btn-round--chiudi { margin-left: 12px; }

.scheda {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 var(--gap);
	margin-top: 48px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
.scheda__col { padding-top: 1px; }
.scheda__col--tipologia { grid-column: span 2; }
.scheda--crediti .scheda__col--tipologia { grid-column: span 1; }
.scheda dt { font-size: 15px; line-height: 20px; letter-spacing: .06em; font-variant-caps: small-caps; color: var(--fg-60); }
.scheda dd { margin-top: 8px; font-size: 17px; line-height: 1.48; color: var(--fg-90); }

.progetto__testo { max-width: 923px; margin-top: 40px; font-size: 19px; line-height: 1.45; color: var(--fg-90); }

.tavole {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	margin-top: 64px;
}
.tavola { position: relative; overflow: hidden; aspect-ratio: 608 / 428; background: rgba(255, 255, 255, .04); }
.tavola--full { grid-column: 1 / -1; }
.tavola__img { width: 100%; height: 100%; object-fit: cover; }

.vicini {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-top: 96px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}
.vicini__item { display: flex; align-items: center; gap: 20px; max-width: 496px; }
.vicini__item--next { margin-left: auto; text-align: right; }
.vicini__testo { display: grid; gap: 4px; }
.vicini__titolo { font-size: 17px; line-height: 1.48; }
.vicini .btn-round span { display: block; }

/* ==========================================================================
   Contatti
   ========================================================================== */
.contatti { padding-top: 210px; }
.contatti__intro { max-width: 923px; font-size: 32px; line-height: 1.25; text-wrap: pretty; }
.contatti__recapiti {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px var(--gap);
	margin-top: 80px;
	padding-top: 19px;
	border-top: 1px solid var(--line);
}
.contatti__col .label { margin: 0 0 10px; font-weight: 400; }
.contatti__col p { font-size: 17px; line-height: 25px; }
.contatti__col p + p { margin-top: 10px; }
.contatti__bio { font-size: 16px !important; line-height: 1.35 !important; color: var(--fg-90); }
.contatti__clienti { margin-top: 90px; padding-top: 19px; border-top: 1px solid var(--line); }
.contatti__clienti .label { font-weight: 400; }
.contatti__elenco {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 var(--gap);
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--fg-90);
}
.contatti__elenco li + li { margin-top: 7px; }

/* Pagine generiche */
.pagina { padding-top: 210px; min-height: 60vh; }
.pagina__titolo { max-width: 923px; font-size: 54px; line-height: 1; margin-top: 20px; }
.testo { max-width: 720px; margin-top: 48px; font-size: 19px; line-height: 1.5; color: var(--fg-90); }
.testo h2, .testo h3 { margin: 1.6em 0 .5em; font-size: 26px; line-height: 1.2; color: var(--fg); }
.testo p, .testo ul, .testo ol { margin: 0 0 1em; }
.testo ul { list-style: disc; padding-left: 1.2em; }
.testo a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.elenco li + li { margin-top: 10px; }

/* ==========================================================================
   Footer e "torna su"
   ========================================================================== */
.site-footer.wrap {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin: 140px var(--gut) 0;
	padding: 28px 0 110px;
	border-top: 1px solid var(--line);
	font-size: 16px;
	line-height: 22px;
	color: var(--fg-90);
}
.sezione + .site-footer, .site-main:has(.sezione) + .site-footer { margin-top: 120px; }
.site-footer__logo { width: 210px; flex: none; }
.site-footer__col { display: flex; flex-direction: column; gap: 4px; }
.site-footer__legal { margin-left: auto; align-items: flex-end; text-align: right; color: var(--fg-60); }
.site-footer__links { display: flex; gap: 16px; }

.totop {
	position: fixed;
	right: 23px;
	bottom: 40px;
	z-index: 40;
	padding-bottom: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s,
		background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   Transizioni tra le pagine (Safari 18.2+, Chrome/Edge 126+)
   ========================================================================== */
@view-transition { navigation: auto; }
.bg { view-transition-name: sp-bg; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
::view-transition-group(sp-bg), ::view-transition-group(sp-header) { animation-duration: .45s; }
html.vt-progetto::view-transition-old(root), html.vt-progetto::view-transition-new(root) { animation-duration: .35s; }

/* Lenis (scorrimento morbido) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ==========================================================================
   Schermi più piccoli
   ========================================================================== */
@media (max-width: 1180px) {
	.griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.griglia .cella:nth-child(4n) .cella__anno { margin-right: calc(-1 * var(--gap)); }
	.griglia .cella:nth-child(3n) .cella__anno { margin-right: 0; }
	.site-footer.wrap { flex-wrap: wrap; row-gap: 24px; }
	.site-footer__legal { margin-left: 0; width: 100%; align-items: flex-start; text-align: left; }
}

@media (max-width: 900px) {
	:root { --header-h: 88px; }
	.site-header__bar { padding-top: 26px; align-items: center; }
	.site-header__logo { width: 200px; }
	.menu-toggle {
		display: block;
		position: relative;
		z-index: 2;
		font-size: 20px;
		padding-bottom: 3px;
	}
	.site-header__nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 40px;
		padding: 0 var(--gut);
		background: rgba(20, 21, 24, .94);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--ease), visibility .35s;
	}
	.menu-open .site-header { height: 100vh; height: 100dvh; transform: none; }
	.menu-open .site-header__nav { opacity: 1; visibility: visible; }
	.menu { flex-direction: column; gap: 14px; font-size: 34px; line-height: 1.2; }

	.sezione, .progetto { padding-top: 112px; }
	.contatti, .pagina { padding-top: 130px; }
	.registro__head { display: none; }
	.riga { grid-template-columns: 1fr; row-gap: 4px; }
	.riga__anno:empty, .riga__anno:has(.screen-reader-text:only-child) { display: none; }
	.riga__anteprima { display: none; }
	.progetto__titolo { font-size: 38px; margin-top: 16px; padding-right: 0; }
	.progetto__azioni { position: static; margin-top: 24px; }
	.scheda { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	.scheda__col--tipologia, .scheda--crediti .scheda__col--tipologia { grid-column: 1 / -1; }
	.tavole { grid-template-columns: 1fr; margin-top: 40px; }
	.tavola, .tavola--full { aspect-ratio: auto !important; }
	.tavola__img { height: auto; object-fit: contain; }
	.vicini { flex-direction: column; gap: 24px; }
	.contatti__intro { font-size: 26px; }
	.contatti__recapiti, .contatti__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pagina__titolo { font-size: 38px; }

	.home { --line-y: 66svh; --logo-w: clamp(220px, 52svh, 420px); }
	.home__anteprima { display: none; }
	.home__nav { font-size: 24px; }
}

@media (max-width: 600px) {
	.griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; --gap: 16px; }
	.griglia .cella:nth-child(3n) .cella__anno { margin-right: calc(-1 * var(--gap)); }
	.griglia .cella:nth-child(2n) .cella__anno { margin-right: 0; }
	.card__didascalia { left: 10px; right: 10px; bottom: 10px; }
	.card__titolo { font-size: 17px; }
	.contatti__recapiti, .contatti__elenco { grid-template-columns: 1fr; }
	.contatti__elenco li + li { margin-top: 5px; }
	.site-footer.wrap { flex-direction: column; padding-bottom: 80px; }
	.site-footer__logo { width: 180px; }
	.home__logo { left: calc(var(--gut) + 6px); }
	.home__linea, .home__indirizzo { left: calc(var(--gut) + 24px); }
	.home__contatti { top: 7svh; }
}

/* Touch: niente hover "appiccicoso" sulle card, didascalia sempre visibile */
@media (hover: none) {
	.card__velo { opacity: .85; background: linear-gradient(180deg, transparent 45%, rgba(20, 21, 24, .85) 100%); }
	.card__didascalia { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
	@view-transition { navigation: none; }
}