/* Palazzo Portovecchio — foglio di stile unico. Token dal brief di design (§4), nessuna dipendenza esterna. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #F3F4ED;
  --ink: #20392C;
  --muted: #5B695E;
  --line: #CBD3C6;
  --deep: #203C2E;
  --on-deep: #F1F4E9;
  --deep-muted: #D7E0D0;
  --deep-meta: #B9C7B4;
  --deep-line: rgba(241, 244, 233, .25);
  --accent: #DCF581;
  --on-accent: #223724;
  --accent-meta: #3F5A3E;
  --accent-line: rgba(34, 55, 36, .3);
  --dot: #9BBF2B;
  --carta: #E8EBDF;

  --font-titoli: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-testo: "Manrope", Arial, sans-serif;

  --margine: clamp(16px, 4vw, 64px);
  --sezione: clamp(72px, 9vw, 144px);
  --gap: clamp(32px, 6vw, 96px);
  --max: 1440px;
  --raggio: 6px;
  --durata: .5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-testo);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; border-radius: 2px; }
.su-scuro :focus-visible, .su-scuro:focus-visible { outline-color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-titoli); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

.contenitore { max-width: var(--max); margin-inline: auto; padding-inline: var(--margine); }
.punto { color: var(--dot); }
.su-scuro .punto { color: var(--accent); }
.visivamente-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--deep); color: var(--on-deep); padding: 10px 16px; border-radius: 999px; font-weight: 600;
}
.salta:focus { top: 12px; }

/* ---------- Tipografia ricorrente ---------- */
.etichetta {
  font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.su-scuro .etichetta { color: var(--deep-meta); }
.su-lime .etichetta { color: var(--accent-meta); }

.titolo-sezione {
  font-weight: 700; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.025em;
}
.titolo-sezione .smorzato { color: var(--muted); }
.lead { font-size: clamp(18px, 1.3vw, 20px); line-height: 1.65; max-width: 62ch; }
.secondario { font-size: 17px; color: var(--muted); }
.su-scuro .secondario { color: var(--deep-muted); }

.link-freccia {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; text-decoration: none;
}
.link-freccia:hover { text-decoration: none; }
.link-freccia span { transition: transform .2s; }
.link-freccia:hover span { transform: translateX(4px); }
.su-scuro .link-freccia { color: var(--accent); }

.pulsante {
  display: inline-flex; align-items: center; gap: 14px; justify-content: space-between;
  background: var(--deep); color: var(--on-deep); border-radius: 999px;
  padding: 12px 22px; font-weight: 600; font-size: 15px; text-decoration: none; min-height: 44px;
  transition: background .2s;
}
.pulsante:hover { background: var(--ink); text-decoration: none; }
.pulsante--grande { padding: 16px 28px; font-size: 18px; min-height: 56px; }

.cerchio {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 20px; border: 1px solid var(--ink); transition: transform .2s, background .2s;
}
.cerchio--lime { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 30;
  background: rgba(243, 244, 237, .94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.testata__riga { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marchio {
  font-family: var(--font-titoli); font-weight: 800; font-size: 17px; line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase; display: grid; gap: 2px; text-decoration: none;
}
.marchio:hover { text-decoration: none; }
.menu { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 40px); }
.menu ul { list-style: none; display: flex; gap: clamp(18px, 2.2vw, 36px); }
.menu ul a { font-size: 15px; font-weight: 500; text-decoration: none; padding: 12px 0; }
.menu ul a:hover, .menu ul a[aria-current="page"] { text-decoration: underline; }
.menu-btn {
  display: none; align-items: center; height: 44px; padding: 0 18px; border: 1px solid var(--ink);
  border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .menu {
    position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; gap: 16px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--margine) 24px;
    display: none;
  }
  .menu.aperto { display: flex; animation: scendi .25s ease-out; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu ul a { display: block; padding: 14px 0; font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .menu .pulsante { align-self: flex-start; font-size: 17px; padding: 14px 24px; }
}
@keyframes scendi { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Home: apertura ---------- */
/* Il titolo non va mai a capo: le due colonne ci sono solo quando c'è spazio per entrambe. */
.apertura {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 32px var(--gap); align-items: start;
  padding-block: clamp(56px, 7vw, 112px) clamp(40px, 4vw, 64px);
  animation: sali .6s ease-out both;
}
.apertura h1 {
  font-weight: 800; font-size: clamp(34px, 9.2vw, 120px); line-height: .92; letter-spacing: -.035em;
  text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 1440px) {
  .apertura { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); align-items: end; }
  .apertura h1 { font-size: clamp(64px, 6vw, 94px); }
}
.apertura .etichetta { margin-bottom: 20px; }
.apertura__testo { display: grid; gap: 28px; padding-bottom: 6px; }
.cta { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 17px; text-decoration: none; width: fit-content; }
.cta:hover { text-decoration: none; }
.cta:hover .cerchio { transform: translateX(4px); }
.cta__testo { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
@keyframes sali { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


.foto-principale { padding-inline: clamp(8px, 1.6vw, 24px); }
.foto-principale figure { margin: 0 auto; max-width: 1680px; }
/* width esplicita: senza, max-height si trasferisce sulla larghezza via aspect-ratio e la foto resta a sinistra. */
.foto-principale picture, .foto-principale .cornice { width: 100%; aspect-ratio: 16 / 9; max-height: 820px; border-radius: var(--raggio); overflow: hidden; background: var(--line); }
.foto-principale img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (max-width: 700px) { .foto-principale picture, .foto-principale .cornice { aspect-ratio: 4 / 5; } }

.didascalia {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  padding: 14px 8px 0; font-size: 14px; color: var(--muted);
}
.didascalia a { color: var(--ink); font-weight: 600; }

/* ---------- Sezioni a due colonne ---------- */
.sezione { padding-block: var(--sezione); }
.sezione--filetto { border-bottom: 1px solid var(--line); }
.sezione--senza-alto { padding-top: 0; }
.azioni__pulsante { margin-top: 32px; }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px var(--gap); }
.due-colonne > .etichetta { padding-top: 14px; }
.manifesto h2 { margin-bottom: 32px; }
.manifesto__link { margin-top: 28px; }

/* ---------- Cinque date ---------- */
.date-chiave { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.date-chiave li { border-right: 1px solid var(--line); }
.date-chiave li:last-child { border-right: 0; }
.date-chiave a { display: grid; gap: 10px; padding: 28px 20px 28px 0; text-decoration: none; height: 100%; }
.date-chiave li + li a { padding-left: 20px; }
.date-chiave a:hover .anno { color: var(--deep); }
.date-chiave a:hover .evento { text-decoration: underline; }
.anno { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(40px, 5vw, 76px); line-height: .9; letter-spacing: -.04em; }
.evento { font-size: 16px; line-height: 1.45; color: var(--muted); }
@media (max-width: 900px) {
  .date-chiave { grid-template-columns: 1fr 1fr; }
  .date-chiave li { border-right: 0; border-bottom: 1px solid var(--line); }
  .date-chiave li + li a, .date-chiave a { padding: 22px 12px 22px 0; }
  .date-chiave li:nth-child(even) a { padding-left: 12px; border-left: 1px solid var(--line); }
  .date-chiave li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .date-chiave li:last-child a { border-left: 0; padding-left: 0; }
}

/* ---------- Percorsi ---------- */
.intestazione-sezione { margin-bottom: clamp(40px, 5vw, 72px); align-items: end; }
.intestazione-sezione__destra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.percorsi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px); align-items: start; }
.percorsi > :nth-child(even) { margin-top: clamp(0px, 6vw, 96px); }
.percorsi > :nth-child(3) { grid-column: 2; grid-row: 2; }
.percorsi > :nth-child(4) { grid-column: 1; grid-row: 2; margin-top: 0; }
.scheda { display: grid; gap: 20px; text-decoration: none; }
.scheda:hover { text-decoration: none; }
.scheda__foto { border-radius: var(--raggio); overflow: hidden; background: var(--line); aspect-ratio: 4 / 3; }
.scheda__foto--quadrata { aspect-ratio: 1 / 1; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--durata) ease; }
.scheda:hover .scheda__foto img { transform: scale(1.03); }
.scheda__testo { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; gap: 16px; align-items: start; border-top: 1px solid var(--line); padding-top: 20px; }
.scheda__numero { font-size: 14px; letter-spacing: .1em; color: var(--muted); font-weight: 600; padding-top: 8px; }
.scheda h3 { font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; }
.scheda p { font-size: 17px; color: var(--muted); max-width: 48ch; }
.scheda:hover .cerchio { background: var(--ink); color: var(--bg); }
.scheda:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Fascia verde: il presente ---------- */
.su-scuro { background: var(--deep); color: var(--on-deep); }
.righe { list-style: none; border-top: 1px solid var(--line); }
.su-scuro .righe { border-color: var(--deep-line); }
.righe li { border-bottom: 1px solid var(--line); }
.su-scuro .righe li { border-color: var(--deep-line); }
.riga { display: grid; grid-template-columns: 150px minmax(0, 1fr) 32px; gap: 24px; align-items: baseline; padding: 28px 0; text-decoration: none; }
.riga:hover { text-decoration: none; }
.su-scuro .riga:hover { color: var(--accent); }
.riga time, .riga__meta { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.su-scuro .riga time { color: var(--deep-meta); }
.riga__titolo { font-family: var(--font-titoli); font-weight: 600; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.01em; display: block; margin-bottom: 6px; }
.riga__estratto { font-size: 16px; line-height: 1.5; color: var(--muted); display: block; }
.su-scuro .riga__estratto { color: var(--deep-muted); }
.presente h2 { margin: 20px 0 24px; }
.presente .secondario { max-width: 40ch; margin-bottom: 28px; }

/* ---------- Fascia lime: partecipa ---------- */
.su-lime { background: var(--accent); color: var(--on-accent); }
.su-lime .punto { color: var(--deep); }
.partecipa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px var(--gap); align-items: center; }
.partecipa h2 { margin: 20px 0 24px; }
.azioni { list-style: none; border-top: 1px solid var(--accent-line); }
.azioni li { border-bottom: 1px solid var(--accent-line); }
.azioni a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; align-items: baseline; text-decoration: none; }
.azioni a:hover .azioni__titolo { text-decoration: underline; }
.azioni__n { font-size: 14px; font-weight: 600; color: var(--accent-meta); }
.azioni__titolo { font-family: var(--font-titoli); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.azioni__nota { display: block; font-family: var(--font-testo); font-size: 15px; font-weight: 500; color: var(--accent-meta); letter-spacing: 0; }

/* ---------- Footer ---------- */
.piede { border-top: 1px solid var(--line); font-size: 15px; }
.piede__alto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding-block: clamp(48px, 5vw, 72px) 40px; }
.piede__alto p { color: var(--muted); max-width: 44ch; margin-top: 20px; }
.piede nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, auto); gap: 12px 40px; font-weight: 500; }
.piede nav a { text-decoration: none; }
.piede nav a:hover { text-decoration: underline; }
.piede__basso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* ---------- Pagine interne ---------- */
.intestazione-pagina { padding-block: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.intestazione-pagina h1 { font-weight: 800; font-size: clamp(40px, 6vw, 96px); line-height: .95; letter-spacing: -.035em; margin: 16px 0 24px; }
.intestazione-pagina .lead { max-width: 64ch; }
.briciole { font-size: 14px; color: var(--muted); }
.briciole a { color: var(--muted); }

.lettura { max-width: 68ch; }
.lettura > * + * { margin-top: 1.1em; }
.lettura h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin-top: 1.8em; }
.lettura h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.015em; margin-top: 1.6em; }
.lettura p, .lettura li { font-size: clamp(18px, 1.3vw, 20px); line-height: 1.7; }
.lettura ul, .lettura ol { padding-left: 1.2em; }
.lettura picture, .lettura img { border-radius: var(--raggio); margin-block: 8px; }
.lettura a { text-decoration: underline; }
.lettura blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--dot); color: var(--muted); }

.colonne-lettura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 48px var(--gap); padding-block: clamp(40px, 5vw, 72px) var(--sezione); align-items: start; }
.riquadro { border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 14px; font-size: 15px; position: sticky; top: 96px; }
.riquadro h2 { font-size: 14px; font-family: var(--font-testo); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.riquadro dl { margin: 0; display: grid; gap: 10px; }
.riquadro dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.riquadro dd { margin: 0 0 4px; }
.avviso { background: var(--carta); border-radius: var(--raggio); padding: 16px 18px; font-size: 15px; }

.figura-pagina { margin: clamp(32px, 4vw, 56px) 0 0; }
/* Foto di apertura delle pagine: intera, senza ritagli. */
.figura-pagina picture { display: flex; justify-content: center; }
.figura-pagina img { width: auto; max-width: 100%; height: auto; max-height: min(82vh, 920px); border-radius: var(--raggio); }

.griglia-schede { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px clamp(24px, 3vw, 40px); }
.griglia-schede .scheda__testo { grid-template-columns: minmax(0, 1fr) 48px; }
.griglia-schede .scheda__foto { aspect-ratio: 3 / 2; }
.scheda__vuota { aspect-ratio: 3 / 2; border-radius: var(--raggio); background: var(--carta); display: grid; place-items: center; font-family: var(--font-titoli); font-weight: 800; font-size: 56px; color: var(--line); }

/* ---------- Cronostoria ---------- */
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 14px; color: var(--muted); }
.legenda li { display: flex; align-items: center; gap: 8px; }

.affidabilita { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.affidabilita::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--deep); flex: none; }
.affidabilita--documentata::before { background: var(--deep); }
.affidabilita--fonte-secondaria::before { background: linear-gradient(90deg, var(--deep) 50%, transparent 50%); }
.affidabilita--tradizione-orale::before { border-style: dotted; }
.affidabilita--fonti-discordanti::before { border-color: #A3561C; background: transparent; }

.filtri { display: grid; gap: 14px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.filtri[hidden] { display: none; }
.filtri__gruppo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtri__gruppo > span { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 8px; min-width: 64px; }
.filtro {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; min-height: 36px;
}
.filtro:hover { border-color: var(--ink); }
.filtro[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.filtri__conteggio { font-size: 14px; color: var(--muted); }

.linea { list-style: none; }
.secolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 0 var(--gap); border-bottom: 1px solid var(--line); }
.secolo[hidden] { display: none; }
.secolo__titolo {
  font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.02em; line-height: 1;
  padding-block: 32px; align-self: start; position: sticky; top: 72px; background: var(--bg);
}
.secolo__titolo small { display: block; font-family: var(--font-testo); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 8px; }
.voci { list-style: none; }
.voce { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 32px; padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.voci > li:first-child .voce { border-top: 0; }
.voce[hidden] { display: none; }
.voce:target {
  background: linear-gradient(90deg, rgba(220, 245, 129, .5), rgba(220, 245, 129, 0) 75%);
  margin-inline: -20px; padding-inline: 20px; border-radius: var(--raggio);
}
.voce time { font-family: var(--font-titoli); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; padding-top: 2px; }
.voce h3 { font-weight: 700; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 8px; }
.voce h3 a { text-decoration: none; }
.voce h3 a:hover { text-decoration: underline; }
.voce__sintesi { max-width: 64ch; }
.voce__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--muted); }
.voce__fonti { list-style: none; margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); display: grid; gap: 4px; }
.voce__fonti a { color: var(--ink); }

.dati-aperti { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; padding-block: 40px var(--sezione); font-size: 15px; color: var(--muted); }

/* ---------- Storia per epoche ---------- */
.epoca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px var(--gap); padding-block: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.epoca h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin-top: 10px; }
.epoca .righe .riga { grid-template-columns: 120px minmax(0, 1fr); padding: 18px 0; }
.epoca .riga__titolo { font-size: 19px; margin: 0; }

/* ---------- Pagine lunghe a sezioni (luogo, storia) ---------- */
.colonne-lettura--compatte { padding-block: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.indice ol { list-style: none; columns: 2 240px; column-gap: 40px; }
.indice li { break-inside: avoid; border-top: 1px solid var(--line); }
.indice a { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; font-weight: 600; font-size: 17px; text-decoration: none; }
.indice a:hover { text-decoration: underline; }
.indice a span { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--muted); min-width: 28px; }
.indice h2 { margin-bottom: 16px; }
.indice--epoche { margin-top: 32px; }
.indice--epoche a span { min-width: 92px; }

.tratto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px var(--gap); padding-block: clamp(56px, 7vw, 112px); border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.tratto__testa { align-self: start; position: sticky; top: 104px; }
.tratto__testa h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -.025em; margin: 12px 0 20px; }
.tratto__fonti { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 34ch; }
.tratto__fonti span { display: block; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; margin-bottom: 4px; }
.tratto__foto { margin: 0 0 clamp(28px, 3vw, 44px); }
.tratto__foto picture, .tratto__foto > img { border-radius: var(--raggio); overflow: hidden; aspect-ratio: 3 / 2; background: var(--line); }
.tratto__foto img { width: 100%; height: 100%; object-fit: cover; }
.tratto .lettura h3 { margin-top: 1.4em; }

.date-epoca { margin-top: 36px; border-top: 1px solid var(--ink); }
.date-epoca summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; }
.date-epoca summary::-webkit-details-marker { display: none; }
.date-epoca summary::after { content: "+"; font-size: 22px; line-height: 1; }
.date-epoca[open] summary::after { content: "–"; }
.date-epoca .riga { grid-template-columns: 150px minmax(0, 1fr) 24px; padding: 16px 0; }
.date-epoca .riga__titolo { font-size: 18px; margin: 0; }

/* ---------- Contatti ---------- */
.contatti-email__indirizzo { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(20px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; white-space: nowrap; user-select: all; }
@media (max-width: 420px) { .contatti-email__indirizzo { white-space: normal; overflow-wrap: anywhere; } }
.contatti-email__indirizzo a { text-decoration: none; border-bottom: 3px solid var(--dot); }
.contatti-email__indirizzo a:hover { border-color: var(--ink); }
.riga--contatto { grid-template-columns: 56px minmax(0, 1fr) 32px; }
li[id] { scroll-margin-top: 96px; }
li:target .riga--contatto { background: linear-gradient(90deg, rgba(220, 245, 129, .5), rgba(220, 245, 129, 0) 75%); margin-inline: -20px; padding-inline: 20px; border-radius: var(--raggio); }

/* ---------- Domande ---------- */
.domande { margin: 0; border-top: 1px solid var(--ink); }
.domande__voce { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.domande__voce:target {
  background: linear-gradient(90deg, rgba(220, 245, 129, .5), rgba(220, 245, 129, 0) 75%);
  margin-inline: -20px; padding-inline: 20px; border-radius: var(--raggio);
}
.domande dt { font-family: var(--font-titoli); font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 12px; }
.domande dt a { text-decoration: none; }
.domande dt a:hover { text-decoration: underline; }
.domande dd { margin: 0; display: grid; gap: 14px; justify-items: start; }
.domande dd p { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; max-width: 66ch; }
.domande__indice { list-style: decimal-leading-zero; padding-left: 2.2em; display: grid; gap: 8px; font-size: 15px; }
.domande__indice a { text-decoration: none; }
.domande__indice a:hover { text-decoration: underline; }

/* ---------- Comitato ---------- */
.titolo-sezione--spazio { margin: 20px 0 24px; }
.obiettivi { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.obiettivi li { padding: 28px 24px 8px 0; border-right: 1px solid var(--line); }
.obiettivi li + li { padding-left: 24px; }
.obiettivi li:last-child { border-right: 0; }
.obiettivi__n { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(36px, 3.6vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--dot); }
.obiettivi h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -.015em; margin: 18px 0 10px; }
.obiettivi p { font-size: 16px; color: var(--muted); }
.aderenti { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.aderenti li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.aderenti__tipo { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.aderenti__nome { font-family: var(--font-titoli); font-weight: 700; font-size: 18px; line-height: 1.25; }
.aderenti__nome small { font-family: var(--font-testo); font-weight: 500; font-size: 13px; color: var(--muted); }
.video { position: relative; display: block; border-radius: var(--raggio); overflow: hidden; text-decoration: none; background: var(--ink); max-width: 560px; }
.video picture, .video img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--durata) ease, opacity .3s; }
.video:hover img { transform: scale(1.03); opacity: .85; }
.video__etichetta { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 12px; background: var(--bg); color: var(--ink); border-radius: 999px; padding: 6px 18px 6px 6px; font-weight: 600; font-size: 16px; }
.video:hover .video__etichetta { text-decoration: underline; }

/* ---------- Mappa della tenuta ---------- */
.mappa { border-bottom: 1px solid var(--line); }
.mappa__griglia { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 32px var(--gap); align-items: start; }
.mappa__figura { margin: 0; }
.mappa__svg { width: 100%; max-height: 86vh; background: var(--bg); font-family: var(--font-testo); }
.m-acqua { fill: none; stroke: #8DB3BE; stroke-width: 5; stroke-linecap: round; }
.m-zona { stroke: var(--line); stroke-width: 1.5; }
.m-zona--nord { fill: var(--carta); }
.m-zona--sud { fill: url(#tratteggio); }
.m-tratteggio { stroke: var(--line); stroke-width: 2; }
.m-strada { fill: none; stroke: #A9B4A6; stroke-width: 4; stroke-linecap: round; }
.m-strada--grande { stroke-width: 7; stroke: #B9C2B3; }
.m-strada--minore { stroke-width: 2; stroke-dasharray: 5 4; }
.m-viale { stroke: #B9C2B3; stroke-width: 6; }
.m-paese { fill: var(--muted); }
.m-albero { fill: #9BBF2B; opacity: .8; }
.m-albero--bosco { opacity: .55; }
.m-bosco { fill: rgba(155, 191, 43, .14); stroke: var(--dot); stroke-width: 1.2; stroke-dasharray: 4 3; }
.m-edificio { fill: var(--ink); transition: fill .2s; }
.m-edificio--palazzo { fill: #A6503A; }
.m-torre { fill: var(--ink); }
.m-casa { fill: var(--muted); }
.m-barchessone { fill: #C9874E; stroke: var(--ink); stroke-width: 1.2; transition: fill .2s; }
.m-barchessone--perso { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.m-barchessone--aperto { fill: rgba(201, 135, 78, .35); stroke-dasharray: 2 2; }
.m-riquadro > rect { fill: var(--bg); stroke: var(--muted); stroke-dasharray: 6 4; }
.m-etichetta { font-size: 13px; font-weight: 600; fill: var(--ink); }
.m-etichetta--piccola { font-size: 11px; font-weight: 500; fill: var(--muted); }
.m-etichetta--acqua { font-size: 11px; font-weight: 600; fill: #4F7C8A; letter-spacing: .04em; }
.m-etichetta--zona { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.m-etichetta--paese { font-size: 12px; fill: var(--on-deep); }
.m-etichetta--perso { font-style: italic; }
.m-numero circle { fill: var(--accent); stroke: var(--deep); stroke-width: 1.5; transition: fill .2s, transform .2s; }
.m-numero text { font-family: var(--font-titoli); font-size: 13px; font-weight: 800; fill: var(--on-accent); pointer-events: none; }
.m-nord path { fill: var(--ink); }
.m-nord text { font-family: var(--font-titoli); font-weight: 800; font-size: 13px; fill: var(--ink); }
.m-punto { cursor: pointer; outline: none; }
.m-punto:focus-visible circle, .m-punto.attivo circle { fill: var(--deep); }
.m-punto:focus-visible text, .m-punto.attivo text { fill: var(--accent); }
.m-punto:hover .m-edificio, .m-punto.attivo .m-edificio, .m-punto:focus-visible .m-edificio { fill: var(--dot); }
.m-punto:hover .m-barchessone:not(.m-barchessone--perso), .m-punto.attivo .m-barchessone:not(.m-barchessone--perso) { fill: var(--accent); }
.m-numero:hover circle { fill: var(--deep); }
.m-numero:hover text { fill: var(--accent); }

.mappa__legenda { list-style: none; counter-reset: none; border-top: 1px solid var(--line); position: sticky; top: 104px; }
.mappa__legenda li { border-bottom: 1px solid var(--line); }
.mappa__legenda a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; text-decoration: none; }
.mappa__legenda a:hover .mappa__nome, .mappa__legenda a.attivo .mappa__nome { text-decoration: underline; }
.mappa__n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--deep); display: grid; place-items: center; font-family: var(--font-titoli); font-weight: 800; font-size: 14px; color: var(--on-accent); transition: background .2s, color .2s; }
.mappa__legenda a.attivo .mappa__n, .mappa__legenda a:hover .mappa__n { background: var(--deep); color: var(--accent); }
.mappa__nome { display: block; font-family: var(--font-titoli); font-weight: 700; font-size: 19px; line-height: 1.2; }
.mappa__nota { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }

/* ---------- Rassegna ---------- */
.anno-rassegna { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 0 var(--gap); border-bottom: 1px solid var(--line); padding-block: 32px; }
.anno-rassegna h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.anno-rassegna .riga { grid-template-columns: 170px minmax(0, 1fr) 24px; padding: 20px 0; }

/* ---------- Animazioni d'ingresso (solo CSS, senza JS) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra { animation: sali linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .due-colonne, .intestazione-sezione__destra, .percorsi, .partecipa, .piede__alto,
  .colonne-lettura, .secolo, .epoca, .anno-rassegna, .tratto { grid-template-columns: minmax(0, 1fr); }
  .tratto__testa { position: static; }
  .mappa__griglia { grid-template-columns: minmax(0, 1fr); }
  .obiettivi { grid-template-columns: minmax(0, 1fr); }
  .obiettivi li, .obiettivi li + li { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .aderenti { grid-template-columns: minmax(0, 1fr); }
  .mappa__legenda { position: static; }
  .mappa__svg { max-height: none; }
  .date-epoca .riga { grid-template-columns: minmax(0, 1fr) 24px; }
  .percorsi > * { margin-top: 0 !important; grid-column: auto !important; grid-row: auto !important; }
  .riga { grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 16px; padding: 22px 0; }
  .riga time { grid-column: 1 / -1; }
  .anno-rassegna .riga { grid-template-columns: minmax(0, 1fr) 24px; }
  .epoca .righe .riga { grid-template-columns: minmax(0, 1fr); }
  .voce { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .secolo__titolo { position: static; padding-block: 28px 4px; }
  .riquadro { position: static; }
  .piede nav ul { grid-template-columns: 1fr 1fr; }
  .filtri__gruppo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margine) * -1); padding-inline: var(--margine); }
  .filtri__gruppo::-webkit-scrollbar { display: none; }
  .filtro { white-space: nowrap; flex: none; }
  .filtri__gruppo > span { min-width: auto; flex: none; }
  .scheda__testo { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; }
  .cerchio { width: 44px; height: 44px; }
}