/* «Le Persiane» — sito d'esempio di un affittacamere (attivita' di fantasia).
   La cosa che si ricorda e' una sola: la facciata genovese dipinta, con le
   persiane verdi. Ogni finestra vera e' una camera e si apre; quelle accanto
   sono dipinte, come su tante facciate di Genova. Tutto il resto e' quieto. */

@font-face{font-family:Jost;src:url(../font/jost-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(../font/fraunces-400-600.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --calce:#F6F7F5;          /* fondo: calce fredda, non crema */
  --ardesia:#2E3438;        /* testo: 12,4:1 su calce */
  --facciata:#D9A441;       /* il giallo delle facciate genovesi */
  --facciata-ombra:#B9862C;
  --stucco:#F1EEE6;         /* le cornici delle finestre */
  --persiana:#2C5A4A;       /* calce sopra: 7,6:1 */
  --persiana-scura:#1F4438;
  --cielo:#3F6A84;          /* collegamenti: 5,6:1 su calce */
  --titoli:Jost,system-ui,sans-serif;
  --testo:Fraunces,Georgia,serif;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--calce);color:var(--ardesia);font:400 1.125rem/1.6 var(--testo);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--cielo)}
:focus-visible{outline:3px solid var(--cielo);outline-offset:3px}
h1,.h1,h2,h3,.marchio,button,label,.cartiglio,.portone,dt{font-family:var(--titoli)}
h2{font-weight:500;font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);line-height:1.1;letter-spacing:-.01em;
  margin-bottom:1.6rem}
h3{font-weight:500;font-size:1.75rem;line-height:1.15}

.fascia-esempio{background:var(--ardesia);color:var(--calce);font:500 .82rem/1.4 var(--titoli);
  text-align:center;padding:.45rem 1rem}
.fascia-esempio a{color:inherit}

.testata{display:flex;align-items:center;gap:2rem;padding:1.1rem var(--bordo)}
.marchio{font-weight:600;font-size:1.35rem;color:var(--ardesia);text-decoration:none;letter-spacing:.01em;margin-right:auto}
.testata nav{display:flex;gap:1.6rem}
.testata nav a{font:400 1rem var(--titoli);color:var(--ardesia);text-decoration:none}
.testata nav a:hover{text-decoration:underline}
.lingua{font:500 .9rem var(--titoli);background:none;border:1.5px solid var(--ardesia);color:var(--ardesia);
  border-radius:99px;padding:.35rem .9rem;cursor:pointer}

/* ── l'apertura: il testo a sinistra, la facciata a destra ─────────────────── */
.apertura{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);
  align-items:start;padding:clamp(1rem,3vw,2.5rem) var(--bordo) 0}
/* il palazzo e' alto, come i palazzi dei caruggi: si sale scorrendo, e il
   testo resta accanto */
.apertura-testo{position:sticky;top:clamp(1.5rem,6vh,4rem);padding:clamp(1rem,6vh,4rem) 0 2rem}
.h1{font-weight:500;font-size:clamp(2.3rem,1.2rem + 3.4vw,4.4rem);line-height:1.04;letter-spacing:-.018em;
  max-width:13ch;margin-bottom:1.6rem}
.sotto{font-size:1.2rem;max-width:36ch;margin-bottom:1.4rem}
.guida{font:400 .95rem var(--titoli);color:#5a6266}

/* la facciata */
.facciata{position:relative;background:var(--facciata);
  /* l'intonaco: due sfumature appena, niente texture finta */
  background-image:radial-gradient(120% 60% at 20% 10%,rgba(255,255,255,.18),transparent 60%),
                   radial-gradient(90% 50% at 90% 80%,rgba(120,70,10,.12),transparent 70%);
  padding:0 clamp(.8rem,2.5vw,2rem);border-radius:2px 2px 0 0}
.cornicione{height:clamp(1.4rem,3vw,2.2rem);margin:0 calc(-1 * clamp(.8rem,2.5vw,2rem)) 1.4rem;
  background:repeating-linear-gradient(90deg,var(--stucco) 0 14px,#d8d2c4 14px 22px);
  border-bottom:6px solid var(--facciata-ombra)}
.piano{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:clamp(.6rem,2.2vw,1.8rem);align-items:start;
  padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:5px solid rgba(255,255,255,.28)}
.piano-3{grid-template-columns:1fr 1.1fr 1fr}

/* le finestre vere: un bottone, la foto della camera dietro le persiane */
.finestra{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.telaio{position:relative;display:block}
.vetro,.finta{position:relative;display:block;aspect-ratio:3/5;border:clamp(6px,1vw,11px) solid var(--stucco);
  box-shadow:0 0 0 2px rgba(0,0,0,.06),inset 0 0 0 2px rgba(0,0,0,.18);overflow:hidden;background:#1d2326}
.vetro img{width:100%;height:100%;object-fit:cover}
.persiana{position:absolute;top:clamp(6px,1vw,11px);bottom:clamp(6px,1vw,11px);width:calc(50% - clamp(6px,1vw,11px));
  background:repeating-linear-gradient(to bottom,var(--persiana) 0 7px,var(--persiana-scura) 7px 9px);
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.persiana.sx{left:clamp(6px,1vw,11px);transform-origin:left center;box-shadow:inset -1px 0 0 rgba(0,0,0,.35)}
.persiana.dx{right:clamp(6px,1vw,11px);transform-origin:right center;box-shadow:inset 1px 0 0 rgba(0,0,0,.35)}
/* aperta, vista di fronte: l'anta spalancata contro il muro e' una striscia */
.finestra[aria-expanded=true] .sx{transform:perspective(800px) rotateY(-96deg)}
.finestra[aria-expanded=true] .dx{transform:perspective(800px) rotateY(96deg)}
.finestra:hover:not([aria-expanded=true]) .sx{transform:perspective(800px) rotateY(-14deg)}
.finestra:hover:not([aria-expanded=true]) .dx{transform:perspective(800px) rotateY(14deg)}
/* all'arrivo le persiane salutano: si socchiudono e si richiudono, una camera
   dopo l'altra dall'alto, per dire che le finestre si aprono (meno di 5 s) */
.piano-3 .persiana,.piano-2 .persiana,.piano-1 .persiana{animation:saluta-sx 1.5s cubic-bezier(.3,.6,.3,1) both}
.persiana.dx{animation-name:saluta-dx}
.piano-3 .persiana{animation-delay:.5s}.piano-2 .persiana{animation-delay:1.1s}.piano-1 .persiana{animation-delay:1.7s}
@keyframes saluta-sx{0%,100%{transform:none}45%,60%{transform:perspective(800px) rotateY(-62deg)}}
@keyframes saluta-dx{0%,100%{transform:none}45%,60%{transform:perspective(800px) rotateY(62deg)}}
.finestra[aria-expanded=true] .persiana,.finestra:hover .persiana{animation:none}
.cartiglio{display:block;margin-top:.55rem;background:var(--stucco);color:var(--ardesia);font-weight:500;
  font-size:clamp(.72rem,.6rem + .4vw,.95rem);line-height:1.25;padding:.35rem .4rem;text-align:center;
  border-radius:1px}
/* le finte: dipinte sull'intonaco, piu' piatte e un filo sbiadite */
.finta{opacity:.78;box-shadow:none;background:var(--persiana)}
.finta i{position:absolute;top:0;bottom:0;width:50%;
  background:repeating-linear-gradient(to bottom,var(--persiana) 0 7px,var(--persiana-scura) 7px 9px)}
.finta i+i{left:50%;border-left:1px solid rgba(0,0,0,.35)}

/* il pianterreno: il bugnato e il portone, che e' il bottone per prenotare */
.pianterreno{display:flex;justify-content:center;padding:1.6rem 0 0;margin:0 calc(-1 * clamp(.8rem,2.5vw,2rem));
  background:repeating-linear-gradient(to bottom,#cfa04a 0 34px,var(--facciata-ombra) 34px 37px)}
.portone{display:flex;align-items:flex-end;justify-content:center;width:clamp(8rem,38%,12rem);aspect-ratio:3/4.4;
  background:var(--persiana-scura);border:clamp(8px,1.2vw,12px) solid var(--stucco);border-bottom:0;
  border-radius:999px 999px 0 0;color:#EBD9A6;text-decoration:none;font-weight:500;font-size:1.05rem;
  padding-bottom:1.6rem;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.portone span{border-top:2px solid #EBD9A6;border-bottom:2px solid #EBD9A6;padding:.25rem .4rem}
.portone:hover{background:var(--persiana)}

/* ── le camere, a righe alternate ─────────────────────────────────────────── */
.camere,.arrivare,.prenota{padding:clamp(3.5rem,8vw,7rem) var(--bordo) 0}
.camera{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;
  margin-bottom:clamp(3rem,7vw,6rem)}
.camera:nth-of-type(even) figure{order:2}
.camera figure img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:2px}
.camera-testo{max-width:34rem}
.camera-testo h3{margin-bottom:.4rem}
.prezzo{font:400 1rem var(--titoli);margin-bottom:1rem}
.prezzo strong{font-size:1.5rem;font-weight:600}
.dati{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font:400 .95rem var(--titoli);
  margin-bottom:1rem}
.dati li{padding-left:.9rem;position:relative}
.dati li::before{content:"";position:absolute;left:0;top:.55em;width:.45rem;height:.45rem;background:var(--persiana)}
.camera-testo p{margin-bottom:1.2rem}
.chiedi{font:500 1rem var(--titoli);color:var(--persiana);text-underline-offset:.25em}

.vista{margin-top:clamp(1rem,3vw,2rem)}
.vista img{width:100%;max-height:78vh;object-fit:cover}
.vista p{padding:1rem var(--bordo);max-width:44rem;font-style:italic}

.arrivare dl{display:grid;grid-template-columns:minmax(10rem,16rem) minmax(0,38rem);gap:1rem 2.5rem}
.arrivare dt{font-weight:500;font-size:1.1rem}
.orari{margin-top:2rem;max-width:44rem}

/* ── prenotare: la chiusura, sul verde delle persiane ─────────────────────── */
.prenota{background:var(--persiana);color:var(--calce);margin-top:clamp(3.5rem,8vw,7rem);
  padding-bottom:clamp(3.5rem,8vw,6rem)}
.prenota>p{max-width:40rem;margin-bottom:2rem}
.prenota form{display:grid;gap:1.1rem;max-width:44rem}
.riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1.1rem}
.prenota label{display:grid;gap:.35rem;font-weight:500;font-size:.95rem}
.prenota input,.prenota select{font:400 1rem var(--titoli);padding:.7rem .8rem;border:0;border-radius:2px;
  background:var(--calce);color:var(--ardesia);min-height:2.9rem}
/* il consenso in Jost come le altre etichette del modulo, non in Fraunces (voce Cowork 26/10 (1)) */
.prenota .consenso{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-family:var(--titoli);font-size:.95rem}
.prenota .consenso input{min-height:auto;margin-top:.3rem;width:1.1rem;height:1.1rem;flex:none}
.prenota button{justify-self:start;font:600 1.05rem var(--titoli);background:var(--facciata);color:var(--ardesia);
  border:0;border-radius:2px;padding:.85rem 1.6rem;cursor:pointer}
.prenota button:hover{background:#e6b45a}
.prenota :focus-visible{outline-color:#EBD9A6}
.esito{min-height:1.6em;font-family:var(--titoli)}

.piede{padding:2.5rem var(--bordo) 3rem;font:400 .92rem/1.6 var(--titoli);color:#4a5257}
.piede p+p{margin-top:.2rem}

/* ── telefono ─────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .testata{flex-wrap:wrap;gap:.6rem 1.2rem}
  .testata nav{order:3;width:100%;gap:1.2rem}
  .apertura{grid-template-columns:1fr}
  .apertura-testo{padding-bottom:1rem}
  .facciata{max-width:30rem;width:100%;justify-self:center}
  .camera{grid-template-columns:1fr}
  .camera:nth-of-type(even) figure{order:0}
  .arrivare dl{grid-template-columns:1fr;gap:.2rem}
  .arrivare dd{margin-bottom:1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .persiana{transition:none;animation:none}
}

/* il video in loop (esempi/filmato.js) */
.filmato{position:relative}
.filmato video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#2b3135}
.filmato .ferma{position:absolute;right:1rem;bottom:1rem;font:600 .85rem/1 system-ui,sans-serif;color:#fff;
  background:rgba(20,24,27,.72);border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:.5rem .9rem;cursor:pointer}
.nota-ai{margin-top:.6rem}
.vista .filmato video{max-height:78vh}

/* ── il video in cima: le parole in basso a sinistra, sulla luce della camera ── */
.clip{--clip-velo:linear-gradient(0deg,rgba(46,52,56,.88) 0%,rgba(46,52,56,.45) 40%,rgba(46,52,56,0) 70%);align-items:end}
.clip{--velo-parole:rgba(46,52,56,.55)}   /* il velo sotto le parole (clip.css) */
.clip-nome{font:500 clamp(2.8rem,1.4rem + 5vw,6.4rem)/1 var(--titoli);letter-spacing:-.02em}
.clip-frase{font:400 clamp(1.15rem,1rem + .6vw,1.5rem)/1.4 var(--testo)}
.clip-btn{background:var(--facciata);color:var(--ardesia);border-radius:2px;font-family:var(--titoli)}

/* il secondo video (23/10): una camera d'epoca, apre «Le camere» */
.camere-video{max-width:64rem;margin:0 0 clamp(2.5rem,6vw,5rem)}
.camere-video .secondo{aspect-ratio:16/9}