/* Canne e Pietra, sistema di design "cna-".
   Tema: grigio perla veneto, inchiostro blu notte, rosso mattone veneziano
   come accento e verderame come segnale. Cartiglio tipografico d'apertura,
   sezioni numerate 01-06, mosaico asimmetrico, bollettino datato. Titoli in
   didone di sistema (Hoefler/Baskerville), testo in umanistica (Optima).
   No external request, no webfont, no gimmick animation, automatic
   dark mode, 150 ms hover and focus, print rules. */

:root {
  --calce: #eef0ef;
  --calce-creux: #dfe3e2;
  --calce-vif: #f7f8f8;
  --pietra: #8c2f2a;
  --pietra-fonce: #6b211d;
  --ottone: #7a6118;
  --cielo: #35595f;
  --inchiostro: #1b2228;
  --inchiostro-nuit: #131a1f;
  --inchiostro-douce: #55636b;
  --filetto: #c3cbca;
  --filetto-fort: #9aa5a4;
  --maiuscole-spaziatura: 0.16em;
  --tondo: "Hoefler Text", "Baskerville", "Libre Baskerville", "Times New Roman", serif;
  --lineare: Optima, Candara, "Gill Sans Nova", "Gill Sans MT", "Trebuchet MS", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --calce: #121618;
    --calce-creux: #1a2023;
    --calce-vif: #171d20;
    --pietra: #d4756c;
    --pietra-fonce: #e6928a;
    --ottone: #c9ae5e;
    --cielo: #7ab3bb;
    --inchiostro: #dfe6e8;
    --inchiostro-nuit: #0c1113;
    --inchiostro-douce: #93a3a8;
    --filetto: #2a3438;
    --filetto-fort: #3d4b50;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font-family: var(--lineare);
  font-size: clamp(1.01rem, 0.96rem + 0.22vw, 1.13rem);
  line-height: 1.62;
}
::selection { background: var(--pietra); color: var(--calce); }
a { color: var(--pietra); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
a:hover { color: var(--pietra-fonce); }
:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--tondo); font-weight: 600; line-height: 1.14; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.15rem, 1.15rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.28rem); }
h3 { font-size: clamp(1.13rem, 1.02rem + 0.55vw, 1.42rem); }
p { margin: 0 0 1em; }
strong { color: var(--pietra-fonce); }
time { font-variant-numeric: tabular-nums; }

.cna-evite {
  position: absolute; left: -100vw; top: 0;
  background: var(--pietra); color: var(--calce); padding: 0.6em 1em; z-index: 20;
}
.cna-evite:focus { left: 0; }

/* Chemin: the trail the whole layout walks on. */
.cna-chemin { max-width: 1360px; margin: 0 auto; padding: 0 clamp(1.1rem, 3.2vw, 3rem); }

/* Portale: the header threshold, like the lintel of a field house. */
.cna-portale { border-bottom: 2px solid var(--pietra); background: var(--calce); }
.cna-portale__rang { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem; padding-top: 1.15rem; padding-bottom: 0.95rem; }
.cna-portale__mot { font-family: var(--tondo); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; color: var(--inchiostro); text-decoration: none; letter-spacing: 0.01em; }
.cna-portale__mot:hover { color: var(--pietra); }
.cna-portale__mot span { display: block; font-family: var(--lineare); font-size: 0.72rem; font-weight: 500; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; color: var(--inchiostro-douce); margin-top: 0.28rem; }
.cna-percorsi ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.cna-percorsi a { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inchiostro); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 0.2rem; }
.cna-percorsi a:hover { color: var(--pietra); border-bottom-color: var(--pietra); }
.cna-percorsi a[aria-current="page"] { color: var(--pietra); border-bottom-color: var(--pietra); }

/* Cartiglio: the home hero, composed like an interpretive panel at a
   park trailhead: framed text on cream, no photograph needed. */
.cna-cartiglio { border-bottom: 1px solid var(--filetto); background: var(--calce-vif); }
.cna-cartiglio__cadre {
  border-top: 3px double var(--filetto-fort);
  border-bottom: 3px double var(--filetto-fort);
  padding: clamp(2.2rem, 4.5vw, 4rem) 0 clamp(1.8rem, 3.6vw, 3rem);
}
.cna-cartiglio__rang { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; font-size: 0.74rem; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; color: var(--inchiostro-douce); border-bottom: 1px solid var(--filetto); padding-bottom: 0.75rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.cna-cartiglio__rang strong { color: var(--pietra); font-weight: 700; }
.cna-cartiglio h1 { max-width: 24ch; margin-bottom: 0.4em; }
.cna-cartiglio__titre-accent { color: var(--pietra); }
.cna-cartiglio__chapo { max-width: 62ch; font-size: clamp(1.05rem, 1rem + 0.45vw, 1.28rem); color: var(--inchiostro); }
.cna-cartiglio__unites { display: flex; flex-wrap: wrap; gap: 0.3rem 0.65rem; align-items: center; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ottone); margin-top: 1.6rem; }
.cna-cartiglio__unites em { font-style: normal; color: var(--filetto-fort); }
.cna-cartiglio__signe { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid var(--filetto); color: var(--pietra); }
.cna-fregio { flex: none; display: inline-block; vertical-align: -0.18em; }

/* Fil: the breadcrumb, always class="breadcrumb cna-fil". */
.cna-fil { padding: 1.05rem 0 0; font-size: 0.8rem; }
.cna-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; color: var(--inchiostro-douce); }
.cna-fil li + li::before { content: "\203A"; margin-right: 0.35rem; color: var(--filetto-fort); }
.cna-fil a { color: var(--inchiostro-douce); }
.cna-fil a:hover { color: var(--pietra); }
.cna-fil [aria-current="page"] { color: var(--pietra); font-weight: 600; }

/* Registro: numbered section bands, the cultural layers of the site. */
.cna-registro { padding: clamp(2.4rem, 5vw, 4.2rem) 0; }
.cna-registro--creux { background: var(--calce-creux); }
.cna-registro__tete { display: flex; align-items: baseline; gap: 1.1rem; border-top: 1px solid var(--filetto-fort); padding-top: 1.05rem; margin-bottom: 0.4rem; }
.cna-registro__numero { font-family: var(--tondo); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color: var(--pietra); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; flex: none; }
.cna-registro__titre { margin: 0; }
.cna-registro__note { max-width: 66ch; color: var(--inchiostro-douce); margin: 0 0 1.9rem; }

/* Lapide: small-caps overline used across the site. */
.cna-lapide { font-size: 0.74rem; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; color: var(--pietra); margin: 0 0 0.55rem; }

/* Rilievi: the asymmetric test-pit mosaic. Six-column grid, mixed
   spans and two vertical offsets so no two rows read alike. */
.cna-rilievi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.cna-rilievo { grid-column: span 2; }
.cna-rilievo--plein { grid-column: 1 / -1; }
.cna-rilievo--large { grid-column: span 4; }
.cna-rilievo--petit { grid-column: span 2; }
@media (min-width: 900px) {
  .cna-rilievo--butte { transform: translateY(1.4rem); }
  .cna-rilievo--butte2 { transform: translateY(-1.4rem); }
}
.cna-rilievo__cadre { position: relative; overflow: hidden; background: var(--calce-creux); }
.cna-rilievo__cadre--pano { aspect-ratio: 21 / 9; }
.cna-rilievo__cadre--paysage { aspect-ratio: 4 / 3; }
.cna-rilievo__cadre--carre { aspect-ratio: 1 / 1; }
.cna-rilievo__cadre--portrait { aspect-ratio: 3 / 4; }
.cna-rilievo__cadre--haut { aspect-ratio: 16 / 7; }
.cna-rilievo__vue { width: 100%; height: 100%; object-fit: cover; transition: transform 150ms ease; }
.cna-rilievo:hover .cna-rilievo__vue { transform: scale(1.015); }
.cna-rilievo__etiquette { padding: 0.8rem 0 0; position: relative; }
.cna-rilievo__titre { margin: 0 0 0.3rem; }
.cna-rilievo__titre a.cna-rilievo__lien { color: var(--inchiostro); text-decoration: none; }
.cna-rilievo__titre a.cna-rilievo__lien::after { content: ""; position: absolute; inset: 0; }
.cna-rilievo__titre a.cna-rilievo__lien:hover { color: var(--pietra); }
.cna-rilievo__note { font-size: 0.92rem; color: var(--inchiostro-douce); margin: 0; }
.cna-rilievo__indication { font-size: 0.74rem; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; color: var(--ottone); margin: 0.6rem 0 0; }

/* Denser variant used inside registro pages. */
.cna-rilievi--denses { gap: 1.3rem; }

/* Bollettino: the dated field notebook feed. */
.cna-bollettino { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(1.6rem, 3.4vw, 3rem); }
.cna-entree { break-inside: avoid; display: flex; gap: 1.15rem; padding: 1.05rem 0; border-top: 1px solid var(--filetto); margin: 0; }
.cna-entree__vue { width: 190px; height: 143px; object-fit: cover; flex: none; background: var(--calce-creux); }
.cna-entree h3 { margin: 0 0 0.25rem; font-size: 1.08rem; }
.cna-entree h3 a { color: var(--inchiostro); text-decoration: none; }
.cna-entree h3 a:hover { color: var(--pietra); }
.cna-entree p { font-size: 0.88rem; color: var(--inchiostro-douce); margin: 0; }
.cna-jour { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ottone); margin: 0 0 0.3rem; font-variant-numeric: tabular-nums; }

/* Prospetto: the head of a guide, panel style. */
.cna-prospetto { padding-top: clamp(1.6rem, 3.4vw, 2.8rem); }
.cna-prospetto h1 { max-width: 26ch; }
.cna-prospetto__chapo { max-width: 58ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); color: var(--inchiostro-douce); }
.cna-didascalie { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 1.1rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--filetto); font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--inchiostro-douce); }
.cna-didascalie li + li::before { content: "\00B7"; margin-right: 0.5rem; color: var(--filetto-fort); }
.cna-didascalie a { color: var(--inchiostro-douce); }
.cna-didascalie a:hover { color: var(--pietra); }

/* Tavola: the full-width lead image of a page. */
.cna-tavola { margin: 1.6rem auto 0; }
.cna-tavola__vue { width: 100%; border: 1px solid var(--filetto); background: var(--calce-creux); }

/* Pilastro: the reading column with a sandstone drop cap. */
.cna-pilastro { max-width: 64ch; padding-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.cna-pilastro > p:first-of-type::first-letter {
  font-family: var(--tondo); font-size: 3.15em; line-height: 0.82;
  float: left; padding: 0.06em 0.12em 0 0; color: var(--pietra); font-weight: 700;
}
@media (max-width: 760px) { .cna-pilastro > p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; font-weight: inherit; padding: 0; } }
.cna-pilastro h2 { margin-top: 2.1rem; padding-top: 0.85rem; border-top: 1px solid var(--filetto); }
.cna-pilastro ul, .cna-pilastro ol { padding-left: 1.25rem; }
.cna-pilastro li { margin-bottom: 0.45rem; }

/* Corredo: the field checklist, squares ticked like survey forms. */
.cna-corredo { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; }
.cna-corredo li { position: relative; padding: 0.55rem 0 0.55rem 2rem; border-top: 1px solid var(--filetto); }
.cna-corredo li:last-child { border-bottom: 1px solid var(--filetto); }
.cna-corredo li::before { content: ""; position: absolute; left: 0.1rem; top: 0.85rem; width: 0.72rem; height: 0.72rem; border: 2px solid var(--pietra); border-radius: 1px; }

/* Cartella: the data table, framed like a clay tablet. */
.cna-cartella { overflow-x: auto; margin: 1.3rem 0 1.6rem; border: 1px solid var(--filetto-fort); background: var(--calce-vif); }
.cna-cartella table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.92rem; }
.cna-cartella caption { caption-side: top; text-align: left; padding: 0.8rem 1rem 0.5rem; font-size: 0.74rem; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; color: var(--ottone); }
.cna-cartella th { background: var(--inchiostro-nuit); color: var(--calce); text-align: left; padding: 0.6rem 0.85rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cna-cartella td { padding: 0.6rem 0.85rem; border-top: 1px solid var(--filetto); vertical-align: top; }
.cna-cartella tbody tr:nth-child(even) td { background: var(--calce-creux); }
.cna-cartella td:first-child { font-variant-numeric: tabular-nums; }

/* Note, fiche: aside boxes. */
.cna-note { background: var(--calce-vif); border: 1px solid var(--filetto-fort); border-left: 4px solid var(--cielo); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.cna-note p:last-child { margin-bottom: 0; }
.cna-fiche { background: var(--inchiostro-nuit); color: var(--calce); padding: 1.25rem 1.35rem; margin: 1.6rem 0; }
.cna-fiche h3 { color: var(--pietra); margin-top: 0; }
.cna-fiche p:last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) { .cna-fiche { background: var(--calce-creux); color: var(--inchiostro); border: 1px solid var(--filetto-fort); } }

/* Suite: read-next links inside sentences, double hairline aside. */
.cna-suite { margin: 2.4rem 0 0; border-top: 3px double var(--filetto-fort); padding-top: 1.1rem; }
.cna-suite h2 { font-size: 1.15rem; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; font-family: var(--lineare); font-weight: 700; color: var(--inchiostro-douce); }
.cna-suite ul { list-style: none; margin: 0; padding: 0; }
.cna-suite li { padding: 0.5rem 0; border-bottom: 1px solid var(--filetto); }

/* Voluta: the petroglyph spiral separating the great bands. */
.cna-voluta { display: flex; justify-content: center; padding: clamp(1.4rem, 3vw, 2.2rem) 0; color: var(--pietra); background: transparent; }
.cna-voluta svg { display: block; }

/* Campata: the footer, cut like a stratigraphic trench. */
.cna-campata { background: var(--inchiostro-nuit); color: var(--calce); margin-top: 2rem; }
.cna-campata h2 { font-size: 0.78rem; letter-spacing: var(--maiuscole-spaziatura); text-transform: uppercase; font-family: var(--lineare); color: var(--ottone); margin: 0 0 0.8rem; }
.cna-campata__rang { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.8rem; padding-top: 2.4rem; padding-bottom: 1.6rem; }
.cna-campata ul { list-style: none; margin: 0; padding: 0; }
.cna-campata li { margin-bottom: 0.5rem; font-size: 0.92rem; }
.cna-campata a { color: var(--calce); text-decoration: none; border-bottom: 1px solid var(--filetto-fort); }
.cna-campata a:hover { color: var(--pietra); border-bottom-color: var(--pietra); }
.cna-campata__bas { border-top: 1px solid var(--filetto-fort); padding-top: 1.05rem; padding-bottom: 1.4rem; font-size: 0.8rem; color: var(--inchiostro-douce); }
.cna-campata__bas .cna-fregio { color: var(--pietra); }

@media (max-width: 860px) {
  .cna-rilievi { grid-template-columns: repeat(2, 1fr); }
  .cna-rilievo, .cna-rilievo--large, .cna-rilievo--petit { grid-column: span 2; }
  .cna-rilievo--plein { grid-column: 1 / -1; }
  .cna-rilievo--butte, .cna-rilievo--butte2 { transform: none; }
  .cna-bollettino { columns: 1; }
}
@media (min-width: 861px) and (max-width: 1120px) {
  .cna-rilievi { grid-template-columns: repeat(4, 1fr); }
  .cna-rilievo, .cna-rilievo--petit { grid-column: span 2; }
  .cna-rilievo--large { grid-column: span 4; }
  .cna-rilievo--plein { grid-column: 1 / -1; }
}

@media print {
  .cna-portale, .cna-campata, .cna-voluta, .cna-suite, .cna-fil { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cna-pilastro { max-width: none; }
  a { color: #000; text-decoration: underline; }
}


/* ==========================================================================
   MENU COMPATTO (<= 760 px) e AVVERTENZA PERMANENTE
   Aggiunti il 05/09/2026 dal maestro d'opera. Il donatore lasciava le sei
   voci di sezione in una lista che andava a capo: su 390 px erano tre righe
   di maiuscole. Qui la lista larga sparisce sotto 761 px e lascia il posto a
   un <details> chiuso, senza una riga di JavaScript.
   ========================================================================== */
.cna-piega { display: none; }
.cna-piega > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--lineare); font-size: 0.78rem; letter-spacing: var(--maiuscole-spaziatura);
  text-transform: uppercase; color: var(--inchiostro);
  border: 1px solid var(--filetto-fort); padding: 0.42rem 0.9rem; border-radius: 2px;
  background: var(--calce-vif);
}
.cna-piega > summary::-webkit-details-marker { display: none; }
.cna-piega > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.cna-piega[open] > summary::after { content: "\2212"; }
.cna-piega > summary:focus-visible { outline: 2px solid var(--pietra); outline-offset: 2px; }
.cna-percorsi--piegata { margin-top: 0.6rem; }
.cna-percorsi--piegata ul { flex-direction: column; gap: 0.15rem; }
.cna-percorsi--piegata a { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--filetto); }

@media (max-width: 760px) {
  .cna-percorsi--ampia { display: none; }
  .cna-piega { display: block; width: 100%; }
}

.cna-avvertenza {
  font-family: var(--lineare); font-size: 0.82rem; line-height: 1.55;
  color: var(--inchiostro-douce); border-top: 1px solid var(--filetto);
  padding-top: 0.9rem; margin: 1.4rem auto 0.2rem;
}
.cna-avvertenza a { color: var(--cielo); }

/* Scena d'apertura: la sola fotografia del primo schermo, non lazy. */
.cna-cartiglio .cna-chemin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
.cna-cartiglio__scena { margin: 0; }
.cna-cartiglio__vue { display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover; border: 1px solid var(--filetto); }
.cna-cartiglio__scena figcaption { margin-top: 0.7rem; font-size: 0.76rem; line-height: 1.5; color: var(--inchiostro-douce); }
@media (max-width: 860px) { .cna-cartiglio .cna-chemin { grid-template-columns: 1fr; } .cna-cartiglio__scena { order: -1; } }

@media (max-width: 700px) { .cna-entree__vue { width: 118px; height: 89px; } }
/* Legenda di ogni tavola: la mention d'image illustrative doit etre VISIBLE, pas
   seulement dans l'attribut alt (correction du juge factuel, 06/09/2026). */
.cna-tavola figcaption { margin-top: 0.7rem; font-size: 0.76rem; line-height: 1.5; color: var(--inchiostro-douce); }