/* 01-tokens.css */
/* ============================================================
   Token. La grammatica viene da White Desert (inchiostro scuro, carta
   crema, un accento solo, raggio 2); i colori dalla casa, campionati
   sul filmato (DESIGN.md §2). Contrasti calcolati, non stimati.
   ============================================================ */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/oswald-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/oswald-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-tight-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-display-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-display-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }

/* --p della finestra: un numero, cosi' si puo' interpolare */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  /* colori (DESIGN.md §2) */
  --ink: #16261E;          /* il verde delle persiane. 14,0:1 sulla carta */
  --ink-2: #44524A;        /* testo secondario. 7,3:1 sulla carta, 6,6 sul paper-2 */
  --paper: #F4F1EA;        /* il muro avorio scaldato verso il crema del riferimento */
  --paper-2: #EAE5DA;      /* le tessere del piede, le sezioni tinte */
  --white: #FFFFFF;
  --ochre: #C48826;        /* la facciata. SOLO riempimento: l'inchiostro sopra fa 5,2:1 */
  --ochre-ink: #8A5A10;    /* l'ocra come testo. 5,2:1 sulla carta */
  --oak: #A38868;          /* il rovere: filetti e cifre grandi, mai testo corrente (3,0:1) */
  --night: #0F1A15;        /* la chiusa. La carta sopra fa 15,8:1 */
  --ink-rgb: 22, 38, 30;
  --paper-rgb: 244, 241, 234;
  --line: rgba(22, 38, 30, .085);   /* la griglia di colonne del riferimento */
  --rule: rgba(22, 38, 30, .16);

  /* caratteri */
  --f-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --f-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --f-tall: 'Oswald', 'Arial Narrow', Arial, sans-serif;

  /* misure */
  --gutter: clamp(16px, 3vw, 40px);
  --wrap: 1240px;
  --wrap-wide: 1640px;
  --header-h: 72px;
  --r: 2px;                /* il raggio del riferimento: 2,17 px */
  --sec: clamp(72px, 10vw, 160px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 899px) { :root { --header-h: 64px; } }

/* 02-base.css */
/* ============================================================
   Base: reset, tipografia, bottoni, utilita'.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.5 var(--f-sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
::selection { background: var(--ochre); color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r); }
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }
.section { padding-block: var(--sec); position: relative; }
.section--tint { background-color: var(--paper-2); }

/* La griglia di colonne sottili del riferimento: sei colonne visibili
   sulle sezioni chiare. Sta sul fondo, sotto a tutto. */
.section, .site-footer, .finestra-grid {
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 6) 100%;
  background-position: var(--gutter) 0;
  background-repeat: repeat-x;
}

/* --- tipografia del riferimento ------------------------------------------ */
.section-head, .testo-grid > div:first-child, .chiusa-in, .prenota-side { container-type: inline-size; }
/* Il titolo si misura sulla sua colonna (cqi), non sullo schermo: una
   parola lunga in maiuscolo («DALL'AEROPORTO», 14 lettere, circa 10 em)
   non deve mai uscire dalla colonna. 9,4cqi la fa stare sempre. */
.titolo {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: min(clamp(34px, 5vw, 76px), 9.4cqi); line-height: 1.05; letter-spacing: .005em;
  text-wrap: balance;
}
.titolo--sm { font-size: min(clamp(28px, 3.2vw, 46px), 9.4cqi); line-height: 1.08; }
.titolo--light { color: var(--paper); }
.titolo em { font-family: var(--f-serif); font-style: italic; text-transform: none; }

.occhiello {
  position: relative; display: inline-flex; flex-direction: column; gap: 2px;
  font: italic 400 20px/1.3 var(--f-serif); color: var(--ink-2);
  margin: 0 0 22px;
}
.occhiello .svolazzo { width: 92px; height: auto; color: var(--oak); margin-left: -6px; }
.occhiello--light { color: rgba(var(--paper-rgb), .92); }
.occhiello--light .svolazzo { color: rgba(var(--paper-rgb), .6); }

.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 36em; margin-top: 18px; }
.label { font: 500 13px/1.3 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.quadre { font: 500 13px/1.4 var(--f-sans); letter-spacing: .06em; white-space: nowrap; }

.section-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 780px; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .occhiello { align-items: center; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.actions--center { justify-content: center; }

/* --- bottoni: rettangoli a raggio 2, come il riferimento ------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 22px; border-radius: var(--r);
  font: 400 17px/1 var(--f-sans); text-decoration: none; letter-spacing: 0;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn i { display: inline-flex; width: 18px; height: 18px; }
.btn i svg { width: 18px; height: 18px; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #0B150F; }
.btn--paper { background: var(--paper); color: var(--ink); border-color: rgba(255, 255, 255, .2); }
.btn--paper:hover { background: var(--white); }
.btn--glass { background: rgba(var(--ink-rgb), .42); color: var(--white); border-color: rgba(255, 255, 255, .3); }
.btn--glass:hover { background: rgba(var(--ink-rgb), .62); }
.btn--line { background: transparent; color: var(--ink); border-color: rgba(var(--ink-rgb), .36); }
.btn--line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--sq { width: 50px; padding: 0; }
[data-rail-prev] i { transform: scaleX(-1); }

/* --- entrate: dietro la classe .js (senza JS tutto resta visibile) -------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
/* La linguetta fissa a destra (44 px) non deve coprire la fine delle
   righe: da 900 px in su il contenuto lascia 48 px per lato. */
@media (min-width: 900px) {
  .wrap { width: min(100% - 2 * var(--gutter) - 96px, var(--wrap)); }
  .wrap-wide { width: min(100% - 2 * var(--gutter) - 96px, var(--wrap-wide)); }
}

/* 03-layout.css */
/* ============================================================
   Il guscio: la testata di White Desert, il menu, la linguetta, il
   piede crema con il nome gigante.
   ============================================================ */

/* --- testata ---------------------------------------------------------------
   Tre bottoni a sinistra, il marchio al centro, due a destra. Sopra il
   filmato i bottoni sono inchiostro trasparente PIENO (niente
   backdrop-filter sopra una sequenza che cambia a ogni fotogramma);
   sulle pagine chiare crema. app.js cambia data-tone. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter); gap: 16px;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header[data-tone="light"].is-stuck { background: rgba(var(--paper-rgb), .96); box-shadow: 0 1px 0 var(--rule); }
.hd-left ul { display: flex; gap: 8px; }
.hd-right { display: flex; justify-content: flex-end; gap: 8px; }
.hd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: var(--r);
  font: 400 16px/1 var(--f-sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hd-btn svg { width: 20px; height: 20px; }
/* .68 e non .15 come il riferimento: il suo video e' scuro, il nostro
   e' chiaro. Sopra il fotogramma piu' bianco il bianco fa 5,1:1. */
[data-tone="film"] .hd-btn { background: rgba(var(--ink-rgb), .68); border-color: rgba(255, 255, 255, .24); color: var(--white); }
[data-tone="film"] .hd-btn:hover, [data-tone="film"] .hd-btn[aria-current="page"] { background: rgba(var(--ink-rgb), .9); }
[data-tone="light"] .hd-btn { background: var(--paper-2); border-color: rgba(var(--ink-rgb), .08); color: var(--ink); }
[data-tone="light"] .hd-btn:hover { background: var(--ink); color: var(--paper); }
/* la voce scelta si inverte, non prende un filetto colorato */
[data-tone="light"] .hd-btn[aria-current="page"] { background: var(--ink); color: var(--paper); }
[data-tone="light"] .hd-cta { background: var(--ink); color: var(--paper); }
[data-tone="film"] .hd-cta { background: var(--paper); color: var(--ink); border-color: transparent; }
[data-tone="film"] .hd-cta:hover, [data-tone="film"] .hd-cta[aria-current="page"] { background: var(--white); color: var(--ink); }
.hd-lang { width: 48px; padding: 0; letter-spacing: .04em; }
.hd-menu { display: none; width: 44px; padding: 0; }

/* il marchio: la porta finestra sopra il nome, come il pittogramma di
   White Desert sopra il suo */
.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.brand .mark { width: 38px; height: auto; }
.brand-name { font: 500 19px/1 var(--f-tall); text-transform: uppercase; letter-spacing: .14em; margin-right: -.14em; }
.brand-place { font: 500 9.5px/1 var(--f-sans); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; opacity: .9; }
.hd-brand { text-decoration: none; transition: color .3s var(--ease); }
[data-tone="film"] .hd-brand { color: var(--white); filter: drop-shadow(0 1px 8px rgba(var(--ink-rgb), .55)); }
[data-tone="light"] .hd-brand { color: var(--ink); }

@media (max-width: 1099px) {
  .hd-left ul li:nth-child(3) { display: none; }
}
@media (max-width: 899px) {
  .site-header { grid-template-columns: auto 1fr; }
  .hd-left { display: none; }
  .hd-brand { justify-self: start; }
  .brand { flex-direction: row; gap: 10px; }
  .brand .mark { width: 32px; }
  .brand-place { display: none; }
  .brand-name { font-size: 17px; }
  .hd-menu { display: inline-flex; }
  .hd-lang { display: none; }
  .hd-btn { height: 40px; }
  .hd-cta { padding: 0 14px; }
}

/* --- menu del telefono (:target, funziona anche senza JS) ------------------ */
.site-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; padding: 0 var(--gutter) 28px;
  visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s;
}
.site-menu:target, .site-menu.is-open { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.menu-brand { color: var(--paper); text-decoration: none; }
.menu-brand .brand { flex-direction: row; gap: 10px; }
.menu-brand .brand-place { display: none; }
.menu-close { background: rgba(255, 255, 255, .08); color: var(--paper); width: 44px; padding: 0; }
.menu-list { margin-top: 6vh; display: grid; gap: 4px; }
.menu-list a { display: block; font: 400 clamp(34px, 9vw, 52px)/1.12 var(--f-display); text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menu-list a[aria-current="page"] { color: var(--ochre); }
.menu-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.menu-langs { display: flex; gap: 18px; }
.menu-langs a { text-decoration: none; opacity: .75; }
.menu-langs a[aria-current="true"] { opacity: 1; text-decoration: underline; }
.menu-foot .quadre { opacity: .7; }

/* --- la linguetta verticale del riferimento, in ocra ----------------------- */
.linguetta {
  position: fixed; right: 0; top: 50%; z-index: 35; transform: translateY(-50%);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px;
  background: var(--ochre); color: var(--ink); text-decoration: none;
  padding: 22px 13px; font: 500 15px/1 var(--f-sans); letter-spacing: .02em;
  border-radius: var(--r) 0 0 var(--r);
  transition: padding .3s var(--ease), background-color .3s var(--ease);
}
.linguetta svg { width: 16px; height: 16px; }
.linguetta:hover { padding-right: 18px; background: #D69A33; }
@media (max-width: 899px) { .linguetta { display: none; } }

/* --- briciole --------------------------------------------------------------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: .6; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --- il piede -------------------------------------------------------------- */
.site-footer { position: relative; background-color: var(--paper); padding-top: clamp(64px, 8vw, 120px); overflow: hidden; border-top: 1px solid var(--rule); }
.ft-top { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: clamp(32px, 5vw, 80px); }
.ft-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.ft-col h2 { font: italic 400 19px/1.3 var(--f-serif); margin-bottom: 14px; color: var(--ink); }
.ft-col li { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ft-col a { text-decoration: none; }
.ft-col a:hover { text-decoration: underline; color: var(--ink); }
.ft-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.ft-tile {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 16px;
  background: var(--paper-2); border-radius: var(--r); text-decoration: none; text-align: center; font-size: 16px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.ft-tile svg { width: 16px; height: 16px; }
.ft-tile:hover { background: var(--ink); color: var(--paper); }
.ft-tile--wide { grid-column: 1 / -1; }
.ft-word {
  margin: clamp(40px, 6vw, 90px) 0 0; text-align: center; white-space: nowrap;
  font: 400 clamp(64px, 17.4vw, 330px)/.8 var(--f-tall); text-transform: uppercase; letter-spacing: .005em;
  color: var(--ink);
}
.ft-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 22px 0 26px; border-top: 1px solid var(--rule); margin-top: clamp(18px, 2vw, 30px); font-size: 14px; color: var(--ink-2); }
.ft-cin { margin: 0; letter-spacing: .04em; }
.ft-quote { margin: 0; text-align: center; font: italic 400 16px/1.4 var(--f-serif); color: var(--ink); }
.ft-legal { margin: 0; display: flex; justify-content: flex-end; gap: 18px; }
.ft-legal a { text-decoration: none; }
.ft-legal a:hover { text-decoration: underline; }
@media (max-width: 1099px) {
  .ft-top { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .ft-bottom { grid-template-columns: 1fr; text-align: left; }
  .ft-quote { text-align: left; }
  .ft-legal { justify-content: flex-start; }
  .ft-tile { min-height: 72px; }
}
@media (max-width: 599px) {
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-cols .ft-col:first-child { grid-column: 1 / -1; }
}
/* senza JS il tono non cambia mai: la testata prende un fondo pieno */
html:not(.js) .site-header { background: var(--ink); }

/* 04-film.css */
/* ============================================================
   Il piano sequenza, che e' anche l'apertura.

   Il filmato e' CHIARO (luminanza media 124-189): muri avorio, sole sul
   vicolo. Quindi (DESIGN.md §5):
   - l'apertura scrive in bianco sopra una FASCIA dritta a tutta
     larghezza che sale dal bordo in inchiostro. La fascia sta dentro
     .scrolly-lead e se ne va con lei: sotto i capitoli non c'e';
   - le didascalie stanno in una tessera piena color carta (vedi .cap);
   - il velo di pagina e' solo una sfumatura leggera in alto per la
     testata.
   ============================================================ */
.scrolly { position: relative; height: calc(var(--seq-vh) * 1vh); background: var(--paper); }
@media (max-width: 899px) { .scrolly { height: calc(var(--seq-vh-narrow) * 1vh); } }

.scrolly-stage {
  position: sticky; top: 0; overflow: hidden;
  height: 100svh; height: 100lvh;   /* lvh: niente fascia sotto quando Safari ritira la barra */
  background: var(--ink);
}
.scrolly-canvas, .scrolly-poster, .scrolly-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrolly-poster img { object-fit: cover; }
[data-painted="true"] .scrolly-poster { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.scrolly-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .34) 0, rgba(var(--ink-rgb), .12) 9%, rgba(var(--ink-rgb), 0) 20%);
}

/* --- l'apertura: occhiello a sinistra, «Entra in casa» a destra, il nome
       gigante in basso, come «ANTARCTICA» -------------------------------- */
.scrolly-lead { position: absolute; inset: 0; z-index: 3; color: var(--white); }
.scrolly-lead::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--ink-rgb), .9) 0, rgba(var(--ink-rgb), .74) 22%, rgba(var(--ink-rgb), .32) 44%, rgba(var(--ink-rgb), 0) 62%);
}
.lead-kicker {
  position: absolute; left: var(--gutter); top: 52%; max-width: 16em; margin: 0;
  font: italic 400 clamp(19px, 1.7vw, 24px)/1.3 var(--f-serif);
  text-shadow: 0 1px 2px rgba(var(--ink-rgb), .5), 0 2px 24px rgba(var(--ink-rgb), .55);
}
.lead-side { position: absolute; right: calc(var(--gutter) + 44px); top: 50%; display: grid; gap: 14px; justify-items: end; }
.lead-play {
  display: inline-flex; align-items: center; gap: 44px; padding: 14px 4px 14px 0; min-width: 190px; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .5);
  text-decoration: none; font-size: 17px; text-shadow: 0 1px 10px rgba(var(--ink-rgb), .6);
}
.lead-play svg { width: 18px; height: 18px; }
.lead-score { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 14px; text-shadow: 0 1px 10px rgba(var(--ink-rgb), .7); }
.lead-score b { font: 500 30px/1 var(--f-tall); }
.lead-title { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.lead-pre { display: block; font: italic 400 clamp(17px, 1.5vw, 21px)/1.3 var(--f-serif); margin-bottom: clamp(6px, 1vw, 14px); }
.lead-big {
  display: block; font: 400 clamp(110px, 21vw, 400px)/.8 var(--f-tall); text-transform: uppercase;
  letter-spacing: .01em; margin-bottom: -.035em;
}
@media (max-width: 899px) {
  .lead-kicker { top: auto; bottom: calc(25vw + 236px); }
  .lead-side { right: var(--gutter); top: auto; bottom: calc(25vw + 96px); justify-items: start; left: var(--gutter); }
  .lead-play { min-width: 0; gap: 20px; }
  .lead-big { font-size: 25vw; }
}

/* --- le didascalie --------------------------------------------------------- */
.scrolly-captions { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scrolly-phase { position: absolute; top: calc(var(--header-h) + clamp(24px, 6vh, 80px)); width: min(500px, 40vw); }
.scrolly-phase[data-side="left"] { left: calc(var(--gutter) + clamp(0px, 3vw, 48px)); }
.scrolly-phase[data-side="right"] { right: calc(var(--gutter) + clamp(44px, 5vw, 96px)); }
[data-mode="scrub"] .scrolly-phase { opacity: 0; }
.cap { position: relative; color: var(--ink); }
/* Le didascalie stanno in una TESSERA piena color carta, a spigoli netti
   come le schede dei campi di White Desert. Il bagliore crema con
   l'alone sulle lettere e' stato bocciato da Piero il 27 settembre
   2026 («these back overlays are terrible quality looking»): velava il
   filmato e sfocava le lettere. La tessera porta il suo contrasto
   (inchiostro su carta 14:1) e lascia il fotogramma pulito intorno. */
.cap {
  background: var(--paper); padding: clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px) clamp(24px, 2.6vw, 36px);
  border-radius: var(--r); box-shadow: 0 18px 50px -24px rgba(var(--ink-rgb), .45);
}
.cap-kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font: italic 400 19px/1.3 var(--f-serif); color: var(--ink); }
.cap-kicker b { font: 500 15px/1 var(--f-tall); letter-spacing: .08em; font-style: normal; padding: 5px 7px; background: var(--ink); color: var(--paper); border-radius: var(--r); }
.cap-title {
  /* Caslon Text e non Display: sul filmato le grazie sottili della
     Display si perdevano sulle staffe dei balconi */
  font: 400 clamp(26px, 2.5vw, 38px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  text-wrap: balance;
}
.cap-text {
  margin: 16px 0 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; max-width: 30em; color: var(--ink);
  color: var(--ink-2);
}
@media (max-width: 899px) {
  .scrolly-phase, .scrolly-phase[data-side] { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--header-h) + 22px); }
}

/* contatore, avanzamento, coordinate: una riga in basso, su una
   tessera crema che porta il suo contrasto */
.scrolly-foot {
  position: absolute; left: var(--gutter); right: calc(var(--gutter) + 44px); bottom: calc(22px + 100lvh - 100svh); z-index: 2;
  display: flex; align-items: center; gap: 18px; pointer-events: none;
}
.scrolly-counter, .scrolly-progress { opacity: 0; }
[data-mode="scrub"] .scrolly-foot > * { transition: opacity .3s; }
.scrolly-counter { margin: 0; display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; background: rgba(var(--paper-rgb), .92); border-radius: var(--r); font-size: 14px; color: var(--ink-2); }
.scrolly-counter b { font: 500 20px/1 var(--f-tall); color: var(--ink); }
.scrolly-coords { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--rule); color: var(--ink); }
.scrolly-progress { width: min(240px, 22vw); height: 2px; background: rgba(var(--paper-rgb), .75); }
.scrolly-progress i { display: block; height: 100%; width: 0; background: var(--ink); }
@media (max-width: 899px) { .scrolly-coords { display: none; } }

/* --- la versione statica (niente JS, movimento ridotto, errore) ----------- */
[data-mode="static"] { height: auto; }
[data-mode="static"] .scrolly-stage { position: relative; height: auto; overflow: visible; background: var(--paper); }
[data-mode="static"] .scrolly-canvas, [data-mode="static"] .scrolly-veil, [data-mode="static"] .scrolly-foot { display: none; }
[data-mode="static"] .scrolly-poster { position: relative; display: block; height: 100svh; }
[data-mode="static"] .scrolly-lead { position: absolute; inset: 0 0 auto; height: 100svh; }
[data-mode="static"] .scrolly-captions { position: static; pointer-events: auto; }
[data-mode="static"] .scrolly-phase {
  position: static; width: auto; opacity: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin: clamp(56px, 8vw, 120px) auto;
}
[data-mode="static"] .cap { background: none; padding: 0; box-shadow: none; }
.scrolly-still { margin: 0; }
.scrolly-still img { width: 100%; height: auto; border-radius: var(--r); }
[data-mode="scrub"] .scrolly-still { display: none; }
@media (max-width: 899px) { [data-mode="static"] .scrolly-phase { grid-template-columns: 1fr; } }

/* il caricamento tiene ferma la pagina per poco: l'apertura resta leggibile */
body[data-loading] { overflow: hidden; }

/* 05-blocks.css */
/* ============================================================
   I blocchi.
   ============================================================ */

/* --- la finestra che si apre (DESIGN.md §6) --------------------------------
   --p va da 0 a 1 mentre la sezione scorre (app.js). La porta finestra
   parte stretta e alta al centro della carta, con le due persiane
   chiuse a meta'; le persiane si aprono, il vano si allarga fino al
   bordo dello schermo, e sulla facciata sale l'indirizzo. */
.finestra { position: relative; height: 320vh; background: var(--paper); }
.finestra-stage { position: sticky; top: 0; height: 100svh; height: 100lvh; overflow: hidden; display: grid; place-items: center; }
.finestra-grid { position: absolute; inset: 0; opacity: calc(1 - var(--p) * 1.4); }
.finestra-head {
  position: absolute; top: calc(var(--header-h) + 1.5vh); left: 0; right: 0; text-align: center;
  opacity: calc(1 - var(--p) * 3); transform: translateY(calc(var(--p) * -40px));
}
.finestra-head .occhiello { align-items: center; }
/* la curva: veloce all'inizio, morbida in fondo */
.finestra { --e: calc(1 - (1 - var(--p)) * (1 - var(--p)) * (1 - var(--p))); }
.finestra-vano {
  --w0: min(30vw, 340px); --h0: min(58vh, 540px);
  margin-top: calc(6vh * (1 - var(--e)));
  position: relative; overflow: hidden;
  width: calc(var(--w0) + (100vw - var(--w0)) * var(--e));
  height: calc(var(--h0) + (100lvh - var(--h0)) * var(--e));
  border-radius: calc(var(--r) * (1 - var(--p)));
  box-shadow: 0 0 0 calc(10px * (1 - var(--e))) var(--paper), 0 0 0 calc(11px * (1 - var(--e))) var(--rule);
}
.finestra-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(calc(1.18 - var(--p) * .18)); }
.finestra-vano::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--ink-rgb), .82) 0, rgba(var(--ink-rgb), .5) 32%, rgba(var(--ink-rgb), .12) 60%, rgba(var(--ink-rgb), 0) 78%);
  opacity: clamp(0, calc(var(--p) * 2.2 - .9), 1);
}
/* le persiane: lamelle verdi, si aprono ruotando sui cardini esterni */
.finestra-anta {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, #1E4431, #2A5A40 50%, #1E4431);
  box-shadow: inset 0 0 0 6px #1A3A2A;
  transition: none;
}
.finestra-anta--l { left: 0; transform-origin: 0 50%; transform: perspective(1200px) rotateY(max(-100deg, calc(-38deg - var(--p) * 340deg))); }
.finestra-anta--r { right: 0; transform-origin: 100% 50%; transform: perspective(1200px) rotateY(min(100deg, calc(38deg + var(--p) * 340deg))); }
.finestra-anta { opacity: clamp(0, calc(1 - var(--p) * 3.6), 1); }
.finestra-words {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); z-index: 2; color: var(--white); text-align: center;
  opacity: clamp(0, calc(var(--p) * 3 - 1.9), 1); transform: translateY(calc((1 - var(--p)) * 60px));
}
.finestra-title { display: flex; justify-content: center; align-items: flex-end; gap: .22em; font: 400 clamp(64px, 13vw, 240px)/.8 var(--f-tall); text-transform: uppercase; letter-spacing: .005em; }
.finestra-title span:last-child { color: var(--ochre); }
.finestra-text { max-width: 34em; margin: clamp(20px, 3vh, 34px) auto 14px; padding: 0 var(--gutter); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-shadow: 0 1px 12px rgba(var(--ink-rgb), .6); }
.finestra-coords { display: inline-block; color: rgba(255, 255, 255, .92); }
@media (max-width: 899px) {
  .finestra-vano { --w0: 56vw; --h0: 52vh; }
  .finestra-title { flex-direction: column; align-items: center; gap: 0; }
  .finestra-title { font-size: 14.5vw; }
}
@media (prefers-reduced-motion: reduce) {
  .finestra { height: auto; --p: 1; }
  .finestra-stage { position: relative; }
}

/* --- le stanze: la fisarmonica dei viaggi ---------------------------------
   Rifatta il 27 settembre 2026 dopo la registrazione di Piero («completely
   bugged»). Le regole:
   - la larghezza si anima con flex-GROW (un numero, si interpola); da
     flex-basis 84px ad auto il browser saltava;
   - foto e testo hanno una larghezza FISSA (quella della striscia aperta):
     la striscia li scopre, non li ristringe, e il testo non va a capo
     di nuovo a ogni fotogramma dell'animazione;
   - l'etichetta verticale sparisce subito all'apertura e torna solo a
     chiusura finita; le parole compaiono a striscia quasi aperta;
   - si apre con il clic o sostando 200 ms (app.js), non a ogni passaggio. */
.stanze { padding-bottom: calc(var(--sec) * .8); }
.stanze-list { --open-w: calc(min(100vw - 2 * var(--gutter), var(--wrap-wide)) - 4 * (84px + 8px)); display: flex; gap: 8px; height: clamp(460px, 64vh, 680px); }
.stanza { position: relative; flex: 1 1 0; min-width: 84px; overflow: hidden; border-radius: var(--r); background: var(--ink); transition: flex-grow .75s cubic-bezier(.65, 0, .35, 1); }
.stanza.is-open { flex-grow: 14; }
.stanza-body { position: absolute; top: 0; bottom: 0; left: 0; width: var(--open-w); }
.stanza-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.stanza-body::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(var(--ink-rgb), .82) 0, rgba(var(--ink-rgb), .25) 38%, rgba(var(--ink-rgb), 0) 58%), linear-gradient(180deg, rgba(var(--ink-rgb), .45) 0, rgba(var(--ink-rgb), 0) 24%); }
/* la striscia chiusa: la foto scurita, non sfocata (il filtro su una
   foto che cambia larghezza ridisegnava a ogni fotogramma) */
.stanza::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(var(--ink-rgb), .5); transition: opacity .5s var(--ease); pointer-events: none; }
.stanza.is-open::before { opacity: 0; }
.stanza-tab { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-start; padding: 26px 0; color: var(--white); font: italic 400 22px/1 var(--f-serif); transition: opacity .3s var(--ease) .45s; }
.stanza-tab span { writing-mode: vertical-rl; }
.stanza.is-open .stanza-tab { opacity: 0; pointer-events: none; transition: opacity .12s linear 0s; }
.stanza-words { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: min(var(--open-w), 680px); display: flex; flex-direction: column; padding: clamp(22px, 3vw, 40px); color: var(--white); opacity: 0; transition: opacity .15s linear 0s; }
.stanza.is-open .stanza-words { opacity: 1; transition: opacity .45s var(--ease) .5s; }
.stanza-title { font: italic 400 clamp(32px, 3.4vw, 50px)/1.05 var(--f-serif); }
.stanza-facts { margin: auto 0 12px; display: flex; flex-wrap: wrap; font-size: 15px; }
.stanza-facts span { padding-right: 14px; margin-right: 14px; border-right: 1px solid rgba(255, 255, 255, .5); }
.stanza-facts span:last-child { border: 0; margin: 0; padding: 0; }
.stanza-text { max-width: 30em; margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .94); }
@media (prefers-reduced-motion: reduce) { .stanza, .stanza-tab, .stanza-words, .stanza::before { transition: none; } }
@media (max-width: 899px) {
  .stanze-list { flex-direction: column; height: auto; --open-w: 100%; }
  .stanza { flex: none; height: 64px; min-width: 0; transition: height .6s cubic-bezier(.65, 0, .35, 1); }
  .stanza.is-open { height: min(72vh, 560px); }
  .stanza-body { width: 100%; height: min(72vh, 560px); bottom: auto; }
  .stanza-tab { align-items: center; justify-content: flex-start; padding: 0 20px; }
  .stanza-tab span { writing-mode: horizontal-tb; }
  .stanza-words { width: 100%; bottom: auto; height: min(72vh, 560px); }
}

/* --- il quartiere ----------------------------------------------------------- */
.quartiere-hero { position: relative; min-height: 100svh; display: grid; align-items: center; color: var(--paper); overflow: hidden; }
.quartiere-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.quartiere-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(var(--ink-rgb), .5) 0, rgba(var(--ink-rgb), .36) 60%, rgba(var(--ink-rgb), .5) 100%), linear-gradient(270deg, rgba(var(--ink-rgb), .55) 0, rgba(var(--ink-rgb), 0) 38%); }
.quartiere-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(240px, 300px); align-items: center; gap: 32px; container-type: inline-size; }
.quartiere-hero .titolo { font-size: min(clamp(56px, 9vw, 150px), 11cqi); text-align: center; grid-column: 1 / -1; grid-row: 1; line-height: 1; }
.quartiere-col { grid-column: 2; grid-row: 1; align-self: end; transform: translateY(clamp(80px, 12vw, 190px)); font-size: 15px; line-height: 1.55; text-shadow: 0 1px 10px rgba(var(--ink-rgb), .7); }
@media (max-width: 1199px) {
  .quartiere-hero-in { grid-template-columns: 1fr; }
  .quartiere-col { max-width: 30em; margin-inline: auto; text-align: center; }
  .quartiere-col { grid-column: 1; grid-row: 2; transform: none; }
}
.quartiere-rail { background-color: var(--paper-2); padding: clamp(56px, 7vw, 110px) 0 clamp(40px, 5vw, 72px); }
.luoghi { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.luoghi::-webkit-scrollbar { display: none; }
.luogo { flex: 0 0 min(82vw, 470px); scroll-snap-align: start; scroll-margin-left: var(--gutter); background: var(--paper); border-radius: var(--r); padding: clamp(22px, 2.4vw, 34px); text-align: center; display: flex; flex-direction: column; }
.luogo-title { font: 400 clamp(26px, 2.4vw, 36px)/1.08 var(--f-display); text-transform: uppercase; }
.luogo-text { margin: 12px auto 20px; max-width: 26em; font-size: 15px; line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.luogo-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); margin-top: auto; }
.luogo-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.luogo:hover .luogo-media img { transform: scale(1.04); }
.luogo-dist { display: block; margin-top: 16px; color: var(--ink); }
.rail-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.rail-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.rail-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- gli ospiti ------------------------------------------------------------- */
.ospiti-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.score-big { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; line-height: .8; }
.score-big b { font: 400 clamp(150px, 17vw, 270px)/.8 var(--f-tall); letter-spacing: -.01em; }
.score-big span { font: 400 clamp(30px, 3vw, 48px)/1 var(--f-tall); color: var(--ink-2); }
.score-note { max-width: 22em; color: var(--ink-2); margin-bottom: 24px; }
.quotes { display: grid; gap: 0; }
.quotes li { padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--rule); }
.quotes li:last-child { border-bottom: 1px solid var(--rule); }
.quotes blockquote { margin: 0; }
.quotes blockquote p { font: italic 400 clamp(22px, 2.1vw, 30px)/1.35 var(--f-serif); margin: 0; }
.quote-who { margin: 14px 0 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 899px) { .ospiti-grid { grid-template-columns: 1fr; } }

/* --- la chiusa -------------------------------------------------------------- */
.chiusa { position: relative; background: var(--night); color: var(--paper); padding: clamp(110px, 16vw, 220px) 0; overflow: hidden; text-align: center; }
.chiusa-media { position: absolute; inset: 0; }
.chiusa-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: .42; }
.chiusa-in { position: relative; }
.chiusa .occhiello { align-items: center; }
.chiusa-text { max-width: 32em; margin: 22px auto 0; font-size: 18px; color: rgba(var(--paper-rgb), .92); }
.chiusa .titolo { max-width: 16em; margin-inline: auto; }

/* --- l'apertura delle pagine interne ----------------------------------------- */
.pagehero { position: relative; min-height: min(86svh, 820px); display: grid; align-items: end; color: var(--paper); overflow: hidden; padding: calc(var(--header-h) + 60px) 0 clamp(48px, 7vw, 96px); }
.pagehero-media { position: absolute; inset: 0; }
.pagehero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pagehero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--ink-rgb), .86) 0, rgba(var(--ink-rgb), .55) 38%, rgba(var(--ink-rgb), .12) 70%), linear-gradient(180deg, rgba(var(--ink-rgb), .45) 0, rgba(var(--ink-rgb), 0) 22%); }
.pagehero-in { position: relative; z-index: 1; }
.pagehero .breadcrumb { margin-bottom: 28px; color: rgba(var(--paper-rgb), .92); }
.pagehero-title { font: 400 clamp(40px, 6.2vw, 96px)/1.03 var(--f-display); text-transform: uppercase; max-width: 13em; text-wrap: balance; }
.pagehero-text { max-width: 34em; margin-top: 20px; font-size: 19px; line-height: 1.5; color: rgba(var(--paper-rgb), .94); }
.pagehero-big { position: absolute; right: var(--gutter); bottom: -.08em; z-index: 1; margin: 0; font: 400 clamp(90px, 16vw, 300px)/.8 var(--f-tall); text-transform: uppercase; color: rgba(var(--paper-rgb), .16); pointer-events: none; }
.no-film .pagehero { min-height: min(72svh, 700px); }

/* --- testo a due colonne --------------------------------------------------- */
.testo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 100px); }
.testo-body p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 899px) { .testo-grid { grid-template-columns: 1fr; } }

/* --- le stanze una per una ------------------------------------------------- */
.riga { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.riga + .riga { margin-top: clamp(72px, 9vw, 150px); }
.riga--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.riga--rev .riga-media { order: 2; }
.riga-media { position: relative; }
.riga-media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--r); }
.riga-media2 { position: absolute; right: -4%; bottom: -12%; width: 38%; border: 8px solid var(--paper); border-radius: var(--r); background: var(--paper); }
.riga--rev .riga-media2 { right: auto; left: -4%; }
.riga-media2 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: var(--pos, 50% 50%); }
.riga-n { font: 400 64px/1 var(--f-tall); color: var(--oak); margin-bottom: 10px; }
.riga-title { font: 400 clamp(34px, 4vw, 60px)/1.05 var(--f-display); text-transform: uppercase; margin-bottom: 18px; }
.riga-words > p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.riga-list { margin-top: 22px; border-top: 1px solid var(--rule); }
.riga-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
@media (max-width: 899px) {
  .riga, .riga--rev { grid-template-columns: 1fr; }
  .riga--rev .riga-media { order: 0; }
  .riga-media2 { width: 42%; bottom: -8%; }
  .riga-words { margin-top: 40px; }
}

/* --- le dotazioni --------------------------------------------------------- */
.dot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.dot-grid li { display: grid; gap: 6px; padding: clamp(20px, 2.4vw, 32px); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dot-grid i { width: 30px; height: 30px; color: var(--ink); margin-bottom: 10px; }
.dot-grid i svg { width: 30px; height: 30px; }
.dot-grid b { font-weight: 500; font-size: 17px; }
.dot-grid span { font-size: 15px; color: var(--ink-2); }
@media (max-width: 999px) { .dot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- i luoghi in griglia ---------------------------------------------------- */
.luoghi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px); }
.luogo--grid { flex: none; padding: 0; background: none; text-align: left; }
.luogo--grid .luogo-media { order: -1; margin: 0 0 14px; }
.luogo--grid .luogo-dist { margin: 0 0 10px; color: var(--ochre-ink); }
.luogo--grid .luogo-text { margin: 10px 0 0; min-height: 0; }
.fine-note { margin-top: 48px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 999px) { .luoghi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .luoghi-grid { grid-template-columns: 1fr; } }

/* --- come arrivare ------------------------------------------------------------ */
.arrivare-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); }
.vie li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 24px 0; border-top: 1px solid var(--rule); }
.vie li:last-child { border-bottom: 1px solid var(--rule); }
.via-mezzo { margin: 0; font: italic 400 26px/1.2 var(--f-serif); }
.via-tempo { margin: 0; align-self: center; }
.vie li p:last-child { grid-column: 1 / -1; color: var(--ink-2); margin: 0; }
@media (max-width: 899px) { .arrivare-grid { grid-template-columns: 1fr; } }

/* --- le regole -------------------------------------------------------------- */
.regole-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); }
.regole-list { margin: 0; border-top: 1px solid var(--rule); }
.regole-list div { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 2.4fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.regole-list dt { font: italic 400 20px/1.3 var(--f-serif); }
.regole-list dd { margin: 0; color: var(--ink-2); }
@media (max-width: 899px) { .regole-grid { grid-template-columns: 1fr; } .regole-list div { grid-template-columns: 1fr; gap: 6px; } }

/* --- le domande ---------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { flex: 0 0 22px; width: 22px; height: 22px; transition: transform .3s var(--ease); }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { color: var(--ink-2); max-width: 40em; padding-bottom: 20px; margin: 0; }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; } }

/* --- il testo legale --------------------------------------------------------- */
.legale-in { max-width: 760px; }
.legale-in h2 { font: 400 28px/1.15 var(--f-display); text-transform: uppercase; margin: 44px 0 14px; }
.legale-in h2:first-child { margin-top: 0; }
.legale-in p { color: var(--ink-2); line-height: 1.65; }

/* 06-forms.css */
/* ============================================================
   La richiesta di disponibilita'. Campi a filetto con l'etichetta
   flottante: il controllo PRIMA dell'etichetta, perche' `~` guarda solo
   in avanti.
   ============================================================ */
.prenota-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
@media (max-width: 899px) { .prenota-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; }
.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 18px/1.3 var(--f-sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), .45); border-radius: 0;
  padding: 26px 0 10px; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 60%, calc(100% - 6px) 60%; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.field label { position: absolute; left: 0; top: 26px; font-size: 18px; color: var(--ink-2); pointer-events: none; transform-origin: 0 0; transition: transform .2s var(--ease), color .2s; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label,
.field select ~ label, .field input[type="date"] ~ label { transform: translateY(-22px) scale(.78); color: var(--ink); }
.field.is-bad input, .field.is-bad select { border-bottom-color: #9B2C1F; }
.field-err { margin: 6px 0 0; font-size: 14px; color: #9B2C1F; min-height: 0; }
.field-err:empty { display: none; }
.hp { position: absolute; left: -9999px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.check a { color: var(--ink); }
.form-ok { padding: 16px 18px; background: var(--ink); color: var(--paper); border-radius: var(--r); }
.form-note { font-size: 14px; color: var(--ink-2); }
.prenota-side { padding: clamp(26px, 3vw, 40px); background: var(--paper-2); border-radius: var(--r); }
.prenota-side .titolo { margin-bottom: 26px; }
.contatti { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.contatti li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.contatti i { grid-row: span 2; width: 22px; height: 22px; }
.contatti a { text-decoration: none; overflow-wrap: anywhere; }
.contatti a:hover { text-decoration: underline; }
.contatti span { font-size: 14px; color: var(--ink-2); }
.side-booking { margin: 26px 0 22px; }
.side-booking p { color: var(--ink-2); }