/* ============================================================
   DOMUS MARINA — Componenti
   ============================================================ */

/* L'attributo hidden vale display:none, ma arriva dal foglio UA e perde
   contro qualsiasi .classe{display:...} nostra. Va riaffermato a mano,
   o menu e lightbox restano aperti sopra la pagina. */
[hidden] { display: none !important; }

/* ============ PRELOADER ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--sea-900);
  display: grid;
  place-items: center;
  transition: clip-path var(--dur-cinema) var(--ease-out);
  clip-path: inset(0 0 0 0);
}
.loader__inner {
  text-align: center;
  color: var(--sand-50);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.loader__mark {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.loader__bar {
  width: min(220px, 40vw);
  height: 1px;
  background: rgba(251, 249, 245, 0.22);
  margin-inline: auto;
  overflow: hidden;
}
.loader__fill {
  height: 100%;
  width: 100%;
  background: var(--terra-300);
  transform: scaleX(0);
  transform-origin: left;
}
.loader.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.loader.is-done .loader__inner {
  opacity: 0;
  transform: translateY(-1.5rem);
}

/* ============ CURSORE CUSTOM ============ */
/* Solo su dispositivi con puntatore fine: mai su touch. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: var(--r-full);
  background: var(--sand-50);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width var(--dur-mid) var(--ease-out),
              height var(--dur-mid) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover {
  width: var(--cursor-size-hover);
  height: var(--cursor-size-hover);
}
.cursor__label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea-900);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
}
.cursor.is-hover .cursor__label { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ============ HEADER ============ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* Sopra l'hero: trasparente, testo chiaro */
.header--over { color: var(--sand-50); }
/* Dopo l'hero: fondo sabbia, testo scuro */
.header.is-pinned {
  background: rgba(251, 249, 245, 0.88);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--sh-1);
  color: var(--fg);
}
/* Nasconde l'header scrollando in giù, lo richiama scrollando su */
.header.is-hidden { transform: translateY(-100%); }

.brand {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.6em;
  /* Il testo è alto 28px: senza questo, il logo è un bersaglio da 28px. */
  min-height: 44px;
  margin-left: calc(var(--sp-2) * -1);
  padding-inline: var(--sp-2);
}
.brand__dot {
  width: 4px; height: 4px;
  border-radius: var(--r-full);
  background: var(--terra-500);
  flex: none;
}
.brand__sub {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.2em;
  opacity: 0.6;
  display: block;
  margin-top: 3px;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}
@media (min-width: 62rem) { .nav { display: flex; } }

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding-block: var(--sp-2);
  cursor: pointer;
}
/* Underline che cresce da sinistra */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-current::after { transform: scaleX(1); background: var(--terra-500); }

/* ---- Sottomenu delle dimore (desktop) ----
   Niente JS: :focus-within apre il pannello anche da tastiera, e il
   link padre resta un link vero verso la sezione. Un <button> che fa
   da toggle costringerebbe a reimplementare a mano ciò che il browser
   già sa fare. */
.nav__group { position: relative; }
.nav__link--has-sub { display: inline-flex; align-items: center; gap: var(--sp-2); }
.nav__chev {
  transition: transform var(--dur-mid) var(--ease-out);
  flex: none;
  opacity: 0.7;
}
.nav__group:hover .nav__chev,
.nav__group:focus-within .nav__chev { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--sp-3);
  min-width: 17rem;
  padding: var(--sp-3);
  background: var(--sand-50);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
}
.nav__group:hover .subnav,
.nav__group:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
/* Ponte invisibile sul gap: senza, il menu si chiude mentre ci vai sopra */
.subnav::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--sp-3) * -1);
  height: var(--sp-3);
}

.subnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.subnav__link:hover, .subnav__link:focus-visible { background: var(--sand-100); }
.subnav__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; }
.subnav__meta {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.subnav__all {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  justify-content: flex-start;
  gap: var(--sp-2);
  color: var(--accent);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.header__actions { display: flex; align-items: center; gap: var(--sp-4); }

/* Su telefono nell'header non ci stanno logo + CTA + burger: il bottone
   ha white-space:nowrap, non si comprime, e spingeva il burger fuori
   schermo (misurato: 547px su un viewport da 391px). L'overflow-x:hidden
   del body lo nascondeva invece di farlo notare — il menu era irraggiungibile.
   La CTA su mobile ce l'ha già il dock in fondo. */
@media (max-width: 61.99rem) {
  .header__actions > .btn { display: none; }
}

/* ============ BOTTONI ============ */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Riempimento che sale dal basso all'hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border: 1px solid currentColor;
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--white); border-color: var(--accent); }

.btn--light { --btn-bg: var(--sand-50); --btn-fg: var(--sea-900); }
.btn--light:hover, .btn--light:focus-visible { color: var(--white); }

.btn--lg { min-height: 3.5rem; padding-inline: var(--sp-7); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__text { opacity: 0; }
.btn__spinner {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
}
.btn.is-loading .btn__spinner { display: grid; }
.btn__spinner svg { animation: spin 800ms linear infinite; }

/* Link testuale con freccia */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;   /* misurava 40px: sotto il minimo touch */
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: var(--sp-2);
  cursor: pointer;
  color: var(--accent);
}
.link-arrow svg {
  transition: transform var(--dur-mid) var(--ease-out);
  flex: none;
}
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(5px); }

/* ============ MENU MOBILE ============ */
.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;   /* target touch pieno */
  margin-right: calc(var(--sp-3) * -1);
  z-index: var(--z-overlay);
  position: relative;
  cursor: pointer;
}
@media (min-width: 62rem) { .burger { display: none; } }

.burger__box { width: 22px; height: 12px; position: relative; }
.burger__line {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { bottom: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--sea-900);
  color: var(--sand-50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) var(--gutter) var(--sp-7);
  padding-bottom: max(var(--sp-7), env(safe-area-inset-bottom));
  clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
  transition: clip-path var(--dur-slow) var(--ease-in-out);
  pointer-events: none;
  overflow-y: auto;
}
.menu.is-open {
  clip-path: circle(150% at calc(100% - 3rem) 2.5rem);
  pointer-events: auto;
}
.menu__list { list-style: none; padding: 0; margin: 0 0 var(--sp-8); }
.menu__item { overflow: hidden; }
.menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 4rem);
  font-weight: 300;
  line-height: 1.25;
  padding-block: var(--sp-2);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.menu.is-open .menu__link { transform: translateY(0); }
.menu__link:hover, .menu__link:focus-visible { color: var(--terra-300); }
.menu__link .em { color: var(--terra-300); }

/* Stagger d'entrata delle voci */
.menu.is-open .menu__item:nth-child(1) .menu__link { transition-delay: 90ms; }
.menu.is-open .menu__item:nth-child(2) .menu__link { transition-delay: 140ms; }
.menu.is-open .menu__item:nth-child(3) .menu__link { transition-delay: 190ms; }
.menu.is-open .menu__item:nth-child(4) .menu__link { transition-delay: 240ms; }
.menu.is-open .menu__item:nth-child(5) .menu__link { transition-delay: 290ms; }

/* Sottovoci delle dimore nel menu mobile: pillole compatte, così
   dieci destinazioni stanno in uno schermo senza diventare un elenco. */
.menu__sub {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out) 300ms,
              transform var(--dur-slow) var(--ease-out) 300ms;
}
.menu.is-open .menu__sub { opacity: 1; transform: translateY(0); }
.menu__sub a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-on-deep);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--fg-on-deep-muted);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.menu__sub a:hover, .menu__sub a:focus-visible {
  background: var(--terra-300);
  border-color: var(--terra-300);
  color: var(--sea-900);
}
/* Nel menu mobile il titolo "Le Dimore" è più contenuto: deve lasciare
   spazio alle cinque pillole sotto senza sfondare lo schermo. */
.menu__item--group .menu__link { font-size: clamp(1.75rem, 8vw, 2.75rem); }

.menu__foot {
  border-top: 1px solid var(--border-on-deep);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 340ms;
}
.menu.is-open .menu__foot { opacity: 1; }
.menu__foot a { font-size: var(--fs-sm); color: var(--fg-on-deep-muted); }
.menu__foot a:hover { color: var(--sand-50); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--sea-900);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transform-origin: center 60%;
  will-change: transform;
}
/* Ken Burns lentissimo — 20s, impercettibile ma vivo */
.hero.is-ready .hero__img {
  animation: kenburns 24s var(--ease-in-out) infinite alternate;
}
/* Doppio gradiente: verticale per il testo, radiale per la vignettatura */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(14, 59, 62, 0.86) 0%,
      rgba(14, 59, 62, 0.42) 32%,
      rgba(14, 59, 62, 0.10) 62%,
      rgba(14, 59, 62, 0.34) 100%),
    radial-gradient(120% 80% at 50% 50%,
      transparent 40%, rgba(14, 59, 62, 0.4) 100%);
}
.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(5rem, 12vh, 9rem);
  padding-top: calc(var(--header-h) + var(--sp-7));
  color: var(--sand-50);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  color: rgba(251, 249, 245, 0.78);
}
.hero__eyebrow::before {
  content: '';
  width: clamp(1.5rem, 5vw, 3rem);
  height: 1px;
  background: var(--terra-300);
  flex: none;
}
.hero__title {
  max-width: 14ch;
  margin-bottom: var(--sp-5);
}
.hero__title .em { color: var(--terra-300); }
.hero__lede {
  max-width: 34rem;
  color: rgba(251, 249, 245, 0.82);
  font-weight: 300;
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Meta in basso a destra: pillole informative */
.hero__meta {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(5rem, 12vh, 9rem);
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-end;
  text-align: right;
}
@media (min-width: 62rem) { .hero__meta { display: flex; } }
.hero__meta-item {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.72);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(251, 249, 245, 0.2);
  border-radius: var(--r-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Indicatore di scroll */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(251, 249, 245, 0.6);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-cue__line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(251,249,245,0.7));
  overflow: hidden;
  position: relative;
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--terra-300);
  animation: cue-drop 2.2s var(--ease-in-out) infinite;
}

/* ============ MANIFESTO ============ */
.manifesto__quote {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  max-width: 24ch;
}
.manifesto__quote .em { color: var(--accent); }

.manifesto__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 62rem) {
  .manifesto__grid { grid-template-columns: 1.15fr 1fr; gap: var(--sp-9); }
  .manifesto__aside { padding-top: var(--sp-4); }
}

/* Riga di dati — cifre grandi */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--sea-900);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
.stat__unit { font-size: 0.42em; color: var(--accent); letter-spacing: 0.05em; }
.stat__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  line-height: 1.5;
}

/* ============ MARQUEE ============ */
.marquee {
  overflow: hidden;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--border);
  display: flex;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-6);
  padding-right: var(--sp-6);
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--stone-500);
  white-space: nowrap;
}
.marquee__sep {
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: var(--terra-500);
  flex: none;
}

/* ============ DIMORE ============ */
/* Desktop: scroll orizzontale guidato dallo scroll verticale (sticky pin).
   Mobile: stack verticale — mai swipe orizzontale sul contenuto principale. */
.dimore { background: var(--bg-alt); }

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
@media (min-width: 62rem) {
  .rail-pin { height: 320vh; position: relative; }
  .rail-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .rail {
    flex-direction: row;
    gap: var(--sp-6);
    padding-inline: var(--gutter);
    will-change: transform;
  }
}

.room {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.room:hover { box-shadow: var(--sh-3); }
@media (min-width: 62rem) {
  .room { flex: none; width: min(30rem, 34vw); height: 74svh; }
}

.room__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  flex: none;
}
@media (min-width: 62rem) { .room__media { aspect-ratio: auto; flex: 1 1 auto; } }
.room__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-cinema) var(--ease-out);
}
.room:hover .room__img { transform: scale(1.09); }
.room__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,59,62,0.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.room:hover .room__media::after { opacity: 1; }

.room__badge {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 2;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: rgba(251, 249, 245, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--sea-900);
}

.room__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: none;
}
.room__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.room__name { font-size: var(--fs-xl); }
.room__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--sea-900);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.room__price small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  letter-spacing: 0.06em;
  display: block;
  text-align: right;
  margin-top: 2px;
}
.room__desc {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.65;
}
.room__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  padding: 0;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.room__spec {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-transform: uppercase;
}
.room__spec svg { color: var(--accent); flex: none; }

/* L'intera card è cliccabile, ma il nome resta il link semantico */
.room__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* La card porta a una pagina: bisogna che si veda. Un invito che
   compare all'hover, e resta sempre visibile su touch (dove l'hover
   non esiste e l'affordance sparirebbe del tutto). */
.room__cta {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  min-height: 36px;
  border-radius: var(--r-full);
  background: rgba(251, 249, 245, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--sea-900);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.room:hover .room__cta,
.room:focus-within .room__cta { opacity: 1; transform: translateY(0); }
.room__cta svg { transition: transform var(--dur-mid) var(--ease-out); }
.room:hover .room__cta svg { transform: translateX(3px); }

@media (hover: none), (pointer: coarse) {
  .room__cta { opacity: 1; transform: none; }
}

/* Barra di progresso del rail */
.rail-progress {
  display: none;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-inline: var(--gutter);
}
@media (min-width: 62rem) { .rail-progress { display: flex; } }
.rail-progress__track {
  flex: 1;
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.rail-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--sea-900);
  transform: scaleX(0);
  transform-origin: left;
}
.rail-progress__count {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* ============ SOSTENIBILITÀ — sticky media + testo scorrevole ============ */
/* ATTENZIONE all'ordine. Prima la regola base, poi il media query.
   Erano invertiti: `position: relative` della base sovrascriveva
   `position: sticky` del MQ (stessa specificità, vinceva l'ultima),
   e l'immagine restava ferma e alta 100svh dentro una colonna molto
   più alta → il buco vuoto a sinistra. */
.sticky-split { position: relative; }

.sticky-split__grid { display: grid; }

.sticky-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-7);
  background: var(--sea-800);
}

@media (min-width: 62rem) {
  .sticky-split__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
    align-items: start;
  }
  .sticky-split__media {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    height: calc(100svh - var(--header-h) - var(--sp-8));
    aspect-ratio: auto;
    margin-bottom: 0;
  }
}

/* Tre foto sovrapposte: una per pilastro, in dissolvenza incrociata.
   Riempie la colonna e dà un motivo al movimento invece di decorarlo. */
.sticky-split__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-cinema) var(--ease-out),
              transform var(--dur-cinema) var(--ease-out);
}
.sticky-split__img.is-active { opacity: 1; transform: scale(1); }

/* Didascalia che segue la foto attiva */
.sticky-split__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  background: linear-gradient(to top, rgba(14, 59, 62, 0.9), transparent);
  color: var(--sand-50);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.sticky-split__cap-num { color: var(--terra-300); font-variant-numeric: tabular-nums; }
.sticky-split__cap-txt { transition: opacity var(--dur-mid) var(--ease-out); }
.sticky-split__cap.is-swapping .sticky-split__cap-txt { opacity: 0; }

.pillars { display: flex; flex-direction: column; }
.pillar {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--border-on-deep);
  display: grid;
  gap: var(--sp-4);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar__head { display: flex; align-items: center; gap: var(--sp-4); }
.pillar__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border-on-deep);
  border-radius: var(--r-full);
  color: var(--terra-300);
  flex: none;
}
.pillar__title { font-size: var(--fs-xl); }
.pillar__text { color: var(--fg-on-deep-muted); font-weight: 300; }

/* ============ TERRITORIO ============ */
.places {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .places { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .places { grid-template-columns: repeat(12, 1fr); } }

.place {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  display: flex;
  align-items: flex-end;
  min-height: 18rem;
  isolation: isolate;
  background: var(--sea-900);
}
@media (min-width: 62rem) {
  .place--xl { grid-column: span 7; min-height: 30rem; }
  .place--md { grid-column: span 5; min-height: 30rem; }
  .place--sm { grid-column: span 4; min-height: 22rem; }
}
.place__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--dur-cinema) var(--ease-out);
}
.place:hover .place__img { transform: scale(1.11); }
.place::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(14, 59, 62, 0.9) 0%,
    rgba(14, 59, 62, 0.45) 45%,
    rgba(14, 59, 62, 0.05) 100%);
}
.place__body {
  padding: var(--sp-5);
  color: var(--sand-50);
  width: 100%;
}
.place__dist {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra-300);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.place__name { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.place__text {
  font-size: var(--fs-sm);
  color: rgba(251, 249, 245, 0.75);
  line-height: 1.6;
  max-width: 34ch;
}

/* ============ BANDA PANORAMICA ============ */
/* L'immagine grande che ancora la sezione prima della griglia.
   Il contenitore è il pezzo osservato e non si clippa mai (vedi la
   nota sul curtain in animations.css): qui c'è solo overflow:hidden,
   che è un clip dell'antenato e non tocca il riquadro misurato. */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 2;
  margin-bottom: var(--sp-8);
  background: var(--sea-900);
  isolation: isolate;
}
@media (min-width: 48rem) { .band { aspect-ratio: 16 / 7; } }
@media (min-width: 62rem) { .band { aspect-ratio: 21 / 8; } }

.band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sovrascrive lo scale di default della parallasse: qui basta poco,
     il resto della corsa lo fa --py. */
  --pscale: 1.16;
}
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14,59,62,0.75) 0%, rgba(14,59,62,0.12) 55%, transparent 100%);
}
.band__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--sp-5);
  color: var(--sand-50);
}
@media (min-width: 62rem) { .band__body { padding: var(--sp-7); } }
.band__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
  max-width: 18ch;
}
.band__title .em { color: var(--terra-300); }
.band__text {
  font-size: var(--fs-sm);
  color: rgba(251, 249, 245, 0.8);
  max-width: 44ch;
  line-height: 1.6;
}

/* ============ ESPERIENZE ============ */
.exp-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 62rem) { .exp-grid { grid-template-columns: repeat(4, 1fr); } }

.exp {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  background: var(--sand-200);
}
/* Lo span su 2 righe vale solo dove la griglia ha 4 colonne:
   su mobile resterebbe una card tozza in un layout a 2 colonne. */
.exp--tall { aspect-ratio: 3 / 4; }
@media (min-width: 62rem) {
  .exp--tall { grid-row: span 2; aspect-ratio: auto; }
}
.exp__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-cinema) var(--ease-out);
}
.exp:hover .exp__img { transform: scale(1.07); }
.exp__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(14,59,62,0.85), transparent);
  color: var(--sand-50);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  transform: translateY(0);
}

/* Servizi inclusi */
.included {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
@media (min-width: 48rem) { .included { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .included { grid-template-columns: repeat(6, 1fr); } }
.inc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}
.inc__icon { color: var(--accent); flex: none; }
.inc__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* ============ FORM PRENOTAZIONE ============ */
.book__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 62rem) {
  .book__grid { grid-template-columns: 0.85fr 1fr; gap: var(--sp-9); }
}

.book__terms { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-4); }
.book__term {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-on-deep-muted);
  line-height: 1.6;
}
.book__term svg { color: var(--terra-300); flex: none; margin-top: 4px; }

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); position: relative; }
.field__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-deep-muted);
}
.field__req { color: var(--terra-300); margin-left: 2px; }

.field__input {
  width: 100%;
  min-height: var(--input-h);
  padding: var(--sp-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-on-deep);
  color: var(--sand-50);
  font-size: var(--fs-base);
  border-radius: 0;   /* iOS aggiunge un raggio di default */
  transition: border-color var(--dur-mid) var(--ease-out);
  appearance: none;
}
.field__input::placeholder { color: rgba(251, 249, 245, 0.32); }
.field__input:hover { border-color: rgba(251, 249, 245, 0.45); }
.field__input:focus { outline: none; border-color: var(--terra-300); }
.field__input:focus-visible { outline: none; }
/* Il focus qui è espresso dalla linea che cresce, non da un anello */
.field__line {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--terra-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.field__input:focus ~ .field__line { transform: scaleX(1); }

textarea.field__input { min-height: 7rem; resize: vertical; line-height: 1.6; }
select.field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D9AE8A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: var(--sp-6);
  cursor: pointer;
}
select.field__input option { background: var(--sea-900); color: var(--sand-50); }
/* Il date picker nativo ha l'icona scura su fondo scuro */
.field__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(0.3);
  opacity: 0.7;
  cursor: pointer;
}

.field__help {
  font-size: var(--fs-xs);
  color: rgba(251, 249, 245, 0.5);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.field__error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--terra-300);
  letter-spacing: 0.02em;
}
.field.has-error .field__error { display: flex; }
.field.has-error .field__input { border-color: var(--terra-300); }
.field.has-error .field__help { display: none; }

/* Il consenso privacy non è un .field: il suo errore va abilitato a parte. */
.consent.has-error .field__error { display: flex; }
.consent.has-error .consent__box { border-color: var(--terra-300); }

/* Consenso privacy */
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; }
.consent__box {
  appearance: none;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 3px;
  border: 1px solid var(--border-on-deep);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.consent__box:checked { background: var(--terra-500); border-color: var(--terra-500); }
.consent__box:checked::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--sea-900);
  border-bottom: 1.5px solid var(--sea-900);
  transform: rotate(-45deg) translate(1px, -1px);
}
/* Il target reale è l'etichetta: >=44px cliccabili */
.consent__label {
  font-size: var(--fs-xs);
  color: var(--fg-on-deep-muted);
  line-height: 1.6;
  cursor: pointer;
  padding-block: 2px;
}
.consent__label a { color: var(--terra-300); text-decoration: underline; text-underline-offset: 3px; }

/* Esito invio — annunciato agli screen reader */
.form__status {
  display: none;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form__status.is-visible { display: flex; }
.form__status--ok { background: rgba(47, 107, 79, 0.18); border: 1px solid rgba(127, 169, 170, 0.4); color: var(--sand-50); }
.form__status--err { background: rgba(168, 53, 43, 0.16); border: 1px solid var(--terra-500); color: var(--sand-50); }
.form__status svg { flex: none; margin-top: 3px; }

/* ============ BARRA STICKY PRENOTA (mobile) ============ */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.dock.is-visible { transform: translateY(0); }
@media (min-width: 62rem) { .dock { display: none; } }
.dock__info { line-height: 1.3; min-width: 0; }
.dock__from { font-size: var(--fs-xs); color: var(--fg-subtle); letter-spacing: 0.08em; text-transform: uppercase; }
.dock__price { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--sea-900); }
.dock .btn { flex: none; }

/* Riserva spazio per il dock, così il footer non ci finisce sotto */
@media (max-width: 61.99rem) {
  body.has-dock { padding-bottom: 4.75rem; }
}

/* ============ WHATSAPP FAB ============ */
.wa {
  position: fixed;
  right: var(--gutter);
  bottom: var(--sp-5);
  z-index: var(--z-sticky);
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--sea-900);
  color: var(--sand-50);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-spring),
              background-color var(--dur-mid) var(--ease-out);
}
.wa.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.wa:hover { background: var(--accent); }
@media (max-width: 61.99rem) {
  .wa { bottom: calc(4.75rem + var(--sp-3) + env(safe-area-inset-bottom)); }
}

/* ============ FOOTER ============ */
.footer { background: var(--sea-900); color: var(--fg-on-deep); padding-block: var(--sp-9) var(--sp-6); }
.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-8); } }

.footer__brand {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer__tag { color: var(--fg-on-deep-muted); font-weight: 300; max-width: 26rem; }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--terra-300);
  margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--sp-1); }
.footer__list a, .footer__list address {
  color: var(--fg-on-deep-muted);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.6;
  transition: color var(--dur-fast) var(--ease-out);
}
/* I link del footer misuravano 28px in altezza. Il ritmo della lista
   viene dai target da 44px, non da un gap: così il pollice li prende. */
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__list address { display: block; padding-block: var(--sp-2); }
.footer__list a:hover { color: var(--sand-50); }

.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social a {
  width: 44px; height: 44px;
  border: 1px solid var(--border-on-deep);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--fg-on-deep-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover { color: var(--sea-900); background: var(--terra-300); border-color: var(--terra-300); }

.footer__bar {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-on-deep);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(251, 249, 245, 0.45);
  letter-spacing: 0.04em;
}
.footer__bar a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-1);
}
.footer__bar a:hover { color: var(--sand-50); }

/* ============ LIGHTBOX ============ */
.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(14, 59, 62, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb__img {
  max-width: min(92vw, 68rem);
  max-height: 82svh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  transform: scale(0.94);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: var(--sh-3);
}
.lb.is-open .lb__img { transform: scale(1); }
.lb__cap {
  margin-top: var(--sp-4);
  color: var(--fg-on-deep-muted);
  font-size: var(--fs-sm);
  text-align: center;
  letter-spacing: 0.06em;
}
.lb__close {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  top: max(var(--sp-5), env(safe-area-inset-top));
  width: 48px; height: 48px;
  border: 1px solid var(--border-on-deep);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--sand-50);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.lb__close:hover { background: rgba(251, 249, 245, 0.12); transform: rotate(90deg); }
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 1px solid var(--border-on-deep);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--sand-50);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lb__nav:hover { background: rgba(251, 249, 245, 0.12); }
.lb__nav--prev { left: var(--sp-4); }
.lb__nav--next { right: var(--sp-4); }
@media (max-width: 40rem) {
  .lb__nav--prev { left: var(--sp-2); }
  .lb__nav--next { right: var(--sp-2); }
}