/* Palazzo Auralia, «flex»: componenti costruiti sui token di tokens.css.
   Qui non nascono colori, durate o curve: solo ruoli già definiti.
   Senza JavaScript, con movimento ridotto o in pausa la pagina è una visita lineare e ferma.
   Il movimento (html.cinema, acceso da app.js solo se permesso) è tutto opacità, trasformazioni e tagli (clip-path):
   niente WebGL, niente miscele di livelli, niente grana a tutto schermo. */

/* Base */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-rendered-h,var(--header-bar-h)) + var(--space-4));scroll-padding-bottom:var(--space-6)}
@media(hover:hover) and (pointer:fine){html{scroll-behavior:smooth}html.still{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-text);font-size:var(--text-md);line-height:var(--leading-text)}
body.locked{overflow:hidden}
::selection{background:var(--wine);color:var(--paper)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:6px}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--focus-in),0 0 0 4px var(--focus-out)!important}
h1,h2,h3,p,figure,dl,dd,ul{margin:0}
p,li{text-wrap:pretty}
.hero-title,.display{text-wrap:balance}
h1,h2,h3{overflow-wrap:anywhere;font-family:var(--font-display);font-optical-sizing:none;font-variation-settings:"opsz" 30;font-weight:400;line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.script{font-family:var(--font-script)!important;font-variation-settings:normal!important;font-weight:400;letter-spacing:0!important;line-height:var(--leading-script)}
img{display:block;width:100%;height:100%;object-fit:cover}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
button svg,a svg{vertical-align:middle}

/* Componenti */
.text-link svg,.scroll-cue svg{transition:transform var(--dur-hover) var(--ease-out)}
/* Ovale disegnato a mano: la linea si ridisegna al passaggio del mouse. */
.oval{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:var(--space-3) var(--space-8);border:0;background:none;color:inherit;font-size:var(--text-sm);text-align:center}
.oval:hover{text-decoration:none}
.oval-stroke{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.oval-stroke path{stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.primary-button{display:flex;align-items:center;justify-content:center;gap:var(--space-5);width:100%;min-height:56px;padding:var(--space-4) var(--space-5);border:var(--hairline) var(--action);border-radius:999px;background:var(--action);color:var(--action-text);font-size:var(--text-sm);transition:background-color var(--dur-hover) var(--ease-color),transform var(--dur-press) var(--ease-out)}
.primary-button .oval-stroke{display:none}
.primary-button:active{transform:scale(var(--press-scale))}
.text-link{margin-top:var(--space-6)}
.icon-button{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:var(--space-3);border:0;border-radius:var(--radius);background:transparent;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) var(--ease-color)}
.icon-button:active{transform:scale(var(--press-scale-icon))}
label{display:block;margin-bottom:var(--space-5);font-size:var(--text-sm)}
input,select{display:block;width:100%;min-height:49px;padding:var(--space-3) 0;border:0;border-bottom:var(--hairline) var(--rule-strong);border-radius:var(--radius);background:transparent;color:var(--text);font-size:var(--text-md);caret-color:var(--ink);font-variant-numeric:tabular-nums;color-scheme:light;transition:border-color var(--dur-hover) var(--ease-color),box-shadow var(--dur-hover) var(--ease-color)}
input:focus,select:focus{border-bottom-color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
input:invalid{box-shadow:none}
input[aria-invalid=true]{border-bottom-color:var(--state-error);box-shadow:inset 0 -1px 0 var(--state-error)}
.form-error{min-height:20px;margin:var(--space-1) 0;color:var(--state-error);font-size:var(--text-sm)}
.skip{position:fixed;top:-80px;left:var(--space-5);z-index:100;padding:var(--space-3);background:var(--paper);color:var(--ink)}
.skip:focus{top:10px}
.skip:focus-visible{box-shadow:inset 0 0 0 var(--focus-spread-in) var(--focus-in),inset 0 0 0 var(--focus-spread-out) var(--focus-out)!important}

/* Intestazione: sopra l'ingresso è chiara sulla foto; finito l'ingresso (html.bar) resta fissa su carta. */
.header::before{content:'';position:absolute;inset:0 0 calc(var(--space-8) * -1);z-index:-1;background:var(--shade-header);pointer-events:none}
.header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 var(--frame);color:var(--text-on-photo)}
.bar{--header-h:var(--header-bar-h)}
.bar .header{background:var(--header-solid);color:var(--ink);border-bottom:var(--hairline) var(--rule)}
.bar .header::before{display:none}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:var(--title);line-height:.9;letter-spacing:.005em}
.brand img{width:36px;height:42px;object-fit:contain;filter:invert(1)}
.bar .brand img{filter:none}
.desktop-nav{display:flex;gap:var(--space-7);font-size:var(--text-sm)}
.desktop-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-1)}
.header-actions{display:flex;align-items:center;gap:var(--space-3)}
.book-link{padding:var(--space-2) var(--space-6);min-height:44px}
.book-link .short{display:none}
.menu-toggle{display:none}
.menu-toggle svg{transition:transform var(--dur-ui) var(--ease-out)}
.mobile-menu{display:none}

/* Ingresso: la facciata, poi il cortile visto dall'androne. Visita ferma: una sotto l'altra. */
.threshold{position:relative;background:var(--stage)}
.anchor-garden{position:absolute;left:0;top:max(100svh,560px)}
.threshold-stage{position:relative;display:flex;flex-direction:column;overflow:hidden}
.shot{position:relative;overflow:hidden;container-type:size}
.shot-facade{order:0;height:100svh;min-height:560px}
.shot-court{order:1;height:85svh;min-height:560px}
.facade-img{position:absolute;inset:0}
.shot-facade::after{content:'';position:absolute;inset:0;background:var(--shade-facade);pointer-events:none}
.cover-box{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%);container-type:size}
.court-img{position:absolute;inset:0}
/* Il nome, in calligrafia, nel cielo del cortile. */
.sky-title{position:absolute;left:0;right:0;top:1.6cqh;margin:0;text-align:center;color:var(--sky-ink);font-family:var(--font-script);font-size:var(--sky-name);line-height:1}
.ingresso-foto:not(.cinema) .hero-title{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.door-hint{display:none}
.hero-copy{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;height:100svh;min-height:560px;padding:0 var(--frame) max(6svh,var(--bar-clear));color:var(--text-on-photo)}
.hero-title{margin:var(--space-5) 0 var(--space-7);font-size:var(--display-hero);line-height:.9;letter-spacing:var(--tracking-hero)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);color:var(--text-on-photo-muted);font-size:var(--text-sm)}
.scroll-cue{display:flex;align-items:center;gap:var(--space-3);min-height:44px;color:var(--text-on-photo)}
.threshold-shade{position:absolute;left:0;right:0;bottom:0;z-index:2;height:85svh;background:var(--shade-court)}
.threshold-caption{position:absolute;left:var(--section-x);bottom:10%;z-index:3;max-width:560px;color:var(--text-on-photo)}
.threshold-caption h2{margin-bottom:var(--space-2);font-size:var(--script-2);color:var(--brass)}
.threshold-caption p{font-size:var(--text-lg);line-height:1.6}

/* I fatti della suite, accanto ai dettagli fotografici a profondità diverse. */
.letter{background:var(--night);color:var(--text-on-dark);padding:var(--section-y) var(--frame) var(--space-10)}
.letter-stage{position:relative;max-width:1320px;margin:0 auto;min-height:clamp(740px,58vw,960px)}
.letter h2{margin-bottom:var(--space-7);font-size:var(--script-2);color:var(--brass);position:relative;z-index:2}
.letter-body{position:relative;z-index:2;max-width:34ch;font-size:var(--text-letter);line-height:1.75;color:var(--text-on-dark)}
.letter-body p+p{margin-top:var(--space-5)}
.letter-body .sign{margin-top:var(--space-7);font-size:var(--script-3);color:var(--brass)}
.float{position:absolute;margin:0;z-index:1}
.float>div{position:relative;overflow:hidden;background:var(--surface-photo)}
.float img{height:100%}
.f1{right:3%;top:0;width:25%}.f1>div{aspect-ratio:4 / 3}
.f2{right:33%;top:19%;width:15%}.f2>div{aspect-ratio:3 / 4;border-radius:var(--arch)}
.f3{right:5%;top:41%;width:19%}.f3>div{aspect-ratio:3 / 4;border-radius:var(--arch)}
.f4{right:30%;top:68%;width:23%}.f4>div{aspect-ratio:4 / 3}
.f1 img{object-position:70% 50%}.f2 img{object-position:24% 50%}.f3 img{object-position:60% 50%}.f4 img{object-position:35% 50%}

/* Gli ambienti privati: fotografie dentro l'arco e nomi in calligrafia. */
.rooms{padding:var(--section-y) var(--frame)}
.rooms>h2{font-size:var(--script-1);color:var(--wine);max-width:12ch}
.rooms-lede{margin:var(--space-6) 0 var(--space-12);max-width:36ch;color:var(--text-muted);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.suite-list{display:flex;flex-direction:column;gap:var(--space-16)}
.room-arch{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--space-6);align-items:center}
.room-photo{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.room-photo::before{content:'';position:absolute;inset:calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0 var(--space-4);border:1px solid var(--bronze);border-radius:var(--arch);pointer-events:none}
.ra2 .room-photo::before{inset:calc(var(--space-4) * -1) var(--space-4) 0 calc(var(--space-4) * -1)}
.ra3 .room-photo::before{display:none}
.arch-frame{display:block;position:relative;aspect-ratio:var(--ratio-arch);overflow:hidden;border-radius:var(--arch);background:var(--surface-photo)}
.arch-frame .px,.arch-frame picture{display:block;height:100%}
.px{position:relative;overflow:hidden}
.px img{transform:scale(var(--image-overscan));transition:transform var(--dur-photo) var(--ease-scene)}
.ra1 .room-photo{grid-column:2 / 7}.ra1 .room-caption{grid-column:8 / 13}
.ra2 .room-photo{grid-column:7 / 12;grid-row:1}.ra2 .room-caption{grid-column:1 / 6;grid-row:1;text-align:right}
.ra2 .tags{justify-content:flex-end}
.ra3 .room-photo{grid-column:3 / 8}.ra3 .room-caption{grid-column:9 / 13}
.ra1 img{object-position:66% 50%}.ra2 img{object-position:42% 50%}.ra3 img{object-position:46% 50%}
.room-caption h3{font-size:var(--script-2);color:var(--wine);margin-bottom:var(--space-4)}
.room-caption p{max-width:34ch;color:var(--text-muted);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.ra2 .room-caption p{margin-left:auto}
.ra2 .room-caption h3{width:fit-content;margin-left:auto}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:var(--space-6);padding:0;list-style:none;font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--bronze)}
.tags li+li::before{content:'·';margin-right:var(--space-3)}

/* La parola enorme: attraversa la foto della colazione mentre scorri. */
.big{position:relative;height:min(calc(100svh - var(--header-h) - var(--bar-h)),1000px);min-height:620px;overflow:hidden;background:var(--stage)}
.big-photo{position:absolute;inset:0}
.big-photo img{object-position:var(--breakfast-position)}
.big::after{content:'';position:absolute;inset:0;background:var(--shade-big);pointer-events:none}
.big-word{position:absolute;left:0;bottom:11%;z-index:2;margin:0;white-space:nowrap;font-size:var(--giant);line-height:.8;letter-spacing:var(--tracking-giant);color:var(--text-on-photo);}
.big-note{position:absolute;right:var(--frame);bottom:var(--space-8);z-index:2;max-width:320px;color:var(--text-on-photo);font-size:var(--text-sm);line-height:var(--leading-relaxed);text-align:right}
.big-note .script{display:block;font-size:var(--script-3);color:var(--brass)}

@media(min-width:1001px) and (min-height:600px){
  .big{height:min(var(--big-film-ratio),1000px);min-height:0}
  .big-photo img,.big .big-photo .clip[data-shape=wide]{object-position:50% 100%}
  .big::after{background:var(--shade-big-top)}
  .big-word{top:var(--space-12);bottom:auto}
}
@media(min-width:761px) and (max-width:1000px){
  .header .desktop-nav{gap:var(--space-2)}
  .desktop-nav a,.book-link{white-space:nowrap}
  .book-link .long{display:none}
  .book-link .short{display:inline}
}
@media(min-width:761px) and (max-width:900px){.header .desktop-nav{gap:0}.desktop-nav a{padding:0 var(--space-1)}.header-actions{gap:var(--space-2)}}
@media(max-width:1000px){
  .big-photo img,.big .big-photo .clip[data-shape=tall]{object-position:50% 100%}
}
@media(min-width:761px) and (max-width:1000px){
  .big::after{background:var(--shade-big-top)}
  .big-word{top:var(--space-10);bottom:auto}
}

/* Spa: la notte blu, una foto ad arco grande, calligrafia d'ottone. */
.spa{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--space-6);align-items:center;background:var(--night);color:var(--text-on-dark);padding:var(--section-y) var(--frame);border-radius:50% 50% 0 0 / var(--vault) var(--vault) 0 0}
.spa-arch{position:relative;grid-column:2 / 8;aspect-ratio:5 / 6;overflow:hidden;border-radius:var(--arch);background:var(--surface-photo)}
.spa-arch .px,.spa-arch picture{display:block;height:100%}
.spa-arch img{object-position:50% 50%}
.spa-copy{grid-column:9 / 13}
.spa-copy h2{font-size:var(--script-2);color:var(--brass);margin-bottom:var(--space-5)}
.spa-copy p{color:var(--text-on-dark);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.spa .text-link{color:var(--brass)}

/* Richiesta di soggiorno: velluto prugna, pannello chiaro. */
.booking{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:var(--section-y) var(--section-x);background:var(--plum);color:var(--text-on-dark)}
.booking h2{margin-bottom:var(--space-7);font-size:var(--script-2);color:var(--brass)}
.booking-intro>p{max-width:320px;color:var(--text-on-dark-muted)}
.rate{margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--hairline) var(--rule-dark);font-size:var(--text-sm);color:var(--text-on-dark-muted)}
.rate strong{display:block;font-family:var(--font-display);font-size:var(--display-3);font-weight:400;color:var(--text-on-dark)}
.demo-note{display:block;max-width:290px;margin-top:var(--space-6);color:var(--text-on-dark-muted);font-size:var(--text-xs)}
.booking-panel{padding:var(--space-8);background:var(--paper);color:var(--text);box-shadow:var(--elev-card)}
.booking-panel h3{font-size:var(--display-3);line-height:var(--leading-heading)}
.selected-suite{margin:var(--space-5) 0 var(--space-6);color:var(--text-muted);font-size:var(--text-xs);line-height:var(--leading-text)}
.date-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.booking-summary{padding:var(--space-3) 0 var(--space-5);font-size:var(--text-sm);line-height:var(--leading-text)}
.form-fineprint{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--text-xs);line-height:var(--leading-text)}
.success>svg{width:50px;height:50px;margin-bottom:var(--space-7);color:var(--bronze)}
.success p{margin:var(--space-6) 0;font-size:var(--text-sm);line-height:1.7}

/* Contatti */
.contacts{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;padding:var(--section-y) var(--section-x) var(--space-12)}
.contacts h2{font-size:var(--script-1);color:var(--wine)}
.contacts .text-link{margin-top:var(--space-7)}
.contact-info{align-self:end;max-width:440px}
.facts{max-width:440px;border-top:var(--hairline) var(--rule)}
.facts>div{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-3) 0;border-bottom:var(--hairline) var(--rule);font-size:var(--text-sm)}
.facts dt{color:var(--text-muted)}
.facts dd{text-align:right}
.contact-info p{margin:var(--space-6) 0;color:var(--text-muted);font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.contact-info>a{display:inline-block;padding:var(--space-3) 0;font-size:var(--text-sm);text-decoration:underline;text-underline-offset:6px}

/* Piede: il nome, in calligrafia, grande */
footer{display:grid;grid-template-columns:1fr auto;gap:var(--space-3) var(--space-6);align-items:center;padding:var(--space-10) var(--frame) var(--space-7);color:var(--text-muted);font-size:var(--text-xs)}
footer .wordmark{grid-column:1 / -1;display:block;margin-bottom:var(--space-4);font-size:var(--wordmark);line-height:1;color:var(--wine)}
footer button{min-height:44px;border:0;background:transparent;font-size:var(--text-xs);text-decoration:underline;text-underline-offset:5px}
footer button:disabled{opacity:.7;cursor:default;text-decoration:none}

/* Galleria */
dialog{width:min(1200px,95vw);max-width:none;max-height:95dvh;margin:auto;padding:var(--space-6);overflow:auto;border:0;border-radius:var(--radius);background:var(--stage);color:var(--text-on-photo)}
dialog::backdrop{background:var(--scrim)}
.gallery-header,.gallery-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5)}
.gallery-header h2{font-size:var(--display-3)}
.gallery-image{position:relative;margin:var(--space-5) 0}
.gallery-image img{height:auto;max-height:70vh;object-fit:contain}
.gallery-image .icon-button{position:absolute;top:50%;translate:0 -50%;background:var(--paper);color:var(--ink)}
.gallery-prev{left:14px}
.gallery-next{right:14px}
.gallery-footer{font-size:var(--text-sm)}
.gallery-count{font-variant-numeric:tabular-nums}
.gallery-tip{margin-top:var(--space-5);font-size:var(--text-xs);color:var(--text-on-photo-muted)}
dialog[open]{opacity:1;transform:none;transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),overlay var(--dur-exit) allow-discrete,display var(--dur-exit) allow-discrete}
dialog[open]::backdrop{opacity:1;transition:opacity var(--dur-ui) var(--ease-out)}
dialog{opacity:0;transform:scale(var(--enter-scale));transition:opacity var(--dur-exit) var(--ease-out),transform var(--dur-exit) var(--ease-out),overlay var(--dur-exit) allow-discrete,display var(--dur-exit) allow-discrete;overscroll-behavior:contain}
dialog::backdrop{opacity:0;transition:opacity var(--dur-exit) var(--ease-out)}
@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}dialog[open]::backdrop{opacity:0}}

/* Calendario */
.date-box{margin:0 0 var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--hairline) var(--rule-strong)}
.date-box span{display:block;font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--bronze)}
.date-box strong{display:block;margin-top:var(--space-1);font-family:var(--font-text);font-size:var(--text-md);font-weight:500;font-variant-numeric:tabular-nums}
.calendar{margin:var(--space-2) 0 var(--space-5)}
.cal-head{display:flex;align-items:center;justify-content:space-between}
.cal-title{font-family:var(--font-text);font-size:var(--text-md);font-weight:500;text-transform:capitalize}
.cal-grid{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.cal-grid th{padding:var(--space-2) 0;font-size:var(--text-xs);font-weight:400;color:var(--bronze)}
.cal-grid td{padding:1px 0;text-align:center}
.cal-day{width:100%;aspect-ratio:1;max-height:var(--tap);border:0;border-radius:var(--radius);background:transparent;color:var(--text);font-size:var(--text-sm);transition:background-color var(--dur-hover) var(--ease-color),color var(--dur-hover) var(--ease-color)}
.cal-day:disabled{color:var(--text-disabled);cursor:default}
.cal-day.in-range{background:var(--range-wash)}
.cal-day[aria-pressed=true]{background:var(--plum-day);color:var(--paper)}
.cal-day.today{border-bottom:2px solid var(--bronze)}
.cal-tip{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-muted)}

/* ===== Movimento: solo quando app.js accende html.cinema ===== */
.cinema .threshold{height:100svh}
.cinema .anchor-garden{top:100%}
.cinema .threshold-stage{display:block;height:100svh;min-height:0}
.cinema .hero-copy{min-height:0}
.cinema .shot{position:absolute;inset:0;height:auto;min-height:0}
.cinema .shot-court{opacity:0}
.cinema .sky-title,.cinema .threshold-caption{opacity:0}
.cinema .door-hint{white-space:nowrap;position:absolute;top:calc(var(--header-h) + var(--space-10));left:50%;z-index:4;display:block;padding:var(--space-2) var(--space-4);background:var(--scrim);color:var(--text-on-photo);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;transform:translateX(-50%)}
.cinema .threshold-shade{top:0;height:auto;opacity:0}
@keyframes rise{from{opacity:0;transform:translateY(var(--reveal-shift))}}
.cinema .hero-copy>*{animation:none}
.cinema .hero-copy>.hero-title{animation-delay:var(--stagger)}
.cinema .hero-copy>.hero-foot{animation-delay:calc(var(--stagger) * 3)}

/* Entrate: la calligrafia si scrive da sinistra a destra, il resto si posa, una volta sola. */
.reveal-ready .write{clip-path:inset(-20% -4% -40% -4%);transition:clip-path var(--dur-write) var(--ease-scene)}
.reveal-ready .write:not(.is-in){clip-path:inset(-20% 100% -40% -4%)}
.reveal-ready [data-reveal]:not(.write){transition:opacity var(--dur-reveal) var(--ease-scene),transform var(--dur-reveal) var(--ease-scene)}
.reveal-ready [data-reveal]:not(.write):not(.is-in){opacity:0;transform:translateY(var(--reveal-shift))}
@media print{.cinema .film-complete .hero-copy,.cinema .film-complete .door-hint{opacity:1;visibility:visible}.reveal-ready [data-reveal]:not(.write),.reveal-ready [data-reveal]:not(.write):not(.is-in){opacity:1;transform:none;transition:none}.reveal-ready .write,.reveal-ready .write:not(.is-in){clip-path:none;transition:none}}

@media(hover:hover) and (pointer:fine){
  .primary-button:hover{background:var(--action-hover)}
  .text-link:hover svg,.scroll-cue:hover svg{transform:translateY(3px)}
  .oval:hover .oval-stroke path{animation:draw var(--dur-stroke) var(--ease-scene)}
  .room-photo:hover .px img{transform:scale(calc(var(--image-overscan) * var(--hover-zoom)))}
  .icon-button:hover{background:var(--hover-wash)}
  .gallery-image .icon-button:hover{background:var(--paper)}
  input:hover,select:hover{border-bottom-color:var(--ink)}
  .cal-day:not(:disabled):not([aria-pressed=true]):hover{background:var(--hover-wash)}
}

/* Pausa esplicita del movimento */
.motion-paused [data-reveal]{opacity:1;transform:none;transition:none}
.motion-paused .write{clip-path:inset(-20% -4% -40% -4%);transition:none}
.motion-paused .px img{transition:none}
.motion-paused .oval:hover .oval-stroke path{animation:none}
.motion-paused dialog,.motion-paused dialog[open],.motion-paused .mobile-menu,.motion-paused .mobile-menu.open,.motion-paused .primary-button:active,.motion-paused .icon-button:active{transform:none}
.motion-paused dialog,.motion-paused dialog[open],.motion-paused .mobile-menu,.motion-paused .mobile-menu.open{transition-property:opacity,visibility,overlay,display}
.motion-paused .text-link svg,.motion-paused .scroll-cue svg,.motion-paused .menu-toggle svg{transition:none;transform:none}
.motion-paused .menu-toggle[aria-expanded=true] svg{transform:rotate(90deg)}

@media(max-width:1000px){
  .desktop-nav{gap:var(--space-5)}
  .booking{gap:6%}
  .booking-panel{padding:var(--space-7)}
  .date-fields{gap:var(--space-3)}
  .contacts{gap:6%}
  .ra1 .room-photo,.ra3 .room-photo{grid-column:1 / 7}.ra1 .room-caption,.ra3 .room-caption{grid-column:7 / 13}
  .ra2 .room-photo{grid-column:7 / 13}.ra2 .room-caption{grid-column:1 / 7}
  .spa-arch{grid-column:1 / 8}.spa-copy{grid-column:8 / 13}
}

@media(max-width:760px){
 .header{flex-wrap:wrap;column-gap:var(--space-2);min-height:var(--header-h);height:auto}
 .brand{flex-shrink:0;max-width:100%;min-width:0}
 .brand span{min-width:0;overflow-wrap:normal}
 footer{grid-template-columns:minmax(0,1fr)}
 footer .wordmark{min-width:0;overflow-wrap:anywhere}
  .header{padding:0 var(--frame)}
  .brand{gap:var(--space-2);font-size:20px}
  .brand img{width:30px;height:35px}
  .desktop-nav{display:none}
  .menu-toggle{display:grid}
  .header-actions{gap:var(--space-1)}
  .book-link{padding:var(--space-2) var(--space-4)}
  .book-link .long{display:none}
  .book-link .short{display:inline}
  .mobile-menu{position:fixed;top:var(--header-rendered-h,var(--header-h));left:0;right:0;z-index:var(--layer-mobile-menu);max-height:calc(100svh - var(--header-rendered-h,var(--header-h)));overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:var(--space-7) var(--space-7) var(--space-8);background:var(--paper);color:var(--ink);border-bottom:var(--hairline) var(--rule);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--dur-exit) var(--ease-out),transform var(--dur-exit) var(--ease-out),visibility var(--dur-none) var(--ease-step) var(--dur-exit)}
  .mobile-menu.open{visibility:visible;opacity:1;transform:none;transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility var(--dur-none)}
  .mobile-menu a{display:flex;flex-shrink:0;align-items:center;min-height:58px;scroll-margin-block:var(--space-2);font-family:var(--font-display);font-size:var(--display-3)}
  .menu-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
  .hero-title{font-size:var(--display-hero-stacked);line-height:var(--leading-hero-stacked);letter-spacing:var(--tracking-hero-stacked)}
  .hero-foot{font-size:var(--text-xs)}
  .threshold-shade{background:var(--shade-court-low)}
  .threshold-caption{left:var(--space-6);right:var(--space-6);bottom:10%}
  .threshold-caption p{font-size:var(--text-sm)}
  .letter-stage{min-height:0}
  .float{position:relative;right:auto;top:auto;width:auto;margin-top:var(--space-7)}
  .f1{width:78%;margin-left:auto}
  .f2{width:44%}
  .f3{width:50%;margin-left:auto;margin-top:calc(var(--space-12) * -1)}
  .f4{width:70%}
  .room-arch{display:block}
  .room-caption{margin-top:var(--space-8);text-align:left!important}
  .ra2 .tags{justify-content:flex-start}
  .ra2 .room-caption p{margin-left:0}
  .room-photo::before{inset:calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 var(--space-3)}
  .suite-list{gap:var(--space-12)}
  .rooms-lede{margin-bottom:var(--space-10)}
  .big{height:64svh;min-height:480px}
  .big-word{bottom:calc(var(--space-8) + 132px)}
  .big-note{left:var(--frame);right:var(--frame);bottom:var(--space-6);max-width:none;text-align:left}
  .ra2 .room-caption h3{margin-left:0}
  .spa{display:block}
  .spa-copy{margin-top:var(--space-8)}
  .booking{display:block;padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .booking-panel{margin-top:var(--space-8);padding:var(--space-6) var(--space-5)}
  .date-fields{gap:var(--space-4)}
  input,select{font-size:var(--text-md)}
  .contacts{display:block;padding:var(--space-12) var(--frame) var(--space-10)}
  .contact-info{margin-top:var(--space-10)}
  footer{grid-template-columns:1fr;padding:var(--space-8) var(--space-5) var(--space-6)}
  footer p{order:3}
  footer button{justify-self:start}
  dialog{width:100vw;max-height:100dvh;padding:var(--space-4)}
  .gallery-image{margin:var(--space-6) 0}
  .gallery-image img{max-height:68dvh}
  .gallery-prev{left:var(--space-2)}
  .gallery-next{right:var(--space-2)}
  .gallery-footer{font-size:var(--text-xs)}
}

@media(max-width:350px){
  .brand span{font-size:18px}
  .header-actions{gap:2px}
  .date-fields{grid-template-columns:1fr}
  .booking-panel{padding:var(--space-5) var(--space-4)}
}

/* Movimento ridotto: niente spostamenti, solo dissolvenze. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .px img,.text-link svg,.scroll-cue svg,.menu-toggle svg{transition:none}
  .primary-button:active,.icon-button:active{transform:none}
  dialog,dialog[open],.mobile-menu,.mobile-menu.open{transform:none;transition-property:opacity,visibility,overlay,display}
  .gallery-image img{min-height:0}
  .reveal-ready [data-reveal]:not(.write),.reveal-ready [data-reveal]:not(.write):not(.is-in){transform:none;transition:opacity var(--dur-ui) var(--ease-color)}
  .reveal-ready .write,.reveal-ready .write:not(.is-in){clip-path:none;transition:none}
  .oval:hover .oval-stroke path{animation:none}
}

/* Schermi bassi: visita lineare; il titolo grande sta sulla facciata, il nome nel cielo non serve. */
@media(max-height:599px){
  .hero-copy,.shot{min-height:0}
  .ingresso-foto:not(.cinema) .hero-title{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .sky-title{display:none}
  .threshold-shade{display:none}
  .threshold-caption{position:static;order:2;max-width:none;padding:var(--space-6) var(--frame);background:var(--stage)}
  .threshold-caption h2{margin:var(--space-2) 0;font-size:var(--script-3)}
  .threshold-caption p{font-size:var(--text-sm)}
  .big{height:auto;min-height:420px}
  .big-word{bottom:calc(var(--space-4) + 140px);font-size:min(var(--giant),24svh)}
  .big-note{left:var(--frame);right:var(--frame);bottom:var(--space-4);max-width:none;text-align:left}
}

/* Contrasto forzato (Windows): colori di sistema, contorni veri. */
@media(forced-colors:active){
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid Highlight;outline-offset:3px}
  .cal-day[aria-pressed=true]{outline:2px solid Highlight}
  .cal-day.today{border-bottom:2px solid CanvasText}
  .primary-button{border:1px solid ButtonText}
  .oval .oval-stroke path{stroke:LinkText}
}
@media(max-height:599px) and (min-width:761px){.big-word{bottom:calc(var(--space-4) + 100px)}}

/* Telefono: le foto si vedono per intero quanto basta, i testi si leggono senza stringere gli occhi. In coda: vince sulle regole di schermo basso. */
@media(max-width:760px){
  .f2>div,.f3>div{aspect-ratio:4 / 5}
  .spa-arch{aspect-ratio:4 / 5}
  .tags{flex-direction:column;gap:var(--space-2);letter-spacing:var(--tracking-label)}
  .tags li+li::before{display:none}
  .room-caption p,.spa-copy p,.rooms-lede{max-width:none;font-size:var(--text-lg);line-height:var(--leading-text)}
  .facts>div{padding:var(--space-4) 0}
  .big{height:auto;min-height:0;display:flex;flex-direction:column}
  .big::after{display:none}
  .big-photo{position:relative;inset:auto;aspect-ratio:var(--ratio-tall)}
  .big-photo::after{content:'';position:absolute;inset:0;background:var(--shade-big);pointer-events:none}
  .big-word{position:relative;bottom:auto;margin:-.28em 0 0;font-size:var(--giant)}
  .big-note{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:var(--space-5) var(--frame) var(--space-8);background:var(--stage);text-align:left}
}

/* Clip di sezione: sopra la foto, che resta sotto come ripiego. Un solo passaggio, mai in loop. */
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;pointer-events:none;transition:opacity var(--dur-clip-fade) var(--ease-step),transform var(--dur-photo) var(--ease-scene)}
.px .clip{transform:scale(var(--image-overscan))}
.clip[data-clip-state=playing],.clip[data-clip-state=complete]{opacity:1}
.clip[data-clip-state=fallback]{display:none}
.room[data-room="suite-affreschi"] .clip[data-shape=wide]{object-position:var(--suite-position)}
.big-photo .clip[data-shape=wide]{object-position:var(--clip-wide-position)}
.big-photo .clip{z-index:0}
.motion-paused .clip{transition:none}
@media(prefers-reduced-motion:reduce){.clip{display:none}}
@media(max-height:599px){.clip{display:none}}

/* Film: tutti i livelli hanno lo stesso rettangolo; la foto resta al primo paint. */
.scene-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.film-playing .scene-film{opacity:1}
.cinema .film-complete .shot-court,.cinema .film-complete .threshold-shade,.cinema .film-complete .threshold-caption,.cinema .film-complete .sky-title{transition:opacity var(--dur-film-fade) var(--ease-step)}
.cinema .film-complete .shot-court,.cinema .film-complete .threshold-shade,.cinema .film-complete .threshold-caption,.cinema .film-complete .sky-title{opacity:1}
.cinema .film-complete .hero-copy,.cinema .film-complete .door-hint{opacity:0;visibility:hidden}
.film-fallback .scene-film{display:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.scene-film{display:none}}
/* Revisione: stessa soglia fotografica, informazioni leggibili e un solo arco per foto. */
.door-hint{display:none!important}
.room-photo::before{display:none}
.letter-stage{min-height:var(--details-height)}
.letter h2{max-width:var(--details-heading-measure)}
.f2{width:var(--lion-width);right:var(--section-x);top:var(--lion-top)}
.f2>div{aspect-ratio:var(--ratio-wide);border-radius:var(--lion-arch)}
.f2 img{object-position:var(--lion-position) center}
.f1{right:calc(var(--lion-width) + var(--section-x) + var(--space-7))}
.f3{right:var(--section-x);top:var(--tea-top)}
.f4{right:calc(var(--lion-width) + var(--section-x) + var(--space-7));top:var(--linen-top)}
/* Dettagli: griglia a tre colonne, nessuna foto sul testo a nessuna larghezza. */
@media(min-width:1001px){
  .letter-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-7);row-gap:var(--space-7);min-height:0;align-items:start}
  .letter h2{grid-column:1;grid-row:1;align-self:end;margin-bottom:0}
  .letter-body{grid-column:1;grid-row:2}
  .float{position:relative;right:auto;top:auto;width:auto}
  .f2{grid-column:2;grid-row:1}
  .f1{grid-column:3;grid-row:1;margin-top:var(--space-12)}
  .f3{grid-column:2;grid-row:2}
  .f4{grid-column:3;grid-row:2}
  .f3>div{aspect-ratio:3 / 4}
  .f4>div{aspect-ratio:3 / 4}
  .f2>div{border-radius:0}
}
/* Tablet: due colonne, stessa regola della griglia larga (nessuna foto sul testo). */
@media(min-width:761px) and (max-width:1000px){
  .letter-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7);row-gap:var(--space-7);min-height:0;align-items:start}
  .letter h2{grid-column:1;grid-row:1;align-self:end;margin-bottom:0}
  .letter-body{grid-column:1;grid-row:2}
  .float{position:relative;right:auto;top:auto;width:auto}
  .f1{grid-column:2;grid-row:1}
  .f2{grid-column:2;grid-row:2}
  .f3{grid-column:1;grid-row:3}
  .f4{grid-column:2;grid-row:3}
  .f3>div,.f4>div{aspect-ratio:3 / 4}
  .f2>div{border-radius:0}
}
.hero-demo{font-size:var(--text-xs)}
.hero-title{max-width:var(--hero-title-measure)}
.language-link{display:flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);font-size:var(--text-xs)}
.guest-information{padding:var(--section-y) var(--frame)}
.guest-information>h2{font-size:var(--script-1);color:var(--wine);margin-bottom:var(--space-8)}
.information-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start}
.faq details{border-bottom:var(--hairline) var(--rule);padding:var(--space-5) 0}
.faq summary{cursor:pointer;font-size:var(--text-lg);min-height:var(--tap);display:list-item}
.faq details p{padding:var(--space-3) 0 var(--space-5);max-width:var(--information-measure);color:var(--text-muted)}
.question-panel{background:var(--night);color:var(--text-on-dark);padding:var(--space-8)}
.question-panel h3{font-size:var(--display-3);margin-bottom:var(--space-4)}
.question-panel p{margin-bottom:var(--space-6)}
.question-panel form{margin-top:var(--space-7)}
.question-panel input{color:var(--text-on-dark);caret-color:var(--text-on-dark);border-color:var(--text-on-dark-muted);color-scheme:dark}
.question-panel input::placeholder{color:var(--text-on-dark-muted)}
.question-panel .primary-button{background:var(--paper);color:var(--ink)}
.question-panel .text-link{display:inline-flex;align-items:center;min-height:var(--tap)}
#information-answer{margin-top:var(--space-7);font-size:var(--text-md)}
.native-dates,.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--field-gap)}
.calendar,.date-fields{display:none}
.enhanced .calendar,.enhanced .date-fields{display:block}
.enhanced .date-fields{display:grid}
.enhanced .native-dates{display:none}
html:not(.enhanced) #information-form{display:none}
#request-readiness{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-5)}
#example-contact{border:0;background:none;color:var(--wine);padding:0;min-height:var(--tap);margin-top:var(--space-3);text-decoration:underline}
.primary-button:disabled{opacity:1;background:var(--rule-strong);color:var(--paper);cursor:wait}
.contact-fields{margin-top:var(--space-5)}
summary:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--focus-in),0 0 0 4px var(--focus-out)!important}
@media(max-width:1000px){.information-grid{gap:var(--space-8)}}
@media(max-width:760px){
 .cinema .threshold,.threshold{height:auto}
 .threshold-stage,.cinema .threshold-stage{height:auto;display:flex;flex-direction:column}
 .shot-facade,.cinema .shot-facade{position:relative;inset:auto;height:var(--hero-mobile-media);min-height:0;order:0}
 .facade-img,.scene-film,.court-img{object-fit:cover;object-position:center var(--film-mobile-position)}
 .cover-box,.cinema .shot-court .cover-box{inset:0;width:100%;height:100%;transform:none}
 .shot-court{height:var(--hero-mobile-media);min-height:0;order:2}
 .cinema .shot-court{position:absolute;inset:0 0 auto;height:var(--hero-mobile-media)}
 .hero-copy,.cinema .hero-copy{position:relative;inset:auto;height:auto;min-height:0;order:1;padding:var(--space-5) var(--frame) var(--space-6);background:var(--night);opacity:1!important;visibility:visible!important}
 .hero-title{margin:0 0 var(--space-4);font-size:var(--hero-mobile-title);line-height:var(--leading-heading);max-width:none}
 .hero-foot{align-items:center;gap:var(--space-4);font-size:var(--text-sm)}
 .scroll-cue{white-space:nowrap}
 .shot-facade::after,.threshold-caption,.threshold-shade,.sky-title{display:none}
 .f1,.f2,.f3,.f4{right:auto;top:auto}
 .f2{width:var(--lion-mobile-width);margin-top:var(--space-8)}
 .f2>div{aspect-ratio:var(--ratio-wide)}
 .f3{width:var(--lion-mobile-width);margin-top:var(--space-12)}
 .f4{margin-top:var(--space-8)}
 .letter-stage{min-height:0}
 .letter-body{max-width:var(--information-measure)}
 .big-word{width:100%;text-align:center;white-space:normal}
 .information-grid{display:block}
 .question-panel{margin-top:var(--space-8);padding:var(--space-6)}
 .contact-fields{grid-template-columns:1fr}
}
@media(max-height:599px){.hero-title{font-size:var(--display-2)}.hero-title{margin-bottom:var(--space-3)}}
@media(max-height:599px) and (max-width:760px){.hero-copy{padding-bottom:var(--space-5)}}

/* Camere e suite: due fotografie autentiche, fatti e scelta accanto alla categoria. */
body{font-weight:var(--weight-reading);font-synthesis:none}
h1,h2,h3{font-weight:var(--weight-reading)}
button,input,select,strong,b,.room-rate{font-weight:var(--weight-control)}
.room-caption h3{font-family:var(--font-display);font-size:var(--room-name);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);text-transform:none}
.room-caption{max-width:var(--room-caption-measure)}
.room-facts{list-style:none;padding:0;margin:var(--space-5) 0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);line-height:var(--leading-text)}
.room-rate{font-size:var(--text-lg);margin-top:var(--space-5)}
.room-note{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-2)}
.room-choice{display:inline-flex;min-height:var(--tap);align-items:center;margin-top:var(--space-5);text-decoration:underline;text-underline-offset:var(--space-1)}
#room-selection-status{font-size:var(--text-sm);color:var(--text-muted);margin:var(--space-3) 0 var(--space-5)}
#room-id{max-width:100%;font-size:var(--text-md)}
.room .px img{object-position:center}
.room[data-room="suite-affreschi"] .px img{object-position:var(--suite-position)}
@media(max-width:760px){.room-caption{max-width:none}.room-caption h3{margin-top:var(--space-6)}.ra2 .room-caption{text-align:left}.room-facts{justify-content:flex-start}}

.rate strong{font-weight:var(--weight-control)}
.module-home-links{display:flex;flex-wrap:wrap;gap:var(--space-4);font-family:var(--font-text);font-size:var(--text-sm)}
.big>.breakfast-menu-link{position:absolute;right:var(--frame);top:var(--space-6);z-index:var(--layer-module-link);display:inline-flex;align-items:center;min-height:var(--tap);margin:0;padding:var(--space-3) var(--space-5);background:var(--night);color:var(--paper);font-size:var(--text-sm);text-decoration:underline}

html{scroll-padding-bottom:calc(var(--tap) + var(--space-4) + env(safe-area-inset-bottom,0px));}
.booking-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--layer-booking-bar);display:flex;justify-content:center;gap:var(--space-6);padding:var(--space-2) var(--frame) calc(var(--space-2) + env(safe-area-inset-bottom,0px));background:var(--header-solid);border-top:var(--hairline) var(--rule);}
.booking-bar a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);font-size:var(--text-sm);}
footer{padding-bottom:calc(var(--space-7) + var(--tap) + var(--space-4) + env(safe-area-inset-bottom,0px));}

/* Barra fissa: altezza di un tocco più i margini; il testo in basso dell'apertura la lascia libera. */
:root{--bar-clear:calc(var(--tap) + var(--space-6) + var(--space-4) + env(safe-area-inset-bottom,0px))}
.booking-bar button{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;border:0;background:transparent;color:var(--ink);font-size:var(--text-sm);text-decoration:underline;text-underline-offset:5px}
.booking-bar button[hidden]{display:none}