:root {
	--red: #A6182E;
	--gold: #CB9758;
	--bordeaux: #751026;
	--ink: #262426;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Plus Jakarta Sans", Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 700; }
.canvas { width: min(100%, 1000px); margin-inline: auto; container-type: inline-size; }
h2 { font-size: 5.7cqw; font-weight: 700; line-height: .94; letter-spacing: -.035em; }
h2 span { color: var(--gold); }

/* Copertina: proporzioni del mockup, illustrazione estesa oltre i bordi. */
.hero { background: var(--red); color: white; overflow: hidden; }
.hero-inner { position: relative; height: auto; aspect-ratio: 842 / 1148; }
.hero-inner::before, .hero-inner::after { content: ""; position: absolute; z-index: 2; bottom: -1px; width: 50vw; height: 6%; background: white; pointer-events: none; }
.hero-inner::before { right: 100%; border-radius: 100% 0 0 0; }
.hero-inner::after { left: 100%; border-radius: 0 100% 0 0; }
.hero h1 { position: absolute; top: 6.2%; left: 11.3%; width: 80%; }
.hero h1 img { width: 100%; }
.tagline { position: absolute; top: 43.5%; width: 100%; text-align: center; font-size: 4.32cqw; line-height: 1.12; letter-spacing: -.025em; }
.admission { position: absolute; z-index: 1; top: 61%; left: 11.9%; font-size: 4.15cqw; line-height: 1.05; font-weight: 700; }
.admission span, .days { color: var(--gold); }
.dates { position: absolute; z-index: 1; top: 54.5%; left: 54%; white-space: nowrap; }
.days { font-weight: 700; font-size: 4.5cqw; line-height: 1.2; }
.days .date-star { display: inline-block; width: 1.8cqw; height: auto; margin-inline: .2cqw; vertical-align: middle; }
.month { margin-top: 1.2cqw; font-size: 4.25cqw; line-height: 1.15; font-weight: 700; }
.hours { margin-top: 1.5cqw; font-size: 3.8cqw; line-height: 1.1; }
.holiday { margin-top: .6cqw; font-size: 2.65cqw; }
.village { position: absolute; bottom: 0; left: -12.2%; width: 199%; max-width: none; }

/* Presentazione. */
.introduction { padding-block: 8.5% 7.5%; text-align: center; }
@supports (width: 1cqw) {
	.introduction { padding-block: min(8.5vw, 85px) min(7.5vw, 75px); }
}
.introduction h2 { color: var(--red); margin-bottom: 6.7cqw; }
.story { width: 70%; margin-inline: auto; font-size: 3.18cqw; line-height: 1.29; letter-spacing: -.025em; }
.story p + p { margin-top: 4.6cqw; }
.story p:first-child strong { font-weight: 400; }
.story .free { color: var(--red); margin-top: 4.6cqw; }

/* Onde vettoriali, con i punti del raccordo presente nel PDF. */
.programme { position: relative; background: var(--red); color: white; padding-block: min(8.5vw, 85px) min(10vw, 100px); margin-top: min(7vw, 70px); }
.wave { position: absolute; display: block; width: 100%; height: min(12vw, 120px); fill: var(--red); pointer-events: none; }
.wave-top { bottom: calc(100% - 1px); }
.wave-bottom { bottom: -1px; fill: white; }
.programme-inner { position: relative; }
.programme h2 { text-align: center; margin-bottom: 5cqw; }
.schedule { text-align: center; font-size: 2.16cqw; line-height: 1.17; padding-bottom: 6cqw; }
.day + .day { margin-top: 1.1cqw; }
.day h3 { color: var(--gold); font-size: 2.8cqw; line-height: 1.15; }
.day ul { list-style: none; padding: 0; margin: 0; }
.day li strong { margin-right: .75cqw; white-space: nowrap; }
.stars { position: absolute; width: 8%; }
.stars-top { top: -6cqw; left: 14%; }
.stars-bottom { bottom: 3cqw; right: 10%; }

/* Gruppi e agenzie: due colonne come nel mockup. */
.groups { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 8%; padding: min(3vw,30px) 6.5% min(9vw,90px); position: relative; }
.groups h2 { grid-column: 1; grid-row: 1; color: var(--red); font-size: 5.57cqw; line-height: .99; margin-bottom: 5.8cqw; }
.group-copy { grid-column: 1; grid-row: 2; font-size: 2.24cqw; line-height: 1.22; letter-spacing: -.02em; }
.group-copy p + p { margin-top: 1.3cqw; }
.booking { grid-column: 2; grid-row: 1; align-self: end; text-align: center; margin-bottom: 5cqw; font-size: 2.7cqw; }
.button { display: inline-block; border: 0; border-radius: 2cqw; background: var(--gold); color: white; font: 700 3.56cqw/1.2 "Plus Jakarta Sans", Arial, sans-serif; padding: 1.2cqw 2.5cqw; margin-top: 1.3cqw; text-decoration: none; white-space: nowrap; cursor: pointer; }
.button:hover { background: var(--bordeaux); }
.button:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }
.bus { grid-column: 2; grid-row: 2; width: 100%; align-self: end; }

footer { background: var(--bordeaux); color: white; text-align: center; }
.footer-inner { padding-block: min(11vw,110px) min(16vw,160px); }
.credits { display: flex; justify-content: center; margin: 0 auto; width: 86%; }
.credit-group > p { color: var(--gold); font-size: 2.25cqw; margin-bottom: 3cqw; }
.logos { display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.logos img { width: 13cqw; height: 13cqw; object-fit: contain; }
.credit-group:first-child .logos img:first-child { width: 10cqw; }

.footer-links { margin-top: 40px; font-size: 14px; line-height: 1.6; }
.footer-links a { color: inherit; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--gold); }
.footer-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.footer-links span { margin-inline: 10px; }

/* Conservare la lettura dei testi sui telefoni senza ridurre l'intera pagina. */
@media (min-width: 1000px) {
	.groups { padding-inline: 65px; }
}
@media (max-width: 599px) {
	.hero h1 { top: 7%; }
	.introduction { padding-top: 36px; padding-bottom: 50px; }
	h2 { font-size: 7cqw; }
	.introduction h2 { margin-bottom: 30px; }
	.story { width: 84%; font-size: 18px; line-height: 1.4; }
	.story p + p { margin-top: 26px; }
	.story .free { margin-top: 28px; }
	.programme { padding-top: 30px; padding-bottom: 65px; }
	.programme h2 { margin-bottom: 28px; }
	.schedule { font-size: 14px; line-height: 1.4; padding: 0 20px 34px; }
	.day + .day { margin-top: 16px; }
	.day h3 { font-size: 19px; margin-bottom: 3px; }
	.day li { margin-top: 3px; }
	.stars-top { left: 6%; top: -5px; }
	.stars-bottom { bottom: -20px; right: 7%; }
	.groups { grid-template-columns: 1fr; padding: 20px 8% 45px; gap: 0; }
	.groups h2 { font-size: 35px; margin-bottom: 26px; }
	.group-copy { font-size: 16px; line-height: 1.4; }
	.group-copy p + p { margin-top: 14px; }
	.booking { grid-column: 1; grid-row: 3; margin: 28px 0 24px; font-size: 17px; }
	.button { font-size: 21px; padding: 11px 23px; border-radius: 14px; margin-top: 8px; }
	.bus { grid-column: 1; grid-row: 4; width: 90%; justify-self: center; }
	.footer-inner { padding: 45px 18px 55px; }
	.credits { width: 100%; }
	.credit-group { flex: 1; }
	.credit-group > p { font-size: 14px; margin-bottom: 20px; }
	.logos { gap: 10px; }
	.logos img { width: 17cqw; height: 21cqw; }
	.credit-group:first-child .logos img:first-child { width: 14cqw; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }