/* ==========================================================================
   Parrocchia Sant'Antonio Abate — Carmiano · foglio di stile unico
   Identità «A · Il luogo» (spec 2026-10-15-grafica-a-design.md; prototipo docs/proposte/a/).
   Nessun framework, nessuna build, nessun CDN.

   DECISIONI
   - Idea: la luce delle luminarie della festa accende una pagina notturna. I colori vengono dalle
     fotografie: il buio di gennaio (fondo), l'oro delle lampadine (unico accento), il blu del cielo
     all'ora della processione (piè di pagina), la pietra leccese (campi chiari: santino degli orari,
     il Santo, biglietti).
   - Caratteri: Barlow Condensed 600/700 in maiuscolo per i titoli, enormi come il titolo di un film
     in fondo alla foto; Barlow 400/500 per il testo. Scala fluida: piccolo 14 · testo 17→19 ·
     lead 22→30 · titolo 44→88 · display 68→192.
   - Forme piatte: niente ombre, niente raggi, niente bordi decorativi; le superfici si separano per
     salto di tono (fondo → surface → surface-2) o per campo di pietra.
   - Movimento: ingresso della home (le luminarie si accendono, il titolo sale) una volta per sessione;
     entrate sfalsate allo scorrimento; transizioni tra le pagine (View Transitions); risposte a
     hover/focus/pressione. Tutto spento con prefers-reduced-motion; il contenuto è visibile senza JS.
   - Pagine interne: «di giorno» (vedi la sezione «Giorno e notte» in fondo): apertura .apertura con foto vera,
     corpo .corpo con testo e colonna laterale utile, strisce di foto del luogo.
   - Il pannello (body.admin, body.admin-accesso) usa gli stessi caratteri e una variante chiara
     sulla pietra, per restare funzionale e leggibile.
   ========================================================================== */

/* ---------- Caratteri (ospitati sul sito, licenza OFL: fonts/OFL.txt) ---------- */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 100 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }

/* ---------- Token ---------- */
:root {

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", system-ui, sans-serif;

  --step-small: 0.875rem;
  --step-note: 1rem; /* testo corrente minuto (note, date, indirizzi): mai sotto i 16 px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --step-sub: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --step-head: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);
  --step-display: clamp(4.25rem, 0.2rem + 11vw, 12rem);

  --margin: clamp(1rem, 3vw, 3rem);
  --gutter: clamp(1rem, 2vw, 1.75rem);
  --section: clamp(6rem, 11vw, 11rem);
  --bar-h: 4.5rem;
  --measure: 38rem;
  --max: 84rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

}

/* palette notturna: la home, la festa, la barra, il menu e il piè di pagina di tutte le pagine */
:root, .giorno .bar, .giorno .menu, .giorno .piede {
  color-scheme: dark;

  /* palette A */
  --bg: #0a0d16;          /* la notte di gennaio */
  --surface: #131a2a;     /* un tono sopra */
  --surface-2: #1c2539;
  --surface-3: #232d44;
  --ink: #eeede9;         /* luce calda sulla pietra */
  --muted: #b9b1a2;
  --accent: #f2c14e;      /* le lampadine delle luminarie */
  --accent-strong: #ffd772;
  --accent-ink: #0a0d16;
  --accent-text: var(--accent); /* l'oro come colore di testo: sul buio è l'accento stesso */
  --stone: #e6e1d6;       /* pietra leccese */
  --stone-2: #d6cfc0;
  --stone-3: #cfc09f;
  --stone-ink: #121826;
  --stone-muted: #4c4a45;
  --sky: #1a2a52;         /* il cielo all'ora della processione */
  --verde: #3f9a5a;
  --line: #27314a;
}

/* palette «di giorno» per la vita della parrocchia: l'intonaco caldo e la pietra leccese della chiesa (foto chiesa-interno),
   l'inchiostro quasi nero, l'oro delle luminarie come unico accento (pieno sui pulsanti; come testo un oro scuro).
   Contrasti AA: ink 15,6:1 e muted 7,1:1 sull'intonaco; muted 5,7:1 su surface-2; accent-text 5,7:1; ink su oro 10,5:1. */
.giorno {
  color-scheme: light;
  --bg: #f4f2ee;          /* intonaco: il bianco caldo delle pareti */
  --surface: #ebe7e0;
  --surface-2: #e2dbcf;
  --surface-3: #d5cbb8;
  --ink: #1b1813;
  --muted: #574f43;
  --accent: #f2c14e;
  --accent-strong: #e8b232;
  --accent-ink: #1b1813;
  --accent-text: #7a5800;
  --pietra: #e6d6b3;      /* pietra leccese, il campo del titolo */
  --carta: #fffcf5;       /* la carta del santino */
  --line: #d6c7ab;
}

/* la barra, il menu e il piè di pagina restano di notte anche nelle pagine di giorno */
.giorno .bar, .giorno .menu, .giorno .piede { color: var(--ink); }

/* ruoli derivati: ricalcolati dove cambia la palette */
:root, .giorno, .giorno .bar, .giorno .menu, .giorno .piede {
  /* ruoli usati dalle pagine non ancora ridisegnate e dal pannello (stessi nomi della grafica precedente) */
  --testo: var(--ink);
  --testo-tenue: var(--muted);
  --testo-tenue-tono: var(--muted);
  --titolo: var(--ink);
  --etichetta: var(--accent);
  --azione: var(--accent);
  --azione-hover: var(--accent-strong);
  --azione-testo: var(--accent-ink);
  --azione-2: var(--surface-2);
  --azione-2-testo: var(--ink);
  --campo-scuro: var(--surface);
  --campo-scuro-testo: var(--ink);
  --focus: var(--accent);
  --selezione: var(--accent);
  --wood: var(--accent);
  --wood-scuro: var(--accent-strong);
  --ochre: var(--accent);
  --ochre-chiaro: var(--accent-strong);
  --olive: var(--accent);
  --sabbia: var(--surface-2);
  --intonaco-2: var(--surface);
  --crema: var(--ink);
  --f-titoli: var(--font-display);
  --f-testo: var(--font-text);
  --t-piccolo: var(--step-small);
  --t-testo: var(--step-body);
  --t-grande: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  --t-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --t-h2: var(--step-sub);
  --t-h1: var(--step-head);
  --t-display: var(--step-head);
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --margine: var(--margin);
  --sezione: clamp(4rem, 2.5rem + 6vw, 8rem);
  --larghezza: 84rem;
  --misura: var(--measure);
  --r-piccolo: 0;
  --r: 0;
  --r-pillola: 0;
  --ombra-scheda: none;
  --ombra-scheda-su: none;
  --ombra-alta: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --durata-breve: var(--t-hover);
  --durata: var(--t-ui);
  --durata-lunga: var(--t-reveal);
  --testata-h: var(--bar-h);
}

/* pannello: stessi caratteri, variante chiara sulla pietra (funzionale, lunghe sessioni di lavoro) */
body.admin, body.admin-accesso {
  color-scheme: light;
  --bg: #efebe2;
  --surface: #fbfaf7;
  --surface-2: var(--stone-2);
  --surface-3: var(--stone-3);
  --ink: var(--stone-ink);
  --muted: #55524b;
  --line: #d6cfc0;
  --testo: var(--stone-ink);
  --testo-tenue: #55524b;
  --testo-tenue-tono: #55524b;
  --titolo: var(--stone-ink);
  --etichetta: #6b5414;
  --azione: var(--stone-ink);
  --azione-hover: #263049;
  --azione-testo: #ffffff;
  --azione-2: var(--stone-2);
  --azione-2-testo: var(--stone-ink);
  --campo-scuro: var(--sky);
  --campo-scuro-testo: #ffffff;
  --focus: #8a6a12;
  --selezione: var(--accent);
  --wood: var(--stone-ink);
  --wood-scuro: #263049;
  --ochre: #b98a1c;
  --ochre-chiaro: var(--accent);
  --olive: #6b5414;
  --sabbia: var(--stone-2);
  --intonaco-2: #e6e1d6;
  --crema: #ffffff;
  --r-piccolo: 4px;
  --r: 6px;
  --ombra-scheda: 0 0 0 1px var(--line);
  --ombra-scheda-su: 0 0 0 1px var(--stone-3);
  --ombra-alta: 0 18px 48px -18px rgba(18, 24, 38, 0.35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scroll-padding-top: 1.5rem;
  scrollbar-color: var(--surface-3) var(--bg);
  accent-color: var(--accent);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}
main { flex: 1 0 auto; }
main:focus { outline: none; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; text-wrap: balance; color: var(--titolo); }
h1 { font-size: var(--step-head); text-transform: uppercase; line-height: 0.92; }
h2 { font-size: var(--step-sub); text-transform: uppercase; line-height: 0.95; }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-grande); font-weight: 600; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent-text); }
p { max-width: 62ch; text-wrap: pretty; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cifre, time { font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }
.sr-only, .solo-lettori {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: var(--margin); top: -4rem; z-index: 60;
  background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; text-decoration: none; font-weight: 500;
}
.salta:focus { top: 0.75rem; }

/* ---------- Controlli ---------- */
.button, .pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  border: 0; border-radius: 0;
  background: var(--azione); color: var(--azione-testo);
  font-family: var(--font-text); font-size: 1rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button { font-size: var(--step-body); }
.button:active, .pulsante:active { transform: scale(0.97); }
.button--line, .pulsante--secondario { background: var(--azione-2); color: var(--azione-2-testo); }
.button--stone { background: var(--stone-ink); color: var(--stone); }
.pulsante--chiaro { background: var(--stone); color: var(--stone-ink); }
.pulsante .icona, .button .icona { width: 1.15rem; height: 1.15rem; }
.pulsante[disabled], .pulsante[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.pulsanti { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; max-width: none; }
.link { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.link-freccia {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent);
}
.link-freccia .icona { width: 1.1rem; height: 1.1rem; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button:hover, .pulsante:hover { background-color: var(--azione-hover); color: var(--azione-testo); }
  .button--line:hover, .pulsante--secondario:hover { background-color: var(--accent); color: var(--accent-ink); }
  .button--stone:hover { background-color: var(--sky); color: #fff; }
  .pulsante--chiaro:hover { background-color: #fff; color: var(--stone-ink); }
  .link:hover { text-decoration-color: currentColor; }
  .link-freccia:hover .icona { transform: translateX(4px); }
}
.icona { width: 1.375rem; height: 1.375rem; flex: none; stroke: currentColor; }
.icona--grande { width: 2rem; height: 2rem; }
.icona--indietro { transform: scaleX(-1); }

.campo {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 0.95rem;
  border: 1px solid var(--surface-3); border-radius: var(--r-piccolo);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.campo::placeholder { color: var(--muted); opacity: 0.8; }
.campo:hover { border-color: var(--muted); }
.campo:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: transparent; }
.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Barra in alto ---------- */
.bar {
  height: var(--bar-h); display: flex; align-items: center; gap: 2rem;
  padding-inline: var(--margin); background: var(--bg); position: relative; z-index: 5;
  view-transition-name: barra;
}
.bar__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-size: var(--step-small); line-height: 1.2; }
.bar__brand img { width: 2.6rem; height: auto; background: none; transition: transform var(--t-hover) var(--ease-out); }
.bar__nav { margin-left: auto; display: flex; gap: 1.75rem; }
.bar__nav a { padding-block: 0.5rem; }
.bar__nav a[aria-current="page"] { text-decoration-color: var(--accent); }
.bar__menu {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  background: var(--surface-2); color: var(--ink); text-decoration: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.bar__menu:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .bar__brand:hover img { transform: translateY(-2px); }
  .bar__menu:hover { background: var(--accent); color: var(--accent-ink); }
}

/* ---------- Menu a tutto schermo ---------- */
.menu {
  margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  padding: 0; border: 0; background: var(--bg); color: var(--ink);
}
.menu::backdrop { background: var(--bg); }
.menu__in { min-height: 100%; padding: 0 var(--margin) 3rem; display: grid; align-content: start; gap: 2.5rem; }
.menu__top { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu__close {
  min-height: 2.75rem; padding: 0 1.1rem; background: var(--surface-2);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.menu__close:active { transform: scale(0.97); }
.menu__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.75rem var(--gutter); }
.menu__list > li > a, .menu__gruppo {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-head); line-height: 0.95;
  text-transform: uppercase; text-decoration: none; transition: color var(--t-hover) ease;
}
.menu__gruppo { display: block; color: var(--muted); }
.menu__list > li > a[aria-current="page"], .menu__list ul a[aria-current="page"] { color: var(--accent-text); }
.menu__list ul { margin-top: 0.6rem; display: flex; gap: 0.4rem 1.25rem; flex-wrap: wrap; font-size: var(--step-lead); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; }
.menu__contatti { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; color: var(--muted); font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) {
  .menu__list a:hover { color: var(--accent-text); }
  .menu__close:hover { background: var(--accent); color: var(--accent-ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__in { animation: menu-in var(--t-ui) var(--ease-out); }
  .menu[open] .menu__list > li { animation: emergi 420ms var(--ease-out) both; }
  .menu[open] .menu__list > li:nth-child(2) { animation-delay: 30ms; }
  .menu[open] .menu__list > li:nth-child(3) { animation-delay: 60ms; }
  .menu[open] .menu__list > li:nth-child(4) { animation-delay: 90ms; }
  .menu[open] .menu__list > li:nth-child(5) { animation-delay: 120ms; }
  .menu[open] .menu__list > li:nth-child(6) { animation-delay: 150ms; }
  .menu[open] .menu__list > li:nth-child(7) { animation-delay: 180ms; }
  .menu[open] .menu__list > li:nth-child(8) { animation-delay: 210ms; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Hero della home: il luogo, il nome come titolo di un film ---------- */
.hero {
  height: min(calc(100svh - var(--bar-h)), 860px); min-height: 34rem; /* tetto: sugli schermi alti la foto non diventa una torre */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  overflow: clip; background: var(--bg);
}
.hero__photo { position: relative; overflow: hidden; background: var(--bg); view-transition-name: hero-foto; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; background: var(--bg); }
.hero__dark { filter: brightness(0.28) saturate(0.25); }
.hero__band { padding: 1.1rem var(--margin) 1.4rem; }
.hero__title { font-size: var(--step-display); line-height: 0.84; letter-spacing: -0.012em; text-transform: uppercase; color: var(--ink); white-space: nowrap; view-transition-name: hero-titolo; }
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; }
.hero__line { max-width: 52ch; }
.lines .line { display: inline-block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; vertical-align: top; }
.lines [data-line] { display: inline-block; }

/* l'ingresso: le luminarie si accendono, poi il titolo sale (una volta per sessione, avvio.js) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.intro-done) .hero__lit { animation: accendi 1250ms var(--ease-soft) both; }
  html.js:not(.intro-done) .hero__photo { animation: respiro 1500ms var(--ease-soft) both; }
  html.js:not(.intro-done) .hero__title [data-line] { transform: translateY(105%); animation: sali 820ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 520ms); }
  html.js:not(.intro-done) .hero [data-rise] { opacity: 0; transform: translateY(14px); animation: emergi 640ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 820ms); }
}
@keyframes accendi {
  0%   { clip-path: circle(0% at 8% 54%); opacity: 0; }
  6%   { opacity: 0.85; }
  10%  { opacity: 0.25; }
  16%  { opacity: 1; }
  100% { clip-path: circle(150% at 8% 54%); opacity: 1; }
}
@keyframes respiro { from { transform: scale(1.04); } to { transform: none; } }
@keyframes sali { to { transform: none; } }
@keyframes emergi { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Entrate allo scorrimento (site.js aggiunge .is-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; }
  .js .shutter[data-reveal] img { clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 1000ms var(--ease-in-out), transform 1500ms var(--ease-soft); transition-delay: calc(var(--i, 0) * 75ms); }
  .js .shutter[data-reveal] figcaption, .js .shutter[data-reveal] .santo__over { opacity: 0; transition: opacity 600ms ease 500ms; }
  .js .shutter[data-reveal].is-in img { clip-path: inset(0 0 0 0); transform: none; }
  .js .shutter[data-reveal].is-in figcaption, .js .shutter[data-reveal].is-in .santo__over { opacity: 1; }
  /* Riserva: se site.js non parte (errore, blocco), dopo 3 s il contenuto compare comunque. site.js mette .reveal-ok su <html>. */
  html.js:not(.reveal-ok) [data-reveal]:not(.shutter),
  html.js:not(.reveal-ok) .shutter[data-reveal] figcaption,
  html.js:not(.reveal-ok) .shutter[data-reveal] .santo__over { animation: rivela-tardi 600ms var(--ease-out) 3s forwards; }
  html.js:not(.reveal-ok) .shutter[data-reveal] img { animation: svela-tardi 900ms var(--ease-in-out) 3s forwards; }
}
@keyframes rivela-tardi { to { opacity: 1; transform: none; } }
@keyframes svela-tardi { to { clip-path: inset(0 0 0 0); transform: none; } }
figure.shutter { overflow: hidden; background: var(--surface); }
figure.shutter figcaption { position: relative; background: var(--bg); margin-top: 0 !important; padding-top: 0.65rem; }
.santo figure.shutter { background: var(--stone-2); }

/* ---------- Home: intro e comunità ---------- */
.intro { padding-block: var(--section); }
.intro__grid { row-gap: 0; }
.intro__text { grid-column: 7 / 13; grid-row: 1; font-size: var(--step-lead); line-height: 1.3; text-indent: 3em; max-width: 34ch; }
.intro__photo { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.intro__note { grid-column: 1 / 5; grid-row: 3; margin-top: 1.25rem; font-size: var(--step-note); color: var(--muted); max-width: 32ch; }
.intro__note a { font-size: inherit; color: var(--ink); text-decoration-color: var(--accent); }
.comunita { grid-column: 7 / 13; grid-row: 2 / 4; margin-top: 4.5rem; }
.comunita__title { font-size: var(--step-lead); line-height: 1; letter-spacing: 0.01em; color: var(--accent-text); }
.comunita__list { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
.comunita__list div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--gutter); }
.comunita__list dt { font-weight: 500; }
.comunita__list dt a { text-decoration-color: var(--accent); }

/* ---------- Home: la settimana ---------- */
.settimana { background: var(--surface); padding: var(--section) var(--margin); }
.settimana__grid { display: grid; grid-template-columns: 19rem minmax(0, 40rem) minmax(0, 1fr); gap: clamp(2rem, 3.4vw, 3.5rem); align-items: start; }
.settimana__grid--senza-orari { grid-template-columns: 19rem minmax(0, 1fr); }
.settimana__grid--senza-avvisi { grid-template-columns: 19rem minmax(0, 1fr); } /* senza avvisi né appuntamenti il santino prende le colonne libere */
.settimana__grid--senza-orari.settimana__grid--senza-avvisi { grid-template-columns: minmax(0, 24rem); }
.settimana__lato { position: sticky; top: 1.5rem; display: grid; gap: 1.5rem; margin-top: 0.5rem; }
.settimana__title, .avvisi__title, .agenda__title { font-size: var(--step-head); line-height: 0.92; margin-bottom: 2.5rem; }
.settimana__col { display: grid; gap: 5rem; }

/* conto alla rovescia della festa */
.conto { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1.05; text-transform: uppercase; padding-inline: 0.1rem; max-width: none; }
.conto em { font-style: normal; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.conto__d { margin-top: 0.4rem; font-size: var(--step-note); color: var(--muted); }

/* liturgia del giorno: blocco laterale su schermo largo, <details> ripiegato al telefono */
.liturgia__box { background: var(--surface-2); }
.liturgia__head, .liturgia__tel summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; }
.liturgia__tel summary { list-style: none; cursor: pointer; transition: background-color var(--t-hover) ease; }
.liturgia__tel summary::-webkit-details-marker { display: none; }
.liturgia__tel summary::after { content: ""; width: 0.6rem; height: 0.6rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform var(--t-ui) var(--ease-out); flex: none; }
.liturgia__tel[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.liturgia__tel { display: none; }
.liturgia__tel:not([open]) .liturgia__body { display: none; } /* chiuso: niente scatole invisibili sopra il blocco seguente */
.liturgia__sum { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); text-transform: uppercase; line-height: 1; color: var(--ink); }
.liturgia__col { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--step-small); margin-left: auto; }
.dot { --liturgico: var(--verde); width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; background: var(--liturgico); box-shadow: 0 0 0 1px rgba(238, 237, 233, 0.35); }
.liturgia__body { padding: 0 1.25rem 1.4rem; display: grid; gap: 0.9rem; }
.liturgia__date { font-size: var(--step-note); color: var(--muted); }
.liturgia__day { font-weight: 500; line-height: 1.35; }
.liturgia__santo { font-size: var(--step-note); }
.liturgia__santo span { display: block; color: var(--muted); }
.liturgia__h { font-family: var(--font-text); font-weight: 500; font-size: var(--step-small); color: var(--muted); margin-top: 0.3rem; text-transform: none; }
.liturgia__letture { display: grid; gap: 0.6rem; font-size: var(--step-note); line-height: 1.35; }
.liturgia__letture span { display: block; color: var(--muted); }
.liturgia__link { justify-self: start; text-decoration-color: var(--accent); padding-block: 0.3rem; }
@media (hover: hover) and (pointer: fine) { .liturgia__tel summary:hover { background: var(--surface-3); } }

/* il santino degli orari: carta con il bordo a merletto */
.santino { position: relative; background: var(--stone); color: var(--stone-ink); margin-block: 14px; }
.santino::before, .santino::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23e6e1d6'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}
.santino::before { top: -14px; }
.santino::after { bottom: -14px; transform: scaleY(-1); }
.santino__in { padding: 3.5rem clamp(1.5rem, 4vw, 4rem); text-align: center; display: grid; justify-items: center; }
.santino__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); text-transform: uppercase; line-height: 1; max-width: none; }
.santino__note { margin-top: 0.5rem; font-size: var(--step-note); color: var(--stone-muted); }
.stagioni { margin-top: 2rem; display: flex; gap: 4px; }
html:not(.js) .stagioni { display: none; }
.stagioni button {
  min-height: 2.75rem; padding: 0 1rem; background: var(--stone-2); color: var(--stone-ink);
  font-size: var(--step-small); font-weight: 500;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.stagioni button:active { transform: scale(0.97); }
.stagioni button[aria-pressed="true"] { background: var(--stone-ink); color: var(--stone); }
.stagioni button:focus-visible { outline-color: var(--stone-ink); }
@media (hover: hover) and (pointer: fine) { .stagioni button[aria-pressed="false"]:hover { background: var(--stone-3); } }
.orari { width: 100%; max-width: 26rem; margin-top: 2rem; }
.orari:not(.is-on) { display: none; }
.orari__when { font-size: var(--step-note); color: var(--stone-muted); margin-inline: auto; }
.orari__group { margin-top: 2.25rem; }
.orari__group h3 { font-family: var(--font-text); font-weight: 500; font-size: var(--step-body); color: var(--stone-ink); text-transform: none; }
.orari__group .oggi { display: inline-block; margin-left: 0.5rem; padding: 0 0.45rem; background: var(--stone-ink); color: var(--stone); font-size: var(--step-small); line-height: 1.6; vertical-align: 0.1em; }
.orari__group ul { margin-top: 0.9rem; display: grid; gap: 0.6rem; }
.orari__group li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 600; text-align: left; }
.orari__group li > :last-child { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1; font-variant-numeric: tabular-nums; }
.santino__ecc { width: 100%; max-width: 26rem; margin-top: 2.5rem; padding: 1.1rem 1.25rem; background: var(--stone-2); text-align: left; }
.santino__ecc h3 { font-family: var(--font-text); font-weight: 500; font-size: var(--step-small); text-transform: none; color: var(--stone-muted); }
.santino__ecc ul { margin-top: 0.6rem; display: grid; gap: 0.5rem; font-size: var(--step-small); }
.santino__ecc strong { font-weight: 500; }
.santino__ecc span { color: var(--stone-muted); }
.santino__ecc li.is-sospesa time { text-decoration: line-through; text-decoration-thickness: 2px; }
.santino__end { margin-top: 2.5rem; font-size: var(--step-note); color: var(--stone-muted); }
.santino__end a { color: var(--stone-ink); font-weight: 500; text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) { .js .orari.is-on { animation: emergi 420ms var(--ease-out); } }

/* avvisi e appuntamenti */
.avvisi__dal { margin: -1.5rem 0 1.5rem; color: var(--accent-text); font-weight: 500; }
.avvisi__sub { font-size: var(--step-lead); margin-bottom: 1rem; text-transform: uppercase; }
.avvisi__list { display: grid; gap: 1.5rem; }
.avvisi__list li { padding-left: 1.1rem; border-left: 2px solid var(--accent); }
.avvisi__more { display: inline-block; margin-top: 2rem; text-decoration-color: var(--accent); color: var(--ink); padding-block: 0.4rem; }
.agenda__title { font-size: var(--step-sub); margin-bottom: 1.75rem; }
.agenda__list { display: grid; gap: 1.25rem; }
.agenda__list li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.agenda__data { display: grid; justify-items: start; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--muted); line-height: 1; }
.agenda__data span { font-size: var(--step-sub); color: var(--accent-text); }
.agenda__nome { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1.05; text-transform: uppercase; }
.agenda__dove { margin-top: 0.3rem; font-size: var(--step-small); color: var(--muted); }

/* ---------- Home: la festa, coppie sfalsate nel buio ---------- */
.festa { padding-block: var(--section); }
.festa figure img { width: 100%; height: 100%; object-fit: cover; }
.festa figcaption { margin-top: 0.65rem; font-size: var(--step-small); color: var(--muted); }
.festa__a { align-items: start; }
.festa__p1 { grid-column: 1 / 5; grid-row: 1 / 3; }
.festa__p1 img { aspect-ratio: 3 / 4; }
.festa__text { grid-column: 7 / 12; grid-row: 1; display: grid; gap: 1.5rem; justify-items: start; padding-top: 2rem; }
.festa__title { font-size: var(--step-head); line-height: 0.92; }
.festa__conto { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; text-transform: uppercase; }
.festa__conto em { font-style: normal; color: var(--accent-text); }
.festa__data { font-weight: 500; }
.festa__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; max-width: none; }
.festa__santo { text-decoration-color: var(--accent); padding-block: 0.5rem; }
.vt-festa-title { display: inline-block; view-transition-name: festa-titolo; }
.festa__p2 { grid-column: 7 / 13; grid-row: 2; margin-top: 4.5rem; }
.fade { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; view-transition-name: festa-foto; background: var(--surface); }
.fade img { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms ease, transform 600ms var(--ease-out); }
.fade img.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .fade:hover img { transform: scale(1.02); } }
.festa__b { margin-top: 12vh; align-items: start; }
.festa__p3 { grid-column: 5 / 13; grid-row: 1; }
.festa__p3 img { aspect-ratio: 3 / 2; }
.festa__p4 { grid-column: 1 / 5; grid-row: 1; margin-top: 16vh; }
.festa__p4 img { aspect-ratio: 4 / 5; }
.festa__c { margin-top: 10vh; align-items: start; }
.festa__p5 { grid-column: 1 / 9; grid-row: 1; margin-top: 14vh; }
.festa__p5 img { aspect-ratio: 3 / 2; }
.festa__p6 { grid-column: 9 / 13; grid-row: 1; }
.festa__p6 img { aspect-ratio: 4 / 5; object-position: 40% 50%; }

/* ---------- Home: il Santo, campo di pietra ---------- */
.santo { background: var(--stone); color: var(--stone-ink); padding: var(--section) var(--margin); }
.santo h2, .santo h3 { color: var(--stone-ink); }
.santo__head { max-width: 52rem; }
.santo__title { font-size: var(--step-head); line-height: 0.92; }
.santo__lead { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; }
.santo__tiles { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.santo__photo { grid-column: 1 / 9; position: relative; aspect-ratio: 16 / 10; }
.santo__photo img { width: 100%; height: 100%; object-fit: cover; }
.santo__over { position: absolute; top: 0; right: 0; width: 21rem; padding: 0 0 1.4rem 1.4rem; background: var(--stone); font-size: var(--step-body); line-height: 1.45; }
.santo__side { grid-column: 9 / 13; display: grid; gap: 2rem; justify-items: start; }
.santo__tile { width: 100%; background: var(--bg); color: var(--accent-text); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.santo__tile svg { width: 42%; }
.santo__facts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem var(--gutter); }
.santo__facts dt { font-size: var(--step-small); color: var(--stone-muted); }
.santo__facts dd { font-weight: 500; line-height: 1.3; }
.santo :focus-visible { outline-color: var(--stone-ink); }

/* ---------- Home: notizie ---------- */
.notizie-home { padding: var(--section) var(--margin); }
.notizie-home__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 3rem; }
.notizie-home__title { font-size: var(--step-head); line-height: 0.92; }
.notizie-home__tutte { text-decoration-color: var(--accent); padding-block: 0.4rem; }
.notizie-home__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 3rem var(--gutter); }
.notizia-card { display: grid; gap: 0.6rem; align-content: start; text-decoration: none; }
.notizia-card__foto { display: block; overflow: hidden; background: var(--surface); margin-bottom: 0.6rem; }
.notizia-card__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 700ms var(--ease-out); }
.notizia-card__data { font-size: var(--step-small); }
.notizia-card:not(.notizia-card--foto) { height: 100%; align-content: end; background: var(--surface); padding: clamp(1.5rem, 3vw, 2.5rem); }
.notizia-card h3 { font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem); } /* titoli lunghi dal database: due righe anche al telefono */
.notizia-card h3 { font-size: var(--step-lead); line-height: 1.02; text-transform: uppercase; transition: color var(--t-hover) ease; }
.notizia-card p { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .notizia-card:hover h3 { color: var(--accent-text); }
  .notizia-card:hover .notizia-card__foto img { transform: scale(1.03); }
}

/* ---------- Home: resta aggiornato ---------- */
.aggiornato {
  background: var(--surface); padding: var(--section) var(--margin);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gutter); align-items: end;
}
.aggiornato__in { grid-column: 1 / 7; display: grid; gap: 1.5rem; justify-items: start; }
.aggiornato__title { font-size: var(--step-head); line-height: 0.92; }
.aggiornato__lead { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.aggiornato .iscrizione, .aggiornato__link { grid-column: 8 / 13; }
.aggiornato__link { display: grid; gap: 1rem; }
.aggiornato__link .scheda { background: var(--surface-2); }
.iscrizione { display: grid; gap: 0.6rem; background: var(--surface-2); padding: 1.75rem; }
.iscrizione__titolo { font-size: var(--step-lead); text-transform: uppercase; }
.iscrizione__etichetta { font-size: var(--step-small); font-weight: 500; }
.iscrizione__riga { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.iscrizione__riga .campo { flex: 1 1 14rem; }
.iscrizione__riga .button, .iscrizione__riga .pulsante { flex: 0 0 auto; }
.iscrizione .nota { margin-top: 0.4rem; }
.iscrizione .nota a { text-decoration-color: var(--accent); }

/* ---------- Home: il biglietto dei contatti sulla foto della chiesa ---------- */
.visita { position: relative; height: min(100svh, 920px); min-height: 40rem; background: var(--bg); }
.visita__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.visita__card { position: absolute; top: 3.75rem; right: 3.75rem; width: 24rem; background: var(--stone); color: var(--stone-ink); padding: 2rem 2rem 0; display: grid; gap: 1.1rem; }
.visita__title { font-size: var(--step-lead); line-height: 1; color: var(--stone-ink); }
.visita__hours { display: grid; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.visita__hours li { display: flex; justify-content: space-between; gap: 1rem; }
.visita__hours li > span:first-child { color: var(--stone-muted); }
.visita__hours li > span:last-child { text-align: right; }
.visita__tel { font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); }
.visita__btn { margin-inline: -2rem; min-height: 3.5rem; margin-top: 0.4rem; }
.visita :focus-visible { outline-color: var(--stone-ink); }

/* ---------- Piè di pagina: il cielo della processione ---------- */
.piede { background: var(--sky); color: var(--ink); padding: 3rem var(--margin) 2rem; display: flex; flex-direction: column; view-transition-name: piede; }
.piede__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); font-size: 1rem; }
.piede__h { font-family: var(--font-text); font-weight: 500; font-size: var(--step-small); text-transform: none; color: var(--accent-text); margin-bottom: 0.6rem; }
.piede__col:nth-child(1) { grid-column: 1 / 4; }
.piede__col:nth-child(2) { grid-column: 4 / 7; }
.piede__mappa-sito { grid-column: 7 / 11; }
.piede__elenco { display: grid; gap: 0.25rem; }
.piede__elenco + .piede__elenco, .piede__elenco + p { margin-top: 0.9rem; }
.piede__elenco a, .piede__pagine a, .piede__gruppo { display: inline-block; padding-block: 0.2rem; }
.piede__pagine { columns: 2; column-gap: var(--gutter); }
.piede__pagine li { break-inside: avoid; }
.piede__up { grid-column: 11 / 13; justify-self: end; align-self: start; text-decoration-color: currentColor; padding-block: 0.2rem; }
.piede__tel {
  margin-top: 3rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-head);
  line-height: 0.86; letter-spacing: -0.01em; text-decoration: none; display: inline-block; align-self: flex-start;
  font-variant-numeric: tabular-nums; transition: color var(--t-hover) ease;
}
.piede__meta { margin-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-small); }
.piede__meta p { max-width: none; }
.piede__meta a { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .piede__tel:hover { color: var(--accent-text); } }

/* ==========================================================================
   Pagine interne (passo 2): stessa idea della home. Il titolo enorme in Barlow Condensed fa da apertura,
   sulla foto vera quando c'è una foto onesta; ogni pagina ha una composizione sua.
   ========================================================================== */
:root { --step-title: clamp(3.5rem, 1rem + 8.4vw, 10rem); }

/* ---------- Apertura delle pagine ---------- */
@media (prefers-reduced-motion: no-preference) {
}
@keyframes svela { from { clip-path: inset(0 0 100% 0); transform: scale(1.06); } to { clip-path: inset(0); transform: none; } }

/* ---------- Corpo comune: sezioni, colonna laterale ---------- */
.pagina { padding: 0 var(--margin) var(--section); }
.pagina + .pagina, .pagina--su { padding-top: var(--section); }
.pagina--tono { background: var(--surface); padding-top: var(--section); }
.pagina--pietra { background: var(--stone); color: var(--stone-ink); padding-top: var(--section); }
.pagina--pietra h2, .pagina--pietra h3 { color: var(--stone-ink); }
.pagina--pietra :focus-visible { outline-color: var(--stone-ink); }
.pagina--pietra .prosa a { text-decoration-color: var(--stone-ink); }
.pagina--pietra .nota { color: var(--stone-muted); }
.titolo-blocco { font-size: var(--step-head); line-height: 0.92; max-width: 18ch; }
.titolo-blocco--sub { font-size: var(--step-sub); }
.statement { font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.nota { font-size: var(--step-note); color: var(--muted); }
.nota a { text-decoration-color: var(--accent); }
.vuoto { display: grid; gap: 1.5rem; justify-items: start; padding: 2.5rem; background: var(--surface); max-width: 46rem; }
.vuoto p { font-size: var(--step-lead); line-height: 1.3; max-width: 32ch; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; max-width: none; }
.credito { font-size: var(--step-small); color: var(--muted); }
.servizio { background: var(--surface-2); padding: 1.25rem; display: grid; gap: 0.5rem; }
.servizio h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1; }
.servizio p { font-size: var(--step-small); }

/* testo redazionale */
.prosa { max-width: var(--measure); line-height: 1.65; }
.prosa > * + * { margin-top: 1rem; }
.prosa h2 { font-size: var(--t-h3); margin-top: 3rem; }
.prosa h3 { font-size: var(--t-h3); margin-top: 2.25rem; text-transform: uppercase; }
.prosa > :first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa ul { list-style: square; }
.prosa ol { list-style: decimal; }
.prosa li + li { margin-top: 0.5rem; }
.prosa li::marker { color: var(--accent-text); }
.prosa strong { font-weight: 500; }
.prosa a { text-decoration-color: var(--accent); }
.prosa blockquote { font-size: var(--step-lead); line-height: 1.3; padding-left: 1.5em; max-width: 30ch; }
.prosa figure blockquote + figcaption, .prosa figcaption { margin-top: 0.5rem; font-size: var(--step-small); color: var(--muted); }
.prosa img { width: 100%; }
.prosa hr { border: 0; height: 0; margin: 3rem 0; }
.prosa--grande { font-size: var(--t-grande); max-width: 40rem; }
.pagina--pietra .prosa li::marker { color: var(--stone-ink); }

/* tabelle vere (catechesi): le uniche con le righe */
.tabella-scorrevole { overflow-x: auto; margin-top: 2.5rem; }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { padding: 1rem 1.25rem 1rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.tabella thead th { font-size: var(--step-small); font-weight: 500; color: var(--muted); white-space: nowrap; }
.tabella tbody th { font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); line-height: 1; text-transform: uppercase; }
.tabella tbody tr:last-child > * { border-bottom: 0; }

/* il nastro del Messale nel colore liturgico (pagina Liturgia) */
.nastro-liturgico {
  --liturgico: #4f7a3a; display: inline-block; width: 1rem; height: 3rem; flex: none; position: relative;
  background: var(--liturgico); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); vertical-align: top;
}
.nastro-liturgico--punto { width: 0.8rem; height: 0.8rem; border-radius: 50%; clip-path: none; vertical-align: baseline; }

/* navigazione tra settimane, pagine e giorni: due parole grandi */
.passi { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.passi a { display: grid; gap: 0.15rem; padding: 1rem 1.25rem; min-height: 3.5rem; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.passi a:active { transform: scale(0.98); }
.passi small { font-size: var(--step-small); color: var(--muted); }
.passi span { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1; text-transform: uppercase; }
.passi__succ { margin-left: auto; text-align: right; }
.passi--dopo { margin-top: 5rem; }
@media (hover: hover) and (pointer: fine) { .passi a:hover { background: var(--surface-2); } .passi a:hover span { color: var(--accent-text); } }

/* ---------- Messe ---------- */
.messe-corpo .santino { margin-block: 14px; }
.messe-corpo .santino__in { padding-block: 4rem; }
.messe-corpo .orari { max-width: 30rem; }
.messe-corpo .orari__group li { font-size: var(--step-body); }
.messe-corpo .orari__when, .messe-corpo .santino__note, .messe-corpo .santino__end { font-size: var(--step-body); }
@media (prefers-reduced-motion: no-preference) {
  .js .messe-corpo .orari.is-on .orari__group { animation: emergi 640ms var(--ease-out) both; }
  .js .messe-corpo .orari.is-on .orari__group + .orari__group { animation-delay: 120ms; }
  .js .messe-corpo .santino__name, .js .messe-corpo .stagioni { animation: emergi 640ms var(--ease-out) 80ms both; }
}
.messe-nota { margin-top: 1.75rem; text-align: center; font-size: var(--step-small); color: var(--muted); max-width: none; }
.variazioni h2 { font-size: var(--step-sub); margin-bottom: 1.75rem; }
.variazioni ol { display: grid; gap: 4px; }
.variazioni li { display: grid; grid-template-columns: 13rem 5rem minmax(0, 1fr); gap: var(--gutter); align-items: baseline; padding: 1rem 1.25rem; background: var(--surface); }
.variazioni__giorno { font-weight: 500; }
.variazioni__ora { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1; font-variant-numeric: tabular-nums; }
.variazioni__nota { display: block; color: var(--muted); font-size: var(--step-small); }
.variazioni li.is-sospesa .variazioni__ora { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.variazioni li.is-sospesa .variazioni__nota { color: var(--accent-text); }
.orari__group li.is-sospesa time { text-decoration: line-through; }

/* ---------- Avvisi ---------- */
.avviso-corpo { display: grid; gap: 3rem; }
.avviso-corpo__titolo { font-size: var(--step-sub); }
.avviso-corpo .prosa { font-size: var(--t-grande); max-width: 42rem; }
.avviso-corpo .prosa > p:first-child { font-size: var(--step-lead); line-height: 1.3; }
.archivio { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 3rem var(--gutter); }
.archivio__mese h3 { font-size: var(--step-lead); text-transform: uppercase; margin-bottom: 1rem; color: var(--accent-text); }
.archivio__mese ul { display: grid; gap: 4px; }
.archivio__mese a { display: grid; gap: 0.1rem; padding: 0.8rem 1rem; background: var(--surface-2); text-decoration: none; transition: background-color var(--t-hover) ease; }
.archivio__mese a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.archivio__mese a[aria-current="page"] .archivio__data { color: inherit; }
.archivio__data { font-size: var(--step-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .archivio__mese a:not([aria-current]):hover { background: var(--surface-3); } }

/* ---------- Calendario ---------- */
.calendario__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2.5rem; }
.calendario__mesi { display: flex; align-items: center; gap: 0.5rem; }
.calendario__mese { font-size: var(--step-sub); min-width: 10ch; text-align: center; }
.calendario__vai { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; min-width: 3rem; padding: 0 0.9rem; background: var(--surface); text-decoration: none; text-transform: capitalize; transition: background-color var(--t-hover) ease; }
.calendario__vai .icona { width: 1.1rem; height: 1.1rem; }
.calendario__vai > span:not(.solo-lettori) { display: none; }
.calendario__filtri { display: flex; flex-wrap: wrap; gap: 4px; }
.filtro { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.1rem; background: var(--surface); font-size: var(--step-small); font-weight: 500; text-decoration: none; transition: background-color var(--t-hover) ease; }
.filtro--attivo { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .calendario__vai:hover, .filtro:not(.filtro--attivo):hover { background: var(--surface-2); } }
.calendario__intestazione { display: none; }
.calendario__giorni { display: grid; gap: 4px; }
.cal { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem; background: var(--surface); }
.cal--vuoto { display: none; }
.cal__data { font-size: inherit; line-height: 1; text-transform: none; }
.cal__data time { display: grid; justify-items: start; }
.cal__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-sub); line-height: 0.9; }
.cal__sett { margin-top: 0.25rem; font-family: var(--font-text); font-size: var(--step-small); font-weight: 400; color: var(--muted); }
.cal--oggi { background: var(--surface-2); }
.cal--oggi .cal__num { color: var(--accent-text); }
.cal__eventi { display: grid; gap: 0.75rem; }
.evento p { margin: 0; }
.evento--celebrazioni { --tinta: var(--accent); }
.evento--catechesi { --tinta: #8fb3e8; }
.evento--eventi { --tinta: #e8907a; }
.evento__tipo { font-size: var(--step-small); font-weight: 500; color: var(--tinta); }
.evento__titolo { font-weight: 500; line-height: 1.3; }
.evento__dove, .evento__desc { font-size: var(--step-small); color: var(--muted); }
.ics { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: 1.75rem; background: var(--surface-2); }
.ics h2 { font-size: var(--step-lead); }
.ics p { color: var(--muted); }
@media (min-width: 60rem) {
  .calendario__vai > span:not(.solo-lettori) { display: inline; }
  .calendario__intestazione, .calendario__giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .calendario__intestazione { margin-bottom: 0.6rem; }
  .calendario__intestazione li { font-size: var(--step-small); font-weight: 500; color: var(--muted); padding-inline: 0.6rem; }
  .cal, .cal--vuoto { display: block; min-height: 8rem; padding: 0.6rem; background: var(--surface); }
  .cal--vuoto { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
  .cal--vuoto { background: var(--bg); }
  .cal:first-child { grid-column-start: var(--col, 1); }
  .cal__data { margin-bottom: 0.5rem; }
  .cal__num { font-size: 1.5rem; }
  .cal__sett { display: none; }
  .cal__eventi { gap: 0.6rem; }
  .evento { padding-left: 0.5rem; box-shadow: inset 3px 0 0 var(--tinta); }
  .evento__tipo { display: none; }
  .evento__titolo { font-size: 0.9375rem; }
  .evento__dove, .evento__desc { font-size: 0.8125rem; }
  .evento__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Liturgia ---------- */
.lit-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lit-testa__nome { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem); line-height: 1.15; font-weight: 500; max-width: 30ch; }
.liturgia__grado { margin-top: 0.75rem; font-size: var(--step-small); font-weight: 500; color: var(--accent-text); }
.liturgia__colore { margin-top: 0.3rem; display: flex; align-items: baseline; gap: 0.5rem; color: var(--muted); }
.liturgia__facoltative { margin-top: 0.3rem; color: var(--muted); }
.giorno-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.giorno-nav__vai { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1.1rem; background: var(--surface); font-weight: 500; text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.giorno-nav__vai:active { transform: scale(0.97); }
.giorno-nav__vai .icona { width: 1.1rem; height: 1.1rem; }
.giorno-nav__vai--spento { visibility: hidden; }
.giorno-nav__oggi { min-height: 3rem; display: inline-flex; align-items: center; font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .giorno-nav__vai:hover { background: var(--surface-2); } }
.letture { display: grid; gap: 3rem; margin-top: 2.5rem; }
.lettura { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0.4rem; align-items: baseline; }
.lettura p { margin: 0; }
.lettura__etichetta { grid-column: 1 / 4; font-weight: 500; color: var(--accent-text); }
.lettura__riferimento { grid-column: 4 / 13; font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; text-transform: uppercase; max-width: none; }
.lettura__riferimento span { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--t-grande); line-height: 1.35; text-transform: none; margin-bottom: 0.35rem; color: var(--muted); }
.lettura__riferimento strong { font-weight: 600; }
.lettura__sottotitolo { grid-column: 4 / 13; font-size: var(--t-grande); line-height: 1.4; max-width: 46ch; }
.memores { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: 2rem; background: var(--surface-2); }
.memores h2 { font-size: var(--step-sub); }
.memores p { color: var(--muted); margin-top: 0.4rem; }

/* ---------- Notizie: impaginazione da giornale, foto grandi ---------- */
.notizie-elenco { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.notizia-voce { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.25rem; align-items: end; text-decoration: none; }
.notizia-voce__foto { grid-column: 1 / 8; overflow: hidden; background: var(--surface); }
.notizia-voce__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 900ms var(--ease-out); }
.notizia-voce__testo { grid-column: 8 / 13; display: grid; gap: 0.9rem; align-content: end; }
.notizia-voce:nth-child(even) .notizia-voce__foto { grid-column: 6 / 13; grid-row: 1; }
.notizia-voce:nth-child(even) .notizia-voce__testo { grid-column: 1 / 6; grid-row: 1; }
.notizia-voce--senza-foto .notizia-voce__testo, .notizia-voce--senza-foto:nth-child(even) .notizia-voce__testo { grid-column: 1 / 9; }
.notizia-voce h2 { font-size: var(--step-sub); line-height: 0.95; text-transform: uppercase; transition: color var(--t-hover) ease; }
.notizia-voce:first-child .notizia-voce__foto { grid-column: 1 / 13; }
.notizia-voce:first-child .notizia-voce__foto img { aspect-ratio: 21 / 9; }
.notizia-voce:first-child .notizia-voce__testo { grid-column: 1 / 9; }
.notizia-voce:first-child h2 { font-size: var(--step-head); line-height: 0.92; }
.notizia-voce--senza-foto:first-child .notizia-voce__testo { grid-column: 1 / -1; }
.notizia-voce--senza-foto:first-child h2 { max-width: 24ch; }
.notizia-voce p { color: var(--muted); max-width: 46ch; }
.notizia-voce__data { font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) {
  .notizia-voce:hover h2 { color: var(--accent-text); }
  .notizia-voce:hover .notizia-voce__foto img { transform: scale(1.025); }
}
.articolo__copertina { margin: 0 0 clamp(3rem, 6vw, 5rem); background: var(--surface); view-transition-name: pagina-foto; }
.articolo__copertina img { width: 100%; max-height: 82svh; object-fit: cover; }
.articolo__corpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.articolo__corpo > * { grid-column: 3 / 11; }
.articolo__corpo .prosa { font-size: var(--t-grande); max-width: 40rem; }
.articolo__azioni { margin-top: 3.5rem; }

/* galleria: una foto grande e le altre attorno, stesse proporzioni a coppie */
.galleria { margin-top: clamp(4rem, 8vw, 6rem); }
.galleria__titolo { font-size: var(--step-head); line-height: 0.92; margin-bottom: 2.5rem; }
.galleria__elenco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.galleria__elenco li { grid-column: span 4; }
.galleria__elenco li:nth-child(5n+1) { grid-column: span 8; }
.galleria__voce { display: block; overflow: hidden; background: var(--surface); }
.galleria__voce img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 900ms var(--ease-out); }
.galleria__elenco li:nth-child(5n+1) img { aspect-ratio: 3 / 2; }
.galleria__elenco li:nth-child(5n+2) img { aspect-ratio: 3 / 4; }
.galleria__didascalia { margin-top: 0.6rem; font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .galleria__voce:hover img { transform: scale(1.03); } }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.lightbox::backdrop { background: var(--bg); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__barra { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem var(--margin); }
.lightbox__conto { font-size: var(--step-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.lightbox__figura { margin: 0; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 0 var(--margin); }
.lightbox__figura img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; object-fit: contain; background: none; }
.lightbox__piede { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem var(--margin) calc(1rem + env(safe-area-inset-bottom)); }
.lightbox__didascalia { margin: 0; text-align: center; font-size: var(--step-small); flex: 1; max-width: none; }
.lightbox button { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: none; background: var(--surface-2); color: inherit; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.lightbox button[hidden] { visibility: hidden; display: inline-flex; }
@media (hover: hover) and (pointer: fine) { .lightbox button:hover { background: var(--accent); color: var(--accent-ink); } }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] .lightbox__figura img { animation: emergi 360ms var(--ease-out); } }

/* ---------- Festa ---------- */
.hero--festa .hero__photo.fade { aspect-ratio: auto; view-transition-name: festa-foto; }
.hero--festa .hero__photo.fade img { object-position: 50% 45%; }
.hero--festa .hero__title { view-transition-name: none; }
.hero--festa .festa__conto { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; text-transform: uppercase; }
.hero--festa .festa__conto em { font-style: normal; color: var(--accent-text); }
.hero__testo { display: grid; gap: 0.6rem; }
.programma-festa { padding: var(--section) var(--margin); }
.programma-festa__intro { font-size: var(--step-lead); line-height: 1.3; text-indent: 3em; max-width: 34ch; }
.programma-festa__intro-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.programma-festa__intro-wrap > * { grid-column: 7 / 13; }
.programma-festa__chi { margin-top: 1rem; font-weight: 500; color: var(--muted); }
.programma-festa__chi strong { font-weight: 500; color: var(--ink); }
.programma-festa__parte { margin-top: clamp(5rem, 9vw, 8rem); }
.programma-festa__parte > h2 { font-size: var(--step-sub); color: var(--accent-text); margin-bottom: 2.5rem; }
.programma-festa__giorni { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem; align-items: baseline; }
.programma-festa__giorni > * { grid-column: 7 / 13; max-width: 46ch; margin: 0; }
.programma-festa__giorni > h3 { grid-column: 1 / 7; margin-top: 3rem; font-size: var(--step-sub); line-height: 0.95; text-transform: uppercase; max-width: none; padding-right: 2rem; transition: color var(--t-hover) ease; }
.programma-festa__giorni > h3:first-child, .programma-festa__giorni > h3:first-child + * { margin-top: 0; }
.programma-festa__giorni > h3 + * { margin-top: 3rem; }
.programma-festa__giorni > h3:first-child + * { margin-top: 0; }
.programma-festa__giorni strong { font-family: var(--font-display); font-weight: 600; font-size: 1.3em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.programma-festa__giorni em { color: var(--muted); }
.programma-festa__giorni ul { padding-left: 1.2em; list-style: square; }
.programma-festa__giorni li::marker { color: var(--accent-text); }
.programma-festa__giorni a { text-decoration-color: var(--accent); }
.fuoco { padding-bottom: var(--section); }
.fuoco__big { aspect-ratio: 21 / 9; }
.fuoco__big img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fuoco__pair { margin-top: 6rem; align-items: end; }
.fuoco__text { grid-column: 2 / 7; }
.fuoco__text .prosa { font-size: var(--t-grande); }
.fuoco__text .prosa > p:first-child { font-size: var(--step-lead); line-height: 1.3; }
.fuoco__small { grid-column: 8 / 13; }
.fuoco__small img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 62% 40%; }
.fuoco__small figcaption, .edizione figcaption { margin-top: 0.65rem; font-size: var(--step-small); color: var(--muted); }
.fuoco__link { margin-top: 2rem; }
.edizione { background: var(--stone); color: var(--stone-ink); padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.edizione h2 { color: var(--stone-ink); }
.edizione__in { grid-column: 1 / 7; }
.edizione__title { font-size: var(--step-head); line-height: 0.92; }
.edizione .prosa { margin-top: 2rem; font-size: var(--t-grande); }
.edizione .prosa ul { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.edizione .prosa li strong { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; text-transform: uppercase; }
.edizione .prosa a { text-decoration-color: var(--stone-ink); }
.edizione__photo { grid-column: 8 / 13; }
.edizione__photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.edizione figure.shutter { background: var(--stone-2); }
.edizione figure.shutter figcaption { background: var(--stone); color: var(--stone-muted); }
.edizione :focus-visible { outline-color: var(--stone-ink); }
.festa-foto { padding: 0 var(--margin) var(--section); }
.festa-foto .galleria { margin-top: var(--section); }
.festa-foto .credito { margin-top: 2rem; }
.anni-festa { padding: var(--section) var(--margin); background: var(--surface); }
.anni-festa h2 { font-size: var(--step-sub); margin-bottom: 2rem; }
.anni { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; align-items: baseline; }
.anni a { font-family: var(--font-display); font-weight: 700; font-size: var(--step-head); line-height: 1; text-decoration: none; transition: color var(--t-hover) ease; }
.anni a.anni__tradizione { font-size: var(--step-lead); font-weight: 600; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .anni a:hover { color: var(--accent-text); } }

/* ---------- Catechesi, oratorio, gruppi ---------- */
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.duo__a { grid-column: 1 / 7; position: sticky; top: 1.5rem; }
.duo__b { grid-column: 8 / 13; }
.duo__b--testo { padding-top: 0.5rem; }
.duo > div:not(.prosa) > * + * { margin-top: 1.5rem; }
.mappa-blocco__lato > .prosa { margin-top: 1rem; }
.titolo-blocco + .prova-icone { margin-top: 2rem; }

/* ---------- Il Santo, la parrocchia ---------- */
.fatti { display: grid; gap: 1.1rem; }
.fatti dt { font-size: var(--step-small); color: var(--muted); }
.fatti dd { font-weight: 500; line-height: 1.35; }
.coppia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.coppia__a { grid-column: 1 / 8; }
.coppia__a img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.coppia__b { grid-column: 9 / 13; margin-top: 12vh; }
.coppia__b img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.coppia figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--muted); }
.chiusura { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; align-items: end; }
.chiusura h2 { grid-column: 1 / 8; font-size: var(--step-head); line-height: 0.92; }
.chiusura p { grid-column: 1 / 8; font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.chiusura .azioni { grid-column: 9 / 13; grid-row: 1 / 3; justify-content: flex-end; }
.maggio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.maggio h2 { grid-column: 1 / 6; font-size: var(--step-head); line-height: 0.92; }
.maggio .prosa { grid-column: 7 / 13; font-size: var(--t-grande); }
.maggio .prosa blockquote { font-size: var(--step-lead); }
.vie { display: grid; gap: 4px; margin-top: 2.5rem; }
.vie a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding: 1.5rem 1.25rem; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease; }
.vie strong { grid-column: 1 / 6; font-family: var(--font-display); font-weight: 700; font-size: var(--step-sub); line-height: 1; text-transform: uppercase; transition: color var(--t-hover) ease; }
.vie span { grid-column: 6 / 12; color: var(--muted); }
.vie .icona { grid-column: 12 / 13; justify-self: end; color: var(--accent-text); transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .vie a:hover { background: var(--surface-2); } .vie a:hover strong { color: var(--accent-text); } .vie a:hover .icona { transform: translateX(4px); } }

/* ---------- Contatti, Visit us ---------- */
.contatti-tel { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.01em; text-decoration: none; font-variant-numeric: tabular-nums; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .contatti-tel:hover { color: var(--accent-text); } }
.contatti-voce { font-size: var(--step-small); color: var(--muted); }
.contatti-tel + .contatti-voce { margin-top: 0.75rem; }
.contatti-righe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
.contatti-righe > div { grid-column: span 4; display: grid; gap: 0.6rem; justify-items: start; }
.contatti-righe strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1.05; text-transform: uppercase; }
.contatti-righe .lungo { text-transform: none; overflow-wrap: anywhere; }
.contatti-righe a:not(.button) { text-decoration-color: var(--accent); }
.mappa-blocco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; align-items: stretch; }
.mappa { grid-column: 1 / 9; position: relative; min-height: 26rem; background: var(--surface-2); display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; }
.mappa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3) saturate(0.5); }
.mappa > .button, .mappa > .mappa__nota { position: relative; }
.mappa > .mappa__nota { color: var(--ink); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa:has(iframe) { padding: 0; display: block; }
.mappa:has(iframe) .mappa__nota { position: absolute; left: 0; bottom: 0; margin: 0; padding: 0.6rem 1rem; background: var(--bg); max-width: none; }
.mappa__nota { max-width: 26rem; font-size: var(--step-small); color: var(--muted); }
.mappa__nota a { color: var(--ink); text-decoration-color: var(--accent); }
.mappa-blocco__lato { grid-column: 9 / 13; display: grid; align-content: start; gap: 1rem; }
.mappa-blocco__lato h2 { font-size: var(--step-sub); }
.navigatori { display: grid; gap: 4px; }
.navigatori a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0 1.1rem; background: var(--surface); font-weight: 500; text-decoration: none; transition: background-color var(--t-hover) ease; }
.navigatori .icona { color: var(--accent-text); width: 1.1rem; height: 1.1rem; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .navigatori a:hover { background: var(--surface-2); } .navigatori a:hover .icona { transform: translateX(4px); } }
.visit-orari { display: grid; gap: 1.5rem; }
.visit-orari dt { font-size: var(--step-small); color: var(--muted); }
.visit-orari dd { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Iscrizione agli avvisi, 404 ---------- */
.iscrizione-pagina { max-width: 40rem; }
.iscrizione-pagina .iscrizione { padding: clamp(1.5rem, 4vw, 2.5rem); }
.iscrizione__punti { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.errore { position: relative; min-height: calc(100svh - var(--bar-h)); display: grid; align-items: end; }
.errore__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(0.32) saturate(0.4); }
.errore__in { position: relative; padding: var(--section) var(--margin) clamp(3rem, 6vw, 5rem); display: grid; gap: 1.75rem; justify-items: start; }
.errore__titolo { font-size: var(--step-title); line-height: 0.86; letter-spacing: -0.012em; view-transition-name: titolo-pagina; }
.errore__in > p { font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.scorciatoie { display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem; }
.scorciatoie a { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1.05; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.06em; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .scorciatoie a:hover { color: var(--accent-text); } }

/* anteprima delle bozze (solo per chi è entrato nel pannello) */
.anteprima-banner { margin: 0; max-width: none; padding: 0.75rem var(--margin); background: var(--accent); color: var(--accent-ink); text-align: center; font-size: var(--step-small); }
.anteprima-banner a { color: var(--accent-ink); }

/* pagina di prova (solo sviluppo) */
.prova-icone { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1.5rem; }
.prova-icone li { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: var(--step-small); }

/* ---------- Pagine interne: tablet ---------- */
@media (max-width: 1100px) {
  .variazioni li { grid-template-columns: 10rem 4.5rem minmax(0, 1fr); }
  .contatti-righe > div { grid-column: span 6; }
  .programma-festa__giorni { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .programma-festa__giorni > *, .programma-festa__giorni > h3 { grid-column: auto; }
  .programma-festa__giorni > h3 + * { margin-top: 0; }
}

/* ---------- Pagine interne: telefono ---------- */
@media (max-width: 760px) {
  .vuoto { padding: 1.5rem; }
  .messe-corpo { margin-inline: calc(var(--margin) * -1 + 10px); }
  .messe-corpo .santino__in { padding: 2.75rem 1.25rem; }
  .messe-corpo .stagioni { width: 100%; }
  .messe-corpo .stagioni button { flex: 1; padding: 0 0.4rem; }
  .variazioni li { grid-template-columns: 4.5rem minmax(0, 1fr); row-gap: 0.25rem; }
  .variazioni__giorno { grid-column: 1 / -1; }
  .passi { flex-direction: column; }
  .passi a { width: 100%; }
  .calendario__barra { flex-direction: column; align-items: stretch; }
  .calendario__mesi { justify-content: space-between; }
  .lit-testa__nome { font-size: 1.5rem; }
  .lettura { grid-template-columns: minmax(0, 1fr); }
  .lettura__etichetta, .lettura__riferimento, .lettura__sottotitolo { grid-column: auto; }
  .lettura__riferimento { font-size: 2rem; }
  .memores { padding: 1.5rem; }
  .notizia-voce { row-gap: 1rem; }
  .notizia-voce h2, .notizia-voce:first-child h2 { font-size: 1.875rem; line-height: 1; }
  .notizia-voce__foto, .notizia-voce__testo,
  .notizia-voce:nth-child(even) .notizia-voce__foto, .notizia-voce:nth-child(even) .notizia-voce__testo,
  .notizia-voce--senza-foto .notizia-voce__testo { grid-column: 1 / -1; grid-row: auto; }
  .notizia-voce:first-child .notizia-voce__foto { margin-inline: calc(var(--margin) * -1); }
  .notizia-voce:first-child .notizia-voce__foto img { aspect-ratio: 4 / 3; }
  .notizia-voce:nth-child(n+2) .notizia-voce__foto { grid-column: 1 / 11; }
  .notizia-voce:nth-child(even) .notizia-voce__foto { grid-column: 3 / 13; }
  .articolo__corpo > * { grid-column: 1 / -1; }
  .articolo__copertina img { max-height: 64svh; }
  .galleria__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .galleria__elenco li, .galleria__elenco li:nth-child(5n+1) { grid-column: span 1; }
  .galleria__elenco li:nth-child(5n+1) { grid-column: 1 / -1; }
  .galleria__elenco li:nth-child(5n+2) img { aspect-ratio: 1; }
  .hero--festa .hero__title { white-space: normal; }
  .hero--festa .hero__photo { height: 58svh; }
  .programma-festa__intro-wrap > * { grid-column: 1 / -1; }
  .programma-festa__intro { text-indent: 0; font-size: 1.375rem; }
  .programma-festa__giorni { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .programma-festa__giorni > *, .programma-festa__giorni > h3 { grid-column: auto; }
  .programma-festa__giorni > h3 { margin-top: 3rem; font-size: 1.75rem; }
  .programma-festa__giorni > h3 + * { margin-top: 0; }
  .fuoco__big { aspect-ratio: 4 / 5; }
  .fuoco__pair { margin-top: 3.5rem; }
  .fuoco__text { grid-column: 1 / -1; }
  .fuoco__small { grid-column: 4 / 13; margin-top: 3rem; }
  .edizione { grid-template-columns: 1fr; }
  .edizione__in, .edizione__photo { grid-column: auto; }
  .edizione__photo { margin-top: 3rem; }
  .anni { gap: 0.5rem 1.75rem; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__a, .duo__b { grid-column: auto; position: static; }
  .tabella-scorrevole { overflow: visible; }
  .tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabella, .tabella tbody, .tabella tr, .tabella th, .tabella td { display: block; }
  .tabella tr { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
  .tabella th, .tabella td { padding: 0; border: 0; }
  .tabella td { margin-top: 0.3rem; color: var(--muted); }
  .tabella td.tabella__vuota { display: none; }
  .coppia__a { grid-column: 1 / -1; margin-inline: calc(var(--margin) * -1); }
  .coppia__a figcaption { padding-inline: var(--margin); }
  .coppia__b { grid-column: 4 / 13; margin-top: 3rem; }
  .chiusura { grid-template-columns: minmax(0, 1fr); }
  .chiusura h2, .chiusura p, .chiusura .azioni { grid-column: auto; grid-row: auto; justify-content: flex-start; }
  .maggio { grid-template-columns: minmax(0, 1fr); }
  .maggio h2, .maggio .prosa { grid-column: auto; }
  .vie a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; padding: 1.25rem; }
  .vie strong { grid-column: 1; }
  .vie span { grid-column: 1; grid-row: 2; }
  .vie .icona { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .contatti-tel { font-size: 17vw; white-space: nowrap; }
  .contatti-righe { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
  .contatti-righe > div { grid-column: auto; }
  .mappa-blocco { grid-template-columns: minmax(0, 1fr); }
  .mappa, .mappa-blocco__lato { grid-column: auto; }
  .mappa { min-height: 20rem; }
  .ics { padding: 1.5rem; }
  .ics .button { width: 100%; white-space: normal; text-align: center; }
  .errore__in { padding-top: 8rem; }
}

/* pannello: marchio della pagina d'accesso */
.marchio { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--titolo); }
.marchio__logo { width: 3rem; height: auto; background: none; }
.marchio__testo { display: grid; line-height: 1.15; }
.marchio__sopra { font-size: var(--step-small); color: var(--testo-tenue); }
.marchio__nome { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; }
.marchio__luogo { font-weight: 600; color: var(--testo-tenue); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .bar__nav { display: none; }
  .bar__menu { margin-left: auto; }
  .settimana__grid, .settimana__grid--senza-avvisi { grid-template-columns: 17rem minmax(0, 1fr); }
  .settimana__col { grid-column: 2; }
  .notizie-home__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede__col:nth-child(1) { grid-column: 1 / 7; }
  .piede__col:nth-child(2) { grid-column: 7 / 13; }
  .piede__mappa-sito { grid-column: 1 / 11; }
}

/* ---------- Telefono: una composizione sua ---------- */
@media (max-width: 760px) {
  :root { --bar-h: 4rem; }
  .bar__brand img { width: 2.2rem; }
  .hero { height: auto; min-height: 0; grid-template-rows: auto auto; }
  .hero__photo { height: 64svh; }
  .hero__photo img { object-position: 74% 30%; }
  @keyframes accendi {
    0%   { clip-path: circle(0% at 20% 45%); opacity: 0; }
    6%   { opacity: 0.85; }
    10%  { opacity: 0.25; }
    16%  { opacity: 1; }
    100% { clip-path: circle(150% at 20% 45%); opacity: 1; }
  }
  .hero__title { font-size: 17vw; line-height: 0.86; }
  .hero__title .line { display: block; }
  .hero__foot { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .hero__foot .button { width: 100%; }

  .intro__text { grid-column: 1 / -1; text-indent: 0; font-size: 1.375rem; }
  .intro__photo { grid-column: 6 / 13; grid-row: 2; margin-top: 2.5rem; aspect-ratio: 4 / 5; }
  .intro__note { grid-column: 1 / 6; grid-row: 2; align-self: end; margin-top: 0; }
  .comunita { grid-column: 1 / -1; grid-row: 3; margin-top: 4rem; }
  .comunita__list div { grid-template-columns: 1fr; gap: 0.2rem; }

  .settimana { padding-inline: 0; }
  .settimana__grid, .settimana__grid--senza-orari, .settimana__grid--senza-avvisi, .settimana__grid--senza-orari.settimana__grid--senza-avvisi { grid-template-columns: minmax(0, 1fr); gap: 5rem; }
  .settimana__lato { position: static; margin: 0 var(--margin); }
  .liturgia__desk { display: none; }
  .liturgia__tel { display: block; }
  .santino-wrap { padding-inline: 10px; }
  .settimana__title { padding-inline: calc(var(--margin) - 10px); }
  .santino__in { padding: 2.5rem 1.25rem; }
  .stagioni { width: 100%; }
  .stagioni button { flex: 1; padding: 0 0.4rem; }
  .settimana__col { grid-column: auto; padding-inline: var(--margin); }

  .festa__text { grid-column: 1 / -1; grid-row: 1; padding-top: 0; }
  .festa__p1 { grid-column: 1 / 10; grid-row: 2; margin-top: 4rem; }
  .festa__p2 { grid-column: 3 / 13; grid-row: 3; margin-top: 4rem; }
  .festa__b, .festa__c { margin-top: 4rem; }
  .festa__p3 { grid-column: 1 / -1; grid-row: 1; margin-inline: calc(var(--margin) * -1); }
  .festa__p3 figcaption { padding-inline: var(--margin); }
  .festa__p4 { grid-column: 1 / 8; grid-row: 2; margin-top: 4rem; }
  .festa__p5 { grid-column: 3 / 13; grid-row: 1; margin-top: 0; }
  .festa__p6 { grid-column: 1 / 9; grid-row: 2; margin-top: 4rem; }

  .santo__tiles { grid-template-columns: 1fr; margin-top: 3rem; }
  .santo__photo, .santo__side { grid-column: auto; }
  .santo__photo { aspect-ratio: auto; }
  .santo__photo img { aspect-ratio: 4 / 3; }
  .santo__over { position: static; width: auto; padding: 1.25rem 0 0; }
  .santo__tile { aspect-ratio: 3 / 2; }

  .notizie-home__list { grid-template-columns: 1fr; }
  .aggiornato { grid-template-columns: 1fr; }
  .aggiornato__in, .aggiornato .iscrizione, .aggiornato__link { grid-column: auto; }
  .iscrizione { padding: 1.25rem; }

  .visita { height: auto; min-height: 0; padding-bottom: 3rem; }
  .visita__photo { height: 70svh; }
  .visita__card { position: relative; top: auto; right: auto; width: auto; margin: -5rem var(--margin) 0; }

  .piede { min-height: 0; }
  .piede__top { grid-template-columns: 1fr; gap: 1.75rem; }
  .piede__col:nth-child(1), .piede__col:nth-child(2), .piede__mappa-sito, .piede__up { grid-column: auto; justify-self: start; }
  .piede__tel { font-size: 13vw; white-space: nowrap; }
  .piede__meta { flex-direction: column; gap: 0.4rem; }
  .menu__list > li > a, .menu__gruppo { font-size: 2.6rem; }
}

/* ==========================================================================
   «Giorno e notte». La home e la festa restano «di notte» (prototipo A). Le pagine della vita della parrocchia
   sono «di giorno» (body.giorno): l'intonaco e la pietra leccese della chiesa, l'inchiostro quasi nero, l'oro delle
   luminarie come unico accento; la notte resta come eco nella barra, nel menu e nel piè di pagina.
   Ogni pagina di giorno: apertura con foto vera e titolo su un campo pieno di pietra (niente velature),
   poi una griglia a 12 colonne con il testo (60–70 caratteri) e una colonna laterale utile (oggi in chiesa,
   liturgia, contatti, collegamenti): nessuna colonna vuota. Barlow Condensed maiuscolo solo per l'h1;
   h2/h3 in Barlow tondo; testo a 18 px, interlinea 1,55, inchiostro pieno.
   ========================================================================== */
.giorno { background: var(--bg); font-size: 1.125rem; line-height: 1.55; }
.giorno main { background: var(--bg); }
.giorno :focus-visible { outline-color: var(--ink); }
.giorno ::selection { background: var(--accent); color: var(--accent-ink); }
.giorno img { background: var(--surface); }

/* titoli: tondi, frase normale; il maiuscolo stretto resta all'h1 */
.giorno main :is(h2, h3, h4),
.giorno main :is(.titolo-blocco, .righe__nome, .vie strong, .passi span, .liturgia__sum, .archivio__mese h3, .notizia-voce h2,
  .contatti-righe strong, .lettura__riferimento, .tabella tbody th, .servizio h2, .calendario__mese, .memores h2, .ics h2,
  .santino__name, .chiusura h2, .maggio h2, .galleria__titolo, .prosa h2, .prosa h3, .avviso-corpo__titolo,
  .variazioni h2, .mappa-blocco__lato h2, .iscrizione__titolo, .agenda__nome) {
  font-family: var(--font-text); font-weight: 500; text-transform: none; letter-spacing: -0.012em; line-height: 1.15; color: var(--ink);
}
.giorno main h2, .giorno main :is(.titolo-blocco, .chiusura h2, .maggio h2, .galleria__titolo, .avviso-corpo__titolo, .variazioni h2) {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem); max-width: 24ch;
}
.giorno main h3, .giorno main :is(.prosa h3, .archivio__mese h3, .liturgia__sum, .servizio h2, .memores h2, .ics h2) { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); }
.giorno .prosa { max-width: 66ch; line-height: 1.6; }
.giorno .prosa h2 { margin-top: 2.75rem; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); }
.giorno .prosa h3 { margin-top: 2.25rem; }
.giorno .prosa--grande { font-size: 1.1875rem; max-width: 64ch; }
.giorno .prosa li::marker { color: var(--accent-strong); }
.giorno .nota { color: var(--muted); }
.giorno .link-freccia { text-decoration-color: var(--accent-strong); text-decoration-thickness: 2px; }
.giorno .prosa a, .giorno .nota a, .giorno .liturgia__link { text-decoration-color: var(--accent-strong); text-decoration-thickness: 2px; }
.giorno .button--line, .giorno .pulsante--secondario { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .giorno .button:hover { background: var(--accent-strong); color: var(--accent-ink); }
  .giorno .button--line:hover { background: var(--accent); color: var(--accent-ink); }
}

/* ---------- Apertura: campo di pietra con il titolo, foto vera accanto ---------- */
.apertura {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: clamp(22rem, 48vh, 32rem); background: var(--pietra); color: var(--ink);
}
.apertura__testo {
  grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3.25rem) var(--margin);
}
.apertura__titolo {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ink);
  font-size: clamp(3rem, 1.4rem + 4.6vw, 6.25rem); line-height: 0.88; letter-spacing: -0.01em; margin-left: -0.04em;
  view-transition-name: titolo-pagina; max-width: none; overflow-wrap: normal;
}
.apertura__titolo--medio { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 4rem); line-height: 0.92; }
.apertura__lead { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.apertura__lead a { text-decoration-color: var(--ink); }
.apertura__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; font-size: 1rem; color: #3e382e; max-width: 44ch; }
.apertura__meta strong { font-weight: 500; color: var(--ink); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; max-width: none; }
.apertura__foto { grid-column: 6 / 13; position: relative; overflow: hidden; margin: 0; background: var(--surface-2); view-transition-name: pagina-foto; }
.apertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apertura--senza-foto { min-height: 0; }
.apertura--senza-foto .apertura__testo {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.25rem;
  align-items: end; padding-top: clamp(4rem, 8vw, 7rem); padding-right: var(--margin);
}
.apertura--senza-foto .apertura__titolo { grid-column: 1 / 8; font-size: clamp(3.25rem, 1.2rem + 6.4vw, 8.5rem); }
.apertura--senza-foto .apertura__titolo--medio { grid-column: 1 / 10; font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4.5rem); }
.apertura--senza-foto .apertura__lead { grid-column: 8 / 13; align-self: end; }
.apertura--senza-foto .apertura__titolo--medio ~ .apertura__lead { grid-column: 1 / 9; }
.apertura--senza-foto .apertura__meta, .apertura--senza-foto .apertura__azioni { grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) {
  .js .apertura__foto img { animation: svela 1100ms var(--ease-in-out) both; }
  .js .apertura__lead, .js .apertura__meta, .js .apertura__azioni { animation: emergi 700ms var(--ease-out) 240ms both; }
}

/* ---------- Corpo: testo e colonna laterale ---------- */
.corpo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3.5rem;
  align-items: start; padding: clamp(3rem, 6vw, 5.5rem) var(--margin) clamp(4.5rem, 8vw, 7.5rem);
}
.corpo + .corpo, .corpo--su { padding-top: 0; }
.corpo__main { grid-column: 1 / 8; display: grid; gap: clamp(3.5rem, 6vw, 5rem); min-width: 0; align-content: start; }
.corpo__main > * { min-width: 0; }
.corpo__lato { grid-column: 9 / 13; display: grid; gap: 1.75rem; position: sticky; top: 1.5rem; align-content: start; }
.corpo--largo .corpo__main { grid-column: 1 / 10; }
.corpo--largo .corpo__lato { grid-column: 10 / 13; }
.corpo--pieno .corpo__main { grid-column: 1 / -1; }
.corpo__blocco { display: grid; gap: 1.5rem; justify-items: start; }
.corpo__blocco > h2 { margin-bottom: 0.25rem; }
.campo-tono { background: var(--surface); }
.campo-pietra { background: var(--pietra); }

/* schede della colonna laterale: un salto di tono, nessuna linea */
.scheda { background: var(--surface); padding: 1.5rem; display: grid; gap: 0.9rem; justify-items: start; }
.scheda__titolo { font-size: 1.375rem !important; line-height: 1.15; }
.scheda__nota { font-size: 1rem; color: var(--muted); }
.scheda__data { display: block; margin-top: 0.2rem; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.scheda .link-freccia { min-height: 2.75rem; }
.oggi-orari { width: 100%; display: grid; gap: 0.35rem; }
.oggi-orari li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.oggi-orari time { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oggi-orari li.is-sospesa time { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.oggi-orari em { font-style: normal; color: var(--accent-text); font-weight: 500; }
.scheda__tel { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; }
.scheda__wa { width: 100%; }
.scheda__email { overflow-wrap: anywhere; text-decoration-color: var(--accent-strong); text-decoration-thickness: 2px; text-decoration-line: underline; }
.scheda--link ul { width: 100%; display: grid; gap: 4px; }
.scheda--link a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.1rem; align-items: center;
  padding: 0.85rem 1rem; background: var(--bg); text-decoration: none; transition: background-color var(--t-hover) ease;
}
.scheda--link strong { font-weight: 500; }
.scheda--link span { grid-column: 1; font-size: 1rem; color: var(--muted); line-height: 1.35; }
.scheda--link .icona { grid-column: 2; grid-row: 1 / 3; width: 1.1rem; height: 1.1rem; transition: transform var(--t-ui) var(--ease-out); }
.scheda--pietra { background: var(--pietra); }
@media (hover: hover) and (pointer: fine) {
  .scheda--link a:hover { background: var(--carta); }
  .scheda--link a:hover .icona { transform: translateX(4px); }
  .scheda__tel:hover { color: var(--accent-text); }
}

.scheda .navigatori, .scheda .fatti { width: 100%; }
.scheda__indirizzo { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.vita__foto { margin: 0; }
.vita__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vita__foto figcaption { margin-top: 0.6rem; font-size: 1rem; color: var(--muted); }

/* la liturgia di giorno */
.giorno .liturgia__box { background: var(--surface); }
.giorno .dot { box-shadow: 0 0 0 1px var(--muted); }
@media (hover: hover) and (pointer: fine) { .giorno .liturgia__tel summary:hover { background: var(--surface-2); } }

/* ---------- Componenti di sempre, alla luce del giorno ---------- */
.giorno .santino { background: var(--carta); }
.giorno .santino::before, .giorno .santino::after {
  background: var(--carta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Ccircle cx='14' cy='14' r='14'/%3E%3C/svg%3E") repeat-x center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Ccircle cx='14' cy='14' r='14'/%3E%3C/svg%3E") repeat-x center;
}
.giorno .santino { color: var(--ink); }
.giorno .santino__name { font-size: 1.5rem; }
.giorno .stagioni button { background: var(--surface); color: var(--ink); }
.giorno .stagioni button[aria-pressed="true"] { background: var(--ink); color: var(--carta); }
.giorno .orari__group .oggi { background: var(--accent); color: var(--accent-ink); }
.giorno .santino__ecc { background: var(--surface); }
.giorno :is(.santino__note, .orari__when, .santino__end, .santino__ecc h3, .santino__ecc span) { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .giorno .stagioni button[aria-pressed="false"]:hover { background: var(--surface-2); } }

.giorno .vuoto { background: var(--surface); }
.giorno .passi a { background: var(--surface); }
.giorno .passi span { font-size: 1.375rem; }
@media (hover: hover) and (pointer: fine) { .giorno .passi a:hover { background: var(--surface-2); } .giorno .passi a:hover span { color: var(--ink); } }
.giorno .variazioni li { background: var(--surface); }
.giorno .archivio__mese a { background: var(--surface); }
.giorno .archivio__mese a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .giorno .archivio__mese a:not([aria-current]):hover { background: var(--surface-2); } }
.giorno .filtro, .giorno .calendario__vai, .giorno .giorno-nav__vai { background: var(--surface); }
.giorno .filtro--attivo { background: var(--ink); color: var(--bg); }
.giorno .cal, .giorno .cal--vuoto { background: var(--surface); }
.giorno .cal--oggi { background: var(--pietra); }
.giorno .cal--oggi .cal__num { color: var(--ink); }
.giorno .evento--celebrazioni { --tinta: #8a6400; }
.giorno .evento--catechesi { --tinta: #2f5d9e; }
.giorno .evento--eventi { --tinta: #a4462e; }
.giorno .ics, .giorno .memores { background: var(--pietra); }
.giorno .ics p, .giorno .memores p { color: #3e382e; }
@media (min-width: 60rem) { .giorno .cal--vuoto { background: transparent; } }
@media (hover: hover) and (pointer: fine) {
  .giorno :is(.filtro:not(.filtro--attivo), .calendario__vai, .giorno-nav__vai):hover { background: var(--surface-2); }
  .giorno .notizia-voce:hover h2 { color: var(--accent-text); }
}
.giorno .tabella th, .giorno .tabella td { border-bottom-color: var(--surface-3); }
.giorno .lettura__riferimento { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.giorno .lettura__riferimento span { color: var(--muted); }

/* ---------- Avvisi: lo stato vuoto non è un abbandono ---------- */
.attesa { display: grid; gap: 2rem; }
.attesa__lead { font-size: var(--step-lead); line-height: 1.3; max-width: 32ch; }
.attesa__parti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.attesa__parti > * { padding: 1.75rem; display: grid; gap: 0.9rem; align-content: start; justify-items: start; }
.attesa__messe { background: var(--carta); }
.attesa__wa { background: var(--ink); color: var(--bg); }
.attesa__wa h3 { color: var(--bg) !important; }
.attesa__wa .button { background: var(--accent); color: var(--accent-ink); }
.attesa__wa :focus-visible { outline-color: var(--accent); }
.orari-brevi { width: 100%; display: grid; gap: 1rem; }
.orari-brevi dt { font-size: 1rem; color: var(--muted); }
.orari-brevi dd { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.settimane { display: grid; gap: 4px; width: 100%; }
.settimane a { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1rem 1.25rem; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease; }
.settimane time { color: var(--muted); font-size: 1rem; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .settimane a:hover { background: var(--surface-2); } }

/* ---------- Notizie: la prima in grande, le altre in elenco ---------- */
.prima-notizia { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; align-items: end; text-decoration: none; }
.prima-notizia__foto { grid-column: 1 / 8; overflow: hidden; background: var(--surface); }
.prima-notizia__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 900ms var(--ease-out); }
.prima-notizia__testo { grid-column: 8 / 13; display: grid; gap: 1rem; padding-bottom: 0.5rem; }
.prima-notizia h2 { font-size: clamp(2rem, 1.4rem + 1.9vw, 3.25rem) !important; line-height: 1.05 !important; max-width: 18ch; transition: color var(--t-hover) ease; }
.prima-notizia p { font-size: 1.1875rem; }
.prima-notizia__data, .elenco-notizie__data { font-size: 1rem; color: var(--muted); }
.prima-notizia--senza-foto { background: var(--pietra); padding: clamp(2rem, 4vw, 3.5rem); }
.prima-notizia--senza-foto .prima-notizia__testo { grid-column: 1 / 10; }
.prima-notizia--senza-foto h2 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem) !important; max-width: 20ch; }
.elenco-notizie { display: grid; gap: 4px; }
.elenco-notizie a { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.25rem; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease; }
.elenco-notizie__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.elenco-notizie__testo { display: grid; gap: 0.35rem; }
.elenco-notizie h3 { font-size: 1.375rem; }
.elenco-notizie p { color: var(--muted); font-size: 1rem; }
.elenco-notizie a.senza-foto { grid-template-columns: minmax(0, 1fr); }
@media (hover: hover) and (pointer: fine) {
  .prima-notizia:hover h2 { color: var(--accent-text); }
  .prima-notizia:hover .prima-notizia__foto img { transform: scale(1.02); }
  .elenco-notizie a:hover { background: var(--surface-2); }
}
.giorno .articolo__copertina { margin: 0; }
.giorno .articolo__copertina img { width: 100%; max-height: 70svh; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Catechesi: l'iscrizione in evidenza, il cammino anno per anno ---------- */
.iscrivi-banda { background: var(--ink); color: var(--bg); padding: clamp(2.5rem, 5vw, 4rem) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.25rem; align-items: center; }
.iscrivi-banda h2 { grid-column: 1 / 7; color: var(--bg) !important; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem) !important; }
.iscrivi-banda p { grid-column: 1 / 7; font-size: 1.1875rem; max-width: 44ch; }
.iscrivi-banda .azioni { grid-column: 8 / 13; grid-row: 1 / 3; justify-content: flex-end; }
.iscrivi-banda .button { min-height: 4rem; padding-inline: 2.25rem; font-size: 1.25rem; background: var(--accent); color: var(--accent-ink); }
.iscrivi-banda .nota { grid-column: 1 / -1; color: #d6cdbd; font-size: 1rem; }
.iscrivi-banda .nota a { color: var(--bg); text-decoration-color: var(--accent); }
.iscrivi-banda :focus-visible { outline-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .iscrivi-banda .button:hover { background: var(--accent-strong); } }
.cammino ul { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 4px; counter-reset: none; }
.cammino ul li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1rem 1.25rem; background: var(--surface); margin: 0 !important; }
.cammino ul li strong { font-weight: 500; font-size: 1.25rem; line-height: 1.2; color: var(--accent-text); }
/* catechesi: in pietra gli anni dei sacramenti (Prima Confessione, Prima Comunione, Cresima) */
.cammino--sacramenti ul li:nth-child(3), .cammino--sacramenti ul li:nth-child(4), .cammino--sacramenti ul li:nth-child(8) { background: var(--pietra); }
.foto-larga { margin: 0; padding-bottom: clamp(3rem, 6vw, 5rem); }
.foto-larga img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.foto-larga figcaption { margin-top: 0.75rem; font-size: 1rem; color: var(--muted); padding-inline: var(--margin); }

/* ---------- Oratorio e gruppi: l'elenco a righe, senza riquadri uguali ---------- */
.righe { display: grid; gap: 4px; }
.righe > li { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0.6rem; padding: 1.75rem 1.5rem; background: var(--surface); align-items: baseline; }
.righe > li:nth-child(even) { background: var(--carta); }
.righe__nome { grid-column: 1 / 4; font-size: 1.625rem !important; line-height: 1.1; }
.righe__testo { grid-column: 4 / 8; display: grid; gap: 0.6rem; justify-items: start; }
.righe__testo > * { margin: 0; }
.righe__foto { grid-column: 1 / 4; }
.righe__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.righe dl { display: grid; gap: 0.2rem; font-size: 1rem; }
.righe dl div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.righe dt { color: var(--muted); }
.righe dd { font-weight: 500; }

/* ---------- Contatti: recapiti grandi da toccare ---------- */
.recapiti { display: grid; gap: 4px; }
.recapiti a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem); background: var(--surface); text-decoration: none;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.recapiti a:active { transform: scale(0.99); }
.recapiti small { display: block; font-size: 1rem; color: var(--muted); }
.recapiti strong { display: block; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.15; overflow-wrap: anywhere; }
.recapiti .recapiti__tel strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.recapiti .recapiti__wa { background: var(--accent); color: var(--accent-ink); }
.recapiti .recapiti__wa small { color: #3b2f0e; }
.recapiti .icona { width: 1.75rem; height: 1.75rem; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .recapiti a:hover { background: var(--surface-2); }
  .recapiti .recapiti__wa:hover { background: var(--accent-strong); }
  .recapiti a:hover .icona { transform: translateX(4px); }
}
.giorno .mappa { background: var(--surface-2); min-height: 28rem; place-content: end start; justify-items: start; padding: 0; text-align: left; }
.giorno .mappa__foto { filter: none; }
.giorno .mappa > .button { margin: 0 0 0 1.5rem; }
.giorno .mappa > .mappa__nota { margin: 0; padding: 1rem 1.5rem 1.5rem; background: var(--carta); color: var(--ink); max-width: none; width: 100%; }
.giorno .navigatori a { background: var(--surface); }
.giorno .navigatori .icona { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .giorno .navigatori a:hover { background: var(--surface-2); } }

/* ---------- Il Santo, la parrocchia ---------- */
.giorno .fatti dt { color: var(--muted); }
.giorno .coppia figcaption, .giorno .credito { color: var(--muted); }
.giorno figure.shutter figcaption { background: var(--bg); }
.giorno .vie a { background: var(--surface); }
.giorno .vie .icona { color: var(--ink); }
.giorno .vie strong { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem); }
@media (hover: hover) and (pointer: fine) { .giorno .vie a:hover { background: var(--surface-2); } .giorno .vie a:hover strong { color: var(--accent-text); } }
.giorno .pagina--pietra { background: var(--pietra); color: var(--ink); }
.giorno :is(.pagina--pietra, .pagina--tono) { padding-block: clamp(3.5rem, 7vw, 6rem); }
.giorno .prosa blockquote { background: var(--pietra); padding: 1.25rem 1.5rem; max-width: 36ch; }
.giorno .pagina--tono { background: var(--surface); }
.giorno .chiusura .button--stone, .giorno .button--stone { background: var(--ink); color: var(--bg); }

/* ---------- Striscia di foto del luogo ---------- */
.striscia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; padding: 0 var(--margin) clamp(4.5rem, 8vw, 7.5rem); }
.striscia__titolo { grid-column: 1 / -1; }
.striscia__foto { margin: 0; }
.striscia__foto img { width: 100%; object-fit: cover; }
.striscia__foto figcaption { margin-top: 0.6rem; font-size: 1rem; color: var(--muted); }
/* una riga: la prima su sei colonne (3:2), le altre due su tre colonne (3:4), stessa altezza */
.striscia__foto:nth-of-type(1) { grid-column: 1 / 7; }
.striscia__foto:nth-of-type(1) img { aspect-ratio: 3 / 2; }
.striscia__foto:nth-of-type(2) { grid-column: 7 / 10; }
.striscia__foto:nth-of-type(3) { grid-column: 10 / 13; }
.striscia__foto:nth-of-type(n+2) img { aspect-ratio: 3 / 4; }

/* ---------- Giorno: tablet e telefono ---------- */
@media (max-width: 1100px) {
  .apertura__testo { grid-column: 1 / 7; }
  .apertura__foto { grid-column: 7 / 13; }
  .corpo__main, .corpo--largo .corpo__main { grid-column: 1 / 9; }
  .corpo__lato, .corpo--largo .corpo__lato { grid-column: 9 / 13; }
  .attesa__parti { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .corpo { row-gap: 3rem; }
  .corpo__main, .corpo--largo .corpo__main, .corpo__lato, .corpo--largo .corpo__lato { grid-column: 1 / -1; }
  .corpo__lato { position: static; }
}
@media (max-width: 760px) {
  .giorno { font-size: 1.0625rem; }
  .apertura { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .apertura__foto { grid-column: 1; grid-row: 1; height: 40svh; min-height: 15rem; }
  .apertura__testo, .apertura--senza-foto .apertura__testo { grid-column: 1; grid-row: 2; padding: 1.75rem var(--margin) 2.25rem; gap: 0.9rem; }
  .apertura--senza-foto .apertura__testo { display: flex; align-items: flex-start; padding-top: 3.5rem; }
  .apertura__titolo, .apertura--senza-foto .apertura__titolo { font-size: clamp(2.75rem, 13vw, 4rem); }
  .apertura__titolo--medio, .apertura--senza-foto .apertura__titolo--medio { font-size: 2.25rem; }
  .apertura__lead { font-size: 1.25rem; }
  .prima-notizia__foto, .prima-notizia__testo, .prima-notizia--senza-foto .prima-notizia__testo { grid-column: 1 / -1; }
  .prima-notizia__foto { margin-inline: calc(var(--margin) * -1); }
  .elenco-notizie a { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .iscrivi-banda { grid-template-columns: minmax(0, 1fr); }
  .iscrivi-banda h2, .iscrivi-banda p, .iscrivi-banda .azioni, .iscrivi-banda .nota { grid-column: auto; grid-row: auto; }
  .iscrivi-banda .azioni, .iscrivi-banda .button { width: 100%; }
  .cammino ul li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .foto-larga img { aspect-ratio: 4 / 3; }
  .righe > li { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem; }
  .righe__nome, .righe__testo, .righe__foto { grid-column: auto; }
  .recapiti a { padding: 1.25rem; }
  .striscia { row-gap: 1.5rem; }
  .striscia__foto:nth-of-type(1) { grid-column: 1 / -1; margin-inline: calc(var(--margin) * -1); }
  .striscia__foto:nth-of-type(1) figcaption { padding-inline: var(--margin); }
  .striscia__foto:nth-of-type(2) { grid-column: 1 / 7; }
  .striscia__foto:nth-of-type(3) { grid-column: 7 / 13; }
  .giorno .mappa { min-height: 22rem; }
  .giorno .messe-corpo { margin-inline: calc(var(--margin) * -1 + 10px); }
}

/* ---------- Transizioni tra le pagine: la luce si abbassa e si riaccende ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 640ms; animation-timing-function: var(--ease-in-out); }
::view-transition-old(root) { animation: spegni 300ms ease both; }
::view-transition-new(root) { animation: riaccendi 520ms 140ms var(--ease-out) both; }
::view-transition-group(barra), ::view-transition-group(piede) { animation-duration: 0s; }
@keyframes spegni { to { opacity: 0; filter: brightness(0.3); } }
@keyframes riaccendi { from { opacity: 0; filter: brightness(0.3); } }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .galleria__voce:hover img, .fade:hover img, .notizia-card:hover .notizia-card__foto img { transform: none; }
}

/* ---------- Stampa ---------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --muted: #333; --accent: #000; }
  .bar, .menu, .piede, .salta, .stagioni, .hero__dark { display: none !important; }
  body { background: #fff; color: #000; }
  .orari { display: block !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .shutter img { clip-path: none !important; transform: none !important; }
  .shutter figcaption, .shutter .santo__over { opacity: 1 !important; }
}