@font-face {
  font-family: 'Bodoni';
  src: url('caratteri/bodoni-tondo.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FFFD;
}

@font-face {
  font-family: 'Bodoni';
  src: url('caratteri/bodoni-corsivo.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken';
  src: url('caratteri/hanken.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  
}

@font-face {
  font-family: 'Ripiego Hanken';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  
  size-adjust: 101.67%; ascent-override: 101.3%; descent-override: 26.1%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Ripiego Hanken';
  src: local('Segoe UI'), local('SegoeUI');
  
  size-adjust: 101.15%; ascent-override: 102.6%; descent-override: 26.4%; line-gap-override: 0%;
}

@font-face {
  font-family: 'Ripiego Bodoni';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 103.06%; ascent-override: 117.6%; descent-override: 30.3%; line-gap-override: 0%;
}

:root {
  
  --carta:       #EFEFEC;   
  --superficie:  #FFFFFF;   
  --rilievo:     #E4E4E0;   
  --notte:       #1A1A17;   

  --notte-alta:  #26261F;   

  --inchiostro:   #1A1A17;  
  --secondario:   #55554E;  
  --tenue:        #63635C;  
  --chiaro:       #F2F2EF;  
  --chiaro-tenue: #A3A39B;  

  
  --acqua:       #6FCBB8;   
  --acqua-scura: #0B5A4E;   
  --acqua-velo:  rgba(111, 203, 184, .12);

  
  --ottone:        #8A6B33;   
  --ottone-testo:  #7A5E2C;   
  --ottone-chiaro: #C9A76A;   

  

  --riga:       #E2E2DE;   
  --riga-forte: #86867E;   
  --griglia:    #E7E7E3;   
  --riga-scura: rgba(240, 240, 232, .16);

  --sopra:   #2C2C27;   
  --premuto: #0D0D0B;   
  --errore:  #8C3A22;   

  
  
  --velo-foto:
      
      radial-gradient(140% 172% at 0% 118%,
                      rgba(12, 12, 10, .92) 0%, rgba(12, 12, 10, .78) 46%,
                      rgba(12, 12, 10, .46) 66%, rgba(12, 12, 10, 0) 88%),
      linear-gradient(180deg, rgba(12, 12, 10, .24) 0%, rgba(12, 12, 10, .05) 30%,
                              rgba(12, 12, 10, .16) 100%);

  
  --vetro:        rgba(247, 245, 241, .72);
  --vetro-scuro:  rgba(22, 18, 14, .55);
  --sfoca:        blur(18px) saturate(1.25);
  
  --ombra-vicina: 0 1px 2px rgba(138, 107, 51, .06), 0 2px 6px rgba(138, 107, 51, .05);
  --ombra-media:  0 2px 6px rgba(138, 107, 51, .07), 0 10px 24px rgba(138, 107, 51, .08);
  --ombra-alta:   0 4px 12px rgba(138, 107, 51, .08), 0 24px 56px rgba(138, 107, 51, .11);

  
  --titolo: 'Bodoni', 'Ripiego Bodoni', Georgia, 'Times New Roman', serif;
  --serie:  'Hanken', 'Ripiego Hanken', -apple-system,
            BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  
  --t-apertura: clamp(2.75rem, 2.05rem + 3.1vw, 4.5rem);      
  --t-1:        clamp(2rem, 1.6rem + 1.8vw, 3rem);            
  --t-2:        clamp(1.5rem, 1.3rem + .9vw, 2rem);           
  --t-3:        clamp(1.1875rem, 1.12rem + .3vw, 1.375rem);   
  --t-corpo:    clamp(1.0625rem, 1.01rem + .25vw, 1.1875rem); 
  --t-piccolo:  .9375rem;   
  --t-minuto:   .8125rem;   
  --t-etichetta:.75rem;     

  
  --stretta-grande: clamp(-.028em, -.045em + .55vw, -.005em);
  --stretta-media:  clamp(-.018em, -.03em + .38vw, -.002em);

  
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;   --s11: 10rem;

  
  --largo:   82rem;
  --medio:   58rem;
  --stretto: 34rem;   

  
  --raggio-piccolo: 4px;    
  --raggio:         12px;   
  --raggio-grande:  20px;   

  
  --t-tocco: 120ms;   
  --t-breve: 220ms;   
  --t-medio: 320ms;   
  --t-lungo: 460ms;   
  --e-uscita:  cubic-bezier(.3, 0, .8, .15);
  --e-entrata: cubic-bezier(.16, 1, .3, 1);
  --e-morbida: cubic-bezier(.65, 0, .35, 1);
  --e-comparsa: cubic-bezier(.22, .61, .36, 1);  
  --transizione: var(--t-breve) var(--e-morbida);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--serie);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.62;
  
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

::selection { background: var(--acqua-velo); color: var(--inchiostro); }
.fascia-scura ::selection,
.piede ::selection { background: rgba(79, 214, 188, .3); color: #fff; }
:root { accent-color: var(--acqua-scura); caret-color: var(--acqua-scura); }
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--riga-forte) transparent; scrollbar-width: thin; }
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--titolo);
  font-weight: 400;
  text-wrap: balance;
  
}
h4 { margin: 0; font-weight: 500; }

h1 { font-size: var(--t-1); line-height: 1.06; letter-spacing: var(--stretta-media); }
h2 { font-size: var(--t-2); line-height: 1.15; letter-spacing: var(--stretta-media); }
h3 { font-size: var(--t-3); line-height: 1.28; font-weight: 500; letter-spacing: -.005em; }
h4 {
  font-family: var(--serie); font-size: var(--t-piccolo);
  line-height: 1.4; letter-spacing: .02em;
}

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
strong, b { font-weight: 500; }

.minuti {
  font-family: var(--serie);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--acqua-scura);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.fascia-scura .minuti, .piede .minuti { color: var(--acqua); }

.occhio {
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--secondario);
  max-width: 46ch;
}
.sopratitolo { font-size: var(--t-3); color: var(--secondario); line-height: 1.5; }

.testo-lungo { max-width: var(--stretto); }
.testo-lungo p { color: var(--secondario); }
.testo-lungo p strong { color: var(--inchiostro); font-weight: 500; }

.testo-lungo p + h2,
.testo-lungo ul + h2,
.testo-lungo ol + h2 { margin-top: var(--s8); }
.testo-lungo h2 + p { margin-top: var(--s5); }
.testo-lungo p + h3,
.testo-lungo ul + h3,
.testo-lungo ol + h3 { margin-top: var(--s7); }
.testo-lungo h3 + p { margin-top: var(--s4); }
.testo-lungo ul, .testo-lungo ol { margin: 0 0 var(--s5); padding-left: 1.15em; color: var(--secondario); }
.testo-lungo li { margin-bottom: var(--s2); }
.testo-lungo li::marker { color: var(--tenue); }
.testo-lungo a { color: var(--acqua-scura); text-decoration-color: var(--acqua-velo); }
.testo-lungo a:hover { text-decoration-color: currentColor; }

.testo-lungo a.freccia { color: var(--inchiostro); text-decoration: none; }

.citazione {
  font-family: var(--titolo); font-size: var(--t-2); font-style: italic;
  line-height: 1.4; letter-spacing: -.008em; color: var(--inchiostro);
}

:root { --gronda: clamp(1.25rem, 4vw, 3rem); }

.contenitore         { width: min(100% - var(--gronda) * 2, var(--largo));   margin-inline: auto; }
.contenitore-medio   { width: min(100% - var(--gronda) * 2, var(--medio));   margin-inline: auto; }
.contenitore-stretto { width: min(100% - var(--gronda) * 2, var(--stretto)); margin-inline: auto; }

.fascia { padding-block: clamp(var(--s9), 4vw + 2.5rem, var(--s11)); }
.fascia-corta { padding-block: clamp(var(--s8), 3vw + 1.5rem, var(--s9)); }

.fascia-ampia    { padding-block: clamp(var(--s10), 7vw + 2.5rem, var(--s11)); }
.fascia-attaccata{ padding-top: 0; }
.fascia-serrata  { padding-block: clamp(var(--s7), 2vw + 1.5rem, var(--s8)); }

.fascia-panna { background: var(--superficie); }

.fascia-carta { background: var(--rilievo); }
.fascia-scura { background: var(--notte); color: var(--chiaro); }
.fascia-scura h1, .fascia-scura h2, .fascia-scura h3 { color: var(--chiaro); }
.fascia-scura .occhio { color: var(--chiaro-tenue); }

.fascia-scura a:not(.bottone) { color: var(--chiaro); }

.fascia-scura .testo-lungo p,
.fascia-scura .testo-lungo li { color: var(--chiaro-tenue); }
.fascia-scura .testo-lungo strong { color: var(--chiaro); font-weight: 500; }
.fascia-scura .testo-lungo a { color: var(--acqua); }

.fascia-scura .testo-lungo a.freccia { color: var(--chiaro); }
.fascia-scura .scheda { background: transparent; border-color: var(--riga-scura); }
.fascia-scura .scheda p { color: var(--chiaro-tenue); }
.fascia-scura .scheda-misura { color: var(--chiaro-tenue); }
.fascia-scura .scheda:hover { border-color: var(--riga-scura); }

.con-griglia { position: relative; }
.con-griglia::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--griglia) 0 1px,
    transparent 1px calc(100% / 4)
  );
  background-size: 100% 100%;
  opacity: .9;
}
.con-griglia > * { position: relative; }

@media (max-width: 47.9375rem) { .con-griglia::before { display: none; } }

.griglia { display: grid; gap: var(--s5); }
.griglia-2, .griglia-3 { grid-template-columns: 1fr; }
.griglia-4 { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }

@media (min-width: 48rem) {
  .griglia-2 { grid-template-columns: repeat(2, 1fr); }
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
}

.intestazione-sezione {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s8);
  text-align: center;
}
@media (min-width: 56rem) {
  .intestazione-sezione {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--s8);
    align-items: center;
  }
}

.intestazione-sezione .occhio { margin-inline: auto; text-align: justify; text-align-last: center; }

.intestazione-centrata {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s8);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--riga);
  text-align: center;
}
@media (min-width: 56rem) {
  .intestazione-centrata { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
}
.intestazione-centrata h2 { max-width: 20ch; margin-inline: auto; }
.intestazione-centrata .occhio { max-width: 46ch; margin-inline: auto; text-align: justify; text-align-last: center; }
.fascia-scura .intestazione-centrata { border-color: var(--riga-scura); }

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;              
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9375rem;
  
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), opacity var(--transizione),
              transform var(--transizione), box-shadow var(--transizione);
}

.bottone:hover  { transform: translateY(-1px); box-shadow: var(--ombra-vicina); }
.bottone:active { transform: translateY(1px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .bottone:hover, .bottone:active { transform: none; }
}

.bottone-primario { background: var(--inchiostro); color: var(--carta); }
.bottone-primario:hover  { background: var(--sopra); }
.bottone-primario:active { background: var(--premuto); }

.bottone-secondario { background: transparent; color: var(--inchiostro); border-color: var(--riga-forte); }
.bottone-secondario:hover  { border-color: var(--inchiostro); background: var(--acqua-velo); }

.fascia-scura .bottone-secondario { color: #fff; border-color: rgba(255,255,255,.52); }
.fascia-scura .bottone-secondario:hover { border-color: #fff; background: rgba(255,255,255,.12); }

.bottone-chiaro { background: var(--superficie); color: var(--inchiostro); }
.bottone-chiaro:hover  { background: var(--rilievo); }
.bottone-chiaro:active { background: var(--riga); transform: translateY(1px); }

.gruppo-bottoni { display: flex; flex-wrap: wrap; gap: var(--s3); }

.freccia {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   
  gap: var(--s1);
  font-size: .875rem;
  font-weight: 500;
  color: var(--inchiostro);
  text-decoration: none;
  transition: gap var(--transizione);
}
.freccia::after {
  content: '';
  width: 1.375rem; height: 1.375rem;
  border: 1px solid var(--riga-forte);
  border-radius: 999px;
  background: no-repeat center / .5rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M6.5 2l4 4-4 4' fill='none' stroke='%2314140F' stroke-width='1.3'/%3E%3C/svg%3E");
  flex: none;
  transition: border-color var(--transizione), transform var(--transizione);
}
.freccia:hover::after { border-color: var(--inchiostro); transform: translateX(2px); }
.fascia-scura .freccia { color: var(--chiaro); }
.fascia-scura .freccia::after {
  border-color: var(--riga-scura);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M6.5 2l4 4-4 4' fill='none' stroke='%23F2F2F0' stroke-width='1.3'/%3E%3C/svg%3E");
}

:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
.fascia-scura :focus-visible, .apertura :focus-visible,
.piede :focus-visible, .lente :focus-visible { outline-color: var(--chiaro); }

.bottone:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 4px var(--acqua-velo); }

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--inchiostro); color: var(--carta);
  padding: var(--s3) var(--s5); border-radius: var(--raggio-piccolo);
  text-decoration: none;
}
.salta-al-contenuto:focus { left: var(--s4); top: var(--s4); }

.barra {
  position: sticky; top: 0; z-index: 100;
  background: var(--vetro);
  backdrop-filter: var(--sfoca);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transizione), background var(--transizione);
}
.barra.staccata { border-bottom-color: var(--riga); }

.barra-dentro {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 4.25rem;
}

.marchio { display: inline-flex; align-items: center; text-decoration: none; }

.marchio img { width: 5.75rem; height: auto; }

.menu { display: none; }
@media (min-width: 62rem) { .menu { display: flex; align-items: center; gap: var(--s6); } }
.menu a {
  font-size: .875rem; text-decoration: none; color: var(--secondario);
  padding-block: .35rem; transition: color var(--transizione);
}
.menu a:hover, .menu a[aria-current='page'] { color: var(--inchiostro); }

.barra-azioni { display: flex; align-items: center; gap: var(--s3); }

.selettore-lingua { display: none; position: relative; }
@media (min-width: 62rem) { .selettore-lingua { display: block; } }
.selettore-lingua-apri {
  min-height: 2.75rem; padding: 0 var(--s3);
  background: none; border: 1px solid var(--riga-forte); border-radius: 999px;
  color: var(--inchiostro); font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  transition: border-color var(--transizione);
}
.selettore-lingua-apri:hover { border-color: var(--inchiostro); }
.selettore-lingua-elenco {
  position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 50;
  display: grid; min-width: 9rem; padding: var(--s2);
  background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio);
  box-shadow: var(--ombra-media);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--transizione), transform var(--transizione), visibility var(--transizione);
}
.selettore-lingua:hover .selettore-lingua-elenco,
.selettore-lingua:focus-within .selettore-lingua-elenco {
  opacity: 1; visibility: visible; transform: none;
}
.selettore-lingua-elenco a {
  padding: var(--s2) var(--s3); border-radius: var(--raggio-piccolo);
  text-decoration: none; color: var(--secondario); font-size: .875rem;
  transition: background var(--transizione), color var(--transizione);
}
.selettore-lingua-elenco a:hover { background: var(--rilievo); color: var(--inchiostro); }
.selettore-lingua-elenco a.attiva { color: var(--inchiostro); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .selettore-lingua-elenco { transition: none; } }

.selettore-lingua-menu { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--riga); }
.selettore-lingua-righe { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.selettore-lingua-righe a { color: inherit; text-decoration: none; font-size: 1rem; }
.selettore-lingua-righe a.attiva { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.barra .bottone { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .875rem; }
@media (max-width: 61.9375rem) { .barra .bottone-barra { display: none; } }

.apri-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--riga-forte);
  border-radius: 999px; cursor: pointer; color: var(--inchiostro);
}
@media (min-width: 62rem) { .apri-menu { display: none; } }
.apri-menu span, .apri-menu span::before, .apri-menu span::after {
  display: block; width: 16px; height: 1px; background: currentColor;
  transition: transform var(--transizione), opacity var(--transizione);
}
.apri-menu span { position: relative; }
.apri-menu span::before, .apri-menu span::after { content: ''; position: absolute; left: 0; }
.apri-menu span::before { top: -5px; }
.apri-menu span::after  { top: 5px; }
.apri-menu[aria-expanded='true'] span { background: transparent; }
.apri-menu[aria-expanded='true'] span::before { transform: translateY(5px) rotate(45deg); }
.apri-menu[aria-expanded='true'] span::after  { transform: translateY(-5px) rotate(-45deg); }

.menu-telefono {
  position: fixed; inset: 4.25rem 0 0; z-index: 99;
  background: var(--carta);
  padding: var(--s5) var(--gronda) calc(var(--s6) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transizione), transform var(--transizione), visibility var(--transizione);
}
.menu-telefono.aperto { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 62rem) { .menu-telefono { display: none; } }

.menu-telefono a:not(.bottone) {
  display: block; font-size: 1.25rem; letter-spacing: -.02em;
  text-decoration: none; padding: var(--s2) 0; border-bottom: 1px solid var(--riga);
}

.menu-telefono .voce-piccola { font-size: 1.25rem; color: inherit; padding: var(--s2) 0; }
.menu-telefono .gruppo-bottoni { margin-top: var(--s5); }
.menu-telefono .bottone { flex: 1 1 100%; }

.apertura {
  padding-block: clamp(var(--s9), 7vw + 1.5rem, var(--s11)) 0;
}

.apertura h1 .riga-mascherata { display: block; overflow: hidden; }
.apertura h1 .riga-dentro {
  display: block;
  transform: translateY(105%);
  animation: entra-riga 700ms var(--e-comparsa) forwards;
  animation-delay: calc(var(--n, 0) * 70ms + 60ms);
}
@keyframes entra-riga { to { transform: translateY(0); } }

.apertura h1 {
  font-size: var(--t-apertura);
  line-height: 1.02;
  letter-spacing: var(--stretta-grande);
  max-width: 17ch;
  text-wrap: balance;
}

.apertura h1 em { font-style: italic; }

.apertura-sotto {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s6);
  max-width: 46ch;
}
.apertura-sotto p { color: var(--secondario); font-size: var(--t-corpo); }

.orario {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) 0;
  margin-top: var(--s8);
  padding-top: var(--s4);
}

.orario::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--riga);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--e-entrata);
}
.orario.linea-disegnata::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .orario::before { transform: scaleX(1); transition: none; }
}

@media (min-width: 64rem) {
  .orario { display: grid; grid-template-columns: repeat(8, 1fr); }
}
.orario-voce {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
  padding-right: var(--s6);
  margin-right: var(--s6);
  border-right: 1px solid var(--riga);
}
.orario-voce:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.orario-tempo {
  font-family: var(--serie);
  
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: clamp(-.025em, -.03em + .3vw, -.01em);
  color: var(--acqua-scura);
}
.orario-tempo span {
  font-size: var(--t-minuto); font-weight: 400;
  letter-spacing: 0; margin-left: .2em; color: var(--tenue);
}
.orario-nome { font-size: var(--t-piccolo); font-weight: 500; margin-top: var(--s2); }
.orario-nota { font-size: var(--t-minuto); color: var(--tenue); }

@media (max-width: 47.9375rem) {
  
  .orario { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .orario-voce {
    padding: var(--s3) var(--s4) var(--s3) 0;
    margin: 0;
    border-right: 0;
    border-bottom: 1px solid var(--riga);
  }
  .orario-voce:nth-child(odd)  { border-right: 1px solid var(--riga); padding-right: var(--s4); }
  .orario-voce:nth-child(even) { padding-left: var(--s4); }
  .orario-voce:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

@media (max-width: 47.9375rem) {
  .fascia-carta { display: none; }
}
.mappa-cornice { max-width: 82rem; margin-inline: auto; }

.apertura-foto {
  margin-top: clamp(var(--s7), 5vw, var(--s9));
  width: 100%;
  
  overflow: hidden;
}
.apertura-foto img {
  width: 100%;
  height: clamp(18rem, 52vw, 40rem);
  object-fit: cover;
  border-radius: 0;
}

.apertura-tipografica { padding-block: clamp(var(--s8), 5vw + 1.5rem, var(--s9)) var(--s7); }
.apertura-tipografica h1 { max-width: 20ch; }

.riga-guida {
  font-family: var(--serie);
  font-size: var(--t-minuto);
  color: var(--tenue);
  margin: 0 0 var(--s4);
  letter-spacing: 0;
}
.fascia-scura .riga-guida { color: var(--chiaro-tenue); }

.righe-tempi { border-top: 1px solid var(--riga); }
.righe-tempi > * {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--riga);
}
@media (min-width: 48rem) {
  .righe-tempi > * { grid-template-columns: 14rem 1fr auto; }
}
.fascia-scura .righe-tempi,
.fascia-scura .righe-tempi > * { border-color: var(--riga-scura); }

.scheda {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--superficie);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: var(--s6) var(--s5);
  transition: border-color var(--transizione);
}
.scheda:hover { border-color: var(--riga-forte); }
.scheda h3 { margin-bottom: var(--s1); }
.scheda p { color: var(--secondario); font-size: .9375rem; }

.scheda .freccia { margin-top: auto; align-self: flex-start; padding-top: var(--s4); }
.scheda > .bottone { margin-top: auto; align-self: flex-start; }
.fascia-panna .scheda { background: var(--carta); }

.scheda-misura {
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); margin: 0;
}

.scheda-foto { padding: 0; overflow: hidden; }
.scheda-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scheda-foto .scheda-corpo {
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1;
}

.righe { border-top: 1px solid var(--riga); }
.riga {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--riga);
}

.riga { flex-wrap: wrap; }
.riga-nome { font-size: .9375rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.riga-nota { display: block; font-size: .8125rem; font-weight: 400; color: var(--secondario); margin-top: 2px; }
.riga-dato {
  font-size: 1.125rem; white-space: nowrap; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fascia-scura .righe, .fascia-scura .riga { border-color: var(--riga-scura); }
.fascia-scura .riga-nota { color: var(--chiaro-tenue); }

.foto-piena img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raggio-grande); }

.didascalia { font-size: .8125rem; color: var(--secondario); margin-top: var(--s3); max-width: 64ch; }

.coppia-foto { display: grid; gap: var(--s4); }
.coppia-foto img { border-radius: var(--raggio); }
@media (min-width: 48rem) {
  .coppia-foto { grid-template-columns: repeat(2, 1fr); gap: var(--s5); align-items: start; }
  .coppia-foto > :nth-child(2) { margin-top: var(--s8); }
}

.racconto { display: grid; gap: var(--s6); }

.racconto img { border-radius: var(--raggio); max-height: 34rem; width: auto; margin-inline: auto; }
@media (min-width: 56rem) {
  .racconto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s9); align-items: center; }
  .racconto.rovesciato > :first-child { order: 2; }
}

.mosaico {
  display: grid;
  gap: var(--s3);
  
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  aspect-ratio: 2 / 3;
}

.mosaico img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--raggio);
}

@media (min-width: 48rem) {
  .mosaico {
    gap: var(--s4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    aspect-ratio: 3 / 2;
    grid-template-areas:
      "balcone cucina    bagno"
      "balcone camera    bagno"
      "divano  camera    libri";
  }
  .mosaico img:nth-child(1) { grid-area: balcone; }
  .mosaico img:nth-child(2) { grid-area: divano; }
  .mosaico img:nth-child(3) { grid-area: camera; }
  .mosaico img:nth-child(4) { grid-area: cucina; }
  .mosaico img:nth-child(5) { grid-area: bagno; }
  .mosaico img:nth-child(6) { grid-area: libri; }
}

.mosaico-fuori { padding-inline: var(--gronda); }
.mosaico-fuori .mosaico { width: 100%; }

.galleria { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); grid-auto-flow: dense; }
@media (min-width: 48rem) { .galleria { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.galleria button {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  display: block; width: 100%; overflow: hidden; border-radius: var(--raggio);
}
.galleria img {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 500ms cubic-bezier(.2,.7,.3,1);
}
.galleria button:hover img { transform: scale(1.02); }
.galleria .largo { grid-column: span 2; }
.galleria .largo img { aspect-ratio: 16 / 10; }

.galleria .larghissimo img { aspect-ratio: 2 / 1; }

.lente {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  padding: var(--s5); background: rgba(12, 9, 6, .90); backdrop-filter: blur(24px) saturate(1.1);
}
.lente[open] { display: grid; }
.lente img { max-width: min(100%, 76rem); max-height: 86svh; object-fit: contain; border-radius: var(--raggio); }
.lente-chiudi, .lente-passo {
  position: absolute; width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--riga-scura); border-radius: 999px;
  background: none; color: #fff; cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.lente-chiudi svg, .lente-passo svg { width: 20px; height: 20px; }
.lente-chiudi { top: var(--s5); right: var(--s5); }
.lente-chiudi:hover, .lente-passo:hover { background: var(--riga-scura); border-color: var(--chiaro-tenue); }
.lente-passo { top: 50%; transform: translateY(-50%); }
.lente-passo:hover { transform: translateY(-50%) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .lente-passo:hover { transform: translateY(-50%); } }
.lente-indietro { left: var(--s5); }
.lente-avanti  { right: var(--s5); }
.lente-conta { position: absolute; bottom: var(--s5); left: 50%; transform: translateX(-50%); color: var(--chiaro-tenue); font-size: .8125rem; }

.mappa-disegnata,
img[src$="mappa-dei-minuti.svg"] { display: block; width: 100%; height: auto; }

.citazione {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.35; letter-spacing: -.02em; font-weight: 400; margin: 0;
}
.citazione-firma {
  display: block; margin-top: var(--s4);
  font-size: .8125rem; color: var(--secondario); letter-spacing: 0;
}
.fascia-scura .citazione-firma { color: var(--chiaro-tenue); }

.modulo { display: grid; gap: var(--s5); }
.campo { display: flex; flex-direction: column; gap: var(--s2); }
.campo label { font-size: .8125rem; font-weight: 500; letter-spacing: .01em; }
.campo .aiuto { font-size: .8125rem; color: var(--secondario); }

.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 1rem; color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--riga-forte);
  border-radius: var(--raggio-piccolo);
  padding: .85rem 1rem; min-height: 3rem; width: 100%;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }

.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color: var(--inchiostro);
}
.campo ::placeholder { color: var(--secondario); opacity: 1; }
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #A33A22; }

.coppia-campi { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.campo input, .campo select, .campo textarea { min-width: 0; }

.riquadro-esito {
  border: 1px solid var(--riga); background: var(--superficie);
  border-radius: var(--raggio); padding: var(--s5);
}

.domanda {
  background: var(--superficie);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  margin-bottom: var(--s3);
  transition: border-color var(--transizione);
}
.fascia-panna .domanda { background: var(--carta); }
.domanda:hover { border-color: var(--riga-forte); }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s5); cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 500; line-height: 1.4;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: ''; flex: none; width: 1rem; height: 1rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%2363635B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform var(--transizione);
}
.domanda[open] summary::after { transform: rotate(45deg); }
.domanda-risposta {
  padding: 0 var(--s5) var(--s5); max-width: var(--stretto);
  color: var(--secondario); font-size: .9375rem;
}
.domanda-risposta a { color: var(--acqua-scura); }

.barra-contatto {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--chiaro);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--riga);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%); transition: transform var(--transizione);
}
.barra-contatto.visibile { transform: none; }
@media (min-width: 62rem) { .barra-contatto { display: none; } }

.barra-contatto a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 3.75rem; color: var(--secondario);
  font-size: .6875rem; font-weight: 500; letter-spacing: .04em; text-decoration: none;
}
.barra-contatto a.principale { color: var(--inchiostro); }
.barra-contatto svg {
  width: 18px; height: 18px;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.piede { background: var(--notte); color: var(--chiaro-tenue); padding-block: var(--s8) var(--s6); }
.piede a { color: var(--chiaro-tenue); text-decoration: none; transition: color var(--transizione); }
.piede a:hover { color: var(--chiaro); }

.piede-alto { display: grid; gap: var(--s7); padding-bottom: var(--s7); border-bottom: 1px solid var(--riga-scura); }
@media (min-width: 56rem) { .piede-alto { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); } }

.piede img { width: 8.5rem; height: auto; margin-bottom: var(--s5); }

.piede h2 {
  font-family: var(--serie);
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--chiaro-tenue); margin-bottom: var(--s4);  
}
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: .875rem; }

.piede ul a { display: inline-flex; align-items: center; min-height: 1.75rem; }

.piede-basso {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  padding-top: var(--s5); font-size: .75rem; color: var(--chiaro-tenue);  
}

.piede-basso a { color: var(--chiaro-tenue); display: inline-flex; align-items: center; min-height: 1.75rem; }
.dato-legale { font-size: .8125rem; color: var(--chiaro-tenue); line-height: 1.55; }
.dato-legale strong { color: var(--chiaro); font-weight: 400; }

@media (max-width: 61.9375rem) {
  .piede { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

.briciole { font-size: .75rem; color: var(--secondario); margin-bottom: var(--s5); }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.briciole li { display: inline-flex; align-items: center; }
.briciole li + li::before { content: '/'; margin-right: .4rem; color: var(--tenue); }

.briciole a { color: var(--secondario); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 1.75rem; }
.briciole a:hover { color: var(--inchiostro); }
.fascia-scura .briciole, .fascia-scura .briciole a { color: var(--chiaro-tenue); }

.etichette { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.etichetta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8125rem; color: var(--secondario);
  border: 1px solid var(--riga); background: var(--superficie);
  border-radius: 999px; padding: .35rem .8rem; text-decoration: none;
}
.fascia-panna .etichetta { background: var(--carta); }
a.etichetta:hover { border-color: var(--riga-forte); color: var(--inchiostro); }
.etichetta-piena { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.fascia-scura .etichetta { background: transparent; border-color: var(--riga-scura); color: var(--chiaro-tenue); }
.fascia-scura .etichetta-piena { background: var(--chiaro); border-color: var(--chiaro); color: var(--inchiostro); }

.nota-fonte { font-size: .8125rem; color: var(--tenue); line-height: 1.55; }
.nota-fonte a { color: var(--secondario); }
.nota-fonte strong { color: var(--secondario); font-weight: 500; }
.fascia-scura .nota-fonte { color: var(--chiaro-tenue); }
.fascia-scura .nota-fonte a, .fascia-scura .nota-fonte strong { color: var(--chiaro-tenue); }

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.elenco-articoli { display: grid; gap: var(--s3); }
.voce-articolo {
  display: grid; gap: var(--s3);
  background: var(--superficie); border: 1px solid var(--riga);
  border-radius: var(--raggio); padding: var(--s6) var(--s5);
  align-items: start; transition: border-color var(--transizione);
}
.voce-articolo:hover { border-color: var(--riga-forte); }
@media (min-width: 48rem) {
  .voce-articolo { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s6); padding: var(--s6); }
}
.voce-articolo h3 a { text-decoration: none; }
.voce-articolo h3 a:hover { text-decoration: underline; text-decoration-color: var(--riga-forte); }
.voce-articolo p { color: var(--secondario); font-size: .9375rem; margin-top: var(--s2); max-width: 58ch; }
.articolo-meta { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }

.articolo-testata { padding-block: var(--s8) var(--s6); }
.articolo-testata h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); max-width: 22ch; }

.sommario {
  background: var(--superficie); border: 1px solid var(--riga);
  border-radius: var(--raggio); padding: var(--s5); margin-bottom: var(--s8);
  max-width: var(--stretto);
}
.sommario h2 {
  font-family: var(--serie);   
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); margin-bottom: var(--s3);
}
.sommario ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: .875rem; }

.sommario a { color: var(--secondario); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 1.75rem; }
.sommario a:hover, .sommario a[aria-current] { color: var(--inchiostro); }

.richiamo {
  background: var(--superficie); border: 1px solid var(--riga);
  border-radius: var(--raggio); padding: var(--s6); margin-block: var(--s7);
  display: grid; gap: var(--s3); max-width: var(--medio);
}
.richiamo h3 { font-size: 1.125rem; }
.richiamo p { color: var(--secondario); font-size: .9375rem; }

.con-effetti .compare { opacity: 0; }
.con-effetti .compare.vista {
  opacity: 1;
  transition: opacity var(--t-medio) var(--e-comparsa),
              transform var(--t-medio) var(--e-comparsa);
}

.con-effetti .compare:is(h1, h2, h3, p, .occhio, .riga-guida) { transform: translateY(6px); }

.con-effetti .compare:is(.scheda, .voce-articolo, .domanda, .orario-voce) {
  transform: scale(.985);
  transform-origin: 50% 100%;
}
.con-effetti .compare.vista { transform: none; }

.con-effetti .compare.vista { transition-delay: calc(var(--i, 0) * 38ms); }

.con-effetti .compare img,
.con-effetti img.compare {
  clip-path: inset(0 0 12% 0);
  transform: scale(1.012);
}
.con-effetti .compare.vista img,
.con-effetti img.compare.vista {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path var(--t-lungo) var(--e-comparsa),
              transform var(--t-lungo) var(--e-comparsa);
}

.con-effetti .compare img[src$=".svg"] { clip-path: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apertura h1 .riga-dentro { transform: none !important; animation: none !important; }
  .con-effetti .compare,
  .con-effetti .compare.vista,
  .con-effetti .compare img,
  .con-effetti .compare.vista img,
  .con-effetti img.compare {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .barra, .menu-telefono, .barra-contatto, .lente { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .fascia-scura, .piede { background: #fff !important; color: #000 !important; }
  .fascia { padding-block: 1.5rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

@media (min-width: 62rem) {
  .impianto-articolo {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--s9);
    align-items: start;
  }
  .impianto-articolo .sommario {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
    background: none;
    border: 0;
    border-left: 1px solid var(--riga);
    border-radius: 0;
    padding: 0 0 0 var(--s5);
    max-width: none;
  }
  .impianto-articolo .testo-lungo { max-width: 38rem; }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background-image: url('immagini/grana.svg');
  background-size: 180px 180px;
  opacity: .40;
  mix-blend-mode: soft-light;
}

@media print { body::after { display: none; } }

.scheda {
  box-shadow: var(--ombra-vicina);
  transition: border-color var(--transizione), box-shadow var(--transizione),
              transform var(--transizione);
}
.scheda:hover { box-shadow: var(--ombra-media); transform: translateY(-2px); }
.fascia-scura .scheda { box-shadow: none; }
.fascia-scura .scheda:hover { box-shadow: none; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .scheda, .scheda:hover { transform: none; }
}

.orario {
  border-top: 0;
  background-image: linear-gradient(90deg,
    var(--ottone) 0, var(--riga) 12%, var(--riga) 62%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.bottone { border-radius: var(--raggio-piccolo); }
.bottone-primario {
  box-shadow: inset 0 0 0 1px rgba(201, 167, 106, .30), var(--ombra-vicina);
}
.bottone-primario:hover {
  box-shadow: inset 0 0 0 1px rgba(201, 167, 106, .55), var(--ombra-media);
}
.bottone-secondario { border-color: var(--riga-forte); }
.bottone-secondario:hover { border-color: var(--ottone); background: transparent; }

.scheda .scheda-misura, .occhio-etichetta, .misura {
  color: var(--ottone-testo);
  letter-spacing: .14em;
  font-size: .6875rem;
}
.fascia-scura .scheda .scheda-misura,
.fascia-scura .scheda-misura,
.fascia-scura .occhio-etichetta { color: var(--ottone-chiaro); }

.apertura-foto { position: relative; }
.apertura-foto::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(234, 231, 224, .55) 0, rgba(234, 231, 224, 0) 9rem),
    linear-gradient(180deg, rgba(138, 107, 51, .07), rgba(138, 107, 51, .07));
}

.menu-telefono {
  background: var(--vetro);
  backdrop-filter: var(--sfoca);
}

.menu-telefono { border-bottom: 1px solid var(--riga); }

.fascia-scura { position: relative; }
.fascia-scura::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0, rgba(201, 167, 106, .5) 18%, rgba(201, 167, 106, .5) 52%, transparent 100%);
}

.scena {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  
  min-height: 125cqw;                
  border-radius: var(--raggio-grande);
  overflow: hidden;
  isolation: isolate;
  background: var(--rilievo);      
  box-shadow: var(--ombra-alta);
}

.apertura > .contenitore { container-type: inline-size; }
@media (min-width: 48rem)  { .scena { min-height: 66.667cqw; } }  
@media (min-width: 75rem)  { .scena { min-height: 56.25cqw; } }   

.scena-foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  
  object-position: 90% 46%;
}

@media (max-width: 47.9375rem) {
  .scena-foto { object-position: 50% 40%; }
}

.scena::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: var(--velo-foto);
}

.pillole, .scena-testo { position: relative; z-index: 2; }

.scena-testo {
  grid-row: 3;
  align-self: end;
  padding: var(--s5) var(--s5) var(--s5);
  display: grid;
  gap: var(--s4);
  color: #FFFFFF;
}
@media (min-width: 48rem) {
  .scena-testo { padding: var(--s8) var(--s7) var(--s7); gap: var(--s5); max-width: 52rem; }
}

.scena-testo h1 {
  color: #FFFFFF;
  font-size: clamp(1.875rem, 1.35rem + 2.35vw, 3.75rem);
  text-shadow: 0 1px 24px rgba(0, 0, 0, .28);
}

.scena-testo .scena-voti {
  font-size: var(--t-minuto);
  color: rgba(255, 255, 255, .82);
  margin: 0;
  letter-spacing: .01em;
  
  max-width: none;
}
.scena-testo .scena-voti strong { color: #FFFFFF; font-weight: 600; }

.scena-testo p {
  color: rgba(255, 255, 255, .90);
  font-size: var(--t-corpo);
  max-width: 38ch;
  margin: 0;
}

@media (max-width: 29.99rem) {
  
  
  .scena-testo p:not(.scena-voti):not(.scena-dove) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}

.pillole {
  grid-row: 1;
  display: flex; flex-wrap: wrap; gap: var(--s2);
  list-style: none; margin: 0;
  padding: var(--s4) var(--s5) 0;
}
@media (min-width: 48rem) { .pillole { padding: var(--s6) var(--s7) 0; } }
.pillole li {
  font-size: var(--t-minuto);
  line-height: 1;
  padding: .55rem .85rem;
  border-radius: 999px;
  color: #FFFFFF;
  
  background: rgba(16, 16, 14, .44);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

@supports not (backdrop-filter: blur(1px)) {
  .pillole li { background: rgba(16, 16, 14, .70); }
}

.bottone-vetro {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
.bottone-vetro:hover { background: rgba(255, 255, 255, .22); border-color: #FFFFFF; }
.bottone-vetro:active { transform: translateY(1px); }

@media (max-width: 47.9375rem) {
  .scena {
    aspect-ratio: 3 / 4;
    --velo-foto:
      
      linear-gradient(180deg, rgba(12, 12, 10, .34) 0%, rgba(12, 12, 10, .10) 18%,
                              rgba(12, 12, 10, .40) 40%, rgba(12, 12, 10, .76) 62%,
                              rgba(12, 12, 10, .90) 100%);
  }
  
  
  .scena-testo h1 { font-size: 2rem; text-wrap: balance; }

  
  .scena-testo .gruppo-bottoni { display: grid; gap: var(--s3); }
  .scena-testo .gruppo-bottoni .bottone { width: 100%; }

  
  .pillole li { padding: .5rem .7rem; }
}

.apertura {
  background: var(--carta);
  color: var(--inchiostro);
  padding-block: var(--s5) var(--s8);
}

.apertura .orario { margin-top: var(--s7); }
@media (min-width: 48rem) { .apertura { padding-block: var(--s6) var(--s9); } }

.passi { list-style: none; padding: 0; margin: 0; counter-reset: passo; max-width: 44rem; }
.passi > li {
  counter-increment: passo;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: var(--s6);
  color: var(--secondario);
}
.passi > li:last-child { margin-bottom: 0; }
.passi > li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -.15em;
  font-family: var(--titolo);
  font-size: 2rem; line-height: 1;
  color: var(--ottone);
}
.passi strong {
  display: block;
  font-family: var(--serie);
  font-size: var(--t-3); font-weight: 500;
  color: var(--inchiostro);
  margin-bottom: var(--s2);
}

.luoghi {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@media (min-width: 62rem) {
  
  .luoghi { grid-template-columns: repeat(3, 1fr); }
  
  .luoghi.luoghi-4 { grid-template-columns: repeat(4, 1fr); }
}

.luogo {
  display: grid;
  gap: var(--s2);
  text-decoration: none;
  color: inherit;
}
.luogo-foto {
  display: block;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--rilievo);
  box-shadow: var(--ombra-vicina);
  margin-bottom: var(--s2);
}
.luogo-foto img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-lungo) var(--e-entrata);
}
.luogo:hover .luogo-foto img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .luogo-foto img, .luogo:hover .luogo-foto img { transition: none; transform: none; }
}

.luogo-riga {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--riga);
  padding-top: var(--s3);
}
.luogo:hover .luogo-riga { border-top-color: var(--ottone); }
.luogo-nome { font-size: var(--t-3); font-weight: 500; }
.luogo-tempo {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-3); font-weight: 600;
  color: var(--acqua-scura);
  white-space: nowrap;
}
.luogo-tempo span {
  font-size: var(--t-minuto); font-weight: 400;
  color: var(--tenue); margin-left: .2em;
}
.luogo-nota { font-size: var(--t-minuto); color: var(--tenue); }

@media (max-width: 47.99rem) {
  .pagina-disponibilita .griglia-2 { display: flex; flex-direction: column; }
}

.campo .errore {
  display: block;
  font-size: .8125rem;
  color: var(--errore);
  margin-top: var(--s1);
}
.campo .errore:empty { display: none; }

.barra-contatto a { font-size: .75rem; letter-spacing: .03em; }

@media (max-width: 47.99rem) {
  .piede-alto ul { gap: var(--s3); }
  .piede-alto ul a { min-height: 2.5rem; display: flex; align-items: center; }
  .scheda .bottone { width: 100%; justify-content: center; }
}

.didascalia a {
  display: inline-block;
  padding-block: .28rem;
  text-underline-offset: .2em;
}

.modulo[hidden] { display: none; }

.scena-dove {
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: .14em;
  
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 var(--s2);
  max-width: none;
}
@media (max-width: 29.99rem) { .scena-testo .scena-dove { font-size: .6875rem; } }

.orario-voce { contain: layout style; }
.orario-tempo { min-width: 2.6ch; display: inline-block; }

body::after { mix-blend-mode: normal; opacity: .055; }

.con-effetti .compare img[fetchpriority="high"] { clip-path: none; transform: none; }
.con-effetti .compare:has(img[fetchpriority="high"]) { opacity: 1; }

@media (max-width: 47.9375rem) {
  .pillole li {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(16, 16, 14, .70);
  }
}

@media (max-width: 47.9375rem) {

  
  .luoghi {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gronda);
    gap: var(--s4);
    
    margin-inline: calc(var(--gronda) * -1);
    padding-inline: var(--gronda);
    padding-bottom: var(--s3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .luoghi::-webkit-scrollbar { display: none; }
  .luogo { scroll-snap-align: start; }

  
  .luogo-foto img { aspect-ratio: 4 / 5; }

  
  .intestazione-sezione h2, .fascia h2 { font-size: 1.75rem; line-height: 1.12; }
  .luogo-nome { font-size: 1.0625rem; }
  .scheda .scheda-misura { font-size: .625rem; }   

  
  .fascia { padding-block: var(--s8); }
  .fascia-ampia { padding-block: var(--s8); }
  .intestazione-sezione { margin-bottom: var(--s6); gap: var(--s2); }
  .apertura-tipografica { padding-block: var(--s7) var(--s6); }

  
  .apertura .orario {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 0;
    margin-inline: calc(var(--gronda) * -1);
    padding-inline: var(--gronda);
    scrollbar-width: none;
  }
  .apertura .orario::-webkit-scrollbar { display: none; }
  .apertura .orario-voce {
    flex: 0 0 auto;
    min-width: 8.5rem;
    scroll-snap-align: start;
    padding: var(--s3) var(--s4) var(--s3) 0;
    margin: 0;
    border-bottom: 0;
    border-right: 1px solid var(--riga);
  }
  .apertura .orario-voce:last-child { border-right: 0; padding-right: 0; }
  .apertura .orario-voce:nth-child(odd),
  .apertura .orario-voce:nth-child(even) { padding-left: 0; }

  
  .galleria {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gronda);
    gap: var(--s3);
    margin-inline: calc(var(--gronda) * -1);
    padding-inline: var(--gronda);
    padding-bottom: var(--s3);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .galleria::-webkit-scrollbar { display: none; }
  .galleria button {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
  }
  .galleria img,
  .galleria .largo img,
  .galleria .larghissimo img {
    aspect-ratio: auto;
    height: 58vh;
    max-height: 26rem;
    width: auto;
  }
}

@media (max-width: 29.99rem) {
  .scena { aspect-ratio: 3 / 4.4; }

  .scena-testo { padding: var(--s4) var(--s4) var(--s5); gap: var(--s3); }

  .scena-testo .scena-dove {
    white-space: normal;          
    font-size: .625rem;
    letter-spacing: .12em;
    margin-bottom: var(--s1);
  }

  .scena-testo h1 { font-size: 1.875rem; line-height: 1.1; }  

  
  
  .pillole {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--s3) var(--s4) 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .pillole li { scroll-snap-align: start; }
  .pillole::-webkit-scrollbar { display: none; }
  .pillole li { flex: 0 0 auto; font-size: .6875rem; padding: .4rem .7rem; }

  
  .scena-testo .gruppo-bottoni { gap: var(--s2); }
  .scena-testo .bottone { min-height: 2.75rem; font-size: .875rem; }

  .scena-voti { font-size: .6875rem; }
}

.solo-largo { display: none; }
@media (min-width: 48rem) { .solo-largo { display: inline; } }

.solo-stretto { display: inline; }
@media (min-width: 48rem) { .solo-stretto { display: none; } }