



@font-face {
  font-family: "Erode";
  src: url("../fonts/Erode-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Erode";
  src: url("../fonts/Erode-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


:root {
  color-scheme: light;
  font-synthesis: none;

  
  --vvs-carta:      #F0E7D3; 
  --vvs-intonaco:   #EAE0CB; 
  --vvs-inchiostro: #272C30; 
  --vvs-legno:      #5A564E; 
  --vvs-cotto:      #114A5C; 
  --vvs-cornice:    #6E6A5F; 
  --vvs-filo:       #CEC2A8; 
  --vvs-notte:      #19333D; 
  --vvs-lume:       #F0E7D3; 
  --vvs-paglia:     #B3C4C2; 
  --vvs-ocra:       #E3BE7E; 
  --vvs-filo-notte: #456069; 
  
}


:root, [data-fondo="carta"], [data-fondo="intonaco"] {
  --vvs-sfondo:                var(--vvs-carta);      
  --vvs-superficie:            var(--vvs-intonaco);   
  --vvs-testo:                 var(--vvs-inchiostro); 
  --vvs-testo-tenue:           var(--vvs-legno);      
  --vvs-collegamento:          var(--vvs-cotto);      
  --vvs-azione-fondo:          var(--vvs-cotto);      
  --vvs-azione-testo:          var(--vvs-carta);      
  --vvs-azione-premuta-fondo:  var(--vvs-inchiostro); 
  --vvs-azione-premuta-testo:  var(--vvs-carta);      
  --vvs-fuoco:                 var(--vvs-inchiostro); 
  --vvs-bordo-controllo:       var(--vvs-cornice);    
  --vvs-filo-decorativo:       var(--vvs-filo);       
}

:root {

  
  --vvs-font-display: "Erode", Georgia, "Times New Roman", serif;
  --vvs-font-testo:   "General Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --vvs-peso-regolare: 400;
  --vvs-peso-medio:    500; 
  --vvs-peso-forte:    600; 

  
  --vvs-dim-etichetta:  0.8125rem; 
  --vvs-int-etichetta:  1rem;      
  --vvs-tracking-etichetta: 0.08em;
  --vvs-dim-didascalia: 0.9375rem; 
  --vvs-int-didascalia: 1.375rem;  
  --vvs-dim-corpo:      1.0625rem; 
  --vvs-int-corpo:      1.625rem;  
  --vvs-dim-azione:     1.25rem;   
  --vvs-int-azione:     1.5rem;    
  --vvs-dim-insegna:    1.25rem;   
  --vvs-int-insegna:    1.5rem;    
  --vvs-dim-voce:       1.5rem;    
  --vvs-int-voce:       1.875rem;  
  --vvs-dim-capitolo:   1.875rem;  
  --vvs-int-capitolo:   2.25rem;   
  --vvs-tracking-capitolo: -0.005em;
  --vvs-dim-titolo:     2.375rem;  
  --vvs-int-titolo:     2.875rem;  
  --vvs-tracking-titolo: -0.01em;
  --vvs-dim-cifra:      3rem;      
  --vvs-int-cifra:      3.25rem;   
  --vvs-tracking-cifra: -0.01em;
  --vvs-tracking-normale: 0;        

  
  --vvs-spazio-1: 0.25rem; 
  --vvs-spazio-2: 0.5rem;  
  --vvs-spazio-3: 0.75rem; 
  --vvs-spazio-4: 1rem;    
  --vvs-spazio-5: 1.5rem;  
  --vvs-spazio-6: 2rem;    
  --vvs-spazio-7: 3rem;    
  --vvs-spazio-8: 4.5rem;  
  --vvs-spazio-9: 6rem;    

  --vvs-margine:          1.25rem;              
  --vvs-tra-capitoli:     var(--vvs-spazio-8);  
  --vvs-titolo-testo:     var(--vvs-spazio-3);  
  --vvs-tra-paragrafi:    var(--vvs-spazio-4);  
  --vvs-foto-didascalia:  var(--vvs-spazio-2);  
  --vvs-misura:           36rem;                
  --vvs-larghezza-pagina: 75rem;                

  
  --vvs-tocco-min:          2.75rem; 
  --vvs-altezza-azione:     3.5rem;  
  --vvs-altezza-barra:      3.5rem;  
  --vvs-intorno-con-bordo:  var(--vvs-spazio-3); 
  --vvs-intorno-senza-bordo: var(--vvs-spazio-5); 
  --vvs-fuoco-spessore:     3px;     
  --vvs-fuoco-distanza:     2px;
  --vvs-filo-spessore:      1px;
  --vvs-sottolineato-spessore: 1px;  
  --vvs-sottolineato-spessore-premuto: 2px;
  --vvs-sottolineato-distanza: 0.2em;

  
  --vvs-raggio: 0;
  --vvs-ombra:  none;

  
  --vvs-foto-orizzontale: 3 / 2;
  --vvs-foto-verticale:   4 / 5;
  
  --vvs-foto-prima-max:   none;

  
}


@media (min-width: 64rem) {
  :root {
    --vvs-dim-corpo:     1.125rem;  
    --vvs-int-corpo:     1.75rem;   
    --vvs-dim-voce:      1.625rem;  
    --vvs-int-voce:      2rem;      
    --vvs-dim-capitolo:  2.5rem;    
    --vvs-int-capitolo:  3rem;      
    --vvs-dim-titolo:    3.5rem;    
    --vvs-int-titolo:    4.25rem;   
    --vvs-dim-cifra:     4.5rem;    
    --vvs-int-cifra:     4.75rem;   
    --vvs-margine:       2.5rem;    
    
    --vvs-foto-prima-max: max(15rem, calc(100svh - 30rem));
    --vvs-tra-capitoli:  var(--vvs-spazio-9); 
  }
}


[data-fondo="intonaco"] { --vvs-sfondo: var(--vvs-intonaco); }
[data-fondo="notte"] {
  --vvs-sfondo:               var(--vvs-notte);
  --vvs-superficie:           var(--vvs-notte);     
  --vvs-testo:                var(--vvs-lume);      
  --vvs-testo-tenue:          var(--vvs-paglia);    
  --vvs-collegamento:         var(--vvs-ocra);      
  --vvs-azione-fondo:         var(--vvs-ocra);
  --vvs-azione-testo:         var(--vvs-notte);     
  --vvs-azione-premuta-fondo: var(--vvs-lume);
  --vvs-azione-premuta-testo: var(--vvs-notte);     
  --vvs-fuoco:                var(--vvs-lume);      
  --vvs-bordo-controllo:      var(--vvs-paglia);    
  --vvs-filo-decorativo:      var(--vvs-filo-notte);
}
html, [data-fondo] {
  background-color: var(--vvs-sfondo);
  color: var(--vvs-testo);
}
::selection {
  background-color: var(--vvs-azione-premuta-fondo);
  color: var(--vvs-azione-premuta-testo);
}
::placeholder {
  color: var(--vvs-testo-tenue);
  opacity: 1;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}



@font-face { font-family: "Erode ripiego"; src: local("Georgia"); size-adjust: 91.563%; ascent-override: 101.569%; descent-override: 24.027%; line-gap-override: 9.829%; }
@font-face { font-family: "Erode ripiego Times"; src: local("Times New Roman"); size-adjust: 99.060%; ascent-override: 93.883%; descent-override: 22.209%; line-gap-override: 9.085%; }
@font-face { font-family: "General Sans ripiego"; src: local("Helvetica Neue"), local("HelveticaNeue"); size-adjust: 97.461%; ascent-override: 103.632%; descent-override: 24.625%; line-gap-override: 10.261%; }
@font-face { font-family: "General Sans ripiego Arial"; src: local("Arial"); size-adjust: 97.720%; ascent-override: 103.357%; descent-override: 24.560%; line-gap-override: 10.233%; }
:root {
  --vvs-font-display: "Erode", "Erode ripiego", "Erode ripiego Times", Georgia, "Times New Roman", serif;
  --vvs-font-testo:   "General Sans", "General Sans ripiego", "General Sans ripiego Arial", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body, h1, h2, p, figure, blockquote, dl, dd, ul { margin: 0; }
body { font-family: var(--vvs-font-testo); font-weight: var(--vvs-peso-regolare); font-size: var(--vvs-dim-corpo); line-height: var(--vvs-int-corpo); text-align: start; }
a, a:visited { color: var(--vvs-collegamento); text-decoration-thickness: var(--vvs-sottolineato-spessore); text-underline-offset: var(--vvs-sottolineato-distanza); }
a:active { text-decoration-thickness: var(--vvs-sottolineato-spessore-premuto); }
a:focus-visible { outline: var(--vvs-fuoco-spessore) solid var(--vvs-fuoco); outline-offset: var(--vvs-fuoco-distanza); }
.collegamento { display: inline-flex; align-items: center; min-height: var(--vvs-tocco-min); min-width: var(--vvs-tocco-min); font-weight: var(--vvs-peso-forte); }
.griglia { max-width: var(--vvs-larghezza-pagina); margin-inline: auto; padding-inline: var(--vvs-margine); }
.barra { min-height: var(--vvs-altezza-barra); display: flex; align-items: center; justify-content: space-between; gap: var(--vvs-spazio-4); }
.marchio { color: var(--vvs-testo); }
.marchio svg { display: block; height: var(--vvs-spazio-6); width: auto; }
.titolo, .capitolo, .voce, .cifra { font-family: var(--vvs-font-display); color: var(--vvs-testo); font-weight: var(--vvs-peso-medio); }
.titolo { font-size: var(--vvs-dim-titolo); line-height: var(--vvs-int-titolo); letter-spacing: var(--vvs-tracking-titolo); }
.capitolo { font-size: var(--vvs-dim-capitolo); line-height: var(--vvs-int-capitolo); letter-spacing: var(--vvs-tracking-capitolo); margin-bottom: var(--vvs-titolo-testo); }
.voce { font-size: var(--vvs-dim-voce); line-height: var(--vvs-int-voce); }
.cifra { font-weight: var(--vvs-peso-regolare); font-size: var(--vvs-dim-cifra); line-height: var(--vvs-int-cifra); letter-spacing: var(--vvs-tracking-cifra); }
a.cifra { display: inline; vertical-align: baseline; color: var(--vvs-collegamento); }
.corpo { font-size: var(--vvs-dim-corpo); line-height: var(--vvs-int-corpo); }
.forte { font-weight: var(--vvs-peso-forte); }
.azione { font-family: var(--vvs-font-testo); font-size: var(--vvs-dim-azione); line-height: var(--vvs-int-azione); font-weight: var(--vvs-peso-forte); }
.didascalia { font-size: var(--vvs-dim-didascalia); line-height: var(--vvs-int-didascalia); color: var(--vvs-testo-tenue); }
.etichetta { font-family: var(--vvs-font-testo); font-size: var(--vvs-dim-etichetta); line-height: var(--vvs-int-etichetta); letter-spacing: var(--vvs-tracking-etichetta); font-weight: var(--vvs-peso-forte); text-transform: uppercase; color: var(--vvs-testo-tenue); }
.conferma { margin-inline-start: var(--vvs-spazio-2); }
.chiamata, .chiamata:visited { text-decoration: none; min-height: var(--vvs-altezza-azione); display: flex; align-items: center; padding: var(--vvs-spazio-4); width: 100%; max-width: var(--vvs-misura); background: var(--vvs-azione-fondo); color: var(--vvs-azione-testo); margin-top: var(--vvs-spazio-4); }
.chiamata:active { text-decoration: none; background: var(--vvs-azione-premuta-fondo); color: var(--vvs-azione-premuta-testo); }
@media (hover: hover) {
 a:hover { text-decoration-thickness: var(--vvs-sottolineato-spessore-premuto); }
 .chiamata:hover { text-decoration: none; background: var(--vvs-azione-premuta-fondo); color: var(--vvs-azione-premuta-testo); }
}
picture, img { display: block; width: 100%; }
img { height: auto; }
.prima { display: grid; }
.prima-foto { grid-row: 1; }
.prima-didascalia { padding: var(--vvs-spazio-4) var(--vvs-margine) 0; }
.apertura { padding: 0 var(--vvs-margine); }
.apertura .titolo, .apertura .riga-b { margin-top: var(--vvs-spazio-2); }
.apertura .prenota { margin-top: var(--vvs-titolo-testo); }
.sezione { margin-top: var(--vvs-tra-capitoli); }
.testo { padding-inline: var(--vvs-margine); }
.testo > p, .testo > blockquote { max-width: var(--vvs-misura); margin-bottom: var(--vvs-tra-paragrafi); }
.fotografie figure { margin-block: var(--vvs-spazio-6); }
figcaption { padding-inline: var(--vvs-margine); margin-top: var(--vvs-foto-didascalia); }
.pannello { padding: var(--vvs-spazio-5); max-width: var(--vvs-misura); margin-block: var(--vvs-spazio-5); border-block: var(--vvs-filo-spessore) solid var(--vvs-filo-decorativo); }
.pannello ul { list-style: none; padding: 0; margin-block: var(--vvs-spazio-4); }
.colonna-tempo { display: grid; grid-template-columns: auto 1fr; gap: var(--vvs-spazio-5); max-width: var(--vvs-misura); margin-block: var(--vvs-spazio-6); }
.banda-notte { margin-top: var(--vvs-tra-capitoli); padding-bottom: var(--vvs-spazio-6); }
.piede { padding-block: var(--vvs-spazio-8); }
.piede > svg { height: var(--vvs-altezza-barra); width: auto; max-width: 100%; }
.legale { color: var(--vvs-testo-tenue); border-top: var(--vvs-filo-spessore) solid var(--vvs-filo-decorativo); padding-top: var(--vvs-spazio-5); margin-top: var(--vvs-spazio-5); }
.legale p:first-child { color: var(--vvs-testo); }
.piede > a { display: flex; margin-top: var(--vvs-intorno-senza-bordo); width: fit-content; }
.anteprima { padding-block: var(--vvs-spazio-6); }
.legale-pagina { padding-block: var(--vvs-tra-capitoli); }
.legale-pagina p { max-width: var(--vvs-misura); margin-top: var(--vvs-tra-paragrafi); }
.salta:not(:focus) { position: absolute; clip-path: inset(100%); width: 0; overflow: hidden; }
@media (min-width: 64rem) {
 .prima, .sezione { max-width: var(--vvs-larghezza-pagina); margin-inline: auto; padding-inline: var(--vvs-margine); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vvs-spazio-6); }
 .prima { padding-top: var(--vvs-spazio-4); }
 .prima-foto { grid-column: 2; grid-row: 1; } .apertura { grid-column: 1; grid-row: 1; padding: 0; }
 .prima-foto img { max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
 .prima-didascalia { grid-column: 2; grid-row: 2; padding: 0; margin-top: var(--vvs-foto-didascalia); }
 .prima { row-gap: 0; }
 .apertura .titolo { margin-top: 0; }
 .testo { padding: 0; } .fotografie figure { margin: 0 0 var(--vvs-spazio-7); } figcaption { padding-inline: 0; }
 .banda-notte figure { width: calc(100% / 3); margin-inline: auto; }
}
@media print {
 html, body, [data-fondo] { background: transparent; color: var(--vvs-inchiostro); }
 picture, .banda-notte, .barra, .lingua, .anteprima, .salta { display: none; }
 a, a:visited, a.cifra { display: inline; vertical-align: baseline; color: var(--vvs-inchiostro); text-decoration: none; }
 .chiamata { background: transparent; color: var(--vvs-inchiostro); padding: 0; }
 .pannello { border: var(--vvs-filo-spessore) solid var(--vvs-inchiostro); }
 .sezione { break-inside: avoid; }
 .legale, .legale p:first-child { color: var(--vvs-inchiostro); }
}
.presente > .capitolo { margin-inline: var(--vvs-margine); }
@media (min-width: 64rem) {
 .presente { grid-template-rows: auto auto auto; row-gap: 0; align-items: start; }
 .presente > .capitolo { grid-column: 1; grid-row: 1; margin-inline: 0; }
 .presente > .testo { grid-column: 1; grid-row: 2; }
 .foto-presente { grid-column: 2; grid-row: 1 / 4; }
 .foto-memoria { grid-column: 1; grid-row: 3; margin-top: var(--vvs-spazio-7); }
}
.piede > svg { height: calc(var(--vvs-spazio-6) * 2); }
.testo > .collegamento { margin-block: var(--vvs-intorno-senza-bordo); }
.stampa-menu { display: none; }
.fotogramma + .fotogramma { margin-top: var(--vvs-spazio-7); }
@media print {
 figure, .fotografie { display: none; }
 .stampa-menu { display: block; }
}
.definizioni { position: absolute; width: 0; height: 0; }


body { overflow-wrap: anywhere; }
.colonna-tempo { grid-template-columns: auto minmax(0, 1fr); }
.collegamento { max-width: 100%; }
