/* 01-tokens.css */
/* ============================================================
   Gettoni. I valori dei colori sono gli stessi di tools/tavolozza.py,
   che li confronta: se uno cambia qui e non li', lo strumento lo dice.
   Tre parole del briefing: salvia, beige, bordeaux. Vedi DESIGN.md §2.
   ============================================================ */
:root {
  /* la carta: il beige */
  --paper: #E9E3D6;
  --paper-2: #DED6C6;
  --paper-3: #D3CBB9;
  --card: #F1ECE2;

  /* la salvia: lavate e riempimenti, mai una parola; la sua scura scrive */
  --sage: #9DAA95;
  --sage-2: #C5CFBD;
  --sage-deep: #4F5E51;

  /* il buio: il verde bosco del marchio */
  --pine: #1F2D27;
  --ink: #1B2420;
  --ink-2: #4E5A53;

  /* l'accento */
  --bordeaux: #6B1F33;
  --bordeaux-2: #C9939F;

  /* sul buio e sul filmato */
  --cream: #EFE9DD;
  --grey-on-dark: #B4BBB3;

  /* filetti */
  --line: #C9C1B1;
  --line-ui: #85806F;
  --line-dark: rgba(239, 233, 221, .16);

  /* solo dentro il marchio */
  --gold: #F0B43A;

  /* il buio del filmato, per le velature: l'ultima scena */
  --film: 15, 22, 18;

  /* caratteri */
  --serif: 'Gilda Display', 'Didot', 'Bodoni MT', Georgia, serif;
  --text: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --mono: 'Reddit Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* scala */
  --t-mono: .75rem;
  --t-mono-lg: .8125rem;
  --t-body: 1.25rem;
  --t-small: 1.0625rem;
  --t-lede: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --t-h3: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  --t-h2: clamp(2rem, 1.2rem + 2.8vw, 4rem);
  --t-h1: clamp(2.4rem, 1.4rem + 3.6vw, 5rem);
  --t-num: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --t-name: clamp(2.6rem, 8.4vw, 9.6rem);

  /* forma */
  --r: 3px;
  --ring: 150px;

  /* spazi */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --wrap: 1280px;
  --gutter: clamp(18px, 3.4vw, 56px);
  --bar-h: 68px;

  /* movimento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 600ms;
}

@media (max-width: 900px) {
  :root { --bar-h: 60px; --ring: 108px; --t-body: 1.1875rem; }
}
@media (max-width: 600px) {
  :root { --t-name: 13.5vw; }
}

/* 02-base.css */
/* ============================================================
   Base: caratteri, ripristino, tipografia, bottoni, tondi.
   ============================================================ */
@font-face { font-family: 'Gilda Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/gilda-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: 'Gilda Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/gilda-400-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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-400-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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-500-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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-500-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: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-600-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: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-600-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: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-400i-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: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-400i-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: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-500i-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: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-500i-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: 'Reddit Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/redditmono-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: 'Reddit Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/redditmono-400-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: 'Reddit Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/redditmono-500-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: 'Reddit Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/redditmono-500-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; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  font-family: var(--text);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html.menu-open, html.menu-open body { overflow: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
.prose a, .qa-body a, .lede a, .note a, .ct-foot a, .footer-col p a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }
address { font-style: normal; }
::selection { background: rgba(107, 31, 51, .25); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

/* --- tipografia -------------------------------------------------------- */
/* Il titolo del riferimento: serif ad alto contrasto, maiuscolo, con la
   congiunzione piccola. Un peso solo. */
.display {
  font-family: var(--serif); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.02;
  text-wrap: balance;
}
.display small { font-size: .55em; letter-spacing: .04em; vertical-align: .08em; }
h1.display { font-size: var(--t-h1); }
h2.display { font-size: var(--t-h2); }
h3.display { font-size: var(--t-h3); line-height: 1.1; }
.lede { font-family: var(--text); font-weight: 400; font-style: italic; font-size: var(--t-lede); line-height: 1.4; color: var(--ink); max-width: 46ch; text-wrap: pretty; }
.note { font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s5); max-width: 70ch; }
.prose p + p { margin-top: .9em; }
.prose { max-width: 62ch; text-wrap: pretty; }
.prose strong, .prose b { font-weight: 600; }
.prose--big { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); line-height: 1.5; }
.prose--wide { max-width: 74ch; }
.todo { background: rgba(107, 31, 51, .12); color: var(--bordeaux); padding: 0 .3em; }

/* l'etichetta mono del riferimento: maiuscola, spaziata, piccola */
.label, .mono {
  font-family: var(--mono); font-weight: 500; font-size: var(--t-mono);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  color: var(--sage-deep);
}
p.label { margin-bottom: var(--s4); }

/* --- elenchi con il tondino a contorno --------------------------------- */
.dots { display: grid; gap: var(--s2); margin-top: var(--s4); }
.dots li { position: relative; padding-left: 1.3em; }
.dots li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--bordeaux); }

/* --- bottoni: le pastiglie del riferimento ---------------------------------- */
.btn, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 42px; padding: 0 22px;
  border-radius: var(--r);
  font-family: var(--mono); font-weight: 500; font-size: var(--t-mono-lg);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn { background: var(--pine); color: var(--cream); }
.btn:hover { background: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--light, .chip { background: var(--paper-3); color: var(--ink); }
.btn--light:hover, .chip:hover { background: var(--paper-2); }
.chip { min-height: 36px; padding: 0 16px; font-size: var(--t-mono); }
.btn--block { width: 100%; min-height: 64px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.actions--center { justify-content: center; }

/* --- il tondo con gli anelli --------------------------------------------- */
.ring {
  position: relative; display: inline-grid; place-items: center;
  width: var(--ring); height: var(--ring); border-radius: 50%;
  text-decoration: none;
}
.ring-face {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
  font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: 14px; line-height: 1.35;
  transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.ring-rings { position: absolute; inset: 0; pointer-events: none; }
.ring-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: .22; color: var(--ink); }
.ring-rings i:nth-child(2) { inset: -12px; opacity: .14; }
.ring-rings i:nth-child(3) { inset: -24px; opacity: .08; }
.ring:hover .ring-face { transform: scale(1.04); background: var(--paper-3); }
.ring--dark .ring-face { background: var(--pine); color: var(--cream); }
.ring--dark:hover .ring-face { background: var(--ink); }
.ring--dark .ring-rings i { color: var(--pine); }

/* --- il tondino con lo spillo (mappa, riga dei numeri) --------------------- */
.m-pin { position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink-2); flex: none; }
.m-pin::before { content: ''; position: absolute; left: 50%; top: 8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; border: 1px solid var(--ink); }
.m-pin::after { content: ''; position: absolute; left: 50%; top: 14px; width: 1px; height: 8px; background: var(--ink); }

/* --- utilita' --------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 2 * var(--gutter)); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--pine); color: var(--cream); padding: 8px 14px; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.root-langs { display: flex; gap: var(--s5); margin-top: var(--s5); }

/* --- entrate in scena: solo con JS acceso ------------------------------ */
.js [data-reveal] > .wrap, .js [data-reveal] > .bd-frame, .js [data-reveal] > .el, .js [data-reveal] > .mappa { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js [data-reveal].is-in > .wrap, .js [data-reveal].is-in > .bd-frame, .js [data-reveal].is-in > .el, .js [data-reveal].is-in > .mappa { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js [data-reveal] > .wrap, .js [data-reveal] > .bd-frame, .js [data-reveal] > .el, .js [data-reveal] > .mappa { opacity: 1; transform: none; }
}

/* 03-layout.css */
/* ============================================================
   La testata, il menu, il piede, il tondo del contatto.
   ============================================================ */

/* --- la testata: trasparente sul filmato, tre gruppi ------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--bar-h);
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header--film { background: transparent; color: var(--cream); border-color: transparent; }
.site-header--film.is-solid { background: var(--paper); color: var(--ink); border-color: var(--line); }
/* Senza JavaScript nessuno riempie la barra quando il filmato finisce:
   sulle pagine con un'apertura a filmato o a fotografia la barra resta
   in cima, sopra l'immagine dove la crema legge, e scorre via con lei. */
html:not(.js) .site-header--film { position: absolute; }
.bar { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); }
.bar-l { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.bar-r { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.6vw, 26px); }
.bar-link, .menu-toggle { font-family: var(--mono); font-weight: 500; font-size: var(--t-mono-lg); letter-spacing: .08em; text-transform: uppercase; color: inherit; white-space: nowrap; }
.bar-link[aria-current="page"] { color: var(--bordeaux); }
.site-header--film:not(.is-solid) .bar-link[aria-current="page"] { color: var(--bordeaux-2); }
.bar-sep { width: 1px; height: 22px; background: currentColor; opacity: .35; }
.site-brand { display: inline-flex; align-items: center; justify-self: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo .logo-mark { height: 34px; width: auto; }
.logo .logo-word { height: 17px; width: auto; }
/* due marchi in testata: uno chiaro per il filmato, uno scuro per la carta */
.site-brand .logo:first-child { display: none; }
.site-header--film:not(.is-solid) .site-brand .logo:first-child { display: inline-flex; }
.site-header--film:not(.is-solid) .site-brand .logo:last-child { display: none; }
.menu-toggle { display: inline-flex; align-items: center; gap: 12px; }
.menu-bars { display: inline-grid; gap: 5px; width: 34px; }
.menu-bars span { height: 1px; background: currentColor; }
.menu-bars span:last-child { width: 24px; }
.site-header .chip { color: var(--ink); }

/* --- il menu a tutto schermo: verde bosco, voci in serif ---------------- */
.site-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--pine); color: var(--cream);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t) var(--ease), visibility 0s var(--t);
  overflow-y: auto;
}
.site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu-inner { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding: var(--s8) 0; position: relative; min-height: 100%; display: flex; flex-direction: column; }
.menu-close { position: absolute; top: var(--s5); right: 0; width: 44px; height: 44px; display: grid; place-items: center; font-size: 2rem; color: var(--cream); border-radius: 50%; border: 1px solid var(--line-dark); }
.menu-list { display: grid; margin-top: var(--s7); }
.menu-list a { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line-dark); }
.menu-list em { font-style: normal; font-family: var(--mono); font-size: var(--t-mono); color: var(--grey-on-dark); letter-spacing: .08em; }
.menu-list .display { font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem); }
.menu-list small { grid-column: 2; font-family: var(--text); font-size: var(--t-small); color: var(--grey-on-dark); }
.menu-list a[aria-current="page"] .display { color: var(--bordeaux-2); }
.menu-foot { margin-top: auto; padding-top: var(--s7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.menu-tel { font-family: var(--mono); font-size: var(--t-mono-lg); letter-spacing: .08em; color: var(--cream); }
.menu-langs { margin-left: auto; display: flex; gap: var(--s4); font-family: var(--mono); font-size: var(--t-mono-lg); letter-spacing: .08em; text-transform: uppercase; }
.menu-langs a { color: var(--grey-on-dark); }
.menu-langs a[aria-current="true"] { color: var(--cream); text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 1080px) {
  .bar-l .bar-link, .bar-r .bar-link:not(.bar-lang), .bar-sep { display: none; }
  .menu-toggle span:last-child { display: none; }
}
@media (max-width: 480px) {
  .bar { grid-template-columns: auto 1fr auto; }
  .logo .logo-mark { height: 28px; }
  .logo .logo-word { height: 13px; }
  .site-header .chip { padding: 0 12px; }
}

/* --- il controllo a segmenti del riferimento, fisso in basso a sinistra --- */
.seg {
  display: inline-flex; padding: 4px; gap: 2px;
  border: 1px solid var(--line-ui); border-radius: var(--r);
  background: rgba(233, 227, 214, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.seg a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 2px; font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.seg a:hover, .seg a.is-on { background: var(--paper-3); color: var(--ink); }
.seg a.is-on { font-weight: 500; }
.seg--fixed { position: fixed; left: var(--gutter); bottom: 22px; z-index: 30; }
@media (max-width: 900px) { .seg--fixed { display: none; } }

/* --- il tondo del contatto, fisso in basso a destra ---------------------- */
.wa-round {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pine); color: var(--cream);
  transition: transform var(--t) var(--ease);
}
.wa-round svg { width: 24px; height: 24px; }
.wa-round .ring-rings i { color: var(--pine); opacity: .45; }
.wa-round .ring-rings i:nth-child(2) { inset: -9px; opacity: .3; }
.wa-round .ring-rings i:nth-child(3) { inset: -18px; opacity: .16; }
.has-film .wa-round .ring-rings i { color: var(--cream); }
.wa-round:hover { transform: scale(1.05); }

/* --- sezioni ---------------------------------------------------------------- */
main { padding-top: 0; }
body:not(.has-film) main { padding-top: var(--bar-h); }
.section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section--tight { padding-top: 0; }
.section-head { max-width: 62rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }
.section-head .lede { margin-top: var(--s5); }
.tone-2 { background: var(--paper-2); }
.tone-dark { background: var(--pine); color: var(--cream); }
.tone-dark .label { color: var(--grey-on-dark); }
.tone-dark .lede, .tone-dark .note, .tone-dark .prose { color: var(--cream); }
.tone-dark .prose a { color: var(--bordeaux-2); }

/* --- il piede del riferimento --------------------------------------------- */
.site-footer { background: var(--pine); color: var(--cream); padding: var(--s9) 0 var(--s6); }
.site-footer .label { color: var(--grey-on-dark); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s6); flex-wrap: wrap; }
.footer-where { margin-top: var(--s2); font-size: var(--t-small); color: var(--grey-on-dark); max-width: 30ch; }
.footer-big { text-align: right; }
.footer-tel { display: block; font-size: clamp(2rem, 1.4rem + 3vw, 4.4rem); color: var(--cream); text-transform: none; letter-spacing: 0; }
.footer-mail { display: block; margin-top: var(--s3); font-family: var(--text); font-style: italic; font-size: var(--t-lede); color: var(--cream); }
.footer-mark { display: grid; place-items: center; padding: var(--s9) 0 var(--s8); }
.footer-mark .logo--stacked { flex-direction: column; gap: var(--s5); }
.footer-mark .logo-mark { height: 96px; }
.footer-mark .logo-word { height: 56px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: var(--s7) var(--s6); border-top: 1px solid var(--line-dark); padding-top: var(--s7); }
.footer-list { display: grid; gap: var(--s2); margin-top: var(--s4); font-family: var(--mono); font-size: var(--t-mono-lg); letter-spacing: .06em; text-transform: uppercase; }
.footer-list a { color: var(--cream); }
.footer-list a:hover { color: var(--bordeaux-2); }
.footer-col--blurb p { font-size: var(--t-small); color: var(--grey-on-dark); max-width: 40ch; }
.footer-legal { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-on-dark); }
.footer-legal a { color: var(--cream); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-big { text-align: left; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* 04-hero.css */
/* ============================================================
   L'apertura della home: il filmato che riproduce, a tutto campo,
   100svh. La composizione e' il riferimento: il nome a tutta larghezza
   in alto, il paragrafo in serif chiaro in basso a sinistra, SCORRI al
   centro. Il controllo a segmenti e il tondo del contatto sono nel
   guscio (03-layout.css). Le velature le misura tools/contrasto.py su
   tutti i quindici secondi.
   ============================================================ */
.videohero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  background: var(--pine); color: var(--cream);
}
.vh-poster, .videohero video { position: absolute; inset: 0; width: 100%; height: 100%; }
.vh-poster img, .videohero video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.videohero video { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.videohero video[data-playing] { opacity: 1; }

/* La velatura di pagina: una lavata dall'alto per il nome e per la
   testata trasparente (la prima scena ha il cielo a 242 su 255, la
   seconda la chioma dell'ulivo), un fondo leggero in basso. L'alone
   dietro il paragrafo sta nel blocco. Tutto nel buio del filmato. */
.vh-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--film), .76) 0%, rgba(var(--film), .62) 16%, rgba(var(--film), .34) 34%, rgba(var(--film), 0) 52%),
    linear-gradient(0deg, rgba(var(--film), .56) 0%, rgba(var(--film), 0) 26%);
}

/* --- il nome a tutta larghezza, il paragrafo in basso ------------------- */
.vh-lead { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lead-name {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--bar-h) + 2vh);
  font-family: var(--serif); font-weight: 400; font-size: var(--t-name);
  text-transform: uppercase; letter-spacing: .08em; line-height: .95;
  text-align: center; white-space: nowrap; color: var(--cream);
  text-shadow: 0 0 34px rgba(var(--film), .55), 0 2px 10px rgba(var(--film), .45);
}
.lead-name span { display: block; margin-right: -.08em; }
/* il paragrafo del riferimento: serif chiaro e diritto, non corsivo */
.lead-text {
  position: absolute; left: var(--gutter); bottom: 104px;
  max-width: 26rem; padding: var(--s4) 0;
  font-family: var(--text); font-weight: 400;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); line-height: 1.3; color: var(--cream);
  text-wrap: pretty;
}
.lead-text::before {
  content: ''; position: absolute; inset: -40% -30%; z-index: -1;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(var(--film), .80) 0%, rgba(var(--film), .64) 45%, rgba(var(--film), 0) 100%);
}

/* SCORRI, mono, al centro del bordo basso. Ha il suo alone: al decimo
   secondo sotto di lui passa la tavolozza bianca del pittore, e la
   lavata dal basso da sola lo lasciava a 2,75:1. */
.vh-cue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 4;
  font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream); padding: 8px 12px;
}
.vh-cue::before {
  content: ''; position: absolute; inset: -120% -90%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(var(--film), .78) 0%, rgba(var(--film), .62) 45%, rgba(var(--film), 0) 100%);
}

@media (max-width: 900px) {
  .vh-poster img, .videohero video { object-position: 50% 50%; }
  .lead-name { top: calc(var(--bar-h) + 1vh); white-space: normal; letter-spacing: .06em; line-height: 1; }
  .lead-text { bottom: 96px; right: var(--gutter); max-width: none; font-size: 1.2rem; }
  .lead-text::before { inset: -30% -12%; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(var(--film), .70) 0%, rgba(var(--film), .70) 65%, rgba(var(--film), 0) 100%); }
  .vh-cue { left: var(--gutter); transform: none; bottom: 26px; padding-left: 0; }
}

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

/* --- l'intro: titolo centrato, paragrafo, due tondi ------------------------ */
.in { text-align: center; }
.in-text { margin-inline: auto; text-align: center; max-width: 58ch; }
.in-rings { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-top: var(--s8); flex-wrap: wrap; }

/* --- il territorio: mappa e riga dei minuti ---------------------------------- */
.territorio { padding-bottom: 0; }
.tr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); flex-wrap: wrap; }
.tr-head .section-head { margin-bottom: var(--s6); }
.tr-aside { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: var(--s6); }
.mappa { position: relative; width: 100%; aspect-ratio: 1000 / 743; overflow: hidden; background: var(--sage-2); }
.m-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-terra { fill: var(--paper-2); stroke: var(--sage); stroke-width: 1.2; }
.m-sea { font-family: var(--mono); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; fill: var(--sage-deep); opacity: .7; }
.m-segni { position: absolute; inset: 0; pointer-events: none; }
.m-segno, .m-relais { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; transform: translate(-15px, -15px); }
.m-segno b { font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.m-segno--w { flex-direction: row-reverse; transform: translate(calc(-100% + 15px), -15px); }
.m-segno--s b { position: relative; top: 14px; }
.m-segno--n b { position: relative; top: -14px; }
.m-segno .m-pin { background: rgba(233, 227, 214, .6); }
.m-relais { transform: translate(-19px, -19px); flex-direction: row; gap: 8px; align-items: center; }
.m-relais .m-mark { width: 38px; height: auto; }
.m-relais b { font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bordeaux); white-space: nowrap; }
@media (max-width: 700px) {
  .m-segno b { font-size: .62rem; letter-spacing: .06em; }
  .m-pin { width: 22px; height: 22px; }
  .m-pin::before { top: 5px; width: 5px; height: 5px; margin-left: -2.5px; }
  .m-pin::after { top: 10px; height: 6px; }
  .m-segno, .m-relais { transform: translate(-11px, -11px); }
  .m-segno--w { transform: translate(calc(-100% + 11px), -11px); }
  .m-relais .m-mark { width: 32px; }
}

/* la riga dei numeri: celle divise da filetti, cifra grande in serif */
.numrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.numrow--2 { grid-auto-columns: minmax(0, 1fr); }
.nr-cell { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6) var(--s5) var(--s6); border-right: 1px solid var(--line); min-height: 220px; }
.nr-cell:last-child { border-right: 0; }
.nr-big { font-family: var(--serif); font-size: var(--t-num); line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.nr-big small { font-size: .4em; margin-left: .1em; }
.nr-label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }
.nr-name { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.1; margin-top: var(--s3); }
.nr-text { font-size: var(--t-small); color: var(--ink-2); max-width: 28ch; }
.nr-pin { position: absolute; right: var(--s5); top: var(--s6); }
.nr-big { padding-right: 40px; }
/* la miniatura tonda sta NEL FLUSSO, in fondo a destra: assoluta copriva
   il nome del luogo («Porto Pa…») nelle celle strette */
.nr-thumb { flex: none; margin-top: auto; padding-top: var(--s4); align-self: flex-end; width: 84px; height: calc(84px + var(--s4)); }
.nr-thumb img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.numrow--luoghi { margin-top: 0; border-top: 0; }
@media (max-width: 900px) {
  .numrow { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
  .nr-cell { border-bottom: 1px solid var(--line); min-height: 0; }
  .nr-cell:nth-child(2n) { border-right: 0; }
  .nr-thumb { width: 64px; height: calc(64px + var(--s4)); }
  .nr-thumb img { width: 64px; height: 64px; }
}
@media (max-width: 520px) { .numrow { grid-template-columns: 1fr; } .nr-cell { border-right: 0; } }
/* sei celle in una riga: la cifra scende, altrimenti «1768» esce dalla cella */
.numrow--6 .nr-big { font-size: clamp(2.4rem, 1.2rem + 2.6vw, 3.8rem); }
.numrow--6 .nr-name { font-size: 1.3rem; }
.numrow--6 .nr-cell { padding: var(--s5) var(--s4); }
@media (max-width: 1100px) and (min-width: 901px) { .numrow--6 { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; } .numrow--6 .nr-cell { border-bottom: 1px solid var(--line); } .numrow--6 .nr-cell:nth-child(3n) { border-right: 0; } }

/* --- il carosello: fotografie alte, nome e un piu' ------------------------- */
.carosello { padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: var(--gutter); }
.cs-scroll::-webkit-scrollbar { display: none; }
.cs-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 0; width: max-content; min-width: 100%; max-width: var(--wrap); margin-inline: auto; }
.cs-item { border-left: 1px solid var(--line); }
.cs-item:last-child { border-right: 1px solid var(--line); }
.cs-item > a, .cs-item > span { display: block; }
.cs-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; margin: 0 1px; }
.cs-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.cs-item a:hover .cs-media img { transform: scale(1.03); }
.cs-foot { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name plus' 'meta plus'; align-items: center; gap: 2px var(--s4); padding: var(--s4) var(--s4) var(--s5); }
.cs-name { grid-area: name; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.1; }
.cs-meta { grid-area: meta; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }
.cs-plus { grid-area: plus; position: relative; width: 14px; height: 14px; }
.cs-plus::before, .cs-plus::after { content: ''; position: absolute; background: var(--ink); }
.cs-plus::before { left: 0; right: 0; top: 50%; height: 1px; }
.cs-plus::after { top: 0; bottom: 0; left: 50%; width: 1px; }
@media (min-width: 1400px) { .cs-track { grid-auto-columns: minmax(0, 1fr); width: 100%; } }

/* --- le camere ------------------------------------------------------------------ */
.rm-list { display: grid; gap: var(--s8); }
.rm { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: var(--s7); border-top: 1px solid var(--line); }
.rm:nth-child(even) .rm-media { order: 2; }
.rm-media { aspect-ratio: 4 / 3; overflow: hidden; }
.rm-media img { width: 100%; height: 100%; object-fit: cover; }
.rm-facts { display: grid; grid-template-columns: repeat(4, auto); gap: var(--s4) var(--s5); margin-top: var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rm-facts dt { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }
.rm-facts dd { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin-top: 4px; }
.rm-facts dd small { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rm-text { margin-top: var(--s5); }
@media (max-width: 900px) { .rm { grid-template-columns: 1fr; } .rm:nth-child(even) .rm-media { order: 0; } .rm-facts { grid-template-columns: 1fr 1fr; } }

/* --- il filtro: gruppi serif e la cifra grande ------------------------------------ */
.filtro { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.fl { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s7); padding: var(--s6) 0; flex-wrap: wrap; }
.fl-group { display: grid; gap: var(--s3); }
.fl-vals { display: flex; flex-wrap: wrap; gap: var(--s2) 0; }
.fl-vals span { font-family: var(--serif); font-size: var(--t-h3); line-height: 1; padding: 0 var(--s4); border-left: 1px solid var(--line-ui); }
.fl-vals span:first-child { padding-left: 0; border-left: 0; }
.fl-big { display: grid; gap: var(--s2); margin-left: auto; text-align: right; }
.fl-num { font-family: var(--serif); font-size: var(--t-num); line-height: .9; }
@media (max-width: 700px) { .fl-big { margin-left: 0; text-align: left; } .fl-vals span { font-size: 1.3rem; padding: 0 var(--s3); } .fl { gap: var(--s5); } }

/* --- l'elenco verticale: parole a sinistra, la fotografia che cambia ------------- */
.elenco { padding: 0; }
.el { position: relative; min-height: 100svh; display: grid; align-items: center; background: var(--pine); color: var(--cream); }
.el-photos { position: absolute; inset: 0; overflow: hidden; }
.el-photo { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.el-photo.is-on { opacity: 1; }
.el-photo img { width: 100%; height: 100%; object-fit: cover; }
.el-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--film), .72) 0%, rgba(var(--film), .48) 42%, rgba(var(--film), .12) 100%); }
.el-side { position: relative; padding: clamp(5rem, 12vh, 9rem) var(--gutter); max-width: 60rem; }
.el-side .label { color: var(--cream); opacity: .85; }
.el-list { display: grid; gap: 2px; margin-top: var(--s5); }
.el-item { position: relative; }
.el-item a { display: inline-block; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); color: var(--cream); opacity: .38; transition: opacity var(--t) var(--ease); border-bottom: 1px solid transparent; }
.el-item.is-on a, .el-item a:hover, .el-item a:focus-visible { opacity: 1; }
.el-item.is-on a { border-bottom-color: rgba(239, 233, 221, .5); }
.el-text { display: none; max-width: 40ch; font-size: var(--t-small); color: var(--cream); margin: var(--s2) 0 var(--s3); }
.el-item.is-on .el-text { display: block; }
/* senza JavaScript restano tutte le fotografie, una sotto l'altra */
html:not(.js) .el { min-height: 0; display: block; background: var(--paper); color: var(--ink); }
html:not(.js) .el-photos { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; }
html:not(.js) .el-photo { position: static; opacity: 1; aspect-ratio: 4 / 3; }
html:not(.js) .el-veil { display: none; }
html:not(.js) .el-item a { opacity: 1; color: var(--ink); }
html:not(.js) .el-text { display: block; color: var(--ink-2); }
html:not(.js) .el-side .label { color: var(--sage-deep); }

/* --- la citazione ----------------------------------------------------------------- */
.citazione { position: relative; overflow: hidden; background: var(--paper-2); }
.ci-bg { position: absolute; right: -6%; top: 0; bottom: 0; width: 58%; opacity: .16; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
.ci-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.citazione .wrap { position: relative; }
.ci-quote { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); color: var(--ink-2); max-width: 24ch; margin-top: clamp(4rem, 12vw, 12rem); }
.ci-cite { margin-top: var(--s5); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }
.ci-ring { margin-top: var(--s7); }

/* --- i prodotti ------------------------------------------------------------------- */
.pr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); }
.pr { padding: var(--s6) var(--s5) var(--s7); border-right: 1px solid var(--line); display: grid; align-content: start; gap: var(--s3); }
.pr:last-child { border-right: 0; }
.pr-media { aspect-ratio: 2 / 3; display: grid; place-items: center; background: var(--card); margin-bottom: var(--s3); overflow: hidden; }
.pr-media img { width: auto; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pr--olio .pr-media img { width: 100%; object-fit: cover; mix-blend-mode: normal; }
.pr .label { margin-bottom: 0; }
.pr-notes { font-size: var(--t-small); color: var(--ink-2); }
.pr-sheet { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-small); }
.pr-sheet div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s3); }
.pr-sheet dt { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sage-deep); padding-top: .3em; }
.pr-pair { font-size: var(--t-small); }
.pr-pair .label { display: block; margin-bottom: 2px; }
.pr-grid--full { grid-template-columns: repeat(3, 1fr); }
.pr-grid--full .pr { padding: var(--s7) var(--s6); border-bottom: 1px solid var(--line); }
.pr-grid--full .pr:nth-child(3n) { border-right: 0; }
.pr-grid--full .pr:last-child { border-right: 1px solid var(--line); }
.pr-grid--full .pr-media { aspect-ratio: 3 / 4; }
@media (max-width: 1000px) { .pr-grid { grid-template-columns: repeat(3, 1fr); } .pr:nth-child(3n) { border-right: 0; } .pr { border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) { .pr-grid, .pr-grid--full { grid-template-columns: repeat(2, 1fr); } .pr:nth-child(3n) { border-right: 1px solid var(--line); } .pr:nth-child(2n), .pr-grid--full .pr:nth-child(2n) { border-right: 0; } .pr-grid--full .pr { padding: var(--s5) var(--s4); } }

/* --- la banda: fotografia a tutto campo -------------------------------------------- */
.banda { padding: 0; }
.bd-frame { position: relative; min-height: clamp(520px, 82vh, 860px); display: grid; align-items: end; overflow: hidden; color: var(--cream); }
.bd-frame > picture { position: absolute; inset: 0; }
.bd-frame > picture img { width: 100%; height: 100%; object-fit: cover; }
.bd-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--film), .78) 0%, rgba(var(--film), .35) 45%, rgba(var(--film), .05) 100%); }
.bd-text { position: relative; padding: clamp(3rem, 8vw, 7rem) var(--gutter); max-width: 52rem; }
.bd-text .label { color: var(--cream); opacity: .85; }
.bd-text .display { color: var(--cream); }
.bd-text p:not(.label) { margin-top: var(--s5); font-size: var(--t-lede); font-style: italic; font-weight: 400; max-width: 44ch; }

/* --- apertura di pagina interna ------------------------------------------------------ */
.pagehero { position: relative; padding: calc(var(--bar-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 6vw, 5rem); background: var(--paper); }
.pagehero--media { min-height: 88svh; display: flex; align-items: flex-end; color: var(--cream); }
.ph-media { position: absolute; inset: 0; overflow: hidden; }
.ph-media picture { position: absolute; inset: 0; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; }
.ph-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--film), .55) 0%, rgba(var(--film), .10) 35%, rgba(var(--film), .78) 100%); }
.pagehero .wrap { position: relative; }
.ph-text { max-width: 52rem; }
.pagehero--media .label { color: var(--cream); opacity: .85; }
.pagehero--media .lede { color: var(--cream); }
.ph-text .lede { margin-top: var(--s5); }

/* --- il punto ------------------------------------------------------------------------ */
.pt { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 800px) { .pt { grid-template-columns: 1fr; } }

/* --- righe ---------------------------------------------------------------------------- */
.row-list { border-top: 1px solid var(--line); }
.row-item { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--s4) var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.row-n { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; color: var(--sage-deep); padding-top: .55em; }
.row-item p { margin-top: var(--s2); color: var(--ink-2); max-width: 62ch; }
.row-meta { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; padding-top: .55em; }
@media (max-width: 640px) { .row-item { grid-template-columns: 2.5rem 1fr; } .row-meta { grid-column: 2; padding-top: 0; } }

/* --- passi ----------------------------------------------------------------------------- */
.step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step-list li { padding: var(--s6) var(--s5) var(--s7); border-right: 1px solid var(--line); }
.step-list li:last-child { border-right: 0; }
.step-n { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ink); margin-bottom: var(--s4); }
.step-list p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-small); }
@media (max-width: 800px) { .step-list { grid-template-columns: 1fr; } .step-list li { border-right: 0; border-bottom: 1px solid var(--line); } .step-list li:last-child { border-bottom: 0; } }

/* --- immagine e testo --------------------------------------------------------------------- */
.sp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sp--flip .sp-img { order: 2; }
.sp-img { aspect-ratio: 4 / 3; overflow: hidden; }
.sp--tall .sp-img { aspect-ratio: 4 / 5; }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-text .prose { margin-top: var(--s5); }
@media (max-width: 900px) { .sp { grid-template-columns: 1fr; } .sp--flip .sp-img { order: 0; } }

/* --- la griglia di voci -------------------------------------------------------------------- */
.gr-list { display: grid; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gr-list--3 { grid-template-columns: repeat(3, 1fr); }
.gr-list--4 { grid-template-columns: repeat(4, 1fr); }
.gr-list--2 { grid-template-columns: repeat(2, 1fr); }
.gr-item { padding: var(--s5) var(--s5) var(--s6); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gr-item h3 { font-size: 1.35rem; }
.gr-item p { margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 900px) { .gr-list--3, .gr-list--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gr-list--3, .gr-list--4, .gr-list--2 { grid-template-columns: 1fr; } }

/* --- le esperienze: schede e la striscia dei mesi --------------------------------------------- */
.ex-group { margin-top: var(--s8); }
.ex-group-title { padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-left: 1px solid var(--line); }
.ex { display: grid; grid-template-rows: auto 1fr; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ex-media { aspect-ratio: 4 / 3; overflow: hidden; }
.ex-media img { width: 100%; height: 100%; object-fit: cover; }
.ex-body { padding: var(--s5) var(--s5) var(--s6); display: grid; align-content: start; gap: var(--s3); }
.ex-body > p { color: var(--ink-2); font-size: var(--t-small); }
.ex-facts { display: flex; gap: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: var(--s2); }
.ex-facts dt { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }
.ex-facts dd { font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; margin-top: 2px; }
.ex-facts dd small { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ex-when { display: grid; gap: var(--s2); }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.months i { display: grid; place-items: center; height: 26px; font-style: normal; font-family: var(--mono); font-size: .62rem; letter-spacing: 0; color: var(--ink-2); background: var(--paper-2); }
.months i.is-on { background: var(--bordeaux); color: var(--cream); }
@media (max-width: 1000px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ex-grid { grid-template-columns: 1fr; } }

/* --- tabella ----------------------------------------------------------------------------------- */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { padding: var(--s4) var(--s4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); font-weight: 500; border-bottom-color: var(--line-ui); }
.tbl tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.tbl td { color: var(--ink-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- domande --------------------------------------------------------------------------------------- */
.fq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); }
.fq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; position: relative; width: 14px; height: 14px; margin-right: 4px; }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; background: var(--ink); transition: transform var(--t) var(--ease); }
.qa summary i::before { left: 0; right: 0; top: 50%; height: 1px; }
.qa summary i::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.qa[open] summary i::after { transform: scaleY(0); }
.qa-body { padding: 0 0 var(--s5); color: var(--ink-2); max-width: 62ch; }
.qa-body p + p { margin-top: .8em; }
@media (max-width: 800px) { .fq { grid-template-columns: 1fr; } }

/* --- galleria ---------------------------------------------------------------------------------------- */
.ga-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ga-item { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.ga-item--tall { grid-row: span 2; aspect-ratio: auto; }
.ga-item img { width: 100%; height: 100%; object-fit: cover; }
.ga-item figcaption { position: absolute; left: var(--s4); bottom: var(--s4); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 8px rgba(var(--film), .6); }
@media (max-width: 700px) { .ga-grid { grid-template-columns: 1fr 1fr; } }

/* --- collegamenti alle altre pagine ------------------------------------------------------------------ */
.pl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pl-list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name plus' 'hint plus'; align-items: center; gap: 2px var(--s4); padding: var(--s5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 120px; transition: background var(--t-fast) var(--ease); }
.pl-list a:hover { background: var(--paper-2); }
.pl-list .display { grid-area: name; font-size: 1.4rem; }
.pl-hint { grid-area: hint; font-size: var(--t-small); color: var(--ink-2); }
.pl-list .cs-plus { grid-area: plus; }

/* --- chiusura --------------------------------------------------------------------------------------------- */
.cta { text-align: center; background: var(--paper-2); }
.cta-inner { max-width: 48rem; margin-inline: auto; }
.cta-inner .lede { margin: var(--s5) auto 0; }
.cta-inner .actions { justify-content: center; }

/* --- la scheda del modulo del riferimento ------------------------------------------------------------------- */
.contact { background: var(--paper-2); }
.ct { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ct-card { background: var(--card); padding: clamp(1.5rem, 4vw, 3.5rem); }
.ct-card .section-head { margin-bottom: var(--s6); }
.ct-lines { display: grid; gap: var(--s4); border-top: 1px solid var(--line-ui); padding-top: var(--s5); }
.ct-lines li { display: grid; gap: 2px; }
.ct-lines span { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }
.ct-lines a, .ct-lines b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.ct-lines a:hover { color: var(--bordeaux); }
.ct-foot { margin-top: var(--s5); font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 860px) { .ct { grid-template-columns: 1fr; } }

/* 06-forms.css */
/* ============================================================
   Il modulo del riferimento: campi grandi a bordo sottile, testo mono
   maiuscolo, l'etichetta dentro il campo che sale quando si scrive,
   invio a tutta larghezza scuro.
   ============================================================ */
.form { display: grid; gap: var(--s3); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.fld { position: relative; display: grid; }
.fld--wide { grid-column: 1 / -1; }
.fld label {
  position: absolute; left: 18px; top: 22px;
  font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  pointer-events: none; transition: transform var(--t-fast) var(--ease), font-size var(--t-fast) var(--ease);
  transform-origin: left top;
}
.fld label em { font-style: normal; color: var(--bordeaux); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 64px; padding: 28px 18px 10px;
  font-family: var(--text); font-weight: 500; font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 1px solid var(--line-ui); border-radius: 0;
  transition: border-color var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.fld select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 30px, calc(100% - 17px) 30px; background-size: 5px 5px; background-repeat: no-repeat; }
.fld textarea { resize: vertical; min-height: 140px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--ink); outline: none; }
.fld input:focus ~ label, .fld input:not(:placeholder-shown) ~ label,
.fld textarea:focus ~ label, .fld textarea:not(:placeholder-shown) ~ label,
.fld select ~ label { transform: translateY(-12px); font-size: .62rem; }
.fld-err { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em; color: var(--bordeaux); margin-top: 4px; }
.fld[data-invalid] input, .fld[data-invalid] select, .fld[data-invalid] textarea { border-color: var(--bordeaux); }
.hp { position: absolute; left: -9999px; }
.consents { display: grid; gap: var(--s3); font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s2); }
.chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--pine); flex: none; }
.chk a { color: var(--bordeaux); }
.form .actions { margin-top: var(--s3); }
.form-ok { padding: var(--s5); background: var(--paper-2); font-family: var(--serif); font-size: 1.3rem; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* dentro il pannello, sul buio */
.b2b-panel .fld label, .b2b-panel .fld label em { color: var(--grey-on-dark); }
.b2b-panel .fld input, .b2b-panel .fld select, .b2b-panel .fld textarea { border-color: var(--line-dark); color: var(--cream); min-height: 56px; padding-top: 24px; }
.b2b-panel .fld select { background-image: linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(135deg, var(--cream) 50%, transparent 50%); }
.b2b-panel .fld input:focus, .b2b-panel .fld select:focus, .b2b-panel .fld textarea:focus { border-color: var(--cream); }
.b2b-panel .consents { color: var(--grey-on-dark); }
.b2b-panel .chk a { color: var(--bordeaux-2); }
.b2b-panel .btn { background: var(--paper-3); color: var(--ink); }
.b2b-panel .btn:hover { background: var(--paper-2); }
.b2b-panel .form-ok { background: rgba(239, 233, 221, .1); color: var(--cream); }
.b2b-panel .fields { grid-template-columns: 1fr; }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto: entra al 40% di scroll o dopo 25 secondi,
   mai sopra il filmato o sul modulo, chiuso resta chiuso sette giorni.
   Verde bosco, come il menu, senza raggi.
   ============================================================ */
.b2b-panel {
  position: fixed; right: 22px; bottom: 96px; z-index: 50;
  width: min(400px, calc(100vw - 44px));
  max-height: calc(100svh - 120px); overflow-y: auto;
  background: var(--pine); color: var(--cream);
  padding: var(--s6);
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-panel .label { color: var(--grey-on-dark); }
.b2b-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: var(--cream); border: 1px solid var(--line-dark); }
.b2b-panel h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); padding-right: 40px; }
.b2b-intro { margin-top: var(--s3); font-size: var(--t-small); color: var(--grey-on-dark); }
.b2b-choices { display: grid; gap: 2px; margin-top: var(--s5); border-top: 1px solid var(--line-dark); }
.b2b-option { display: grid; gap: 2px; text-align: left; padding: var(--s3) 0; border-bottom: 1px solid var(--line-dark); color: var(--cream); transition: color var(--t-fast) var(--ease); }
.b2b-option:hover { color: var(--bordeaux-2); }
.b2b-option b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; }
.b2b-option span { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-on-dark); }
.b2b-back { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-on-dark); margin-bottom: var(--s3); }
.b2b-panel .form { margin-top: var(--s4); }
@media (max-width: 480px) { .b2b-panel { right: 12px; bottom: 90px; left: 12px; width: auto; padding: var(--s5); } }