/* Casa Lume Lento, direzione 2 «La luce resta accesa» (25/09/2026).
   Sito d'albergo di fantasia per la vetrina YAVENO: sera, pietra, lampade. Fotografia a tutto schermo,
   tipografia editoriale, prenotazione sempre a portata. Tutto visibile anche senza JavaScript e con
   movimento ridotto: il movimento si aggiunge solo sotto html.movimento. */

/* Caratteri: Crimson Pro (serif classico da libro, come i caratteri di Aman, The Newt, Soho Farmhouse) e
   Arsenal SC (maiuscoletto umanista, per menu, bottoni ed etichette). Entrambi SIL OFL, file in fonts/. */
@font-face{font-family:"Crimson Pro";src:url("../fonts/crimson-pro-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("../fonts/crimson-pro-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("../fonts/crimson-pro-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Arsenal SC";src:url("../fonts/arsenal-sc-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --notte:#0D0F11; --notte-2:#15181B; --notte-3:#1D2125;
  --osso:#EEE8DE; --osso-2:rgba(238,232,222,.74); --osso-3:rgba(238,232,222,.5);
  --linea:rgba(238,232,222,.16);
  --lume:#E7A75B; --lume-2:#F1C28A; --lume-testo:#E7A75B; --lume-velo:rgba(231,167,91,.14);
  --lume-alone-1:rgba(231,167,91,.55); --lume-alone-2:rgba(231,167,91,.25);
  --carta:#EFEAE2; --inchiostro:#15181B; --inchiostro-2:#4A4F55;
  --errore:#F0A89A; --scelta:#1C1A17; --disabilitato:rgba(238,232,222,.22);
  --bolla:rgba(238,232,222,.12); --tondo-velo:rgba(238,232,222,.06);
  --testata-piena:rgba(13,15,17,.9); --barra-fissa:rgba(13,15,17,.94); --riepilogo-fissa:rgba(13,15,17,.96);
  --testata-velo-a:rgba(8,9,11,.55); --testata-velo-b:rgba(8,9,11,0);
  --velo-a:rgba(8,9,11,.86); --velo-b:rgba(8,9,11,.38); --velo-c:rgba(8,9,11,.12); --velo-d:rgba(8,9,11,.35);
  --velo-chiusura:rgba(8,9,11,.5); --demo-velo:rgba(5,6,7,.72);
  --finestra-velo:rgba(5,6,7,.96); --freccia-velo:rgba(13,15,17,.6); --apertura:#050607;
  --fisso-testo:#EEE8DE; --fisso-testo-2:rgba(238,232,222,.74); --fisso-testo-3:rgba(238,232,222,.5);
  --fisso-linea:rgba(238,232,222,.28); --fisso-linea-2:rgba(238,232,222,.18);
  --fisso-fondo:rgba(10,12,14,.55); --ombra-testo:0 1px 12px rgba(0,0,0,.6);
  --foto-fondo:radial-gradient(120% 90% at 70% 30%,#2A2622 0%,#15181B 60%,#0D0F11 100%);
  --serif:"Crimson Pro",Georgia,"Times New Roman",serif;
  --testo:"Crimson Pro",Georgia,"Times New Roman",serif;
  --sans:"Arsenal SC","Gill Sans","Trebuchet MS",sans-serif;
  --gutter:clamp(20px,4.5vw,64px);
  --max:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-lenta:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--notte);color:var(--osso);font:400 1.14rem/1.62 var(--testo);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lume-testo);outline-offset:3px}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lume);color:var(--inchiostro);padding:10px 14px;text-decoration:none;font-weight:500}
.salta:focus{top:12px}
.vis-nascosto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Etichette e titoli */
.etichetta{font:400 .98rem/1.4 var(--sans);letter-spacing:.07em;color:var(--osso-2);margin:0 0 1.4rem}
.titolo-grande{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,6.2vw,6.4rem);line-height:1;letter-spacing:-.012em;margin:0}
.titolo{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4vw,3.9rem);line-height:1.08;letter-spacing:-.008em;margin:0}
.frase{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.5vw,2.45rem);line-height:1.32;letter-spacing:0;margin:0}
.testo{color:var(--osso-2);max-width:34rem;margin:0}
.titolo-grande,.titolo,.momento h3,.camera-info h3{text-wrap:balance}
.frase,.testo{text-wrap:pretty}
main section[id]{scroll-margin-top:6.5rem}

/* Pulsanti squadrati in maiuscoletto */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:0 1.6rem;border:1px solid var(--osso);background:transparent;color:var(--osso);font:400 0.76rem/1 var(--sans);letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.bottone:hover{background:var(--osso);color:var(--notte)}
.bottone--lume{background:var(--lume);border-color:var(--lume);color:var(--inchiostro)}
.bottone--lume:hover{background:var(--lume-2);border-color:var(--lume-2)}
.link{display:inline-flex;align-items:center;gap:.6em;font:400 0.76rem/1 var(--sans);letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;padding-bottom:.5em;border-bottom:1px solid var(--linea);transition:border-color .35s var(--ease)}
.link:hover{border-color:var(--osso)}

/* Riga della demo: dentro la testata, una riga sola */
.demo-riga{grid-column:1/-1;margin:-1.1rem calc(-1 * var(--gutter)) .9rem;background:var(--demo-velo);color:var(--fisso-testo-3);font:400 .78rem/1 var(--sans);letter-spacing:.08em;text-align:center;padding:.5rem var(--gutter);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testata.piena .demo-riga{margin-top:-.75rem;margin-bottom:.65rem}

/* Testata sopra la foto */
.testata{position:fixed;inset:0 0 auto 0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.1rem var(--gutter);transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);border-bottom:1px solid transparent}
.testata::before{content:"";position:absolute;inset:0 0 -40px 0;background:linear-gradient(to bottom,var(--testata-velo-a),var(--testata-velo-b));pointer-events:none;transition:opacity .5s var(--ease);z-index:-1}
.testata.piena{background:var(--testata-piena);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:.75rem;padding-bottom:.75rem;border-color:var(--linea)}
.testata.piena::before{opacity:0}
.testata-sx{display:flex;align-items:center;gap:1.4rem}
.testata-dx{display:flex;align-items:center;justify-content:flex-end;gap:1.4rem}
.bottone-menu{display:inline-flex;align-items:center;gap:.8rem;background:none;border:0;padding:.4rem 0;cursor:pointer;font:400 0.74rem/1 var(--sans);letter-spacing:0.14em;text-transform:uppercase}
.bottone-menu .righe{position:relative;width:26px;height:10px}
.bottone-menu .righe::before,.bottone-menu .righe::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.bottone-menu .righe::before{top:0}.bottone-menu .righe::after{bottom:0}
.marchio{text-align:center;text-decoration:none;display:block;line-height:1}
.marchio .nome{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.3vw,1.16rem);letter-spacing:.3em;text-transform:uppercase;margin-right:-.3em}
.marchio .sotto{display:block;margin-top:.5rem;font:400 .8rem/1 var(--sans);letter-spacing:.08em;color:var(--osso-2)}
.lingue{font:400 .82rem/1 var(--sans);letter-spacing:.12em;text-decoration:none;color:var(--osso-2)}
.lingue:hover{color:var(--osso)}
.testata .bottone{min-height:44px;padding:0 1.2rem}

/* Menu a schermo intero */
.menu{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--notte);visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.menu.aperto{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}
.menu-corpo{display:flex;flex-direction:column;justify-content:space-between;padding:1.4rem var(--gutter) 2.4rem}
.menu-chiudi{align-self:flex-start;background:none;border:0;cursor:pointer;font:400 0.74rem/1 var(--sans);letter-spacing:0.14em;text-transform:uppercase;padding:.6rem 0;display:inline-flex;gap:.8rem;align-items:center}
.menu-voci{list-style:none;margin:0;padding:0}
.menu-voci a{display:inline-block;font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.6vw,4.2rem);line-height:1.16;text-decoration:none;color:var(--osso-2);transition:color .35s var(--ease),transform .5s var(--ease)}
.menu-voci a:hover,.menu-voci a:focus-visible{color:var(--osso);transform:translateX(.3em)}
.menu-piede{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;color:var(--osso-3);font:400 .86rem/1.6 var(--sans);letter-spacing:.06em}
.menu-foto{position:relative;overflow:hidden;background:var(--notte-3)}
.menu-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform 1.2s var(--ease-lenta);transform:scale(1.04)}
.menu-foto img.attiva{opacity:1;transform:scale(1)}

/* Foto: sfondo notturno finché non arrivano */
.foto{position:relative;overflow:hidden;background:var(--foto-fondo)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:1.1rem;bottom:1rem;font:400 .86rem/1.3 var(--sans);letter-spacing:.06em;color:var(--fisso-testo);text-shadow:var(--ombra-testo)}

/* Primo schermo */
.eroe{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.eroe .foto{position:absolute;inset:0;z-index:-2}
.eroe .foto img{transform-origin:60% 40%}
.eroe::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--velo-a) 0%,var(--velo-b) 38%,var(--velo-c) 62%,var(--velo-d) 100%)}
/* Con il video la sfumatura sta solo dove c'è testo (colazione e piscina sono
   chiare): a sinistra dietro il titolo, in alto dietro la testata, in basso dietro
   la barra; a destra la casa resta al sole. Solo quando il giro gira davvero, la
   foto da sola resta com'è. Leggibilità misurata su ogni mezzo secondo dei giri
   (video-eroe-20260927/contrasto-fotogrammi.mjs). */
.eroe.video-pronto::after{background:
  linear-gradient(to top,rgba(8,9,11,.9) 0%,rgba(8,9,11,.55) 26%,rgba(8,9,11,0) 52%),
  linear-gradient(to right,rgba(8,9,11,.74) 0%,rgba(8,9,11,.56) 30%,rgba(8,9,11,.14) 56%,rgba(8,9,11,0) 72%),
  linear-gradient(to bottom,rgba(8,9,11,.6) 0%,rgba(8,9,11,0) 17%)}
@media (max-width:900px){.eroe.video-pronto::after{background:
  linear-gradient(to top,rgba(8,9,11,.92) 0%,rgba(8,9,11,.72) 32%,rgba(8,9,11,.22) 54%,rgba(8,9,11,0) 68%),
  linear-gradient(to bottom,rgba(8,9,11,.62) 0%,rgba(8,9,11,0) 18%)}}
.eroe-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;z-index:-1;opacity:0;transition:opacity 1.2s ease}
.eroe-video.pronto{opacity:1}
@media (prefers-reduced-motion:reduce){.eroe-video{transition:none}}
/* Ferma il video: solo quando il video c'è, in alto a destra sopra la foto ma
   sotto la testata. Mai sopra il titolo, la barra di prenotazione, la barra del
   telefono o l'assistente. Osso su notte, squadrato, senza ombre. */
.eroe-video-stop{position:absolute;top:6.4rem;right:var(--gutter);z-index:2;display:none;align-items:center;min-height:44px;padding:0 1.1rem;background:var(--fisso-fondo);border:1px solid var(--fisso-linea);color:var(--fisso-testo);font:400 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.eroe-video-stop:hover{background:var(--fisso-testo);border-color:var(--fisso-testo);color:var(--inchiostro)}
.eroe-video-stop[hidden]{display:none}
.eroe.video-pronto .eroe-video-stop{display:inline-flex}
@media (max-width:900px){.eroe-video-stop{top:5.4rem}}
.eroe-testo{padding:10.5rem var(--gutter) 2.2rem;max-width:var(--max);color:var(--fisso-testo)}
.eroe-testo .etichetta{color:var(--fisso-testo)}
.eroe-sotto{margin:1.4rem 0 0;max-width:30rem;color:var(--fisso-testo-2);font-size:1.24rem}

/* Barra di prenotazione nella foto (computer) */
.barra-prenota{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;margin:0 var(--gutter) var(--gutter);border:1px solid var(--fisso-linea);background:var(--fisso-fondo);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.barra-prenota .campo{display:flex;flex-direction:column;justify-content:center;gap:.35rem;padding:.9rem 1.4rem;border-right:1px solid var(--fisso-linea-2);min-height:78px}
.barra-prenota label{font:400 0.74rem/1 var(--sans);letter-spacing:0.14em;text-transform:uppercase;color:var(--fisso-testo-2)}
.barra-prenota input,.barra-prenota select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--fisso-testo);font:400 1.18rem/1.3 var(--testo);padding:0;min-height:30px;width:100%;cursor:pointer}
.barra-prenota .data-riga{position:relative;display:block}
.barra-prenota .data-vista{position:absolute;inset:0 2.4rem 0 0;display:flex;align-items:center;font:400 1.18rem/1.3 var(--testo);color:var(--fisso-testo);pointer-events:none;white-space:nowrap;overflow:hidden}
.barra-prenota .data-vista.vuota{color:var(--fisso-testo-2)}
.date-scritte .barra-prenota input[type=date]:not(:focus){color:transparent}
.date-scritte .barra-prenota input[type=date]:focus + .data-vista{visibility:hidden}
.data-vista{display:none}
.date-scritte .data-vista{display:flex}
.barra-prenota input::-webkit-calendar-picker-indicator{filter:invert(.9);opacity:.8;cursor:pointer}
.barra-prenota select option{color:var(--inchiostro)}
.barra-prenota .bottone{min-height:auto;border:0;padding:0 2.2rem}
.barra-nota{margin:-1.2rem var(--gutter) var(--gutter);font:400 .86rem/1.4 var(--sans);letter-spacing:.06em;color:var(--fisso-testo-3)}
/* La riga sta sopra il bottone fisso dell'assistente (in basso a destra):
   il margine basso la tiene fuori dalla sua zona, a qualunque larghezza. */
@media (min-width:901px){
  .barra-nota{margin-bottom:calc(var(--gutter) + 2.4rem)}
}
/* Schermi larghi (founder 27/09 notte: la fascia copriva il video): la fascia delle
   prenotazioni scende sul bordo in basso e si stringe a sinistra, fuori dalla zona
   del bottone dell'assistente in basso a destra; la riga di nota le sta sopra.
   Titolo e sottotitolo scendono con lei: la parte alta del video resta libera. */
@media (min-width:1200px){
  .eroe{align-content:end}
  .eroe-testo{order:1;padding-bottom:1.6rem}
  .barra-nota{order:2;margin:0 var(--gutter) .8rem}
  .barra-prenota{order:3;margin:0 calc(var(--gutter) + 13rem) 1.4rem var(--gutter);max-width:64rem}
}

/* Barra fissa da telefono */
.barra-telefono{display:none}

/* La casa */
.casa{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,6vw,7rem);align-items:center;padding:clamp(6rem,14vw,12rem) var(--gutter) clamp(5rem,10vw,9rem);max-width:var(--max);margin:0 auto}
.casa .frase{max-width:18em}
.casa .frase em{font-style:italic}
.casa-lato{display:grid;gap:1.8rem}
.casa-lato .foto{aspect-ratio:2/3}

/* Camere in fila orizzontale */
.camere{padding:clamp(4rem,9vw,8rem) 0;border-top:1px solid var(--linea)}
.camere-testa{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:0 var(--gutter) 2.6rem;max-width:var(--max);margin:0 auto}
.camere-comandi{display:flex;align-items:center;gap:.8rem;font:400 .9rem/1 var(--sans);letter-spacing:.1em}
.tondo svg{width:18px;height:18px}
.tondo{width:52px;height:52px;border-radius:50%;border:1px solid var(--linea);background:transparent;cursor:pointer;display:grid;place-items:center;transition:border-color .3s var(--ease),background .3s var(--ease)}
.tondo:hover{border-color:var(--osso);background:var(--tondo-velo)}
.tondo:disabled{opacity:.35;cursor:default}
.camere-fila{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,860px);gap:clamp(1rem,2.4vw,2rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:0 var(--gutter) 1rem;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.camere-fila::-webkit-scrollbar{display:none}
.camere-fila.trascina{cursor:grabbing;scroll-snap-type:none}
.camera{scroll-snap-align:start;margin:0}
.camera .foto{aspect-ratio:3/2}
.camera .foto img{transition:transform 1.4s var(--ease-lenta)}
.camera:hover .foto img{transform:scale(1.03)}
.camera-info{display:grid;grid-template-columns:1fr auto;gap:.3rem 2rem;align-items:baseline;padding:1.4rem .1rem 0}
.camera-info h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.4rem);margin:0;letter-spacing:-.01em}
.camera-info .prezzo{font:400 .9rem/1 var(--sans);letter-spacing:.06em;color:var(--osso-2);white-space:nowrap}
.camera-info .prezzo b{font:400 1.45rem/1 var(--serif);letter-spacing:0;color:var(--osso);text-transform:none}
.camera-info p{grid-column:1/-1;margin:0;color:var(--osso-2)}
.camera-info .link{grid-column:1/-1;justify-self:start;margin-top:.9rem}

/* La giornata: testo fermo, foto che scorrono */
.giornata{position:relative;border-top:1px solid var(--linea)}
.giornata-griglia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);max-width:var(--max);margin:0 auto}
.giornata-testo{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
.momenti{position:relative;margin-top:2.4rem;min-height:15rem}
.momento{margin:0 0 3rem}
.momento .ora{font:400 .98rem/1 var(--sans);letter-spacing:.07em;color:var(--lume-testo)}
.momento h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.1;margin:.8rem 0 .8rem}
.momento p{margin:0;color:var(--osso-2);max-width:26rem}
.giornata-foto{display:grid;gap:clamp(1.2rem,3vw,2.5rem);padding:clamp(4rem,8vw,7rem) var(--gutter) clamp(4rem,8vw,7rem) 0}
.giornata-foto .foto{aspect-ratio:4/5}
.giornata-foto .foto:nth-child(2n){margin-left:18%}
.giornata-foto .foto:nth-child(2n+1){margin-right:12%}

/* Dettagli */
.dettagli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);align-items:end;padding:clamp(5rem,10vw,9rem) var(--gutter);max-width:var(--max);margin:0 auto;border-top:1px solid var(--linea)}
.dettagli .foto--alta{aspect-ratio:2/3}
.dettagli .foto--quadra{aspect-ratio:1/1}
.dettagli-testo{align-self:center;display:grid;gap:1.4rem}

/* Come arrivare e domande */
.arrivare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);padding:clamp(5rem,10vw,9rem) var(--gutter);max-width:var(--max);margin:0 auto;border-top:1px solid var(--linea)}
.domande{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.domande li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.4rem;padding:1.3rem 0;border-bottom:1px solid var(--linea)}
.domande b{font:400 .98rem/1.5 var(--sans);letter-spacing:.06em}
.domande span{color:var(--osso-2)}

/* Esperienze con foto: tre foto grandi in fila, stessa riga di testo e prezzi di
   prima sotto ciascuna foto. Da telefono una sotto l'altra. */
.esperienze-foto{list-style:none;margin:3rem 0 0;padding:0;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem)}
.esperienze-foto figure{margin:0;display:grid;gap:1.1rem;align-content:start}
.esperienze-foto .foto{aspect-ratio:4/3}
.esperienze-foto figcaption{display:grid;gap:.4rem}
.esperienze-foto b{font:400 .98rem/1.5 var(--sans);letter-spacing:.06em}
.esperienze-foto span{color:var(--osso-2)}
@media (max-width:900px){.esperienze-foto{grid-template-columns:1fr}}

/* Chiusura con foto */
.chiusura{position:relative;min-height:88svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.chiusura .foto{position:absolute;inset:0;z-index:-2}
.chiusura::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--velo-chiusura)}
.chiusura-testo{padding:6rem var(--gutter);display:grid;gap:2.2rem;justify-items:center;color:var(--fisso-testo)}
.chiusura .titolo{max-width:13em}

/* Piede */
.piede{padding:4rem var(--gutter) 3rem;border-top:1px solid var(--linea);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;max-width:var(--max);margin:0 auto;color:var(--osso-2);font-size:1.02rem}
.piede .marchio{text-align:left}
.piede .marchio .nome{margin-right:0}
.piede-voci{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.piede-voci a{text-decoration:none}
.piede-voci a:hover{color:var(--osso)}
.piede-nota{grid-column:1/-1;margin:2rem 0 0;padding-top:1.6rem;border-top:1px solid var(--linea);font:400 .86rem/1.7 var(--sans);letter-spacing:.04em;color:var(--osso-3)}

/* Apertura: la lampada si accende */
.lume-apertura{display:none}
html.movimento:not([data-ora="giorno"]) .lume-apertura{display:grid;position:fixed;inset:0;z-index:90;place-items:center;background:var(--apertura);animation:lume-via 1.25s var(--ease) 1.05s forwards;pointer-events:none}
html.movimento .lume-apertura::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--lume-2);box-shadow:0 0 30px 10px var(--lume-alone-1),0 0 120px 60px var(--lume-alone-2);animation:lume-accende 1.2s var(--ease) forwards}
@keyframes lume-accende{0%{transform:scale(.2);opacity:0}45%{opacity:1}100%{transform:scale(1.4);opacity:1}}
@keyframes lume-via{to{opacity:0;visibility:hidden}}
html.movimento.lume-visto .lume-apertura{display:none}

/* Movimento: solo con JavaScript attivo e senza movimento ridotto */
html.movimento .eroe .foto img{animation:eroe-respira 16s var(--ease-lenta) both}
@keyframes eroe-respira{from{transform:scale(1.09)}to{transform:scale(1)}}
html.movimento [data-rivela]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease-lenta)}
html.movimento [data-rivela].visto{opacity:1;transform:none}
html.movimento [data-rivela="foto"]{opacity:1;transform:none;clip-path:inset(12% 0 0 0);transition:clip-path 1.3s var(--ease-lenta)}
html.movimento [data-rivela="foto"] img{transform:scale(1.12);transition:transform 1.8s var(--ease-lenta)}
html.movimento [data-rivela="foto"].visto{clip-path:inset(0 0 0 0)}
html.movimento [data-rivela="foto"].visto img{transform:scale(1)}
html.movimento .eroe-testo > *{animation:sale 1.2s var(--ease-lenta) both}
html.movimento .eroe-testo > :nth-child(1){animation-delay:1.35s}
html.movimento .eroe-testo > :nth-child(2){animation-delay:1.45s}
html.movimento .eroe-testo > :nth-child(3){animation-delay:1.6s}
html.movimento .barra-prenota{animation:sale 1.2s var(--ease-lenta) 1.7s both}
html.movimento.lume-visto .eroe-testo > *,html.movimento.lume-visto .barra-prenota{animation-delay:.1s}
@keyframes sale{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Telefono */
@media (max-width:900px){
  .testata{grid-template-columns:auto 1fr auto;padding-top:.9rem;padding-bottom:.9rem}
  .testata .marchio{text-align:center}
  .testata .marchio .sotto{display:none}
  .testata .lingue{display:none}
  .testata .bottone{display:none}
  /* la scritta «Menu» sparisce alla vista ma resta il nome del bottone per chi usa un lettore di schermo (ricontrollo 28/09) */
  .bottone-menu .etichetta-menu{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .eroe-testo{padding-bottom:9.5rem}
  .demo-riga{margin-top:-.9rem;margin-bottom:.7rem}
  /* La targhetta vive nella riga: da telefono la riga è corta
     («Demo YAVENO · Foto AI · Cosa c'è in questo sito») e sta in una riga a 390 px. */
  .demo-riga .demo-nascosto{display:none}
  .demo-riga{font-size:.68rem;letter-spacing:.05em}
  .barra-prenota,.barra-nota{display:none}
  .barra-telefono{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));background:var(--barra-fissa);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--linea)}
  .barra-telefono .da{font:400 .84rem/1.35 var(--sans);letter-spacing:.06em;color:var(--osso-2)}
  .barra-telefono .da b{display:block;font:400 1.45rem/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--osso)}
  .barra-telefono .bottone{min-height:48px;padding:0 1.3rem}
  body{padding-bottom:84px}
  .casa{grid-template-columns:1fr}
  .casa-lato{grid-template-columns:.9fr 1.1fr;align-items:end}
  .camere-testa{flex-direction:column;align-items:flex-start}
  .camere-fila{grid-auto-columns:86vw}
  main section[id]{scroll-margin-top:5.2rem}
  /* La giornata da telefono: ogni momento con la sua foto subito sotto */
  .giornata-griglia{display:flex;flex-direction:column;padding:5rem var(--gutter) 1rem}
  .giornata-testo,.momenti,.giornata-foto{display:contents}
  .giornata-testo > .etichetta{order:0;margin-bottom:2rem}
  .momento{margin:0 0 1.5rem}
  .momento[data-momento="0"]{order:1}.giornata-foto .foto[data-foto-momento="0"]{order:2}
  .momento[data-momento="1"]{order:3}.giornata-foto .foto[data-foto-momento="1"]{order:4}
  .momento[data-momento="2"]{order:5}.giornata-foto .foto[data-foto-momento="2"]{order:6}
  .momento[data-momento="3"]{order:7}.giornata-foto .foto[data-foto-momento="3"]{order:8}
  .giornata-foto .foto:nth-child(n){margin:0 0 3.4rem}
  .dettagli{grid-template-columns:1fr 1fr}
  .dettagli-testo{grid-column:1/-1;order:-1}
  .arrivare{grid-template-columns:1fr}
  .domande li{grid-template-columns:1fr;gap:.4rem}
  .menu{grid-template-columns:1fr}
  .menu-foto{display:none}
  .piede{grid-template-columns:1fr 1fr}
  .piede > :first-child{grid-column:1/-1}
}
@media (min-width:901px){
  /* La giornata: da computer i momenti si alternano mentre scorrono le foto */
  html.movimento .momento{position:absolute;inset:0 auto auto 0;margin:0;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .9s var(--ease-lenta)}
  html.movimento .momento.attivo{opacity:1;transform:none}
}

/* Interruttore Giorno Sera: due parole, mai la sola icona. In testata da
   computer e nel menu da telefono; la scelta premuta si sottolinea. */
.giorno-sera{display:inline-flex;align-items:center;gap:.55rem;font:400 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.giorno-sera button{background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--osso-3);font:inherit;letter-spacing:inherit;text-transform:inherit}
.giorno-sera button:hover{color:var(--osso)}
.giorno-sera button[aria-pressed="true"]{color:var(--osso);text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.giorno-sera .punto{color:var(--osso-3)}
.menu-piede .giorno-sera{flex-basis:100%;margin-bottom:.6rem}
@media (max-width:900px){
  .testata-dx .giorno-sera{font-size:.68rem;gap:.4rem}
}

/* Tema giorno (26/09/2026): la sera rovesciata sugli stessi token. Fondo quasi
   bianco e superfici appena avorio (founder, 26/09 notte: «bianco. O al massimo avorio»), testo inchiostro, fili scuri leggeri; il lume resta
   l'unico accento e solo per prenotare (come sfondo) o scurito come testo. */
html[data-ora="giorno"]{
  color-scheme:light;
  --notte:#FFFDF9; --notte-2:#F7F2E9; --notte-3:#EAE0CD;
  --osso:#1D2023; --osso-2:rgba(29,32,35,.72); --osso-3:rgba(29,32,35,.68);
  --linea:rgba(29,32,35,.18);
  --lume-testo:#96590F;
  --errore:#9C3A24; --scelta:#F5E4C4; --disabilitato:rgba(29,32,35,.3);
  --bolla:rgba(29,32,35,.08); --tondo-velo:rgba(29,32,35,.06);
  --testata-piena:rgba(255,253,249,.93); --barra-fissa:rgba(255,253,249,.95); --riepilogo-fissa:rgba(255,253,249,.97);
  --testata-velo-a:rgba(255,253,249,.7); --testata-velo-b:rgba(255,253,249,0);
  --velo-a:rgba(8,9,11,.88); --velo-b:rgba(8,9,11,.5); --velo-c:rgba(8,9,11,.22); --velo-d:rgba(8,9,11,.42);
  --foto-fondo:radial-gradient(120% 90% at 70% 30%,#EFE7D3 0%,#E7DCC4 60%,#DBCFB4 100%);
}

/* Di giorno, sopra la foto della prima schermata la testata resta come la sera (velo scuro, testo chiaro):
   sul cielo luminoso il testo scuro non si legge. Quando la pagina scorre (testata piena) prende i colori
   del giorno. Solo nelle pagine con la foto grande. */
html[data-ora="giorno"] body:has(.eroe) .testata:not(.piena){
  --osso:#EEE8DE; --osso-2:rgba(238,232,222,.78); --osso-3:rgba(238,232,222,.56); --linea:rgba(238,232,222,.2);
  --testata-velo-a:rgba(8,9,11,.55); --testata-velo-b:rgba(8,9,11,0);
  color:var(--osso);
}
/* Una frase per la sera e una per il giorno nella prima schermata: si vede solo quella del tema. */
.solo-giorno{display:none}
html[data-ora="giorno"] .solo-giorno{display:inline}
html[data-ora="giorno"] .solo-sera{display:none}