/* Mirror Mirror — foglio di stile condiviso
   Layout: un solo asse verticale al centro della pagina. Ogni elemento nasce da lì e si apre
   verso i lati, come un riflesso; le fasce avorio si aprono dall'asse quando entrano in scena. */
:root {
  /* Colore — Brand Book Ed. 02, pagg. 16–18. Nero e bianco puri vietati. */
  --navy: #101A29;        /* dominante, ~60% */
  --ivory: #EFEAD9;       /* respiro e testo su navy, ~30% */
  --gold: #B9995C;        /* filetti, occhielli, numeri: mai paragrafi, < 10% */
  --sand: #D59075;        /* calore, < 2%: varianti di testata e piede in prova */
  --bronze: #7A5F33;      /* l'oro dei testi su fondo chiaro */
  --bronze-dark: #5A4524; /* bronzo scurito (non nel Brand Book): i testi della hero sulla foto chiara, 5:1 */
  --ivory-shade: #E3DCC6; /* filetti su avorio */
  --warm-grey: #6B6559;   /* didascalie su avorio */

  /* Tipografia — due voci, nessuna terza */
  --font-display: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-text: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --fs-title: clamp(34px, 4.5vw + 14px, 64px);
  --fs-name: clamp(30px, 2.2vw + 14px, 44px);
  --fs-cat: clamp(32px, 2vw + 20px, 52px);
  --fs-body: clamp(16px, 0.2vw + 15.2px, 18px);
  --fs-caption: 13px;
  --fs-eyebrow: 11px;
  --track-eyebrow: 0.32em;

  /* Spazio e movimento */
  --gutter: clamp(16px, 5vw, 72px);
  --maxw: 1280px;
  --section: clamp(88px, 12vw, 176px);
  --sec-top: clamp(72px, 10vw, 144px);      /* dall'inizio di ogni sezione alla prima scritta: uguale ovunque */
  --thread-gap: clamp(56px, 7vw, 104px);    /* sopra e sotto il filo tra Filosofia e Incantesimi */
  --header-h: 78px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (min-width: 900px) { :root { --header-h: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 70; background: var(--navy);
}
::selection { background: var(--gold); color: var(--navy); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: 8px; z-index: 100; transform: translate(-50%, -160%);
  background: var(--ivory); color: var(--navy); padding: 12px 20px;
  font: 500 12px/1 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
}
.skip:focus-visible { transform: translate(-50%, 0); }

:focus-visible { outline: 1px solid var(--ivory); outline-offset: 5px; }
.band--ivory :focus-visible { outline-color: var(--navy); }

/* ---------- Tipografia di sistema ---------- */
.eyebrow {
  display: block;
  font: 500 var(--fs-eyebrow)/1.6 var(--font-text);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-right: calc(-1 * var(--track-eyebrow)); /* compensa lo spazio finale della spaziatura */
}
.band--ivory .eyebrow { color: var(--bronze); }
.title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.title .ln { display: block; padding-block: 0.08em; }
.lede { max-width: 38ch; }
.caption { font-size: var(--fs-caption); line-height: 1.5; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Pulsante: un solo invito, «Prenota» ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 34px;
  border: 1px solid var(--gold);
  border-radius: 0;
  color: var(--ivory);
  background: transparent;
  font: 500 12px/1 var(--font-text);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  isolation: isolate;
  transition: color 0.55s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn > span { position: relative; z-index: 1; margin-right: -0.3em; }
.btn::before { /* all'hover l'oro si apre dall'asse del pulsante */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 0.65s var(--ease);
}
@media (hover: hover) {
  .btn:hover { color: var(--navy); }
  .btn:hover::before { transform: scaleX(1); }
}
.btn:active { color: var(--navy); }
.btn:active::before { transform: scaleX(1); transition-duration: 0.2s; }
.band--ivory .btn { color: var(--navy); }
.btn--sm { min-height: 44px; padding: 0 26px; font-size: 11px; }
.btn--block { display: flex; width: 100%; }

.link {
  position: relative; display: inline-block; text-decoration: none;
  font: 500 12px/1 var(--font-text); letter-spacing: 0.24em; text-transform: uppercase;
  padding-block: 14px;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0.24em; bottom: 8px; height: 1px;
  background: var(--gold); transform: scaleX(0.35); transform-origin: 50% 50%;
  transition: transform 0.6s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.band--ivory .link { color: var(--navy); }

/* Filetto verticale: il filo dell'asse */
.thread { display: block; width: 1px; margin-inline: auto; background: var(--gold); transform-origin: 50% 0; }
.thread--section { height: clamp(64px, 10vh, 120px); margin-bottom: var(--thread-gap); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--navy);
}
.site-header .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h);
}
.brand { grid-column: 2; display: block; width: 120px; text-decoration: none; }
.brand img { width: 100%; height: auto; }
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav--left { grid-column: 1; justify-self: start; }
.nav--right { grid-column: 3; justify-self: end; }
.nav a:not(.btn), .menu-toggle {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none;
  font: 500 11px/1 var(--font-text); letter-spacing: 0.28em; text-transform: uppercase;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0.28em; bottom: 12px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 0.6s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a:not(.btn):focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-toggle { grid-column: 1; justify-self: start; grid-row: 1; padding-right: 12px; }
@media (min-width: 900px) {
  .brand { width: 140px; }
  .nav { display: block; }
  .menu-toggle { display: none; }
}

/* ---------- Menu mobile: si apre dall'asse ---------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-rows: auto 1fr auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.menu[hidden] { display: none !important; }
.menu__surface { position: absolute; inset: 0; background: var(--navy); transform-origin: 50% 50%; }
.menu__bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); }
.menu__bar .brand { grid-column: 2; }
.menu__bar .menu-toggle { grid-column: 1; }
.menu__nav { position: relative; align-self: center; text-align: center; }
.menu__nav ul { display: grid; gap: 6px; }
.menu__nav a {
  display: inline-block; padding-block: 8px; text-decoration: none;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 9vw, 44px); line-height: 1.15;
}
.menu__foot { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; }
.menu__foot .caption { opacity: 1; }
@media (min-width: 900px) { .menu { display: none !important; } }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; text-align: center; overflow: hidden;
  padding-block: clamp(72px, 12vh, 152px) clamp(56px, 8vh, 104px);
}
/* Spazio pronto per il video: muto, in loop, con poster; testo su velatura navy 80% (BB pag. 10). */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media:empty { display: none; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--navy); opacity: 0.8; }
.hero__inner { position: relative; z-index: 1; display: grid; justify-items: center; }
/* Home: il blocco della hero sta a sinistra, allineato a sinistra */
html[data-page="home"] .hero { text-align: left; }
html[data-page="home"] .hero__inner, html[data-page="home"] .hero h1 { justify-items: start; }
html[data-page="home"] .hero__rule { transform-origin: 0 50%; }
.hero__rule { width: 56px; height: 1px; background: var(--gold); margin-bottom: 28px; }
.hero h1 { display: grid; justify-items: center; gap: 28px; }
.hero__eyebrow .eb { display: block; }
.hero__eyebrow .eb-sep { display: none; }
@media (min-width: 900px) {
  .hero__eyebrow .eb, .hero__eyebrow .eb-sep { display: inline; }
}
.hero__verse { display: block; }
.hero__line { display: block; padding-block: 0.08em; }
.hero__line > span { display: inline-block; }
.hero__sub { margin-top: 32px; max-width: 34ch; text-wrap: balance; }
html[data-page="home"] .hero__sub { max-width: 42ch; text-wrap: pretty; }
.hero__cta { margin-top: 40px; }
.hero__meta { margin-top: 24px; font-size: var(--fs-caption); letter-spacing: 0.04em; }

/* ---------- Filosofia ---------- */
.filosofia { text-align: center; padding-block: var(--sec-top) var(--thread-gap); }
.filosofia .eyebrow { margin-bottom: 28px; }
.filosofia .title { max-width: 18ch; margin-inline: auto; }
.filosofia__lines { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 10px; justify-items: center; }
.filosofia__lines p { max-width: 40ch; text-wrap: balance; }
.w { display: inline; }

/* ---------- Incantesimi ---------- */
.incantesimi { padding-block: 0 var(--section); }
.section-head { text-align: center; display: grid; justify-items: center; gap: 24px; }
.section-head .lede { text-wrap: balance; }
.rows { margin-top: clamp(56px, 7vw, 96px); }
.row { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; padding-block: 36px 40px; }
.row__rule { height: 1px; background: var(--gold); transform-origin: 50% 50%; margin-bottom: 8px; }
.row__axis { display: none; }
.row__name .eyebrow { margin-bottom: 10px; }
.row__name h3 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-name);
  line-height: 1.08; letter-spacing: -0.005em; text-wrap: balance;
}
.row__detail { display: grid; gap: 18px; justify-items: start; }
.row__detail p { max-width: 44ch; }
.row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14px; letter-spacing: 0.04em; }
.row__meta .price { color: var(--gold); font-weight: 500; letter-spacing: 0.08em; }
.rows__foot { margin-top: 40px; display: grid; justify-items: center; gap: 8px; text-align: center; }
@media (min-width: 900px) {
  .row { grid-template-columns: 1fr 1px 1fr; column-gap: clamp(40px, 5vw, 88px); align-items: start; padding-block: 52px; }
  .row__rule { display: none; }
  .row__axis { display: block; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--gold); transform-origin: 50% 0; }
  .row__name { grid-column: 1; grid-row: 1; text-align: right; padding-top: 4px; }
  .row__detail { grid-column: 3; grid-row: 1; }
}

/* ---------- Fasce avorio: si aprono dall'asse ---------- */
.band--ivory { position: relative; color: var(--navy); }
.band__surface { position: absolute; inset: 0; z-index: 0; background: var(--ivory); transform-origin: 50% 50%; }
.band__content { position: relative; z-index: 1; }

/* ---------- Mani · Piedi · Sguardo (home) ---------- */
.cura .band__content { padding-block: var(--sec-top) var(--section); }
.cura__head { display: grid; gap: 22px; }
.cura__cols { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1fr; gap: 48px; }
.cura__col h3 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 1.4vw + 18px, 36px);
  line-height: 1.1; padding-bottom: 18px; border-bottom: 1px solid var(--gold);
}
.cura__col li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--ivory-shade); }
.cura__col li span:first-child { min-width: 0; }
.cura__col .price { color: var(--bronze); font-weight: 500; white-space: nowrap; letter-spacing: 0.04em; }
.cura__foot { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.cura__foot .caption { color: var(--warm-grey); max-width: 46ch; }
/* Mani · Piedi · Sguardo: solo le scritte (titolo, colonne, voci) nel beige scuro della palette, il warm grey (4,8:1 sull'avorio).
   Pulsante, link e prezzi restano come prima. */
.cura .title, .cura__col h3, .cura__col li span:first-child { color: var(--warm-grey); }
.cura__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
@media (min-width: 900px) { .cura__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 72px); } }

/* ---------- Il Reame ---------- */
.reame { text-align: center; }
.reame__stage { padding-block: var(--sec-top) var(--section); display: grid; justify-items: center; }
.reame .section-head .lede { max-width: 46ch; }
.gestures { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: 64px; width: 100%; justify-items: center; }
.gesture { display: grid; justify-items: center; gap: 18px; max-width: 46ch; }
.gesture::before { content: ""; width: 1px; height: 48px; background: var(--gold); margin-bottom: 8px; }
.gesture h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 2.6vw + 14px, 52px); line-height: 1.06; }
.gesture p { text-wrap: balance; }
.reame__dots { display: none; }
.reame__stage.is-pinned { min-height: 100svh; padding-block: var(--sec-top) 48px; align-content: start; }
.reame__stage.is-pinned .gestures { position: relative; display: block; height: clamp(200px, 26vh, 260px); margin-top: clamp(32px, 5vh, 56px); }
.reame__stage.is-pinned .gesture { position: absolute; left: 50%; top: 0; width: min(46ch, 100%); transform: translateX(-50%); }
.reame__stage.is-pinned .reame__dots { display: flex; gap: 14px; margin-top: 24px; }
.reame__dots span { width: 28px; height: 1px; background: var(--ivory); opacity: 0.28; transition: opacity 0.5s var(--ease), background-color 0.5s var(--ease); }
.reame__dots span.is-on { background: var(--gold); opacity: 1; }

/* ---------- Pagine interne: testata ---------- */
.page-hero { text-align: center; padding-block: clamp(64px, 10vh, 128px) clamp(56px, 8vh, 96px); }
.page-hero .wrap { display: grid; justify-items: center; gap: 24px; }
.page-hero .lede { text-wrap: balance; max-width: 44ch; }

/* ---------- Listino ---------- */
.cats-nav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 40;
  background: var(--navy); border-bottom: 1px solid var(--gold);
}
.cats-nav__scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cats-nav__scroll::-webkit-scrollbar { display: none; }
.cats-nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); width: max-content; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
.cats-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap; text-decoration: none;
  font: 500 11px/1 var(--font-text); letter-spacing: 0.24em; text-transform: uppercase;
}
.cats-nav a::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 1px; background: var(--ivory); transform: scaleX(0); transition: transform 0.6s var(--ease); }
.cats-nav a.is-active::after, .cats-nav a:hover::after { transform: scaleX(1); }
.listino .band__content { padding-block: clamp(56px, 8vw, 120px) var(--section); }
.cat { display: grid; grid-template-columns: 1fr; gap: 24px; padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--gold); scroll-margin-top: calc(var(--header-h) + 64px); }
.cat:first-child { border-top: 0; padding-top: 0; }
.cat__head { display: grid; gap: 12px; align-content: start; }
.cat__head h2 { font-family: var(--font-display); font-weight: 500; font-style: normal; font-size: var(--fs-cat); line-height: 1.04; }   /* Listino: categorie in tondo medium */
.cat__head p { color: var(--warm-grey); max-width: 34ch; }
.cat__sub { margin-top: 28px; font: 500 var(--fs-eyebrow)/1.6 var(--font-text); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--bronze); }
.cat__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--ivory-shade); }
.cat__list .it { min-width: 0; }
.cat__list .det { grid-column: 1; font-size: var(--fs-caption); color: var(--warm-grey); line-height: 1.45; }
.cat__list .price { grid-column: 2; grid-row: 1; color: var(--bronze); font-weight: 500; white-space: nowrap; letter-spacing: 0.04em; text-align: right; }
.listino__foot { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 32px; border-top: 1px solid var(--gold); }
.listino__foot .caption { color: var(--warm-grey); max-width: 52ch; }
@media (min-width: 900px) {
  .cat { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); }
  .cat__head { position: sticky; top: calc(var(--header-h) + 88px); }
}

/* ---------- Pagine legali ---------- */
.legal .band__content { padding-block: clamp(56px, 8vw, 112px) var(--section); }
.prose { max-width: 68ch; margin-inline: auto; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 1.2vw + 20px, 34px); line-height: 1.15; margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--gold); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font: 500 var(--fs-eyebrow)/1.6 var(--font-text); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--bronze); margin-top: 1.8em; }
.prose ul { display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--bronze); }
.prose a { text-decoration-color: var(--gold); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose strong { font-weight: 500; }
.prose .updated { color: var(--warm-grey); font-size: var(--fs-caption); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ivory-shade); }
.prose th { font: 500 var(--fs-eyebrow)/1.6 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.table-scroll { overflow-x: auto; }

/* ---------- Barra «Prenota» fissa su mobile ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--navy); border-top: 1px solid var(--gold);
  transition: transform 0.6s var(--ease);
}
.mbar.is-hidden { transform: translateY(110%); }
@media (max-width: 899px) { body { padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 900px) { .mbar { display: none; } }

/* ---------- Stati iniziali del movimento (solo con JS e movimento consentito) ---------- */
.js:not(.is-static) .site-header .brand,
.js:not(.is-static) .nav li,
.js:not(.is-static) .site-header .menu-toggle,
.js:not(.is-static) .hero__eyebrow,
.js:not(.is-static) .hero__sub,
.js:not(.is-static) .hero__cta,
.js:not(.is-static) .hero__meta,
.js:not(.is-static) .page-hero [data-intro] { opacity: 0; }
.js:not(.is-static) .hero__rule { transform: scaleX(0); }
.js:not(.is-static) .hero__line,
.js:not(.is-static) .page-hero .title .ln { clip-path: inset(0 50% 0 50%); }
html[data-page="home"].js:not(.is-static) .hero__line { clip-path: inset(0 100% 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =====================================================================
   Ottobre 2026 · seconda serie di prove
   ===================================================================== */

/* ---------- Testata: navy al 75% (variante: sabbia) ---------- */
.site-header {
  --hdr-bg: rgba(16, 26, 41, 0.85);
  --hdr-ink: var(--ivory);
  --hdr-accent: var(--gold);
  --hdr-hover-ink: var(--navy);
  background: var(--hdr-bg);
  color: var(--hdr-ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
html[data-testata="sabbia"] .site-header { --hdr-bg: rgba(213, 144, 117, 0.85); --hdr-accent: var(--ivory); }
html[data-testata="sabbia"][data-scritte="navy"] .site-header { --hdr-ink: var(--navy); --hdr-accent: var(--navy); --hdr-hover-ink: var(--ivory); }
.site-header .nav a:not(.btn)::after { background: var(--hdr-accent); }
.site-header .btn { color: var(--hdr-ink); border-color: var(--hdr-accent); }
.site-header .btn::before { background: var(--hdr-accent); }
@media (hover: hover) { .site-header .btn:hover { color: var(--hdr-hover-ink); } }
.cats-nav {
  background: rgba(16, 26, 41, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- Motivo di fondo: la formula incisa, oppure il monogramma ---------- */
html[data-motivo="formula"] body {
  background-image: url("../img/pattern-formula-su-navy.svg");
  background-size: 1117px 151px; background-position: 50% 0;
}
html[data-motivo="formula"] .band__surface {
  background-image: url("../img/pattern-formula-su-avorio.svg");
  background-size: 1117px 151px; background-position: 50% 0;
}
@media (max-width: 899px) {
  html[data-motivo="formula"] body, html[data-motivo="formula"] .band__surface { background-size: 838px 113px; }
}
html[data-motivo="monogramma"] body {
  background-image: url("../img/pattern-monogramma-su-navy.svg");
  background-size: 132px 216px; background-position: 50% 0;
}
html[data-motivo="monogramma"] .band__surface {
  background-image: url("../img/pattern-monogramma-su-avorio.svg");
  background-size: 132px 216px; background-position: 50% 0;
}

/* ---------- Titoli sulle fasce avorio: light, corsivo o bold italic ---------- */
html[data-titoli="corsivo"] :is(.cura .title, .cura__col h3) { font-style: italic; font-weight: 400; }
html[data-titoli="bold"] :is(.cura .title, .cura__col h3) { font-style: italic; font-weight: 600; letter-spacing: -0.012em; }
/* Corsivo e bold italic: righe più strette. Le caselle delle righe si sovrappongono, così le aste del corsivo restano intere. */
html:is([data-titoli="bold"], [data-titoli="corsivo"]) .cura .title .ln + .ln { margin-top: -0.15em; }

/* ---------- Cornici della vetrina (disegnate da site.js) ---------- */
[data-frame] { --frame: var(--gold); --fg: 10px; }
.mm-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 2;
}
.mm-frame .ln, .mm-frame .arc { fill: none; stroke: var(--frame); stroke-width: 1; shape-rendering: geometricPrecision; }

/* ---------- Hero: foto o video a tutto schermo, al 40% sul navy, sotto la testata ---------- */
html[data-page="home"] .hero {
  margin-top: calc(-1 * var(--header-h));
  min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(48px, 9vh, 112px)) clamp(36px, 6vh, 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__media { background: var(--navy); }
.hero__media::after { display: none; }
.hero__img, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
  display: none; opacity: var(--hero-o, 0.9);   /* foto e video al 90% (scelta del 22/10/2026) */
}
html[data-hero="foto1"] .hero__img[data-img="foto1"],
html[data-hero="foto2"] .hero__img[data-img="foto2"],
html[data-hero="foto3"] .hero__img[data-img="foto3"],
html[data-hero="video"] .hero__video { display: block; }
@media (max-width: 899px) {
  .hero__img[data-img="foto1"] { object-position: 90% 50%; }
  .hero__img[data-img="foto2"] { object-position: 80% 50%; }
  .hero__img[data-img="foto3"] { object-position: 86% 50%; }
  .hero__video { object-position: 50% 50%; }
}
/* Taglio «fascia»: la foto intera, orizzontale, da un lato all'altro; sopra e sotto il navy.
   Su telefono la fascia è 4:3, sul lato del soggetto. */
html[data-taglio="fascia"] .hero__media { display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); }
html[data-taglio="fascia"] .hero__img, html[data-taglio="fascia"] .hero__video {
  position: relative; inset: auto; height: auto; aspect-ratio: 2 / 1; object-position: 50% 45%;
}
@media (max-width: 899px) {
  /* su telefono una fascia che attraversa le righe del titolo non regge: sta in cima, sotto la testata, e il testo segue */
  html[data-taglio="fascia"] .hero__media { justify-content: flex-start; }
  html[data-taglio="fascia"] .hero__img, html[data-taglio="fascia"] .hero__video { aspect-ratio: 16 / 9; object-position: 50% 50%; }
  html[data-taglio="fascia"][data-page="home"] .hero { justify-content: flex-start; padding-top: calc(var(--header-h) + 56.25vw + 32px); }
}
.hero__pause {
  position: absolute; z-index: 2; right: calc(var(--gutter) - 12px); bottom: clamp(14px, 3vh, 30px);
  min-height: 44px; padding: 0 12px;
  font: 500 10px/1 var(--font-text); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ivory);
}
.hero__pause::after {
  content: ""; position: absolute; left: 12px; right: calc(12px + 0.26em); bottom: 12px; height: 1px;
  background: var(--gold); transform: scaleX(0.4); transition: transform 0.6s var(--ease);
}
.hero__pause:hover::after, .hero__pause:focus-visible::after { transform: scaleX(1); }
html:not([data-hero="video"]) .hero__pause, .is-static .hero__pause { display: none; }
/* Sulla foto gli occhielli passano all'avorio: l'oro su un fondo misto non arriva a 3:1 */
.hero .hero__eyebrow { color: var(--ivory); }
/* CTA della hero, più lunga: tracking ridotto perché stia su una riga anche a 390 px */
.hero__cta { padding-inline: 30px; letter-spacing: 0.24em; }
.hero__cta > span:first-child { margin-right: -0.24em; }
@media (max-width: 899px) { .hero__cta { padding-inline: 20px; letter-spacing: 0.18em; font-size: 11px; } .hero__cta > span:first-child { margin-right: -0.18em; } }

/* ---------- Dove siamo: la mappa del quartiere a tutto campo ---------- */
.dove { position: relative; overflow: hidden; background: var(--navy); color: var(--ivory); isolation: isolate; }
.dove__map { position: absolute; inset: 0; z-index: 0; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map__parks { fill: var(--ivory); fill-opacity: 0.045; }
.map__s { fill: none; stroke: var(--ivory); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__s--c { stroke-width: 1px; stroke-opacity: 0.22; }
.map__s--b { stroke-width: 1.4px; stroke-opacity: 0.4; }
.map__s--a { stroke-width: 2.2px; stroke-opacity: 0.48; }
.map__corso { fill: none; stroke: var(--ivory); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.map__stations circle { fill: var(--navy); stroke: var(--ivory); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.map__pin-ring { fill: none; stroke: var(--gold); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.map__pin-dot { fill: var(--gold); }
.map__label {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; white-space: nowrap;
  font: 500 10px/1.2 var(--font-text); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ivory); visibility: hidden;
}
.map-ready .map__label { visibility: visible; }
.map__label--street { letter-spacing: 0.34em; }
.map__label--minor { font-weight: 300; letter-spacing: 0.26em; }
.map__label.map__label--num {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 4vw, 64px);
  letter-spacing: -0.02em; line-height: 1; text-transform: none;
}
.map__link { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
/* Accanto al punto: l'invito ad aprire la mappa. Tutta la mappa è il link; l'etichetta lo dichiara. */
.map__label.map__label--cta {
  padding: 11px 16px 10px 18px; border: 1px solid var(--gold); background: var(--navy);
  font-size: 10px; letter-spacing: 0.26em; color: var(--ivory);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.map__label--cta::after { content: " \2197"; letter-spacing: 0; color: var(--gold); transition: color 0.4s var(--ease); }
.dove__map:has(.map__link:hover) .map__label--cta, .dove__map:has(.map__link:focus-visible) .map__label--cta { background: var(--gold); color: var(--navy); }
.dove__map:has(.map__link:hover) .map__label--cta::after, .dove__map:has(.map__link:focus-visible) .map__label--cta::after { color: var(--navy); }
.map__link:focus-visible { outline: 1px solid var(--gold); outline-offset: -8px; }
.map__credit {
  position: absolute; z-index: 2; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 10px;
  font-size: 10px; letter-spacing: 0.04em; color: var(--ivory);
}
.map__credit a { text-decoration: none; }
.map__credit a:hover { text-decoration: underline; }

.dove__inner {
  position: relative; z-index: 2; pointer-events: none;
  padding-top: 56svh; padding-bottom: 20px;
}
.dove__card {
  position: relative; pointer-events: auto;
  background: var(--ivory); color: var(--navy);
  padding: 36px 26px 30px;
  display: grid; gap: 22px;
}
.dove__card .eyebrow { color: var(--bronze); margin-right: 0; }
.dove__card .title { font-size: clamp(32px, 2.6vw + 14px, 52px); }
/* «Il Reame è a Porta Romana.»: tondo, come il titolo della hero, e nel suo bronzo scuro (7,5:1 sull'avorio) */
.dove__card .title { font-style: normal; font-weight: 300; color: var(--bronze-dark); }
.dove__card :focus-visible { outline-color: var(--navy); }
.dove__card .btn { color: var(--navy); }
.dove__card .link { color: var(--navy); }
.dove__list { display: grid; border-top: 1px solid var(--gold); }
.dove__list > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--ivory-shade); }
.dove__list dt { font: 500 var(--fs-eyebrow)/1.6 var(--font-text); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--bronze); }
.dove__list dd { min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.dove__list a { text-decoration-color: var(--gold); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dove__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.no-frames .dove__card { outline: 1px solid var(--gold); outline-offset: -10px; }
@media (min-width: 900px) {
  .dove__inner {
    display: flex; align-items: center;
    min-height: max(100svh, 820px);
    padding-block: calc(var(--header-h) + 48px) 64px;
  }
  .dove__card { width: min(100%, 480px); padding: 48px 44px 40px; }
  .dove__list > div { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: baseline; }
  .map__label { font-size: 11px; }
  .map__label.map__label--cta { font-size: 10px; letter-spacing: 0.2em; padding: 10px 12px 9px 14px; }
}

/* ---------- Footer: la porta della vetrina, con il monogramma ---------- */
.site-footer {
  --ft-bg: transparent; --ft-ink: var(--ivory); --frame: var(--gold);
  --mm-ink: var(--ivory); --mm-accent: var(--gold);
  --door-w: 112px; --door-h: 150px;
  position: relative; background: var(--ft-bg); color: var(--ft-ink);
  text-align: center; font-size: var(--fs-caption); line-height: 1.7;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}
html[data-fondo="sabbia"] .site-footer { --ft-bg: var(--sand); --frame: var(--ivory); --mm-accent: var(--ivory); }
html[data-fondo="sabbia"][data-scritte="navy"] .site-footer { --ft-ink: var(--navy); --frame: var(--navy); }
/* ---------- La cornice della pagina (disegnata da site.js) ---------- */
.page-frame { position: absolute; left: 0; top: 0; width: 100%; z-index: 65; pointer-events: none; }   /* sopra testata, barra delle categorie e barra Prenota: la cornice non si spezza */
.page-frame svg { display: block; overflow: visible; }
.page-frame .ln { fill: none; stroke: var(--gold); stroke-width: 1; }
html[data-cornice="sito"] { --gutter: clamp(30px, 5vw, 72px); }
.map__credit { right: calc(var(--gutter) - 4px) !important; bottom: 12px !important; }
.footer__inner { position: relative; padding: 32px 20px 0; }
.site-footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; margin-bottom: 14px; }
.site-footer nav a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
  font: 500 11px/1 var(--font-text); letter-spacing: 0.24em; text-transform: uppercase;
}
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-footer .legal-line { max-width: 64ch; margin-inline: auto; }
@media (max-width: 899px) {
  .site-footer nav ul { gap: 0 18px; }
  .site-footer nav a { letter-spacing: 0.18em; }
}
.footer__door {
  position: relative; width: var(--door-w); height: var(--door-h);
  margin: 76px auto 0; display: flex; justify-content: center; align-items: flex-start;
}
.footer__mono { display: block; width: 52px; margin-top: 30px; padding: 6px; }
.footer__mono svg { width: 100%; height: auto; }
.footer__mono:focus-visible { outline-offset: 2px; }
@media (min-width: 900px) {
  .site-footer { --door-w: 128px; --door-h: 176px; padding-top: 28px; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .footer__inner { padding-top: 43px; }
  .footer__door { margin-top: 89px; }
  .footer__mono { width: 60px; margin-top: 36px; }
}

/* Barra «Prenota» su mobile, variante sabbia */
html[data-fondo="sabbia"] .mbar { background: var(--sand); border-top-color: var(--ivory); }
html[data-fondo="sabbia"] .mbar .btn { border-color: var(--ivory); color: var(--ivory); }
html[data-fondo="sabbia"] .mbar .btn::before { background: var(--ivory); }
html[data-fondo="sabbia"] .mbar .btn:active { color: var(--navy); }
html[data-fondo="sabbia"][data-scritte="navy"] .mbar { border-top-color: var(--navy); }
html[data-fondo="sabbia"][data-scritte="navy"] .mbar .btn { border-color: var(--navy); color: var(--navy); }
html[data-fondo="sabbia"][data-scritte="navy"] .mbar .btn::before { background: var(--navy); }
html[data-fondo="sabbia"][data-scritte="navy"] .mbar .btn:active { color: var(--ivory); }

/* ---------- Il sipario all'italiana: pieghe che si raccolgono verso gli angoli alti, mantovana, orlo d'oro ---------- */
.curtain { position: fixed; inset: 0; z-index: 300; display: none; cursor: pointer; overflow: hidden; background: var(--navy); contain: strict; }
.curtain.is-built { background: transparent; }
html.js:not(.is-static):not(.no-curtain) .curtain { display: block; }
.curtain__stage { position: absolute; inset: 0; }
/* le pieghe: tre bande piatte (luce, stoffa, ombra), niente sfumature; orlo e bordo d'oro */
.curtain__svg { position: absolute; inset: 0; display: block; }
.curtain__svg .c-light { fill: #17243A; }
.curtain__svg .c-base { fill: var(--navy); }
.curtain__svg .c-shade { fill: #0B121D; }
.curtain__svg .c-hem { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.curtain__svg .c-trim { stroke: var(--gold); stroke-width: 1.5; }
.curtain__valance { position: absolute; left: 0; right: 0; top: 0; height: clamp(64px, 11vh, 112px); z-index: 2; will-change: transform; }
.curtain__valance svg { display: block; width: 100%; height: 100%; overflow: visible; }
.curtain__valance .v-fill { fill: #0D1623; }
.curtain__valance .v-line { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curtain__mark { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; }
.curtain__logo { grid-area: 1 / 1; height: auto; opacity: 0; }
.curtain__logo--full { width: clamp(300px, 30vw, 460px); display: none; }
.curtain__logo--short { width: 168px; }
@media (min-width: 700px) {
  .curtain__logo--full { display: block; }
  .curtain__logo--short { display: none; }
}

/* ---------- Stati iniziali del movimento (seconda serie) ---------- */
.js:not(.is-static) .hero__pause,
.js:not(.is-static) .hero__media { opacity: 0; }

/* ---------- Scritte della hero in bronzo scuro: quando la foto supera il 65% lo sfondo è chiaro e l'avorio non si legge.
   Le sceglie da sé il pannello «Prove» col cursore; in produzione resta l'attributo data-inchiostro. ---------- */
@media (min-width: 900px) {
  html[data-inchiostro="scuro"] .hero, html[data-inchiostro="scuro"] .hero .hero__eyebrow, html[data-inchiostro="scuro"] .hero__pause { color: var(--bronze-dark); }
  html[data-inchiostro="scuro"] .hero__rule, html[data-inchiostro="scuro"] .hero__pause::after { background: var(--bronze); }
  html[data-inchiostro="scuro"] .hero__cta { color: var(--bronze-dark); border-color: var(--bronze-dark); }
  html[data-inchiostro="scuro"] .hero__cta::before { background: var(--gold); }
  html[data-inchiostro="scuro"] .hero__cta:active { color: var(--navy); }
}
@media (min-width: 900px) and (hover: hover) { html[data-inchiostro="scuro"] .hero__cta:hover { color: var(--navy); border-color: var(--gold); } }
@media (max-width: 899px) {
  /* su telefono con la fascia il testo sta sul navy, sotto la foto: resta avorio */
  html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero, html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero .hero__eyebrow, html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero__pause { color: var(--bronze-dark); }
  html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero__rule, html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero__pause::after { background: var(--bronze); }
  html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero__cta { color: var(--bronze-dark); border-color: var(--bronze-dark); }
  html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero__cta::before { background: var(--gold); }
  html[data-inchiostro="scuro"]:not([data-taglio="fascia"]) .hero__cta:active { color: var(--navy); }
}