/* ============================================================
   STUDIO DEL GOLFO · BOZZA "VETRINA" · 3 agosto 2026
   Direzione: il blu di Capo Noli come TERRA, non come inchiostro
   su carta. Si parte dal fondo (il largo) e si sale a riva (la
   persona). Token del design system, zero dipendenze.
   ============================================================ */

/* --- TOKEN (dal design system, piu tre toni di profondita) --- */
:root{
  --ink:#2e3f52; --ink-deep:#22303f; --ink-mid:#475a6e;
  --abisso:#16212c; --fondale:#1b2733; --secca:#243546;
  --slate:#8a98a6; --divider:#cdd4db;
  --slate-chiaro:#a7b3bf;   /* AGGIUNTA: slate su fondo scuro, per l'AA */
  --paper:#f5f1ea; --paper-soft:#ece6db; --clay:#a6886a;
  --sale:rgba(245,241,234,.16);       /* hairline su scuro */
  --sale-forte:rgba(245,241,234,.34);
  /* Il clay del marchio (#a6886a) su --secca fa 3,80: sotto l'AA per
     testo normale, e su --secca ci stanno le note dei pacchetti e
     l'occhiello degli enti, che sono 11 e 12 px. Questo e' lo stesso
     colore schiarito fino a passare ovunque: 4,72:1 su --secca,
     5,70 su --fondale, 6,13 su --abisso. Il clay pieno resta per le
     grandi dimensioni, i bordi e il fuoco, dove basta 3:1. */
  --clay-chiaro:#b59a80;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Jost',system-ui,sans-serif;
  --dur-1:150ms; --dur-2:240ms; --dur-3:360ms; --dur-4:900ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --container:74rem;
  --pad:1.5rem;
}
@media (min-width:1024px){ :root{ --pad:3rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--abisso); color:var(--paper);
  font-family:var(--font-ui); font-weight:200; font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--clay); color:var(--abisso); }

/* Fondale fisso: cambia tono a seconda della sezione attraversata.
   E' l'arco della pagina, dal largo alla riva. */
#fondale{
  position:fixed; inset:0; z-index:-1; background:var(--abisso);
  transition:background-color 1.1s var(--ease);
}

/* --- TIPOGRAFIA --- */
.display{
  font-family:var(--font-display); font-weight:300;
  line-height:1.02; letter-spacing:-.015em; margin:0;
}
h1.display{ font-size:clamp(2.9rem,9.2vw,7.5rem); }
h2.display{ font-size:clamp(2.2rem,5vw,4rem); max-width:17ch; text-wrap:balance; }
.display em{ font-style:italic; font-weight:400; color:var(--clay); }
.occhiello{
  font-family:var(--font-ui); font-weight:300; font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.26em; color:var(--slate-chiaro);
  margin:0 0 1.25rem; display:block;
}
.lead{ font-size:clamp(1.0625rem,1.6vw,1.25rem); line-height:1.62; max-width:34ch; color:rgba(245,241,234,.82); }
p{ margin:0 0 1.1rem; max-width:62ch; }
strong{ font-weight:400; color:var(--paper); }
.piccolo{ font-size:.8125rem; line-height:1.55; color:var(--slate-chiaro); letter-spacing:.01em; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

/* --- FOCUS, sempre visibile --- */
a:focus-visible,button:focus-visible{ outline:2px solid var(--clay); outline-offset:4px; border-radius:2px; }

/* --- SKIP LINK --- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--pad); top:1rem; z-index:99; background:var(--paper); color:var(--ink); padding:.75rem 1rem; }

/* ============================================================
   TESTATA
   ============================================================ */
.testata{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:1.1rem 0; transition:background-color var(--dur-3) var(--ease), padding var(--dur-3) var(--ease);
}
.testata::after{
  content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0;
  height:1px; background:var(--sale); transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.testata.compatta{ background:rgba(22,33,44,.86); backdrop-filter:blur(14px); padding:.7rem 0; }
.testata.compatta::after{ transform:scaleX(1); }
.testata__riga{ display:flex; align-items:center; gap:1.5rem; }
.marchio{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.marchio img{ width:30px; height:30px; }
.marchio span{ font-family:var(--font-display); font-weight:500; font-size:1.0625rem; letter-spacing:.02em; }
.nav{ display:none; gap:1.75rem; }
@media (min-width:900px){ .nav{ display:flex; } }
/* Sotto i 900px la navigazione non esisteva: restavano marchio e Scrivimi,
   e le prove erano raggiungibili solo scorrendo cinque sezioni. */
.nav-apri{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:transparent; border:1px solid var(--sale-forte); border-radius:9999px;
  color:var(--paper); cursor:pointer; padding:0; margin-left:.5rem;
}
@media (min-width:900px){ .nav-apri{ display:none; } }
.nav-apri span{ display:block; width:16px; height:1px; background:currentColor; position:relative; }
.nav-apri span::before,.nav-apri span::after{
  content:""; position:absolute; left:0; width:16px; height:1px; background:currentColor;
  transition:transform var(--dur-2) var(--ease);
}
.nav-apri span::before{ top:-5px; } .nav-apri span::after{ top:5px; }
/* Lo stato aperto lo detta il <details> che contiene il comando:
   vedi il blocco STRUTTURA in fondo al foglio. */
.nav a{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.18em; text-decoration:none;
  color:rgba(245,241,234,.80); padding-bottom:2px; position:relative; transition:color var(--dur-2) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--clay);
  transform:scaleX(0); transform-origin:right; transition:transform var(--dur-3) var(--ease);
}
.nav a:hover{ color:var(--paper); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.65rem 1.4rem;
  border-radius:9999px; font-family:var(--font-ui); font-weight:300; font-size:.8125rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:1px solid var(--sale-forte); background:transparent; color:var(--paper);
  transition:background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.btn:hover{ background:var(--paper); color:var(--abisso); border-color:var(--paper); }
.btn--pieno{ background:var(--paper); color:var(--abisso); border-color:var(--paper); }
.btn--pieno:hover{ background:var(--clay); border-color:var(--clay); color:var(--abisso); }
.btn--scuro{ border-color:rgba(46,63,82,.35); color:var(--ink); }
.btn--scuro:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.testata .btn{ padding:.55rem 1rem; font-size:.6875rem; letter-spacing:.14em; }
@media (min-width:600px){ .testata .btn{ padding:.65rem 1.4rem; font-size:.8125rem; letter-spacing:.1em; } }

/* ============================================================
   HERO · IL VOLO
   Una schermata sola, ferma. La traversata non la comanda piu'
   lo scorrimento (230vh per arrivare alla prima informazione
   utile erano tre swipe di telefono in cui non succedeva
   niente): la comanda la riga di costa, che da indicatore
   passivo diventa il comando della fotografia.
   ============================================================ */
.volo{ position:relative; height:100svh; min-height:520px; }
.volo__fermo{ position:relative; height:100%; overflow:hidden; }
.volo__media{ position:absolute; inset:0; }
.volo__media video,.volo__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); will-change:transform;
}
/* Il filmato sta sopra il fermo e compare solo quando puo' davvero
   girare. Se la rete non ce la fa, o se il sistema chiede meno
   movimento, resta il fermo e non si e' scaricato niente. */
.volo__video{
  position:absolute; inset:0; z-index:1;
  opacity:0; transition:opacity 1s var(--ease);
}
.volo__video.gira{ opacity:1; }
.volo__velo{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to right,rgba(18,27,36,.88) 0%,rgba(18,27,36,.62) 30%,rgba(18,27,36,.14) 62%,rgba(18,27,36,0) 88%),
    linear-gradient(to top,rgba(18,27,36,.90) 0%,rgba(18,27,36,.34) 32%,rgba(18,27,36,0) 54%,rgba(18,27,36,.66) 100%);
}
@media (max-width:700px){
  .volo__velo{
    background:linear-gradient(to top,rgba(18,27,36,.94) 0%,rgba(18,27,36,.66) 42%,rgba(18,27,36,.28) 70%,rgba(18,27,36,.58) 100%);
  }
}
.volo__grana{
  position:absolute; inset:0; z-index:3; opacity:.14; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
}
.volo__contenuto{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(7.5rem,17vh,10.5rem);   /* la costa adesso e' un comando: le serve aria sopra */
}
/* Il titolo nuovo e' un dato, non un claim: sono due righe lunghe
   invece di due corte, quindi il corpo scende. A 7,5rem usciva
   dallo schermo di 22 pixel. */
.volo h1{ max-width:26ch; font-size:clamp(2rem,4.4vw,4rem); }
/* L'occhiello e' 11px, quindi testo normale: gli servono 4,5.
   Con lo `slate` del sistema, sopra il filmato della baia scendeva
   a 3,29 nei momenti piu' luminosi della clip. A 88 di paper fa
   4,90 nel punto peggiore, misurato su cinque fotogrammi. Vale solo
   qui: altrove lo slate sta su fondo pieno e passa. */
.volo .occhiello{ display:block; margin-bottom:1.1rem; color:rgba(245,241,234,.88); }
.volo .costa__legenda,.volo .costa__nomi{ color:rgba(245,241,234,.88); }
@media (max-width:520px){ .volo h1 br{ display:none; } }
.volo__nota{
  margin:1.5rem 0 0; max-width:40ch; font-size:.9375rem; line-height:1.6;
  color:rgba(245,241,234,.88);
}
.volo__nota strong{ color:var(--paper); font-weight:300; }

/* Riga di costa: il perimetro vero del lavoro, non un ornamento */
.costa{
  position:absolute; left:0; right:0; bottom:0; z-index:4; padding:0 var(--pad) 1.6rem;
  pointer-events:none;
}
.costa__legenda{
  display:block; font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(245,241,234,.56); margin-bottom:.7rem;
}
.costa__riga{ position:relative; height:1px; background:var(--sale); margin-bottom:.9rem; }
.costa__cursore{
  --cursore-w:34px;
  position:absolute; top:-2px; left:0; width:var(--cursore-w); height:5px; background:var(--clay);
  transition:left var(--dur-2) var(--ease); border-radius:1px;
}
.costa__nomi{
  display:flex; justify-content:space-between; list-style:none; margin:0; padding:0;
  font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,241,234,.60);
}
@media (min-width:600px){ .costa__nomi{ font-size:.6875rem; letter-spacing:.26em; } }
.costa__nomi li{ transition:color var(--dur-2) var(--ease); }
.costa__nomi li.acceso{ color:var(--paper); }

/* I nomi sono il comando. Quelli su cui ho volato sono bottoni e
   portano al girato filtrato; gli altri due restano testo, perche'
   un bottone che non fa niente costa piu' di un bottone assente. */
.costa__nome{
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; padding:0; margin:0; display:inline-block;
}
button.costa__nome{ cursor:pointer; pointer-events:auto; padding-bottom:.34rem; }
button.costa__nome i{
  font-style:normal; margin-left:.45em; color:var(--clay); letter-spacing:.08em;
}
button.costa__nome::after{
  content:""; display:block; height:1px; margin-top:.34rem;
  background:var(--sale-forte); transition:background var(--dur-2) var(--ease);
}
button.costa__nome:hover::after,
.costa__nomi li.acceso button.costa__nome::after{ background:var(--clay); }
.costa__nome[data-p]:not(button){ opacity:.62; }
.costa__nomi li:nth-child(2),.costa__nomi li:nth-child(5){ display:none; }
@media (min-width:520px){ .costa__nomi li:nth-child(2),.costa__nomi li:nth-child(5){ display:list-item; } }

.invito{
  display:none; position:absolute; z-index:4; right:var(--pad); bottom:5.2rem; align-items:center; gap:.7rem;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(245,241,234,.62);
}
@media (min-width:1100px){ .invito{ display:flex; } }
.invito__tratto{ display:block; width:1px; height:44px; background:linear-gradient(to bottom,transparent,var(--sale-forte)); }
.invito__tratto::after{
  content:""; display:block; width:1px; height:14px; background:var(--clay);
  animation:cala 2.4s var(--ease) infinite;
}
@keyframes cala{ 0%{transform:translateY(0);opacity:0} 40%{opacity:1} 100%{transform:translateY(30px);opacity:0} }

/* ============================================================
   SEZIONI
   ============================================================ */
.sezione{ position:relative; padding:clamp(5rem,13vh,9rem) 0; }
.sezione--carta{ background:var(--paper); color:var(--ink); }
.sezione--carta .occhiello{ color:var(--ink-mid); }
.sezione--carta p{ color:rgba(34,48,63,.86); }
.sezione--carta strong{ color:var(--ink); }
.sezione--carta .lead{ color:rgba(34,48,63,.9); }
.sezione--carta .piccolo{ color:var(--ink-mid); }
.filo{ height:1px; background:var(--sale); border:0; margin:0; }
.sezione--carta .filo{ background:var(--divider); }

/* Griglia editoriale asimmetrica, come da MASTER */
.duetto{ display:grid; gap:2.5rem; }
@media (min-width:860px){ .duetto{ grid-template-columns:2fr 3fr; gap:clamp(3rem,7vw,7rem); align-items:start; } }

/* --- TESI --- */
.tesi h2{ max-width:16ch; }
.tesi__firma{
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.28; color:var(--clay);
  margin:2.5rem 0 0; padding-left:1.5rem; border-left:1px solid var(--sale-forte); max-width:24ch;
}

/* --- FOTOGRAFIA VIVA --- */
.viva__scena{
  position:relative; margin-top:3rem; aspect-ratio:16/9; overflow:hidden;
  background:var(--fondale);
}
@media (max-width:600px){ .viva__scena{ aspect-ratio:4/5; } }
.viva__scena img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--dur-3) linear; }
.viva__comandi{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.25rem;
}
.viva__stato{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-chiaro); }
.viva__stato b{ color:var(--clay); font-weight:300; }
.viva__peso{ margin-left:auto; }

/* --- MISURE (il censimento) --- */
.misure{ margin-top:3.5rem; display:grid; gap:0; }
.misura{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.5rem 1.5rem;
  padding:1.5rem 0; border-top:1px solid var(--sale);
}
.misura:last-child{ border-bottom:1px solid var(--sale); }
.misura__voce{ font-size:1.0625rem; font-weight:200; }
/* "(stima)" e "(campione ridotto)" stanno dentro la voce, non solo
   nella fonte sotto: chi legge la cifra grande deve sapere gia' li'
   che quella riga non e' contata come le altre. */
.misura__voce i{ font-style:italic; font-size:.8125rem; color:var(--slate-chiaro); }
.misura__cifra{
  font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,5vw,3.25rem);
  line-height:1; letter-spacing:-.01em; color:var(--paper);
}
.misura__fonte{ grid-column:1/-1; font-size:.75rem; color:var(--slate-chiaro); letter-spacing:.02em; }
.misura__barra{ grid-column:1/-1; height:2px; background:var(--sale); margin-top:.9rem; position:relative; overflow:hidden; }
.misura__barra i{
  position:absolute; inset:0 auto 0 0; width:var(--q,0%); background:var(--clay);
  transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease);
}
.misura.dentro .misura__barra i{ transform:scaleX(1); }

.trittico{ display:grid; gap:2rem; margin-top:3.5rem; }
@media (min-width:700px){ .trittico{ grid-template-columns:repeat(3,1fr); gap:2.5rem; } }
/* Da tre cifre a due: 330mila e 40 milioni sono gia' il titolo e il
   lead del notiziario, e li' erano la terza occorrenza. Due colonne
   invece di tre, non due colonne su tre con un buco. */
@media (min-width:700px){ .trittico--due{ grid-template-columns:repeat(2,minmax(0,26rem)); } }
.trittico > div{ padding-top:1.25rem; border-top:1px solid var(--sale); }
.sezione--carta .trittico > div{ border-top-color:var(--divider); }
.trittico b{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.25rem,4.4vw,3.25rem); line-height:1; letter-spacing:-.01em; margin-bottom:.6rem;
}
.trittico .piccolo{ margin:0; }

/* --- EDITORIALE --- */
.pezzi{ margin-top:3rem; }
.pezzo{
  display:grid; gap:.35rem 2rem; padding:1.6rem 0; border-top:1px solid var(--sale);
  text-decoration:none; position:relative; transition:padding-left var(--dur-3) var(--ease);
}
@media (min-width:820px){ .pezzo{ grid-template-columns:auto 1fr auto; align-items:baseline; } }
.pezzo:last-of-type{ border-bottom:1px solid var(--sale); }
.pezzo__reg{ font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); }
.pezzo__tit{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.35rem,2.5vw,1.9rem); line-height:1.2; }
.pezzo__min{ font-size:.75rem; color:var(--slate-chiaro); letter-spacing:.05em; }
/* Il pezzo non ancora scritto: il sito usa gia' il tratteggio per dire
   non consegnato, e qui si riusa quello invece di inventare un segno. */
.pezzo--attesa{ opacity:.72; border-top-style:dashed; }
.pezzo--attesa:hover{ padding-left:0; }
.pezzo--attesa .pezzo__min{ font-style:italic; letter-spacing:.02em; }
.pezzo:hover{ padding-left:1rem; }
.pezzo:hover .pezzo__tit{ color:var(--clay); }
.pezzo::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--clay);
  transform:scaleY(0); transform-origin:bottom; transition:transform var(--dur-3) var(--ease);
}
.pezzo:hover::before{ transform:scaleY(1); transform-origin:top; }

/* --- RITRATTO (chi sono, su carta) --- */
.ritratto{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:860px){ .ritratto{ grid-template-columns:5fr 6fr; gap:clamp(3rem,7vw,6rem); } }
.ritratto__fig{ margin:0; position:relative; overflow:hidden; }
.ritratto__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.ritratto__fig figcaption{ margin-top:.75rem; font-size:.75rem; color:var(--ink-mid); letter-spacing:.04em; }

/* --- PORTA (contatto) --- */
.porta{ text-align:left; }
.porta h2{ max-width:13ch; }
.porta__vie{ display:grid; gap:1.75rem; margin-top:3rem; }
@media (min-width:700px){ .porta__vie{ grid-template-columns:repeat(2,minmax(0,22rem)); } }
.porta__via{ border-top:1px solid var(--sale); padding-top:1rem; }
.porta__via span{ display:block; font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--slate-chiaro); margin-bottom:.5rem; }
.porta__via a{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.85rem); font-weight:300;
  text-decoration:none; letter-spacing:.01em; border-bottom:1px solid var(--sale-forte); padding-bottom:2px;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.porta__via a:hover{ color:var(--clay); border-color:var(--clay); }

/* --- ENTI, registro basso --- */
.enti{ background:var(--secca); }
/* Clay pieno su --secca fa 3,80 e questo occhiello e' 11 px: sotto
   soglia. Col clay schiarito fa 4,72. */
.enti .occhiello{ color:var(--clay-chiaro); }

/* --- PIEDE --- */
.piede{ padding:3.5rem 0 2.5rem; border-top:1px solid var(--sale); }
.piede__riga{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:baseline; }
.piede .piccolo{ margin:0; }
.piede__note{ margin-top:2rem; }

/* ============================================================
   COMPARSA · le righe salgono da sotto una maschera
   ============================================================ */
.sale{ overflow:hidden; }
.sale > *{
  transform:translateY(1.15em); opacity:0;
  transition:transform 1s var(--ease), opacity .8s var(--ease);
}
.sale.dentro > *{ transform:none; opacity:1; }
.spunta{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.spunta.dentro{ opacity:1; transform:none; }
.spunta[data-ritardo="1"]{ transition-delay:.1s; }
.spunta[data-ritardo="2"]{ transition-delay:.2s; }
.spunta[data-ritardo="3"]{ transition-delay:.3s; }

/* Sequenza di apertura */
.apertura .sale > *{ transition-delay:.25s; }
.apertura .volo__nota,.apertura .costa,.apertura .invito{ opacity:0; transition:opacity 1.2s var(--ease); }
.avviata .volo__nota,.avviata .costa,.avviata .invito{ opacity:1; }
.avviata .volo__nota{ transition-delay:.75s; }
.avviata .costa{ transition-delay:1s; }
.avviata .invito{ transition-delay:1.3s; }

/* --- SENZA SCRIPT NON SPARISCE NIENTE ---------------------------
   `.spunta` e `.sale` partono da opacita' zero e ci arriva sopra il
   JavaScript. Con lo script spento restavano invisibili: misurato
   l'8/8 su telefono, sparivano il titolo del notiziario, il suo
   lead, la riga di fonte, i patti del ponte e tutte le note di
   sezione. Un sito che perde meta' del testo se un blocco pubblicita'
   ferma uno script non e' un sito, e' una scommessa.
   `scripting: none` lo risolve senza toccare il JavaScript e senza
   il lampo che darebbe una classe messa sull'html dopo il primo
   disegno. Dove non e' supportato non cambia niente rispetto a
   prima: nessuna regressione. */
@media (scripting: none){
  .sale > *,.spunta,.su{ transform:none !important; opacity:1 !important; transition:none !important; }
  .apertura .volo__nota,.apertura .costa,.apertura .invito{ opacity:1; }
  .misura__barra i{ transform:scaleX(1); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .sale > *,.spunta{ transform:none !important; opacity:1 !important; transition:none !important; }
  .apertura .volo__nota,.apertura .costa,.apertura .invito{ opacity:1; }
  .invito__tratto::after{ animation:none; }
  .misura__barra i{ transition:none; transform:scaleX(1); }
  .volo{ height:100svh; }
  #fondale{ transition:none; }
}

/* ============================================================
   PROVE · schede dei lavori davvero online
   ============================================================ */
.testa-corta{ padding:clamp(8rem,18vh,11rem) 0 clamp(3rem,7vh,5rem); position:relative; }
.testa-corta h1{ font-size:clamp(2.6rem,7vw,5.5rem); max-width:14ch; }

.caso{ padding:clamp(3.5rem,8vh,6rem) 0; border-top:1px solid var(--sale); }
.caso:first-of-type{ border-top:0; }
.caso__vetro{ position:relative; overflow:hidden; background:var(--fondale); margin-bottom:2.5rem; }
.caso__vetro img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.caso__corpo{ display:grid; gap:2rem; }
@media (min-width:860px){ .caso__corpo{ grid-template-columns:2fr 3fr; gap:clamp(3rem,7vw,7rem); } }
.caso__insegna{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.25rem; margin-bottom:1.5rem; }
.caso__vivo{
  font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--clay); color:var(--clay); padding:.3rem .7rem; border-radius:9999px;
}
.caso h2{ font-size:clamp(1.9rem,4vw,3.1rem); }
.caso__dati{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 2rem; margin:2rem 0 0; }
@media (min-width:700px){ .caso__dati{ grid-template-columns:repeat(4,1fr); } }
.caso__dati div{ border-top:1px solid var(--sale); padding-top:.75rem; }
.caso__dati b{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1; margin-bottom:.35rem;
}
.caso__dati span{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-chiaro); }
.caso__vai{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem;
  font-family:var(--font-display); font-size:1.35rem; font-weight:300; text-decoration:none;
  border-bottom:1px solid var(--sale-forte); padding-bottom:3px;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.caso__vai:hover{ color:var(--clay); border-color:var(--clay); }

.avvertenza{
  border-left:1px solid var(--clay); padding:.25rem 0 .25rem 1.5rem; margin:2.5rem 0;
  max-width:56ch;
}
.avvertenza p{ margin:0; }

/* ============================================================
   MODELLI · lo scheletro base per ogni categoria di cliente
   ============================================================ */
.modello{ padding:clamp(3.5rem,8vh,5.5rem) 0; border-top:1px solid var(--sale); }
.modello__testa{ display:grid; gap:1.5rem; margin-bottom:2.5rem; }
@media (min-width:860px){ .modello__testa{ grid-template-columns:2fr 3fr; gap:clamp(3rem,7vw,7rem); align-items:end; } }
.modello h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); max-width:20ch; }
.modello__prezzo{
  font-family:var(--font-display); font-size:1.5rem; font-weight:300; color:var(--clay);
  white-space:nowrap;
}

/* Lo scheletro: una sequenza, e l'ordine e' l'informazione */
.scheletro{ counter-reset:blocco; border-top:1px solid var(--sale); }
.blocco{
  counter-increment:blocco; display:grid; gap:.4rem 1.5rem;
  grid-template-columns:2.5rem 1fr; align-items:start;
  padding:1.15rem 0; border-bottom:1px solid var(--sale);
  transition:padding-left var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease);
}
@media (min-width:820px){ .blocco{ grid-template-columns:2.5rem 15rem 1fr; align-items:baseline; } }
.blocco::before{
  content:counter(blocco,decimal-leading-zero);
  font-size:.6875rem; letter-spacing:.1em; color:var(--clay); padding-top:.35rem;
}
.blocco__nome{ font-family:var(--font-display); font-size:1.25rem; font-weight:300; line-height:1.25; }
.blocco__perche{ font-size:.875rem; line-height:1.55; color:rgba(245,241,234,.78); margin:0; max-width:56ch; }
.blocco:hover{ padding-left:.75rem; background-color:rgba(245,241,234,.03); }
.blocco--chiave .blocco__nome{ color:var(--clay); }
.blocco--chiave .blocco__nome::after{
  content:"cardine"; display:inline-block; margin-left:.6rem; vertical-align:middle;
  font-family:var(--font-ui); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--clay); border-radius:9999px; padding:.2rem .5rem; color:var(--clay);
}
.modello__nota{ margin-top:1.75rem; }
.legenda-modelli{ display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:2rem; }
.legenda-modelli span{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-chiaro); }

/* ============================================================
   IL BANCO DI PROVA
   Sei mini siti veri, navigabili dentro la pagina. Nessun link
   esterno: quello che vedi gira qui. Ogni demo ha la sua identita'
   (--d-*), scoped dentro .demo, e non tocca il sistema dello Studio.
   ============================================================ */
.banco{ padding-bottom:clamp(4rem,10vh,7rem); }
.banco__testa{ display:grid; gap:1.5rem; }
@media (min-width:860px){ .banco__testa{ grid-template-columns:2fr 3fr; gap:clamp(3rem,7vw,7rem); align-items:start; } }
.banco__testa .occhiello{ margin-top:.75rem; }

.banco__scelta{
  display:flex; gap:.5rem; margin:2.5rem 0 1.25rem; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:.25rem;
}
.banco__scelta::-webkit-scrollbar{ display:none; }
.banco__btn{
  flex:0 0 auto; cursor:pointer; background:transparent; color:rgba(245,241,234,.72);
  border:1px solid var(--sale); border-radius:9999px; padding:.6rem 1.15rem; min-height:44px;
  font-family:var(--font-ui); font-weight:300; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.banco__btn:hover{ color:var(--paper); border-color:var(--sale-forte); }
.banco__btn[aria-selected="true"]{ background:var(--paper); color:var(--abisso); border-color:var(--paper); }

/* Il telaio: una finestra di browser, perche' si capisca che e' un sito */
.banco__telaio{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad);
}
.banco__cornice{
  border:1px solid var(--sale); border-radius:10px; overflow:hidden; background:#0e151c;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.banco__barra{
  display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem;
  border-bottom:1px solid var(--sale); background:rgba(245,241,234,.04);
}
.banco__pallini{ display:flex; gap:.35rem; }
.banco__pallini i{ width:9px; height:9px; border-radius:50%; background:var(--sale-forte); display:block; }
.banco__url{
  flex:1; text-align:center; font-size:.6875rem; letter-spacing:.08em; color:var(--slate-chiaro);
  font-family:var(--font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.banco__url b{ color:var(--paper); font-weight:300; }
.banco__vetro{
  position:relative; height:min(78vh,760px); overflow:hidden; background:#0e151c;
}
@media (max-width:700px){ .banco__vetro{ height:min(82vh,620px); } }

.demo{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity 420ms var(--ease);
  scrollbar-width:thin;
}
/* Dentro il banco la demo e' un telaio vero, non un pannello: il
   documento e' un altro file, con il suo indirizzo e il suo
   scorrimento. */
iframe.demo{ width:100%; height:100%; border:0; display:block; background:#0e151c; }
.demo.attiva{ opacity:1; pointer-events:auto; visibility:visible; }
.demo::-webkit-scrollbar{ width:8px; }
.demo::-webkit-scrollbar-thumb{ background:rgba(128,128,128,.35); border-radius:4px; }

.banco__nota{ margin-top:1.5rem; }

/* Piede del telaio: chrome, non contenuto. Stessa grammatica della
   barra dell'indirizzo, dall'altra parte del vetro. */
.banco__piede{
  display:flex; align-items:center; gap:1rem; padding:.7rem 1rem;
  border-top:1px solid var(--sale); background:rgba(245,241,234,.04);
}
.banco__piede__t{
  flex:1; font-size:.75rem; line-height:1.5; color:var(--slate-chiaro);
  font-family:var(--font-ui); letter-spacing:.01em;
}
.banco__piede__t b{ color:var(--paper); font-weight:400; }
.banco__piede .btn{ flex:none; padding:.5rem 1rem; font-size:.6875rem; }
@media (max-width:700px){
  .banco__piede{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .banco__piede .btn{ width:100%; text-align:center; }
}

/* ============================================================
   IL PONTE
   Quattro blocchi sotto il banco, dentro la stessa sezione.
   ============================================================ */
.ponte{
  margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--sale-forte);
  display:grid; gap:2.5rem;
}
@media (min-width:900px){ .ponte{ grid-template-columns:1fr 1.15fr; gap:4rem; } }

.ponte__titolo{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.18; letter-spacing:-.01em;
  max-width:22ch; margin:0 0 1.75rem;
}
.ponte__siti{ list-style:none; margin:0 0 1.5rem; padding:0; }
.ponte__siti li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .9rem;
  padding:.85rem 0; border-top:1px solid var(--sale);
}
.ponte__siti li:last-child{ border-bottom:1px solid var(--sale); }
.ponte__siti a{
  font-family:var(--font-ui); font-size:.9375rem; letter-spacing:.02em;
  color:var(--paper); text-decoration:none; border-bottom:1px solid var(--clay);
  padding-bottom:1px;
}
.ponte__siti a:hover{ color:var(--clay); }
.ponte__siti span{ font-size:.75rem; color:var(--slate-chiaro); letter-spacing:.01em; }

.ponte__patti{ display:grid; gap:2rem; align-content:start; }
@media (min-width:640px){ .ponte__patti{ grid-template-columns:1fr 1fr; gap:2rem 2.5rem; } }
.ponte__patti > div{ padding-top:1.1rem; border-top:1px solid var(--sale); }
.ponte__patti b{
  display:block; font-family:var(--font-ui); font-weight:400; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin-bottom:.7rem;
}
.ponte__patti .piccolo{ margin:0 0 1rem; }
.ponte__patti em{ font-style:italic; color:var(--paper); }
.ponte__patti .btn{ font-size:.6875rem; }

/* ---------- Base comune ai mini siti (tutto scoped) ---------- */
.demo{
  --d-bg:#0e151c; --d-sup:#141d26; --d-ink:#f2efe9; --d-soft:rgba(242,239,233,.62);
  --d-acc:#b08d57; --d-line:rgba(242,239,233,.16);
  --d-display:'Cormorant Garamond',Georgia,serif; --d-ui:'Jost',system-ui,sans-serif;
  --d-dw:300; --d-uw:300;
  background:var(--d-bg); color:var(--d-ink); font-family:var(--d-ui); font-weight:var(--d-uw);
}
.demo *{ box-sizing:border-box; }
/* La regola globale `strong{ color:var(--paper) }` serve sul fondo
   scuro della home, ma dentro una demo chiara dipinge il grassetto
   quasi del colore della carta: misurato 1,00 su 1 nella villa, cioe'
   invisibile, proprio sulla riga che dice cosa e' stato sostituito e
   cosa e' originale. Dentro le demo il grassetto prende l'inchiostro
   della demo. */
.demo strong,.demo b{ color:var(--d-ink); }
.demo__int{ padding:0 clamp(1.25rem,4vw,3rem); }
.demo section{ padding:clamp(2.5rem,6vw,4.5rem) 0; border-top:1px solid var(--d-line); }
.demo section:first-of-type{ border-top:0; padding-top:0; }
.demo h1,.demo h2,.demo h3{
  font-family:var(--d-display); font-weight:var(--d-dw); margin:0; line-height:1.04; letter-spacing:-.01em;
}
.demo h1{ font-size:clamp(2.2rem,6vw,4.2rem); }
.demo h2{ font-size:clamp(1.5rem,3.4vw,2.4rem); }
.demo p{ margin:0 0 .9rem; max-width:60ch; color:var(--d-soft); font-size:.9375rem; line-height:1.65; }
.demo__occ{
  display:block; font-size:.625rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--d-acc); margin-bottom:1rem;
}
.demo__nav{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:1.5rem;
  padding:.9rem clamp(1.25rem,4vw,3rem); background:color-mix(in srgb, var(--d-bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--d-line);
}
.demo__marchio{ font-family:var(--d-display); font-weight:500; font-size:1rem; letter-spacing:.04em; margin-right:auto; }
.demo__nav a,.demo__nav span{ font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--d-soft); text-decoration:none; }
.demo__cta{
  display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.15rem; cursor:pointer;
  border:1px solid var(--d-acc); color:var(--d-acc); background:transparent; border-radius:9999px;
  font-family:var(--d-ui); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.demo__cta:hover{ background:var(--d-acc); color:var(--d-bg); }
.demo__cta--pieno{ background:var(--d-acc); color:var(--d-bg); }

.demo__hero{ position:relative; height:clamp(320px,52vh,460px); overflow:hidden; }
.demo__hero img,.demo__hero video{ width:100%; height:100%; object-fit:cover; }
.demo__hero-testo{
  position:absolute; z-index:3; inset:auto 0 0 0;
  padding:clamp(4rem,10vw,7rem) clamp(1.25rem,4vw,3rem) clamp(1.25rem,3vw,2.25rem);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--d-bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--d-bg) 74%, transparent) 38%,
    color-mix(in srgb, var(--d-bg) 26%, transparent) 72%,
    transparent 100%);
}
.demo__hero-testo .demo__occ{ margin-bottom:.6rem; }
.demo__dati{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem 1.5rem; }
@media (min-width:600px){ .demo__dati{ grid-template-columns:repeat(4,1fr); } }
.demo__dati div{ border-top:1px solid var(--d-line); padding-top:.6rem; }
.demo__dati b{ display:block; font-family:var(--d-display); font-weight:var(--d-dw); font-size:1.5rem; line-height:1; margin-bottom:.3rem; }
.demo__dati span{ font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-soft); }

.demo__nastro{ display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; min-width:0; max-width:100%; }
.demo__nastro::-webkit-scrollbar{ display:none; }
.demo__nastro img{ flex:0 0 auto; width:clamp(180px,32vw,280px); aspect-ratio:4/3; object-fit:cover; }

.demo__riga{ display:grid; gap:1.5rem; min-width:0; }
@media (min-width:760px){ .demo__riga{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
.demo__riga--largo{ grid-template-columns:1fr; }
@media (min-width:760px){ .demo__riga--stretto{ grid-template-columns:2fr 3fr; } }

.demo__card{ border:1px solid var(--d-line); padding:1.25rem; }
.demo__card h3{ font-size:1.15rem; margin-bottom:.4rem; }

/* comparsa dentro il telaio */
.demo .su{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.demo .su.dentro{ opacity:1; transform:none; }

/* ---------- Identita' delle sei demo ---------- */
/* La dimora e' passata da casa in cemento a fine Ottocento: il fondo quasi
   nero combatteva con fotografie in chiave alta. Registro editoriale su carta. */
.demo--villa{
  --d-bg:#f4f1ec; --d-sup:#eae5dc; --d-ink:#241f1a; --d-soft:rgba(36,31,26,.66);
  /* Il bronzo era #8a6a3f e faceva 4,42 su carta e 3,97 sulle
     superfici: sotto soglia in tutti e due i casi, e usato per le
     chiamate all'azione e gli stati. Scurito di poco, stessa tinta:
     6,02 e 5,41. Resta distinto dal terra della ristorazione, che
     e' piu' rosso. */
  --d-acc:#75552f; --d-line:rgba(36,31,26,.16);
  --d-display:'Bodoni Moda',Didot,Georgia,serif; --d-dw:400;
}
/* Sull'immagine il testo resta chiaro: lo scrim non puo' seguire il fondo carta. */
.demo--villa .demo__hero-testo{
  background:linear-gradient(to top,rgba(20,17,14,.86) 0%,rgba(20,17,14,.5) 42%,rgba(20,17,14,.08) 78%,transparent 100%);
  color:#f6f2ea;
}
.demo--villa .demo__hero-testo .demo__occ{ color:#e2c79b; }
.demo--villa .dv-lastre figcaption{
  color:#f6f2ea;
  background:linear-gradient(to top,rgba(20,17,14,.78),transparent);
}
.demo--villa h1{ letter-spacing:.01em; line-height:1.0; }
.demo--villa .demo__occ{ letter-spacing:.34em; }

/* OSPITALITA', rifatta il 4/8.
   Prima: #1d2b25 verde bosco con oro #d8a45c. Il verde conifera e' una
   specie che sul Golfo non c'e', la macchia qui e' argentata; sotto un
   fondo scuro l'oro caldo e' l'accento di default da spa. Insieme
   facevano Trentino, e sbagliavano la luminosita' prima del pigmento:
   la costa e' luminosa, non e' una tana.
   Adesso: luce e acqua. Fondo freddo, blu, un ocra al minimo.
   Contrasti calcolati su fondo luce: pece 13,99 · ancora 9,41 ·
   guado 6,57 · giunco 3,45 (solo testo grande e bordi).
   Su guado: luce 6,57 · bruma 5,64. Giunco su bruma fa 2,96: vietato. */
.demo--ospitalita{
  --d-bg:#eef0ef; --d-sup:#dbe0e0; --d-ink:#1a2325; --d-soft:rgba(26,35,37,.74);
  --d-acc:#35596b; --d-line:rgba(26,35,37,.16);
  --d-dw:300;
  --d-giunco:#9a7b4f; --d-ancora:#2e3f52; --d-sale:#a9b2b2;
}

/* RISTORAZIONE, rifatta il 4/8.
   Prima: #14100e quasi nero, ruggine #c8542f, Archivio 600 maiuscolo.
   Il nero non esiste in un paesaggio a luce alta, e nero piu' ruggine
   satura piu' grottesco grasso maiuscolo e' il pacchetto smash burger
   americano. Qui la tipografia pesava piu' del colore.
   Adesso: calce, sabbia, salvia, terra. Le materie sono la dolomia di
   Capo Noli, l'intonaco a calce slavato dal sale, l'elicriso, il
   mattone spento delle terrazze. Alta luminosita', bassa saturazione:
   il sole del Ponente non satura, sbianca.
   Contrasti calcolati su calce: inchiostro 13,37 · ancora 9,38 ·
   alloro 7,91 · terra 6,38 · pietra 3,10 (solo bordi e testo grande).
   Salvia e' campitura e mai testo: fa 2,58, e il bianco su salvia
   fa 2,58, quindi e' vietato. */
.demo--ristorazione{
  --d-bg:#f2efe8; --d-sup:#e5dfd3; --d-ink:#1e262b; --d-soft:#3d4c42;
  --d-acc:#7a4a38; --d-line:rgba(30,38,43,.18);
  --d-display:'Archivo',system-ui,sans-serif; --d-dw:500; --d-ui:'Archivo',system-ui,sans-serif; --d-uw:400;
  --d-salvia:#8a9a8c; --d-ancora:#2e3f52; --d-pietra:#8e8779;
}
/* Minuscolo tondo, non maiuscolo pesante: e' il menu scritto la
   mattina, non l'insegna di una hamburgeria. */
.demo--ristorazione h1{ letter-spacing:-.02em; line-height:1.04; color:var(--d-ancora); }
.demo--ristorazione h2{ letter-spacing:-.01em; line-height:1.1; color:var(--d-ancora); }
/* La testata e' una campitura di salvia, l'unica cosa che nessuna
   altra demo ha: serve a distinguerla da bottega e villa, che sono
   anche loro su fondo chiaro. Sopra ci va solo inchiostro (5,18):
   il bianco su salvia fa 2,58 ed e' vietato. */
.demo--ristorazione .dr-testata{
  background:var(--d-salvia); border-bottom:0;
  padding:1.5rem 1.25rem; margin-inline:calc(-1 * clamp(1.25rem,4vw,3rem));
}
.demo--ristorazione .dr-testata h1{ text-transform:none; letter-spacing:-.02em; line-height:1.04; color:var(--d-ink); }
.demo--ristorazione .dr-testata p{ text-transform:none; letter-spacing:.02em; color:var(--d-ink); }
.demo--ristorazione .dr-piede,
.demo--ristorazione .dr-testata + *{ border-color:var(--d-pietra); }
.demo--ristorazione .dr-asse{
  max-width:62ch; margin:1.75rem auto 0; padding:0 1.25rem;
  font-size:.8125rem; line-height:1.65; color:var(--d-soft);
}

.demo--bottega{
  --d-bg:#f4f0e8; --d-sup:#e9e3d7; --d-ink:#231f1b; --d-soft:rgba(35,31,27,.72);
  --d-acc:#7a5c3e; --d-line:rgba(35,31,27,.16);
  --d-dw:400;
}
.demo--esperienze{
  --d-bg:#071a26; --d-sup:#0d2634; --d-ink:#eaf4f7; --d-soft:rgba(234,244,247,.66);
  --d-acc:#41c1c9; --d-line:rgba(234,244,247,.16);
  --d-display:'Archivo',system-ui,sans-serif; --d-dw:600; --d-ui:'Archivo',system-ui,sans-serif; --d-uw:400;
}
.demo--esperienze h1{ letter-spacing:-.02em; }

.demo--ente{
  --d-bg:#ffffff; --d-sup:#eef2f6; --d-ink:#16202b; --d-soft:rgba(22,32,43,.76);
  --d-acc:#1c5f9e; --d-line:rgba(22,32,43,.18);
  --d-display:'Archivo',system-ui,sans-serif; --d-dw:600; --d-ui:'Archivo',system-ui,sans-serif; --d-uw:400;
}
.demo--ente h1{ letter-spacing:-.02em; font-size:clamp(1.8rem,4.4vw,3rem); }
.demo--ente .demo__nav{ border-bottom:2px solid var(--d-acc); }

/* Comandi interni: lingua, date, filtri */
.demo__lingue{ display:flex; gap:.4rem; }
.demo__lingue button{
  cursor:pointer; background:transparent; border:1px solid var(--d-line); color:var(--d-soft);
  font-family:var(--d-ui); font-size:.625rem; letter-spacing:.12em; padding:.35rem .6rem; border-radius:3px;
  min-height:44px; min-width:44px;
}
.demo__lingue button[aria-pressed="true"]{ background:var(--d-acc); color:var(--d-bg); border-color:var(--d-acc); }

.demo__date{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem; }
.demo__data{
  cursor:pointer; background:transparent; border:1px solid var(--d-line); color:var(--d-ink);
  font-family:var(--d-ui); font-size:.75rem; padding:.55rem .8rem; min-height:44px; text-align:left; line-height:1.25;
  transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.demo__data small{ display:block; font-size:.625rem; color:var(--d-soft); letter-spacing:.06em; }
.demo__data[aria-pressed="true"]{ border-color:var(--d-acc); background:color-mix(in srgb, var(--d-acc) 14%, transparent); }
.demo__data[disabled]{ opacity:.4; cursor:not-allowed; }
.demo__esito{ font-size:.8125rem; color:var(--d-acc); min-height:1.4em; }

.demo__menu{ display:grid; gap:0; }
.demo__piatto{ display:grid; grid-template-columns:1fr auto; gap:.25rem 1rem; padding:.85rem 0; border-bottom:1px solid var(--d-line); }
.demo__piatto b{ font-weight:400; font-size:.9375rem; }
.demo__piatto span{ font-family:var(--d-display); font-size:1.05rem; }
.demo__piatto small{ grid-column:1/-1; font-size:.75rem; color:var(--d-soft); }
.demo__filtri{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.demo__filtro{
  cursor:pointer; background:transparent; border:1px solid var(--d-line); color:var(--d-soft);
  font-family:var(--d-ui); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6rem .9rem; border-radius:9999px; min-height:44px;
}
.demo__filtro[aria-pressed="true"]{ background:var(--d-acc); color:var(--d-bg); border-color:var(--d-acc); }

.demo__barrametro{ height:6px; background:var(--d-line); position:relative; overflow:hidden; margin-top:.5rem; }
.demo__barrametro i{ position:absolute; inset:0 auto 0 0; background:var(--d-acc); width:var(--q,0%); }

/* ============================================================
   ARCHITETTURE PROPRIE DELLE DEMO
   Ogni mestiere ha una struttura sua, non un tema sullo stesso
   scheletro. I prefissi dicono a chi appartiene il componente.
   ============================================================ */

/* ---- VILLA: editoriale con scheda tecnica agganciata ---- */
.dv-corpo{ display:grid; gap:0; }
@media (min-width:820px){ .dv-corpo{ grid-template-columns:19rem minmax(0,1fr); } }
.dv-scheda{
  align-self:start; padding:clamp(1.5rem,3vw,2.25rem);
  border-right:1px solid var(--d-line);
}
@media (min-width:820px){ .dv-scheda{ position:sticky; top:0; } }
.dv-scheda dl{ margin:0; display:grid; grid-template-columns:1fr auto; gap:.55rem 1rem; font-size:.8125rem; }
.dv-scheda dt{ color:var(--d-soft); }
.dv-scheda dd{ margin:0; text-align:right; font-family:var(--d-display); font-size:1rem; }
.dv-scheda hr{ grid-column:1/-1; border:0; border-top:1px solid var(--d-line); margin:.4rem 0; }
.dv-lastre > figure{ margin:0; position:relative; }
.dv-lastre img{ width:100%; display:block; aspect-ratio:3/2; object-fit:cover; }
.dv-lastre figcaption{
  position:absolute; left:0; bottom:0; padding:1.25rem;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--d-ink);
  background:linear-gradient(to top, color-mix(in srgb,var(--d-bg) 85%,transparent), transparent);
  width:100%;
}
.dv-testo{ padding:clamp(1.75rem,4vw,3rem); }

/* ---- OSPITALITA: il sito e' la prenotazione ---- */
.do-griglia{ display:grid; gap:0; }
@media (min-width:860px){ .do-griglia{ grid-template-columns:minmax(0,1fr) 20rem; } }
.do-flusso{ padding:clamp(1.25rem,4vw,3rem); }
.do-cassa{
  align-self:start; padding:clamp(1.25rem,3vw,2rem);
  border-left:1px solid var(--d-line); background:var(--d-sup);
}
@media (min-width:860px){ .do-cassa{ position:sticky; top:0; } }
.do-cassa h3{ font-size:1.15rem; margin-bottom:.75rem; }
.do-conto{ display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; font-size:.8125rem; margin:1rem 0; }
.do-conto span:nth-child(even){ text-align:right; font-variant-numeric:tabular-nums; }
.do-conto .do-tot{ font-family:var(--d-display); font-size:1.35rem; color:var(--d-acc); }
.do-risparmio{
  border:1px dashed var(--d-acc); color:var(--d-acc); padding:.7rem .9rem;
  font-size:.75rem; line-height:1.45; margin-top:.75rem;
}
.do-notti button{ width:100%; text-align:left; margin-bottom:.4rem; }

/* ---- RISTORAZIONE: la carta e' il sito ---- */
.dr-carta{ padding:clamp(1.5rem,4vw,3.5rem) clamp(1.25rem,4vw,3rem); }
.dr-testata{ text-align:center; border-bottom:3px solid var(--d-ink); padding-bottom:1.25rem; margin-bottom:2rem; }
.dr-testata h1{ font-size:clamp(2rem,6vw,3.6rem); text-transform:uppercase; letter-spacing:-.03em; line-height:.9; }
.dr-testata p{ margin:.75rem auto 0; max-width:40ch; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-soft); }
.dr-colonne{ columns:1; column-gap:3rem; }
@media (min-width:760px){ .dr-colonne{ columns:2; } }
.dr-gruppo{ break-inside:avoid; margin-bottom:2rem; }
.dr-gruppo > h2{
  font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--d-acc);
  border-bottom:1px solid var(--d-line); padding-bottom:.5rem; margin-bottom:.85rem;
}
.dr-voce{ display:grid; grid-template-columns:1fr auto; gap:.15rem .75rem; margin-bottom:.9rem; align-items:baseline; }
.dr-voce b{ font-weight:600; font-size:.9375rem; letter-spacing:-.01em; }
.dr-voce i{ font-style:normal; font-variant-numeric:tabular-nums; font-size:.9375rem; }
.dr-voce small{ grid-column:1/-1; font-size:.75rem; color:var(--d-soft); }
.dr-piede{ border-top:3px solid var(--d-ink); margin-top:1rem; padding-top:1.25rem; display:grid; gap:1rem; }
@media (min-width:700px){ .dr-piede{ grid-template-columns:repeat(3,1fr); } }
.dr-piede b{ display:block; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--d-acc); margin-bottom:.3rem; }

/* ---- BOTTEGA: scaffale di prodotti ---- */
.db-scaffale{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--d-line); }
@media (min-width:700px){ .db-scaffale{ grid-template-columns:repeat(3,1fr); } }
.db-pezzo{
  background:var(--d-bg); padding:1rem; cursor:pointer; text-align:left; border:0;
  font-family:var(--d-ui); color:var(--d-ink); transition:background-color var(--dur-2) var(--ease);
}
.db-pezzo:hover,.db-pezzo[aria-expanded="true"]{ background:var(--d-sup); }
.db-pezzo img{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:.75rem; }
.db-pezzo b{ display:block; font-family:var(--d-display); font-size:1.05rem; font-weight:var(--d-dw); }
.db-pezzo span{ font-size:.8125rem; color:var(--d-soft); }
.db-pezzo em{ font-style:normal; float:right; font-variant-numeric:tabular-nums; }
.db-dettaglio{
  grid-column:1/-1; background:var(--d-sup); padding:1.5rem; display:none;
  border-top:1px solid var(--d-line);
}
.db-dettaglio.aperto{ display:block; }

/* ---- ESPERIENZE: tabellone delle partenze ---- */
.de-tabellone{ font-variant-numeric:tabular-nums; }
.de-riga{
  display:grid; grid-template-columns:4.5rem 1fr auto; gap:.35rem 1rem; align-items:center;
  padding:.9rem clamp(1.25rem,4vw,3rem); border-bottom:1px solid var(--d-line);
  width:100%; background:transparent; border-left:0; border-right:0; border-top:0;
  color:var(--d-ink); font-family:var(--d-ui); text-align:left; cursor:pointer;
  transition:background-color var(--dur-2) var(--ease);
}
.de-riga:hover:not([disabled]){ background:var(--d-sup); }
.de-riga[disabled]{ opacity:.45; cursor:not-allowed; }
.de-ora{ font-family:var(--d-display); font-size:1.35rem; line-height:1; }
.de-dove b{ display:block; font-size:.9375rem; }
.de-dove span{ font-size:.75rem; color:var(--d-soft); }
.de-posti{ text-align:right; font-size:.8125rem; }
.de-posti b{ display:block; font-family:var(--d-display); font-size:1.5rem; line-height:1; color:var(--d-acc); }
.de-riga[disabled] .de-posti b{ color:var(--d-soft); }
.de-scia{ grid-column:1/-1; height:3px; background:var(--d-line); position:relative; overflow:hidden; }
.de-scia i{ position:absolute; inset:0 auto 0 0; width:var(--q,0%); background:var(--d-acc); }
.de-legenda{
  max-width:none; display:flex; gap:1.5rem; padding:.75rem clamp(1.25rem,4vw,3rem);
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--d-soft);
  border-bottom:1px solid var(--d-line);
}

/* ---- ENTE: portale denso, tabelle e documenti ---- */
.dn-fascia{ background:var(--d-acc); color:#fff; padding:.6rem clamp(1.25rem,4vw,3rem); font-size:.75rem; letter-spacing:.08em; max-width:none; }
.dn-corpo{ padding:clamp(1.5rem,4vw,3rem); }
.dn-tab{ width:100%; border-collapse:collapse; font-size:.8125rem; margin-top:1rem; }
.dn-tab caption{ text-align:left; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--d-acc); padding-bottom:.6rem; }
.dn-tab th,.dn-tab td{ text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--d-line); }
.dn-tab th{ font-weight:600; background:var(--d-sup); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; }
.dn-tab td:last-child,.dn-tab th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.dn-doc{ display:grid; gap:0; margin-top:1.5rem; border-top:1px solid var(--d-line); }
.dn-doc a{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:.85rem 0; border-bottom:1px solid var(--d-line); text-decoration:none; color:var(--d-ink); font-size:.875rem;
}
.dn-doc a:hover{ color:var(--d-acc); }
/* Elenco documentale che non finge di scaricare: stessa griglia, ma
   sono voci e non link, e il tratteggio dice che non sono allegati. */
.dn-doc--esempio > span{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:.85rem 0; border-bottom:1px dashed var(--d-line); color:var(--d-ink); font-size:.875rem;
}
.dn-nota-doc{ margin:.9rem 0 0; font-size:.75rem; line-height:1.55; color:var(--d-soft); max-width:56ch; }
.dn-doc .dn-tipo{ font-size:.625rem; letter-spacing:.12em; border:1px solid var(--d-line); padding:.2rem .45rem; color:var(--d-soft); }
.dn-doc .dn-peso{ font-size:.75rem; color:var(--d-soft); font-variant-numeric:tabular-nums; }
.dn-bollo{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--d-acc); color:var(--d-acc);
  padding:.5rem .85rem; font-size:.6875rem; letter-spacing:.1em; margin-top:1.25rem;
}

/* La scelta a dieci schede deve reggere a 375px */
@media (max-width:700px){
  .banco__scelta{ display:grid; grid-auto-flow:column; grid-auto-columns:max-content; }
}

/* ---- VILLA: il portafoglio delle proprieta' ---- */
.dv-altre{ padding:clamp(1.75rem,4vw,3rem); border-top:1px solid var(--d-line); }
.dv-lista{ display:grid; gap:1px; background:var(--d-line); margin-top:1.5rem; }
@media (min-width:700px){ .dv-lista{ grid-template-columns:repeat(2,1fr); } }
.dv-annuncio{
  background:var(--d-bg); display:block; text-decoration:none; color:var(--d-ink);
  transition:background-color var(--dur-2) var(--ease);
}
.dv-annuncio:hover{ background:var(--d-sup); }
.dv-annuncio img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.dv-annuncio__testo{ padding:1rem 1.15rem 1.25rem; }
.dv-annuncio__luogo{
  display:block; font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--d-acc); margin-bottom:.4rem;
}
.dv-annuncio h3{ font-size:1.35rem; line-height:1.15; margin-bottom:.5rem; }
.dv-annuncio__righe{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.75rem; color:var(--d-soft);
  font-variant-numeric:tabular-nums;
}
.dv-annuncio__righe span::after{ content:" ·"; color:var(--d-line); }
.dv-annuncio__righe span:last-child::after{ content:""; }
.dv-annuncio__stato{
  display:inline-block; margin-top:.65rem; font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid var(--d-line); padding:.25rem .55rem; color:var(--d-soft);
}
.dv-annuncio__stato--tratt{ border-color:var(--d-acc); color:var(--d-acc); }

/* ============================================================
   TENUTA A 375px
   Dentro il telaio i figli di griglia devono poter scendere sotto
   il loro contenuto, altrimenti il nastro e le tabelle allargano
   la colonna e la demo scorre in orizzontale.
   ============================================================ */
.dv-corpo, .do-griglia{ grid-template-columns:minmax(0,1fr); }
.dv-corpo > *, .do-griglia > *, .demo__riga > *, .demo__dati > *{ min-width:0; }
.demo__int, .dv-testo, .dv-scheda, .do-flusso, .do-cassa, .dr-carta, .dn-corpo{ min-width:0; }
.demo__nastro img{ flex-shrink:0; }
.de-riga, .dv-annuncio, .db-pezzo{ min-width:0; max-width:100%; }
.de-dove, .de-dove b, .de-dove span{ min-width:0; overflow-wrap:anywhere; }
.dn-tab{ table-layout:fixed; }
.dn-tab th, .dn-tab td{ overflow-wrap:anywhere; }
@media (max-width:520px){
  .dn-tab{ font-size:.6875rem; }
  .dn-tab th, .dn-tab td{ padding:.5rem .35rem; }
  .demo__nastro img{ width:clamp(150px,60vw,220px); }
  .dv-scheda dd{ font-size:.9375rem; }
}

/* La testata della demo a schermo stretto va su due righe:
   il marchio prende la prima, comandi e chiamata la seconda. */
@media (max-width:560px){
  .demo__nav{ flex-wrap:wrap; gap:.6rem .75rem; }
  .demo__marchio{ flex:1 1 100%; margin-right:0; }
  .demo__nav > span:not(.demo__marchio):not(.demo__lingue){ display:none; }
  .demo__nav .demo__cta{ margin-left:auto; font-size:.625rem; padding:.6rem .9rem; }
  .demo__lingue button{ min-width:40px; padding:.35rem .45rem; }
}

/* Il tabellone a schermo stretto: l'orario sale sopra la destinazione. */
@media (max-width:560px){
  .de-riga{ grid-template-columns:1fr auto; gap:.3rem .6rem; padding-left:1.25rem; padding-right:1.25rem; }
  .de-ora{ grid-column:1/-1; font-size:1.15rem; }
  .de-legenda{ gap:.9rem; font-size:.5625rem; padding-left:1.25rem; padding-right:1.25rem; }
  .de-posti{ font-size:.75rem; }
}

/* Le regole base della tenuta mobile stanno dopo le media query originali e
   le sovrascrivevano: le due colonne vanno ridichiarate qui in coda. */
@media (min-width:820px){ .dv-corpo{ grid-template-columns:19rem minmax(0,1fr); } }
@media (min-width:860px){ .do-griglia{ grid-template-columns:minmax(0,1fr) 20rem; } }

/* ============================================================
   IL GIRATO · sezione fuori dal telaio, quindi tutto reale
   Trentacinque clip da cinque secondi. Nessun video si scarica
   finche' non entra in schermo: prima c'e' solo il poster.
   ============================================================ */
.girato{ padding-bottom:clamp(4rem,10vh,7rem); }
.girato__filtri{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 1.5rem; }
.girato__f{
  cursor:pointer; background:transparent; border:1px solid var(--sale); color:rgba(245,241,234,.72);
  border-radius:9999px; padding:.6rem 1.15rem; min-height:44px;
  font-family:var(--font-ui); font-weight:300; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.girato__f:hover{ color:var(--paper); border-color:var(--sale-forte); }
.girato__f[aria-pressed="true"]{ background:var(--paper); color:var(--abisso); border-color:var(--paper); }
.girato__f b{ font-weight:300; opacity:.55; margin-left:.4rem; }

.girato__muro{ display:grid; gap:2px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .girato__muro{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .girato__muro{ grid-template-columns:repeat(5,1fr); } }
.clip{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--fondale);
  border:0; padding:0; cursor:pointer; display:block; width:100%;
}
.clip img, .clip video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity var(--dur-3) var(--ease), transform 1.2s var(--ease);
}
.clip video{ opacity:0; }
.clip.gira video{ opacity:1; }
.clip.gira img{ opacity:0; }
.clip:hover img, .clip:hover video{ transform:scale(1.04); }
.clip__eti{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.55rem .65rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:.5rem;
  background:linear-gradient(to top,rgba(18,27,36,.82),transparent);
  font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,234,.92);
  text-align:left; pointer-events:none;
}
.clip__eti i{ font-style:normal; opacity:.6; }
.clip:focus-visible{ outline:2px solid var(--clay); outline-offset:-2px; }
.clip[hidden]{ display:none; }
.girato__nota{ margin-top:1.75rem; }

/* ============================================================
   IL PORTAFOGLIO DELLA DEMO IMMOBILIARE
   Aggiunto il 4/8. La demo mostrava quattro proprieta' e chiudeva
   con "cinque in portafoglio, non cinquecento": ventiquattro dei
   trenta nomi della lista d'attacco ne hanno centinaia, e quella
   riga diceva loro che il servizio non era per loro. Qui la
   meccanica e' la stessa a dodici o a cinquecento.
   ============================================================ */
/* Specificita': `.demo section` vale piu' di `.dv-port` e azzerava
   i fianchi, lasciando il portafoglio incollato al bordo. */
.demo .dv-port{ padding:clamp(1.75rem,4vw,3rem); border-top:1px solid var(--d-line); }
.dv-port__testa{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:flex-end; justify-content:space-between; }
.dv-port__testa h2{ margin-top:.4rem; }
.dv-port__agg{ margin:0; font-size:.75rem; color:var(--d-soft); }

.dv-port__comandi{ margin-top:1.75rem; display:grid; gap:1rem; }
.dv-cerca{ display:block; }
.dv-cerca__eti{
  display:block; font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--d-soft); margin-bottom:.5rem;
}
.dv-cerca input{
  width:100%; font:inherit; font-size:.9375rem; color:var(--d-ink);
  background:var(--d-sup); border:1px solid var(--d-line); border-radius:2px;
  padding:.7rem .9rem;
}
.dv-cerca input::placeholder{ color:var(--d-soft); opacity:.75; }
.dv-cerca input:focus-visible{ outline:2px solid var(--d-acc); outline-offset:2px; }

.dv-chip{ display:flex; flex-wrap:wrap; gap:.45rem; }
.dv-chip button{
  font-family:var(--d-ui); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.45rem .85rem; border:1px solid var(--d-line); border-radius:9999px;
  background:transparent; color:var(--d-soft); cursor:pointer;
}
.dv-chip button:hover{ color:var(--d-ink); border-color:var(--d-acc); }
.dv-chip button[aria-pressed="true"]{ background:var(--d-ink); color:var(--d-bg); border-color:var(--d-ink); }

.dv-righe{ margin-top:1.5rem; border-top:1px solid var(--d-line); }
.dv-riga{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.15rem .9rem; width:100%;
  text-align:left; background:transparent; border:0; border-bottom:1px solid var(--d-line);
  padding:.9rem 0; font:inherit; color:var(--d-ink); cursor:pointer;
}
.dv-riga img{ display:none; }
.dv-riga > span{ font-size:.8125rem; color:var(--d-soft); }
.dv-riga__rif{ font-variant-numeric:tabular-nums; letter-spacing:.06em; font-size:.75rem !important; }
.dv-riga__tit{ font-family:var(--d-display); font-size:1.05rem !important; color:var(--d-ink) !important; line-height:1.25; }
.dv-riga__stato{ font-size:.6875rem !important; letter-spacing:.1em; text-transform:uppercase; }
.dv-riga__stato--tratt{ color:var(--d-acc) !important; }
.dv-riga:hover{ background:var(--d-sup); }
.dv-riga:focus-visible{ outline:2px solid var(--d-acc); outline-offset:-2px; }
.dv-riga--intestazione{
  cursor:default; padding:.5rem 0; font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
}
.dv-riga--intestazione:hover{ background:transparent; }
@media (min-width:760px){
  .dv-port__comandi{ grid-template-columns:minmax(0,22rem) 1fr; align-items:end; gap:1.5rem; }
  .dv-riga{ grid-template-columns:5.5rem minmax(0,1.6fr) minmax(0,1fr) 6rem 8rem; align-items:baseline; gap:1rem; }
  .dv-riga--intestazione{ grid-template-columns:5.5rem minmax(0,1.6fr) minmax(0,1fr) 6rem 8rem; }
}

.dv-vuoto{ margin-top:1.5rem; font-size:.8125rem; color:var(--d-soft); max-width:52ch; }

.dv-singola{
  margin-top:1.5rem; border:1px solid var(--d-acc); background:var(--d-sup);
  padding:clamp(1.1rem,3vw,1.75rem); position:relative;
}
.dv-singola__chiudi{
  position:absolute; top:.7rem; right:.7rem; background:transparent; border:0; cursor:pointer;
  font-family:var(--d-ui); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--d-soft);
}
.dv-singola__chiudi:hover{ color:var(--d-ink); }
.dv-singola__corpo{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .dv-singola__corpo{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:1.75rem; } }
.dv-singola__corpo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.dv-singola h3{ font-size:clamp(1.4rem,3vw,2rem); margin:.35rem 0 .6rem; }
.dv-singola__righe{ font-size:.8125rem; color:var(--d-soft); margin:0 0 .8rem; }
.dv-singola__rif{ font-size:.75rem; color:var(--d-soft); margin:.9rem 0 .5rem; }
.dv-singola__rif b{ color:var(--d-ink); font-weight:400; letter-spacing:.06em; }
.dv-singola__url{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.dv-singola__url code{
  font-family:var(--d-ui); font-size:.75rem; color:var(--d-ink);
  background:var(--d-bg); border:1px solid var(--d-line); padding:.4rem .6rem; overflow-wrap:anywhere;
}
.dv-singola__esito{ margin:.7rem 0 0; font-size:.75rem; color:var(--d-acc); min-height:1.2em; }

.dv-port__nota{ margin-top:2.5rem; display:grid; gap:1.5rem; }
@media (min-width:760px){ .dv-port__nota{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.dv-port__nota > div{ padding-top:1rem; border-top:1px solid var(--d-line); }
.dv-port__nota b{
  display:block; font-family:var(--d-ui); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--d-ink); margin-bottom:.6rem;
}
.dv-port__nota p{ margin:0; font-size:.8125rem; }

/* ============================================================
   IL TERRITORIO, ATTACCATO AL DATO
   Sostituisce il muro di trentacinque clip. Registro editoriale
   del design system: filetto invece di bordo, nessuna ombra,
   clay una volta sola. La ripresa non decora, porta la data e il
   luogo di un numero che sta due paragrafi sopra.
   ============================================================ */
.territorio{ margin-top:clamp(3rem,7vw,5rem); }
.territorio__testa{
  display:grid; gap:.9rem; padding-top:1.5rem; border-top:1px solid var(--sale-forte);
}
.territorio__muro{ margin-top:2rem; display:grid; gap:1.75rem; }
@media (min-width:640px){ .territorio__muro{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (min-width:1100px){ .territorio__muro{ grid-template-columns:repeat(4,1fr); gap:1.5rem; } }

.luogo{ margin:0; }
.luogo__vetro{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:#0e151c;
  border:1px solid var(--sale);
}
@media (min-width:640px){ .luogo__vetro{ aspect-ratio:3/4; } }
.luogo__vetro img,.luogo__vetro video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.luogo__vetro video{ opacity:0; transition:opacity 700ms var(--ease); }
.luogo__vetro video[src]{ opacity:1; }
.luogo figcaption{ padding-top:1rem; }
.luogo figcaption b{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:1.375rem; line-height:1.1; color:var(--paper);
}
.luogo__data{
  display:block; margin:.3rem 0 .7rem;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--clay-chiaro);   /* 10 px su --secca: serve il clay schiarito */
}
.luogo figcaption .piccolo{ margin:0; }

/* Acceso: ci si arriva dalla riga di costa dell'hero. Un filetto,
   non un bagliore: il sistema non ha ombre. */
.luogo.acceso .luogo__vetro{ border-color:var(--clay); }
.luogo.acceso figcaption b{ color:var(--clay-chiaro); }


/* ============================================================
   IL NOTIZIARIO · la home come foglio territoriale
   Registro editoriale puro: filetti, niente ombre, clay una volta
   sola per blocco. La striscia dei titoli scorre in orizzontale
   perche' e' una rassegna, non un menu.
   ============================================================ */
.foglio__testata{
  display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:flex-end; justify-content:space-between;
  padding-bottom:1.25rem; border-bottom:1px solid var(--sale-forte);
}

/* Il meteo: e' l'utilita' che una testata locale ha sempre avuto in
   prima pagina. Se la rilevazione non arriva, il blocco dice la
   media climatica invece di mentire o sparire. */
.meteo{ text-align:right; min-width:12rem; }
.meteo__eti{
  display:block; font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate-chiaro); margin-bottom:.4rem;
}
.meteo__riga{ margin:0; display:flex; gap:.45rem; align-items:baseline; justify-content:flex-end; flex-wrap:wrap; }
.meteo__riga b{
  font-family:var(--font-display); font-weight:300; font-size:1.5rem; color:var(--paper);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.meteo__riga span{ font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-chiaro); margin-right:.5rem; }
.meteo__fonte{ display:block; margin-top:.35rem; font-size:.625rem; color:var(--slate-chiaro); letter-spacing:.02em; }

.pezzo-guida{ margin-top:clamp(2rem,5vw,3.5rem); }
.pezzo-guida h2{ max-width:20ch; }
.pezzo-guida .lead{ margin-top:1.5rem; max-width:56ch; }

/* La riga di fonte, che l'8/8 ha preso il posto della biforcazione.
   Filetto sopra come tutte le note di servizio del foglio, corpo
   piccolo, e il colore che passa l'AA su fondale scuro (--slate-chiaro
   su #1b2733 fa 7,4:1). Non e' una didascalia decorativa: e' l'unica
   cosa che porta fonte, perimetro e cautela del dato di apertura. */
.pezzo-guida__fonte{
  margin:2rem 0 0; padding-top:1rem; border-top:1px solid var(--sale);
  font-size:.8125rem; line-height:1.6; color:var(--slate-chiaro);
  letter-spacing:.01em; max-width:64ch;
}

/* --- La biforcazione, tolta l'8/8 --------------------------------
   Il blocco "cosa lo smonta / cosa lo conferma" e' uscito con tutto
   il suo comando: sei voci, un pannello da aprire e venti righe di
   script per una cosa che adesso e' una riga di testo. Le regole
   `.biforca*` sono state cancellate da qui invece di restare a
   pesare: un foglio di stile che descrive elementi che non esistono
   piu' e' la stessa bugia piccola di un'anteprima vecchia.
   ------------------------------------------------------------ */
/* La striscia dei titoli */
.striscia{ margin-top:clamp(2.5rem,6vw,4rem); }
.striscia__eti{
  display:block; font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate-chiaro); padding-bottom:.9rem; border-bottom:1px solid var(--sale-forte);
}
.striscia__pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(16rem,19rem);
  gap:0; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:thin; margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);
}
.striscia__pista::-webkit-scrollbar{ height:6px; }
.striscia__pista::-webkit-scrollbar-thumb{ background:rgba(245,241,234,.22); border-radius:3px; }
.titolo{
  scroll-snap-align:start; padding:1.5rem 1.5rem 1.5rem 0; border-right:1px solid var(--sale);
  margin-right:1.5rem; min-width:0;
}
.titolo:last-child{ border-right:0; }
.titolo__data{
  display:block; font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay); margin-bottom:.6rem;
}
.titolo h3{
  margin:0 0 .7rem; font-family:var(--font-display); font-weight:300;
  font-size:1.25rem; line-height:1.2; color:var(--paper); letter-spacing:-.005em;
}
.titolo .piccolo{ margin:0 0 .9rem; }
.titolo__stato{
  display:inline-block; font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate-chiaro); border:1px solid var(--sale-forte); padding:.25rem .5rem;
}
.striscia__coda{ margin-top:1.5rem; max-width:60ch; }

/* Lo switch di lingua in testata. Tre voci, quella corrente non e'
   un link cieco: e' marcata e non si puo' cliccare a vuoto. */
.lingue{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.lingue a{
  font-family:var(--font-ui); font-size:.6875rem; letter-spacing:.14em;
  color:var(--slate-chiaro); text-decoration:none; padding:.35rem .5rem; border-radius:2px;
}
.lingue a:hover{ color:var(--paper); }
.lingue a[aria-current="true"]{ color:var(--paper); border-bottom:1px solid var(--clay); }
@media (max-width:520px){ .lingue a{ padding:.35rem .35rem; font-size:.625rem; } }
/* A 320 px il nome dello Studio finiva scritto sopra IT EN DE.
   Misurato l'8/8: in barra restano 272 px, le tre lingue ne prendono
   84 e il comando del menu 44, al nome ne restano 91 e ne servono
   105. Stringere il carattere non bastava, quindi sotto i 360 px in
   barra resta il solo marchio: il nome per esteso e' gia' nel
   `aria-label` del collegamento, quindi chi legge con la voce lo
   sente comunque, e la prima riga della pagina lo dice a caratteri
   grandi due dita piu' sotto. */
@media (max-width:359px){
  .testata__riga{ gap:.6rem; }
  .marchio span{ display:none; }
}

/* Il tedesco e' piu' lungo dell'italiano: "Schreiben Sie mir" mandava
   a capo il bottone e con lui il marchio. Il bottone non va a capo, e
   sotto i 560px sparisce dalla testata perche' la stessa voce sta nel
   pannello del menu: meglio una via sola che due strette. */
.testata__riga .btn{ white-space:nowrap; }
.marchio span{ white-space:nowrap; }
@media (max-width:560px){
  .testata__riga > .btn{ display:none; }
  .lingue{ margin-left:auto; }
}

/* La seconda proprieta' della demo immobiliare: stessa griglia,
   ritmo invertito. Scorrendo non deve sembrare la stessa pagina
   due volte, ed e' quello che dimostra che l'impaginato non e'
   cucito su una casa sola. */
.dv-corpo--specchio{ border-top:1px solid var(--d-line); }
@media (min-width:820px){
  .dv-corpo--specchio{ grid-template-columns:minmax(0,1fr) 19rem; }
  .dv-corpo--specchio .dv-scheda{ border-right:0; border-left:1px solid var(--d-line); }
}
.dv-corpo--specchio .dv-testo .demo__occ{ margin-bottom:.6rem; }

/* ============================================================
   LA CARTA A FASCE DI TEMPERATURA
   Sostituisce il doppio incolonnato CSS, che era un muro di testo
   uguale a se stesso e senza gerarchia. La riga verticale si
   assottiglia scendendo: la pagina fa quello che fa il forno.
   ============================================================ */
.dr-fasce{ margin-top:2rem; }
.fascia{
  display:grid; gap:.9rem 2rem; padding:1.75rem 0;
  border-top:1px solid var(--d-line); position:relative;
}
.fascia:first-child{ border-top:0; }
@media (min-width:700px){
  .fascia{ grid-template-columns:11rem minmax(0,1fr); }
  /* Il filo del calore: spesso in alto, sottile in fondo. */
  .fascia::before{
    content:""; position:absolute; left:10rem; top:0; bottom:0;
    width:calc(1px + var(--calore) * 3px);
    background:var(--d-acc); opacity:calc(.25 + var(--calore) * .55);
  }
}
.fascia__grado b{
  display:block; font-family:var(--d-display); font-weight:var(--d-dw);
  font-size:clamp(1.75rem,4vw,2.5rem); line-height:1; color:var(--d-ancora);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.fascia__grado span{
  display:block; margin-top:.4rem; font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--d-soft);
}
.fascia__voci{ display:grid; gap:1rem; align-content:start; }
.fascia__voci .dr-voce{ margin:0; }
.fascia--bere .fascia__grado b{ font-size:clamp(1.1rem,2.4vw,1.5rem); color:var(--d-soft); }

/* Bottega: la fascia della molitura e la coppia della storia. */
.db-fascia{ margin:0; }
.db-fascia img{ width:100%; display:block; aspect-ratio:21/9; object-fit:cover; }
.db-fascia figcaption{
  padding:1rem clamp(1.25rem,4vw,3rem) 0; font-size:.8125rem; line-height:1.65;
  color:var(--d-soft); max-width:66ch;
}
.db-fascia figcaption b{ display:block; color:var(--d-ink); font-weight:400; margin-bottom:.25rem; }
.db-coppia{ margin-top:2rem; display:grid; gap:1.25rem; }
@media (min-width:640px){ .db-coppia{ grid-template-columns:1fr 1fr; gap:1.5rem; } }
.db-coppia figure{ margin:0; }
.db-coppia img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.db-coppia figcaption{ margin-top:.6rem; font-size:.75rem; color:var(--d-soft); }

/* ============================================================
   CAMERE E CASE, rifatta il 4/8
   Prima: una colonna sola di testo con le fotografie in fondo, e
   la cosa da dimostrare (il sito E' la prenotazione) annegata a
   meta' pagina. Adesso la cassa e' l'atto centrale e ha una banda
   sua, le camere sono schede e non una striscia.
   ============================================================ */
.do-attacco{ padding:clamp(1.75rem,4vw,2.75rem) 0 0 !important; }

.do-prenota{
  margin-top:clamp(1.75rem,4vw,2.75rem);
  background:var(--d-sup); border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line);
  padding:clamp(1.75rem,4vw,3rem) 0 !important;
}
.do-prenota__int{
  width:100%; max-width:62rem; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem);
  display:grid; gap:2rem;
}
@media (min-width:820px){
  .do-prenota__int{ grid-template-columns:minmax(0,1fr) 19rem; gap:3rem; align-items:start; }
}
.do-calendario__nota{
  margin:1.25rem 0 0; font-size:.75rem; line-height:1.6; color:var(--d-soft); max-width:46ch;
}
.do-dopo{
  margin:.9rem 0 0; font-size:.6875rem; line-height:1.6; color:var(--d-soft);
}
.do-dopo b{ display:block; color:var(--d-ink); font-weight:400; margin-bottom:.2rem; }

.do-camere{ padding-top:clamp(2rem,5vw,3.25rem) !important; }
.do-stanze{ margin-top:1.5rem; display:grid; gap:1.5rem; }
@media (min-width:560px){ .do-stanze{ grid-template-columns:1fr 1fr; gap:1.75rem; } }
@media (min-width:1000px){ .do-stanze{ grid-template-columns:repeat(4,1fr); gap:1.25rem; } }
.stanza{ margin:0; }
.stanza img{ width:100%; display:block; aspect-ratio:4/5; object-fit:cover; }
.stanza figcaption{ padding-top:.9rem; }
.stanza figcaption b{
  display:block; font-family:var(--d-display); font-weight:var(--d-dw);
  font-size:1.125rem; color:var(--d-ink); line-height:1.2;
}
.stanza__dati{
  display:block; margin:.3rem 0 .5rem;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-acc);
}
.stanza figcaption p{ margin:0; font-size:.8125rem; line-height:1.6; }
.do-arrivo{ padding-top:clamp(1.75rem,4vw,2.5rem) !important; }

/* La testata di camere e case sta su una fotografia chiara, quindi il
   testo e' scuro: ma la terrazza ha zone d'ombra dove il contrasto
   crolla a 1,2 su 1. Misurato sul file, non a occhio. Uno schermo
   chiaro sotto il testo riporta il fondo vicino a `luce`: pece fa
   circa 10 anche sul punto piu' scuro della foto. */
.demo--ospitalita .demo__hero-testo{
  background:linear-gradient(to top,
    rgba(238,240,239,.96) 0%,
    rgba(238,240,239,.92) 52%,
    rgba(238,240,239,.55) 78%,
    rgba(238,240,239,0) 100%);
  padding-top:3.5rem;
}
.demo--ospitalita .demo__hero-testo .demo__occ{ color:var(--d-ancora); }
.demo--ospitalita .demo__hero-testo h1{ color:var(--d-ink); }

/* Riprese aeree: tre livelli, registro editoriale, filetti e nessuna
   ombra. Fino al 7/8 il pezzo tipografico era il prezzo (250, 590):
   uscito l'8/8 perche' le abilitazioni di volo non sono chiuse. Il
   posto che aveva la cifra non resta vuoto, lo prende il nome del
   livello, stesso carattere e stessa scala. Una sezione non perde
   peso perche' toglie un numero: lo perde se al suo posto non mette
   niente. */
.pacchetti{ margin-top:3rem; display:grid; gap:2rem; }
@media (min-width:760px){ .pacchetti{ grid-template-columns:repeat(3,1fr); gap:2.5rem; } }
.pacco{ padding-top:1.25rem; border-top:1px solid var(--sale-forte); }
.pacco__eti{
  display:block; font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate-chiaro); margin-bottom:.9rem;   /* 5,88:1 su --secca */
}
.pacco__nome{
  margin:0 0 .5rem; font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.1rem,4.2vw,2.9rem); line-height:1.02; color:var(--paper);
  letter-spacing:-.01em; text-wrap:balance;
}
/* Il prezzo che non c'e' ancora si dichiara, non si nasconde: e' una
   pastiglia di testo, non un badge colorato che finge un'offerta. */
.pacco__prezzo{
  margin:0 0 1rem; font-family:var(--font-ui); font-weight:300;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay-chiaro);   /* 4,72:1 su --secca */
}
.pacco .piccolo{ margin:0 0 .9rem; }
.pacco__nota{ margin:0; font-size:.75rem; color:var(--clay-chiaro); letter-spacing:.01em; }

/* La promessa che vale per tutti e tre i livelli: sta una volta sola,
   sotto la fila, invece di ripetersi in ogni colonna. */
.droni__promessa{
  margin:2.25rem 0 0; padding-top:1.1rem; border-top:1px solid var(--sale);
  max-width:56ch; font-size:.9375rem; line-height:1.6; color:rgba(245,241,234,.82);
}

/* La coppia in fondo: la seconda ripresa e la lista di cosa arriva.
   L'immagine da sola avrebbe aggiunto altezza senza aggiungere
   informazione; accanto a un testo, la stessa altezza vende. */
.droni__coppia{ margin-top:2.75rem; display:grid; gap:2rem; align-items:start; }
/* La verticale prende meno larghezza dell'elenco, non piu': e' un
   campione del formato, non il pezzo forte della sezione. Quello sta
   sopra, a tutta banda. */
@media (min-width:860px){ .droni__coppia{ grid-template-columns:minmax(0,.72fr) 1fr; gap:clamp(2rem,5vw,4rem); } }
.droni__seconda{ margin:0; }
/* Due classi, non una: la regola base `.droni__vetro` con il suo
   21/9 sta piu' in basso nel foglio e a parita' di peso vinceva lei.
   Misurato: la verticale usciva schiacciata a 21/9. */
.droni__vetro.droni__vetro--ritto{ aspect-ratio:9/16; max-width:22rem; }
@media (max-width:859px){ .droni__vetro.droni__vetro--ritto{ max-width:15rem; } }
.droni__seconda figcaption{ margin-top:.8rem; }
.droni__consegna h3{
  margin:0 0 1.25rem; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.01em; color:var(--paper);
}
.droni__lista{ margin:0; padding:0; list-style:none; display:grid; gap:1.1rem; }
.droni__lista li{ padding-top:.9rem; border-top:1px solid var(--sale); }
.droni__lista b{
  display:block; font-family:var(--font-ui); font-weight:400; font-size:.9375rem;
  color:var(--paper); margin-bottom:.2rem;
}
.droni__lista span{ display:block; font-size:.8125rem; line-height:1.55; color:var(--slate-chiaro); }

.droni__vincolo{ margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--sale); max-width:62ch; }
.droni__vincolo strong{ display:block; margin-bottom:.25rem; }

/* Il ponte senza il blocco delle prove resta a una colonna. */
@media (min-width:900px){ .ponte--solo{ grid-template-columns:1fr; } }
.ponte--solo .ponte__patti{ max-width:none; }
@media (min-width:900px){ .ponte--solo .ponte__patti{ grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

/* La riga delle varianti: sta sotto le categorie e compare solo
   quando la categoria ha piu' di un impaginato. Con una sola scelta
   non e' una scelta, ed e' rumore. */
.banco__varianti{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--sale);
}
.banco__varianti__eti{
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--slate-chiaro);
}
.banco__vgruppo{ display:flex; flex-wrap:wrap; gap:.4rem; }
.banco__vbtn{
  font-family:var(--font-ui); font-weight:300; font-size:.6875rem; letter-spacing:.1em;
  padding:.4rem .8rem; border:1px solid var(--sale); border-radius:9999px;
  background:transparent; color:var(--slate-chiaro); cursor:pointer;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.banco__vbtn:hover{ color:var(--paper); border-color:var(--sale-forte); }
.banco__vbtn[aria-pressed="true"]{ color:var(--abisso); background:var(--clay); border-color:var(--clay); }

/* ============================================================
   LA VETRINA DEI SITI
   Sostituisce il telaio con le linguette, che per chi non e' del
   mestiere era indecifrabile. Schede con l'anteprima vera della
   pagina, nome in parole comuni, una riga di spiegazione. Si apre
   a schermo intero: la cornice non serve piu'.
   ============================================================ */
.vetrina__gruppo{
  margin-top:3.25rem; padding-top:1.25rem; border-top:1px solid var(--sale-forte);
}
.vetrina__gruppo h3{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.01em; color:var(--paper);
}
.vetrina__griglia{ margin-top:1.25rem; display:grid; gap:1.5rem; }
@media (min-width:700px){ .vetrina__griglia{ grid-template-columns:repeat(3,1fr); gap:1.75rem; } }

.scheda-sito{
  display:block; text-decoration:none; border:1px solid var(--sale);
  background:#0e151c; transition:border-color var(--dur-2) var(--ease);
}
.scheda-sito img{
  width:100%; height:auto; aspect-ratio:640/456; object-fit:cover; object-position:top;
  display:block; border-bottom:1px solid var(--sale);
}
.scheda-sito__corpo{ display:block; padding:1rem 1.1rem 1.2rem; }
.scheda-sito__corpo b{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:1.3rem; line-height:1.15; color:var(--paper); letter-spacing:-.005em;
  transition:color var(--dur-2) var(--ease);
}
.scheda-sito__testo{
  display:block; margin:.45rem 0 .85rem; font-size:.8125rem; line-height:1.55;
  color:var(--slate-chiaro);
}
.scheda-sito__apri{
  display:inline-block; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay);
}
.scheda-sito:hover{ border-color:var(--clay); }
.scheda-sito:hover .scheda-sito__corpo b{ color:var(--clay); }
.scheda-sito:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }

.vetrina__nota{ margin-top:2.5rem; max-width:60ch; }

/* La ripresa aerea dentro la sezione drone: banda larga, il video
   entra solo quando e' in schermo, sopra resta il suo fotogramma. */
.droni__ripresa{ margin:3rem 0 0; }
.droni__vetro{
  position:relative; aspect-ratio:21/9; overflow:hidden;
  border:1px solid var(--sale); background:#0e151c;
}
.droni__vetro img,.droni__vetro video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.droni__vetro video{ opacity:0; transition:opacity 700ms var(--ease); }
.droni__vetro video[src]{ opacity:1; }
.droni__ripresa figcaption{ margin-top:.8rem; }
/* Sul telefono il 21/9 diventava una fessura alta 140 px: la prova
   del servizio piu' importante della sezione era il pezzo che si
   vedeva meno. In 16/9 sta in 184 px e si guarda. */
@media (max-width:699px){ .droni__ripresa .droni__vetro{ aspect-ratio:16/9; } }

/* ============================================================
   GRAFICA · locandine, stampa, social
   Le immagini hanno proporzioni diverse per natura: la griglia le
   allinea in alto e le lascia respirare. Filetto, nessuna ombra.
   Cresciuta l'8/8: prima della fila di immagini adesso c'e' cosa si
   fa e come si lavora, perche' un nastro di locandine non risponde
   alla domanda "e per me cosa fai".
   ============================================================ */
/* I tre patti della grafica: stessa grammatica dei patti del ponte,
   filetto sopra e niente riquadri. Sono una classe a se' e non un
   riuso di `.ponte__patti` perche' un giorno il ponte cambia e
   questa sezione non deve cambiare con lui. */
.grafica__patti{ margin-top:2.75rem; display:grid; gap:1.75rem; align-content:start; }
@media (min-width:640px){ .grafica__patti{ grid-template-columns:1fr 1fr; gap:2rem 2.5rem; } }
@media (min-width:900px){ .grafica__patti{ grid-template-columns:repeat(3,1fr); } }
.grafica__patti > div{ padding-top:1.1rem; border-top:1px solid var(--sale); }
.grafica__patti b{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:1.35rem; line-height:1.2; color:var(--paper); margin-bottom:.5rem;
}
.grafica__patti .piccolo{ margin:0; }

.grafica__gruppo{ margin-top:3.25rem; padding-top:1.25rem; border-top:1px solid var(--sale-forte); }
.grafica__gruppo h3{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.01em; color:var(--paper);
}
.grafica__griglia{ margin-top:1.5rem; display:grid; gap:1.75rem; align-items:start; }
@media (min-width:700px){ .grafica__griglia{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:700px){ .grafica__griglia--due{ grid-template-columns:1fr 1fr; } }
/* Il gruppo delle serate ha quattro pezzi e uno e' verticale: la
   storia sta accanto al suo post, perche' la cosa da far vedere e'
   che lo stesso evento esce in due formati. In tre colonne il quarto
   pezzo andava a capo da solo, in quattro la fila si legge intera. */
@media (min-width:900px){
  .grafica__griglia--quattro{ grid-template-columns:repeat(4,1fr); gap:1.5rem; }
  /* Il post e' 4:5, la storia e' 9:16: lasciate a larghezza piena le
     quattro figure finivano su due altezze diverse e sotto le prime
     tre restava un buco alto quanto mezza storia. Qui l'altezza e' la
     stessa per tutte e a variare e' la larghezza, che e' esattamente
     la differenza fra i due formati: la storia si vede piu' stretta
     perche' lo e'. Nessun ritaglio, nessuna proporzione forzata. */
  .grafica__griglia--quattro .pezzo-grafico img{
    height:clamp(17rem,21vw,21rem); width:auto; max-width:100%; margin-inline:auto;
  }
}
.pezzo-grafico{ margin:0; }
.pezzo-grafico img{
  width:100%; height:auto; display:block; border:1px solid var(--sale);
}
.pezzo-grafico figcaption{
  margin-top:.7rem; font-size:.75rem; line-height:1.5; color:var(--slate-chiaro); letter-spacing:.01em;
}
.grafica__nota{ margin-top:2.5rem; max-width:62ch; }

/* ============================================================
   STRUTTURA · 7 agosto 2026
   Giudizio di Manuel sul sito online: "difficile da navigare, uno
   che scorre stacca dopo due passaggi". Misurato a 375: 25.463 px,
   31 schermate, e la sola vetrina ne pesava 12 con sette settori
   aperti tutti insieme sotto un titolo che diceva "scegli".
   Qui dentro c'e' la riparazione della struttura: la scelta vera
   nella vetrina, le griglie ripetute che diventano nastri, gli
   ancoraggi che non finiscono sotto la barra, e una via per
   scrivere che resta a portata mentre si scorre.
   Nessun testo toccato: quello e' il giro del copywriter.
   ============================================================ */

/* --- Un bordo di comando che passa il 3:1 -------------------
   `--sale` (.16) su fondale fa 1,61 e `--sale-forte` (.34) fa
   2,87: sotto soglia per il bordo di un comando. A .42 fa 3,63.
   Misurato su #1b2733, il tono della sezione della vetrina. */
:root{ --sale-bordo:rgba(245,241,234,.42); }

/* --- Le ancore non finiscono sotto la testata fissa ----------
   La barra e' `position:fixed`: senza questo, ogni voce del menu
   portava la sua intestazione dietro la barra. */
:root{ --barra:4.75rem; }
@media (min-width:900px){ :root{ --barra:5.5rem; } }
/* Solo le sezioni, non ogni elemento con un id: `main [id]` pesa piu'
   di una classe e si mangiava l'ancoraggio delle etichette. */
main > section[id],#territorio,#contenuto{ scroll-margin-top:var(--barra); }

/* Su telefono le sezioni respiravano 105 px sopra e sotto:
   due dita di scorrimento a vuoto per dieci volte. */
@media (max-width:699px){
  .sezione{ padding:clamp(3.25rem,8vh,5rem) 0; }
  .duetto{ gap:1.25rem; }
  /* La fotografia delle mani e' 1400x1050, cioe' 4/3. Il ritaglio 4/5
     su telefono le tagliava i lati e costava 164 px: alla larghezza
     piena del telefono la sua proporzione vera sta meglio e pesa meno. */
  .ritratto__fig img{ aspect-ratio:4/3; }
}

/* ============================================================
   IL MENU SU TELEFONO · funziona senza JavaScript
   Era un <button> mosso da uno script: a JS spento era un comando
   che non fa niente, cioe' il difetto che questo sito punisce
   ovunque. Adesso e' un <details>: apre, chiude, si comanda da
   tastiera e annuncia il suo stato da solo. Il pannello scende
   sotto la barra invece di coprire lo schermo, cosi' non serve
   ne' bloccare lo scorrimento ne' una scenografia modale.
   ============================================================ */
.menu-mob{ margin-left:.5rem; }
@media (min-width:900px){ .menu-mob{ display:none; } }
.menu-mob > summary{ list-style:none; }
.menu-mob > summary::-webkit-details-marker{ display:none; }
.menu-mob > summary::marker{ content:""; }
.menu-mob[open] .nav-apri span{ background:transparent; }
.menu-mob[open] .nav-apri span::before{ transform:translateY(5px) rotate(45deg); }
.menu-mob[open] .nav-apri span::after{ transform:translateY(-5px) rotate(-45deg); }

.menu{
  position:absolute; top:100%; left:0; right:0; z-index:60;
  /* Pieno, non velato: a .98 il titolo dell'hero restava dietro le
     voci come un fantasma di tre unita' di grigio. Un menu non ha
     ragione di essere trasparente. Carta su questo fondo: 15,1:1. */
  background:#121b24; border-top:1px solid var(--sale);
  padding:.5rem var(--pad) 1.25rem;
  max-height:calc(100svh - var(--barra)); overflow-y:auto;
  display:none;
}
.menu-mob[open] > .menu{ display:block; }
.menu a{
  display:flex; align-items:center; min-height:44px; padding:.6rem 0;
  border-bottom:1px solid var(--sale); text-decoration:none;
  font-family:var(--font-display); font-weight:300; font-size:1.3rem; color:var(--paper);
}
.menu a:last-child{ border-bottom:0; }
.menu a:hover{ color:var(--clay); }
/* Il velo della testata compatta crea un blocco di contenimento:
   un discendente `fixed` ci resterebbe dentro. Il pannello e'
   `absolute` proprio per questo, e mentre e' aperto il velo si
   spegne: sotto c'e' il pannello pieno, non si vede comunque. */
.testata:has(.menu-mob[open]){ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(22,33,44,.92); }

/* ============================================================
   LA VETRINA DIVENTA UNA SCELTA
   Sette settori aperti insieme facevano 9.958 px: il titolo
   diceva "scegli il tuo settore" e non c'era niente da scegliere.
   Adesso e' una fascia di etichette e un solo settore alla volta.
   Meccanica: `:target`. Nessun JavaScript nel percorso critico,
   ogni settore ha il suo indirizzo (#set-ristoranti) che si manda
   a un cliente, e il ritorno indietro del browser funziona.
   Il primo settore resta aperto quando l'indirizzo non chiede
   niente: `:has()` legge se qualcuno e' bersaglio, e se nessuno
   lo e' apre quello di partenza. Cosi' la prova si vede subito,
   invece di sette righe chiuse che non dimostrano niente.
   ============================================================ */
.settori{ margin-top:2.5rem; }

.settori__scelta{
  display:flex; gap:.5rem; overflow-x:auto; padding:.25rem 0 .75rem;
  scroll-snap-type:x proximity;
  margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);
  /* Senza questo il primo elemento aggancia il bordo dello schermo e
     si mangia il margine della pagina: l'aggancio va detto anche allo
     scorrimento, non solo al riempimento. */
  scroll-padding-inline:var(--pad);
  scrollbar-width:none; -ms-overflow-style:none;
}
.settori__scelta::-webkit-scrollbar{ display:none; }
/* Su schermo largo le sette etichette ci stanno: vanno a capo invece
   di scorrere, cosi' si vedono tutte insieme e la scelta e' una sola
   occhiata. Sul telefono restano un nastro, che il pollice fa meglio
   del polso. */
@media (min-width:900px){
  .settori__scelta{ flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; }
}
.settori__chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:inline-flex; align-items:center; min-height:44px;
  padding:.6rem 1.15rem; border:1px solid var(--sale-bordo); border-radius:9999px;
  font-family:var(--font-ui); font-weight:300; font-size:.8125rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:rgba(245,241,234,.82);   /* 10,4:1 su #1b2733 */
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             background-color var(--dur-2) var(--ease);
}
.settori__chip:hover{ color:var(--paper); border-color:var(--paper); }

/* Il bersaglio dell'indirizzo e' l'etichetta stessa, non il
   pannello. Non e' un vezzo, e' l'unico modo perche' la pagina non
   salti: un pannello chiuso e' `display:none`, quindi non ha
   posizione, e il browser calcola dove scorrere prima che il
   pannello si apra. Misurato: si finiva 853 px sotto il punto
   giusto, esattamente l'altezza del pannello che si chiudeva.
   Le sette etichette stanno tutte sulla stessa riga, quindi
   qualunque settore si scelga si atterra sempre nello stesso
   posto: la fascia sotto la barra. E chi usa la tastiera resta col
   fuoco sul comando che ha appena premuto. */
.settori__chip{ scroll-margin-top:var(--barra); }
/* Su schermo largo le etichette vanno a capo: se si atterra su una
   della seconda riga, la prima finirebbe dietro la barra. Un'altezza
   di riga di margine in piu' e la fascia si vede tutta. */
@media (min-width:900px){ .settori__chip{ scroll-margin-top:calc(var(--barra) + 3.5rem); } }

/* Lo stato acceso: carta piena, inchiostro dell'abisso. 14,4:1.
   Colore di testo e di fondo transiscono insieme e con la stessa
   durata: se ne transisse uno solo, per un quarto di secondo si
   leggerebbe carta su carta. */
.settori__chip:target,
.settori:not(:has(.settori__chip:target)) .settori__chip--primo{
  background:var(--paper); color:var(--abisso); border-color:var(--paper);
}

.settore{
  display:none; padding-top:1.25rem; border-top:1px solid var(--sale-forte);
}
.settore > h3{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.01em; color:var(--paper);
}
.settori:has(#set-vendere-case:target) [data-set="vendere-case"],
.settori:has(#set-una-casa:target) [data-set="una-casa"],
.settori:has(#set-camere:target) [data-set="camere"],
.settori:has(#set-ristoranti:target) [data-set="ristoranti"],
.settori:has(#set-botteghe:target) [data-set="botteghe"],
.settori:has(#set-sport:target) [data-set="sport"],
.settori:has(#set-enti:target) [data-set="enti"],
.settori:not(:has(.settori__chip:target)) .settore--primo{ display:block; }

/* La comparsa del pannello: solo opacita' e spostamento, 240 ms,
   la curva del sistema. `allow-discrete` porta con se' il
   `display`, `@starting-style` da' il punto di partenza. Dove non
   e' supportato il pannello compare e basta: nessuna regressione. */
@supports (transition-behavior:allow-discrete){
  .settore{
    opacity:0; translate:0 10px;
    transition:opacity var(--dur-2) var(--ease), translate var(--dur-2) var(--ease),
               display var(--dur-2) var(--ease) allow-discrete;
  }
  .settori:has(#set-vendere-case:target) [data-set="vendere-case"],
  .settori:has(#set-una-casa:target) [data-set="una-casa"],
  .settori:has(#set-camere:target) [data-set="camere"],
  .settori:has(#set-ristoranti:target) [data-set="ristoranti"],
  .settori:has(#set-botteghe:target) [data-set="botteghe"],
  .settori:has(#set-sport:target) [data-set="sport"],
  .settori:has(#set-enti:target) [data-set="enti"],
  .settori:not(:has(.settori__chip:target)) .settore--primo{ opacity:1; translate:0 0; }
  @starting-style{
    .settori:has(#set-vendere-case:target) [data-set="vendere-case"],
    .settori:has(#set-una-casa:target) [data-set="una-casa"],
    .settori:has(#set-camere:target) [data-set="camere"],
    .settori:has(#set-ristoranti:target) [data-set="ristoranti"],
    .settori:has(#set-botteghe:target) [data-set="botteghe"],
    .settori:has(#set-sport:target) [data-set="sport"],
    .settori:has(#set-enti:target) [data-set="enti"],
    .settori:not(:has(.settori__chip:target)) .settore--primo{ opacity:0; translate:0 10px; }
  }
}

.settori__nota{ margin-top:1.5rem; }

/* ============================================================
   NASTRI AL POSTO DELLE COLONNE
   Le stesse griglie che su schermo largo stanno in tre colonne, su
   telefono diventavano tre pile: la grafica da sola faceva 3.200 px
   di fotografie una sotto l'altra, il territorio 2.229. Il nastro
   orizzontale e' gia' la grammatica della striscia delle
   rilevazioni: si scorre col pollice, non col polso.
   ============================================================ */
@media (max-width:699px){
  .grafica__griglia{
    grid-auto-flow:column; grid-auto-columns:minmax(11.5rem,13rem);
    gap:1rem; overflow-x:auto; scroll-snap-type:x proximity;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); padding-bottom:.75rem;
    scroll-padding-inline:var(--pad); scrollbar-width:thin;
  }
  .grafica__griglia::-webkit-scrollbar{ height:6px; }
  .grafica__griglia::-webkit-scrollbar-thumb{ background:rgba(245,241,234,.22); border-radius:3px; }
  .pezzo-grafico{ scroll-snap-align:start; min-width:0; }
  .grafica__gruppo{ margin-top:2.25rem; }
}
@media (max-width:639px){
  .territorio__muro{
    grid-auto-flow:column; grid-auto-columns:minmax(14rem,15rem);
    gap:1.25rem; overflow-x:auto; scroll-snap-type:x proximity;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); padding-bottom:.75rem;
    scroll-padding-inline:var(--pad); scrollbar-width:thin;
  }
  .territorio__muro::-webkit-scrollbar{ height:6px; }
  .territorio__muro::-webkit-scrollbar-thumb{ background:rgba(245,241,234,.22); border-radius:3px; }
  .luogo{ scroll-snap-align:start; min-width:0; }
}

/* ============================================================
   UNA VIA PER SCRIVERE, SEMPRE A PORTATA
   Sei chiamate all'azione in trentuno schermate: chi si convinceva
   a meta' pagina non aveva dove premere. Questa e' una pastiglia
   discreta che compare dopo la prima schermata e si toglie da sola
   quando arriva la sezione dei contatti, che dice la stessa cosa
   meglio. Senza JavaScript non compare affatto: la testata fissa
   con il menu resta comunque la via.
   Carta su abisso: 14,4:1.
   ============================================================ */
.scrivimi-fisso{
  position:fixed; z-index:35;
  right:var(--pad); bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.25rem;
  border-radius:9999px; border:1px solid var(--paper);
  background:var(--paper); color:var(--abisso);
  font-family:var(--font-ui); font-weight:300; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  opacity:0; visibility:hidden; translate:0 .75rem;
  transition:opacity var(--dur-3) var(--ease), translate var(--dur-3) var(--ease),
             visibility var(--dur-3) var(--ease),
             background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.scrivimi-fisso.visibile{ opacity:1; visibility:visible; translate:0 0; }
.scrivimi-fisso:hover{ background:var(--clay); border-color:var(--clay); }
/* Sopra i 560px il bottone "Scrivimi" torna nella testata fissa, che
   e' sempre in schermo: due comandi che dicono la stessa cosa sono
   rumore, non servizio. La pastiglia serve dove la testata non ha
   spazio, cioe' sul telefono. */
@media (min-width:560px){ .scrivimi-fisso{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .settore{ transition:none !important; opacity:1; translate:none; }
  .scrivimi-fisso{ transition:opacity var(--dur-1) linear, visibility var(--dur-1) linear; translate:none; }
  .settori__scelta,.grafica__griglia,.territorio__muro{ scroll-behavior:auto; }
}