/* 01-tokens.css */
/* ============================================================
   Gettoni. Gli stessi di tools/tavolozza.py, che li confronta.
   ============================================================ */
:root {
  /* il chiaro: bianco puro del riferimento, la pietra del filmato */
  --paper: #FFFFFF;
  --stone: #EFEBE4;
  --stone-2: #E4DFD6;
  --ink: #0A0A0A;
  --ink-2: #646464;
  --mute: #8C8C8C;
  --line: #E3E1DC;
  --line-2: #CFCBC4;

  /* il nero puro delle sezioni scure */
  --night: #000000;
  --night-2: #141414;
  --night-3: #1F1F1F;
  --snow: #FFFFFF;
  --snow-2: #A6A6A6;
  --line-dark: rgba(255, 255, 255, .16);
  --line-dark-2: rgba(255, 255, 255, .3);

  /* l'accento: la freccia del marchio */
  --arancio: #E1421E;
  --matrice-chiara: #B9B5AF;    /* i quadretti «dietro» dei pittogrammi: inchiostro al 32% sul bianco, ma opaco, cosi' coprono */
  --arancio-ink: #B8330F;
  --arancio-rgb: 225, 66, 30;

  /* il buio caldo del filmato di apertura, per gli aloni sopra la pellicola */
  --film: 29, 22, 18;

  /* caratteri */
  --sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', 'Times New Roman', Georgia, serif;
  --mono: 'Sometype Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* scala */
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.5rem;
  --h3: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --h2: clamp(1.9rem, 1.1rem + 2.6vw, 3.3rem);
  --h1: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem);
  --display: clamp(2.6rem, 1rem + 6.4vw, 7.6rem);
  --statement: clamp(2rem, .9rem + 4.4vw, 5.4rem);
  --statement-sm: clamp(1.6rem, 1rem + 2.2vw, 3rem);

  /* spazi */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --gap: 8px;
  --wrap: 1360px;
  --gutter: clamp(16px, 2.6vw, 40px);

  /* la testata senza barra: margine e altezza dell'ingombro */
  --hd: 25px;
  --hd-h: 84px;

  /* il piano sequenza */
  --seq-vh: 900vh;

  /* movimento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 600ms;
}
@media (max-width: 900px) {
  :root { --seq-vh: 760vh; --hd: 16px; --hd-h: 72px; }
}

/* 02-base.css */
/* ============================================================
   Base: caratteri, ripristino, tipografia, bottoni, etichette.
   ============================================================ */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/intertight-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/intertight-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: 'Newsreader'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/newsreader-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: 'Newsreader'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/newsreader-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: 'Sometype Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/sometype-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: 'Sometype Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/sometype-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(--serif); font-size: var(--text); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-optical-sizing: auto; }
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, .st-note a { color: var(--arancio-ink); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
[data-tone="dark"] .prose a, [data-tone="dark"] .note a { color: var(--snow); }
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, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }
::selection { background: rgba(var(--arancio-rgb), .25); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }

/* --- i toni --------------------------------------------------------------- */
[data-tone="dark"]:not(.site-header):not(.page-index) { background: var(--night); color: var(--snow); }
[data-tone="stone"]:not(.site-header):not(.page-index) { background: var(--stone); color: var(--ink); }
[data-tone="light"]:not(.site-header):not(.page-index) { background: var(--paper); color: var(--ink); }

/* --- tipografia ------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--sans); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.12; letter-spacing: -.02em; }
/* la meta' in grigio del titolo: <i> nel JSON */
h1 i, h2 i, h3 i { font-style: normal; color: var(--mute); }
[data-tone="stone"] h2 i, [data-tone="stone"] h3 i { color: var(--ink-2); }
[data-tone="dark"] h1 i, [data-tone="dark"] h2 i, [data-tone="dark"] h3 i { color: var(--snow-2); }
.lede { font-size: var(--text-lg); color: var(--ink-2); line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
[data-tone="dark"] .lede { color: var(--snow-2); }
.note { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--s6); max-width: 70ch; }
[data-tone="dark"] .note { color: var(--snow-2); }
.prose p + p { margin-top: 1em; }
.prose { max-width: 62ch; text-wrap: pretty; }
.prose--wide { max-width: 74ch; }
.prose strong, .prose b { font-weight: 600; }
.term { font-weight: 600; }
.todo { background: rgba(var(--arancio-rgb), .18); color: var(--arancio-ink); padding: 0 .3em; }

/* la dichiarazione in serif con il rientro della prima riga */
.statement-p { font-family: var(--serif); font-weight: 400; font-size: var(--statement); line-height: .98; letter-spacing: -.012em; text-indent: 2.4em; text-wrap: pretty; font-optical-sizing: auto; }
.statement-p--sm { font-size: var(--statement-sm); line-height: 1.04; text-indent: 1.8em; }
.statement-p i { font-style: normal; color: var(--mute); }
.st-note { margin-top: var(--s5); font-size: var(--text-sm); color: var(--ink-2); max-width: 44ch; }

/* l'occhiello in monospaziato, senza segni davanti */
.label { font-family: var(--mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s4); line-height: 1.3; }
[data-tone="dark"] .label { color: var(--snow-2); }
.mono { font-family: var(--mono); letter-spacing: .08em; }

/* --- elenchi col pallino ------------------------------------------------------ */
.dots { display: grid; gap: var(--s2); margin-top: var(--s5); }
.dots li { position: relative; padding-left: 1.2em; }
.dots li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--arancio); }

/* --- bottoni: rettangoli, mai raggi ------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; min-height: 50px; padding: 0 22px 0 24px; background: var(--ink); color: var(--snow); font-family: var(--sans); font-size: var(--text-sm); font-weight: 500; line-height: 1; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn .arr { font-style: normal; font-size: 1.15em; transition: transform var(--t-fast) var(--ease); }
.btn:hover { background: var(--arancio-ink); }
.btn:hover .arr { transform: translateX(4px); }
.btn--line { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--snow); }
.btn--snow { background: var(--snow); color: var(--ink); }
.btn--snow:hover { background: var(--stone); }
[data-tone="dark"] .btn--line, .btn--line.btn--snow { color: var(--snow); border-color: var(--line-dark-2); background: transparent; }
[data-tone="dark"] .btn--line:hover, .btn--line.btn--snow:hover { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.btn--mono { font-family: var(--mono); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: var(--text-xs); }
.videohero .btn--line, .pagehero--media .btn--line { color: var(--snow); border-color: rgba(255, 255, 255, .55); }
.videohero .btn--line:hover, .pagehero--media .btn--line:hover { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* --- utilita' --------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--snow); 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); font-family: var(--sans); }

/* --- entrate in scena: solo con JS acceso ------------------------------------ */
.js [data-reveal] > .wrap, .js [data-reveal] > .cb-frame { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js [data-reveal].is-in > .wrap, .js [data-reveal].is-in > .cb-frame { 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] > .cb-frame { opacity: 1; transform: none; }
}

/* 03-layout.css */
/* ============================================================
   La testata senza barra, l'indice a destra, il menu, il piede.
   ============================================================ */
.site-header { position: fixed; inset: var(--hd) var(--hd) auto; z-index: 40; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); pointer-events: none; color: var(--ink); transition: color var(--t) var(--ease); font-family: var(--sans); }
.site-header > * { pointer-events: auto; }
.site-header[data-tone="dark"], .site-header[data-tone="film"] { color: var(--snow); }
.site-header[data-tone="film"] { text-shadow: 0 1px 14px rgba(var(--film), .55); }
.site-header[data-tone="film"] .brand-mark path { filter: drop-shadow(0 1px 6px rgba(var(--film), .4)); }

/* il marchio su tre righe, con la freccia */
.brand { display: inline-flex; align-items: flex-start; gap: 10px; }
.brand-mark { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.brand-mark path { fill: var(--arancio); }
.brand-txt { display: grid; font-size: var(--text-sm); line-height: 1.2; letter-spacing: -.01em; }
.brand-txt em { font-family: var(--serif); font-style: normal; font-size: 1.05em; }

/* le voci con le virgole */
.nav-main { display: flex; align-items: baseline; gap: 0; font-size: var(--text-sm); line-height: 1.2; margin-left: auto; }
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-sep { margin-right: .55em; }
.nav-side { display: flex; align-items: baseline; gap: var(--s5); margin-left: var(--s6); font-size: var(--text-sm); }
.lang-switch { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .12em; }
.menu-toggle { display: none; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 1080px) {
  .nav-main { display: none; }
  .menu-toggle { display: inline-block; }
  .nav-side { margin-left: auto; }
}

/* l'indice della pagina a destra, verticale */
.page-index { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30; font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); transition: color var(--t) var(--ease), opacity var(--t) var(--ease); opacity: 0; pointer-events: none; }
.page-index.is-shown { opacity: 1; pointer-events: auto; }
.page-index[data-tone="dark"], .page-index[data-tone="film"] { color: var(--snow); }
.page-index ul { display: grid; gap: 14px; justify-items: end; }
.pi-link { display: inline-flex; align-items: center; gap: 10px; }
.pi-link span { opacity: 0; transform: translateX(6px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); padding: 3px 6px; background: var(--paper); }
.page-index[data-tone="stone"] .pi-link span { background: var(--stone); }
.page-index[data-tone="dark"] .pi-link span { background: var(--night); }
.page-index[data-tone="film"] .pi-link span { background: rgba(0, 0, 0, .55); }
.pi-link i { width: 16px; height: 1px; background: currentColor; opacity: .5; transition: width var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.pi-link:hover span, .pi-link.is-here span { opacity: 1; transform: none; }
.pi-link.is-here i { width: 30px; opacity: 1; }
@media (max-width: 1100px) { .page-index { display: none; } }

/* il menu a tutto schermo */
.site-menu { position: fixed; inset: 0; z-index: 60; background: var(--night); color: var(--snow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t) var(--ease), visibility 0s var(--t); overflow-y: auto; font-family: var(--sans); }
.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(--s4); right: 0; width: 44px; height: 44px; display: grid; place-items: center; font-size: 2rem; color: var(--snow); }
.menu-list { display: grid; gap: 0; margin-top: var(--s6); }
.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(--text-xs); color: var(--snow-2); }
.menu-list span { font-size: var(--h3); letter-spacing: -.02em; }
.menu-list small { grid-column: 2; color: var(--snow-2); font-family: var(--serif); font-size: var(--text-sm); }
.menu-list a[aria-current="page"] span { color: var(--arancio); }
.menu-foot { margin-top: auto; padding-top: var(--s7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.menu-tel { color: var(--snow-2); }
.menu-langs { margin-left: auto; display: flex; gap: var(--s4); }
.menu-langs a { color: var(--snow-2); }
.menu-langs a[aria-current="true"] { color: var(--snow); text-decoration: underline; text-underline-offset: .2em; }

/* --- sezioni ---------------------------------------------------------------- */
.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section--tight { padding-top: 0; }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 60rem; }
.section-head .lede { margin-top: var(--s4); }

/* --- il piede -------------------------------------------------------------------- */
.site-footer { background: var(--night); color: var(--snow); padding: var(--s9) 0 var(--s5); font-family: var(--sans); }
.footer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s7) var(--s6); font-size: var(--text-sm); line-height: 1.45; }
.footer-col h2 { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--snow); margin-bottom: var(--s4); }
.footer-col ul { display: grid; gap: var(--s2); color: var(--snow-2); }
.footer-col a:hover { color: var(--snow); }
.footer-big { font-size: var(--text-lg); color: var(--snow); }
.footer-words { margin-top: clamp(4rem, 10vw, 8rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 48px); align-items: end; }
@media (max-width: 700px) { .footer-words { grid-template-columns: 1fr; gap: 12px; } }
.wm { width: 100%; height: auto; }
.wm rect { fill: var(--snow); opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--ease) var(--d), transform .6s var(--ease) var(--d); }
.js .is-in .wm rect, html:not(.js) .wm rect { opacity: 1; transform: none; }
.footer-legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6); font-family: var(--serif); font-size: var(--text-xs); color: var(--snow-2); }
.footer-legal a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* 04-scrolly.css */
/* ============================================================
   I due filmati: l'apertura in ciclo e il piano sequenza scrubbato.
   Tutti e due a tutto campo, 100svh.
   ============================================================ */

/* --- l'apertura: il testo in alto a destra -------------------------------- */
.videohero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: rgb(var(--film)); color: var(--snow); }
.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; }
/* Filmato caldo, mediamente scuro (luminanza 63-137 su 255), con la finestra
   bianca nella terza inquadratura sotto il blocco. Un alone ellittico nel
   buio del filmato dietro il blocco in alto a destra, piu' un fondo leggero
   in basso per il richiamo. Misurato da tools/contrasto.py. */
.vh-veil { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 50% 48% at 76% 28%, rgba(var(--film), .80) 0%, rgba(var(--film), .62) 45%, rgba(var(--film), 0) 100%),
  linear-gradient(180deg, rgba(var(--film), .38) 0%, rgba(var(--film), 0) 40%),
  linear-gradient(0deg, rgba(var(--film), .34) 0%, rgba(var(--film), 0) 24%); }
.vh-inner { position: absolute; right: var(--gutter); top: calc(var(--hd-h) + 5vh); width: min(62vw, 58rem); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.vh-title { font-family: var(--sans); font-weight: 500; font-size: var(--display); letter-spacing: -.04em; line-height: .94; text-wrap: balance; }
.vh-sub { margin-top: var(--s5); font-family: var(--serif); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.4; max-width: 34rem; color: rgba(255, 255, 255, .94); text-wrap: pretty; }
.vh-inner .btn { margin-top: var(--s6); }
.vh-scroll { position: absolute; left: var(--gutter); bottom: 28px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.vh-scroll i { width: 44px; height: 1px; background: rgba(255, 255, 255, .8); }
@media (max-width: 900px) {
  .vh-inner { right: var(--gutter); left: var(--gutter); width: auto; top: calc(var(--hd-h) + 4vh); }
  .vh-veil { background: radial-gradient(ellipse 80% 44% at 60% 24%, rgba(var(--film), .66) 0%, rgba(var(--film), .5) 50%, rgba(var(--film), 0) 100%), linear-gradient(0deg, rgba(var(--film), .34) 0%, rgba(var(--film), 0) 24%); }
}

/* --- il piano sequenza --------------------------------------------------------- */
.scrolly { position: relative; height: var(--seq-vh); background: var(--night); color: var(--snow); }
.scrolly-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scrolly-canvas, .scrolly-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
.scrolly-canvas { opacity: 0; transition: opacity var(--t) var(--ease); }
[data-painted="true"] .scrolly-canvas { opacity: 1; }
[data-painted="true"] .scrolly-poster { opacity: 0; transition: opacity var(--t) var(--ease) var(--t); }
/* Materiale al tramonto (luminanza 8-144): un filo di scuro in cima per la
   testata bianca e un fondo leggero per il righello; l'alone sta dietro
   ogni didascalia, capitolo per capitolo. */
.scrolly-veil { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 20%),
  linear-gradient(0deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 18%); }

/* le didascalie: nella colonna esterna, in basso */
.scrolly-lead, .scrolly-phase { position: absolute; left: 0; right: 0; display: flex; padding: 0 var(--gutter); pointer-events: none; }
.scrolly-lead { top: 0; bottom: 0; align-items: center; justify-content: center; z-index: 3; }
.scrolly-phase { bottom: 12vh; z-index: 2; }
.scrolly-phase[data-side="left"] { justify-content: flex-start; }
.scrolly-phase[data-side="right"] { justify-content: flex-end; padding-right: calc(var(--gutter) + 48px); }
[data-mode="scrub"] .scrolly-phase { opacity: 0; }
.cap { position: relative; max-width: 30rem; padding: var(--s5) var(--s5) var(--s5) 0; }
.cap::before { content: ''; position: absolute; inset: -50% -60%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(0, 0, 0, var(--halo-d, .55)) 0%, rgba(0, 0, 0, calc(var(--halo-d, .55) * .8)) 40%, rgba(0, 0, 0, 0) 100%); }
.cap-kicker { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .92); margin-bottom: var(--s3); display: flex; gap: 1.2em; align-items: baseline; }
.cap-n { color: var(--arancio); }
.cap h2, .cap h3 { font-family: var(--sans); font-weight: 400; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.02; }
.cap p:last-child { margin-top: var(--s4); font-family: var(--serif); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: rgba(255, 255, 255, .94); line-height: 1.45; text-wrap: pretty; max-width: 26rem; }
.cap--lead { text-align: center; max-width: 44rem; padding: var(--s6) var(--s7); }
.cap--lead h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); }
.cap--lead p:last-child { margin-inline: auto; }
/* l'entrata a scaglioni: occhiello, titolo, riga */
.js [data-mode="scrub"] .cap > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js [data-mode="scrub"] .is-active .cap > *, .js [data-mode="scrub"] .scrolly-lead .cap > * { opacity: 1; transform: none; }
.js [data-mode="scrub"] .is-active .cap > :nth-child(2) { transition-delay: 80ms; }
.js [data-mode="scrub"] .is-active .cap > :nth-child(3) { transition-delay: 160ms; }

/* il righello a destra: sei numeri e una linea sola che si riempie. Il
   motore scrive la LARGHEZZA della barra: la barra e' orizzontale e
   ruotata di un quarto di giro, cosi' la larghezza diventa lunghezza e
   il riempimento parte dall'alto. */
.scrolly-hud { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 4; height: 210px; opacity: 0; transition: opacity var(--t) var(--ease); }
.scrolly-counter { display: none; }
.scrolly-rail { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 16px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: rgba(255, 255, 255, .72); line-height: 1; }
.scrolly-progress { position: absolute; right: 0; top: 50%; width: 210px; height: 1px; background: var(--line-dark-2); transform: translate(50%, -50%) rotate(90deg); }
.scrolly-progress i { display: block; height: 100%; width: 0; background: var(--arancio); }
[data-painted="true"] .scrolly-hud { opacity: 1; }
[data-mode="static"] .scrolly-hud { display: none; }

/* il ripiego statico: poster, apertura, e i capitoli come colonna */
.scrolly[data-mode="static"] { height: auto; }
[data-mode="static"] .scrolly-stage { position: relative; height: auto; overflow: visible; }
[data-mode="static"] .scrolly-poster, [data-mode="static"] .scrolly-veil, [data-mode="static"] .scrolly-lead { height: 100svh; bottom: auto; }
[data-mode="static"] .scrolly-poster { position: relative; }
[data-mode="static"] .scrolly-canvas { display: none; }
[data-mode="static"] .scrolly-captions { padding: var(--s8) 0; display: grid; gap: var(--s8); }
[data-mode="static"] .scrolly-phase { position: static; flex-direction: column; align-items: flex-start; opacity: 1; padding: 0 var(--gutter); }
[data-mode="static"] .scrolly-phase .cap::before { display: none; }
[data-mode="static"] .scrolly-still { width: min(1100px, 100%); margin-top: var(--s5); }
[data-mode="static"] .scrolly-still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
[data-mode="scrub"] .scrolly-still { display: none; }

@media (max-width: 900px) {
  .scrolly-phase { bottom: 10vh; }
  .scrolly-phase[data-side="right"] { padding-right: calc(var(--gutter) + 36px); }
  .cap { max-width: 100%; padding: var(--s4) var(--s4) var(--s4) 0; }
  .cap::before { inset: -40% -12%; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(0, 0, 0, var(--halo-d, .55)) 0%, rgba(0, 0, 0, var(--halo-d, .55)) 70%, rgba(0, 0, 0, 0) 100%); }
  .scrolly-hud { right: 12px; }
  .scrolly-rail { gap: 14px; }
}

/* 05-blocks.css */
/* ============================================================
   I blocchi editoriali. Spigolo vivo, filetti da 1 px, niente ombre.
   ============================================================ */

/* --- la dichiarazione e il vano ------------------------------------------- */
.st { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.st--fig { grid-template-columns: 7fr 4fr; }
.st-fig { position: sticky; top: 12vh; justify-self: end; width: min(100%, 400px); color: var(--ink); }
.st-fig--photo { width: 100%; max-width: 480px; }
.st-fig--photo img { width: 100%; height: auto; }
@media (max-width: 900px) { .st--fig { grid-template-columns: 1fr; } .st-fig { position: static; justify-self: start; width: 260px; } }

/* --- le schede che si allargano --------------------------------------------- */
.cap-row { display: flex; gap: var(--gap); height: clamp(460px, 64vh, 640px); }
.caps .cap { flex: 1 1 0; min-width: 0; background: var(--paper); position: relative; transition: flex .55s var(--ease); }
.caps .cap:hover, .caps .cap.is-open { flex: 2.4 1 0; }
html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) { flex: 1 1 0; }
.cap-link { display: flex; flex-direction: column; height: 100%; padding: 22px 24px 26px; color: var(--ink); }
.cap-tag { align-self: flex-end; font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-2); padding: 6px 12px; white-space: nowrap; }
.caps .pic { width: min(100%, 216px); height: auto; margin: auto; overflow: visible; }
.cap-foot { display: block; margin-top: auto; }
.cap-foot h3 { font-weight: 300; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.cap-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.cap-body > * { min-height: 0; overflow: hidden; }
.cap-rule { display: block; height: 1px; background: var(--line); margin-top: 14px; }
.cap-text { display: block; font-family: var(--serif); font-size: var(--text); line-height: 1.5; color: var(--ink-2); padding-top: 14px; max-width: 34ch; opacity: 0; transition: opacity .3s var(--ease); }
.cap-more { display: block; margin-top: 14px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transition: opacity .3s var(--ease) .15s; }
.caps .cap:hover .cap-body, .caps .cap.is-open .cap-body { grid-template-rows: 1fr; }
.caps .cap:hover .cap-text, .caps .cap.is-open .cap-text, .caps .cap:hover .cap-more, .caps .cap.is-open .cap-more { opacity: 1; }
html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) .cap-body { grid-template-rows: 0fr; }
html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) .cap-text, html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) .cap-more { opacity: 0; }
/* i punti: --o e' 0 nel blocco compatto e 1 nella figura; il volo e' la
   transizione della trasformazione, con il ritardo --i di ogni quadretto;
   i toni (dietro al 32%, la tinta) si accendono solo nella figura */
.pic { --o: 0; }
.pic--open, .caps .cap:hover .pic, .caps .cap.is-open .pic { --o: 1; }
html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) .pic { --o: 0; }
.js .caps:not(.is-in) .pic { --o: 0; }
.pic .pd { fill: var(--ink); transform: translate(calc(var(--cx) * (1 - var(--o)) * 1px), calc(var(--cy) * (1 - var(--o)) * 1px)); transition: transform .62s cubic-bezier(.2, .7, .15, 1) calc(var(--i) * 1ms), fill .35s var(--ease) calc(var(--i) * 1ms + 220ms); }
.pic .pd--far { fill: color-mix(in srgb, var(--matrice-chiara) calc(var(--o) * 100%), var(--ink)); }
.pic .pd--acc { fill: color-mix(in srgb, var(--arancio) calc(var(--o) * 100%), var(--ink)); }
/* i gruppi animati vivono solo nella figura: nel blocco l'animazione e'
   tolta, cosi' i quadretti tornano al loro posto; app.js addolcisce il
   ritorno con una transizione sul gruppo */
.pic .pg { transition: transform .5s var(--ease), opacity .5s var(--ease); }
@media (min-width: 901px) {
  .caps .cap:not(:hover):not(.is-open) .pic .pg, .caps .cap:not(:hover):not(.is-open) .pic .pd,
  html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) .pic .pg, html:not(.js) .caps .cap-row:has(.cap:hover) .cap.is-open:not(:hover) .pic .pd,
  .js .caps:not(.is-in) .pic .pg, .js .caps:not(.is-in) .pic .pd { animation: none; }
}
@media (max-width: 900px) {
  .cap-row { flex-direction: column; height: auto; }
  .caps .cap, .caps .cap:hover, .caps .cap.is-open { flex: none; }
  .cap-link { min-height: 300px; }
  .caps .pic { width: 110px; margin: var(--s6) auto; }
  .cap-foot h3 { white-space: normal; }
  .caps .cap .cap-body { grid-template-rows: 1fr; }
  .caps .cap .cap-text, .caps .cap .cap-more { opacity: 1; }
  .caps .cap .pic { --o: 1; width: 200px; }
}
@media (hover: none) and (min-width: 901px) {
  .caps .cap.is-open .cap-body { grid-template-rows: 1fr; }
}

/* --- i progetti: griglia libera ---------------------------------------------- */
.pj-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--gap); align-items: start; }
.pj { position: relative; }
.pj img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; }
.pj figcaption { display: flex; justify-content: space-between; gap: var(--s4); margin-top: 10px; font-family: var(--sans); font-size: var(--text-sm); }
.pj figcaption em { font-family: var(--serif); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.pj--1 { grid-column: 1 / span 5; }
.pj--2 { grid-column: 8 / span 5; margin-top: 22vh; --ar: 3 / 2; }
.pj--3 { grid-column: 2 / span 4; margin-top: 2vh; }
.pj--4 { grid-column: 7 / span 6; margin-top: -8vh; --ar: 3 / 2; }
.pj--5 { grid-column: 1 / span 4; --ar: 4 / 5; }
.pj--6 { grid-column: 7 / span 5; margin-top: 12vh; --ar: 5 / 4; }
.projects .actions { justify-content: center; margin-top: var(--s8); }
@media (max-width: 800px) { .pj { grid-column: 1 / -1 !important; margin-top: 0 !important; } }

/* --- il cerchio delle fotografie, sul nero ---------------------------------- */
.ring { position: relative; height: 340vh; background: var(--night); color: var(--snow); }
.ring-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ring-head { position: absolute; left: var(--gutter); top: calc(var(--hd-h) + 2vh); max-width: 30rem; z-index: 2; }
.ring-wheel { position: absolute; left: -6vw; top: 50%; width: 0; height: 0; transform: rotate(var(--rot, 0deg)); --R: 44vw; will-change: transform; }
.ring-wheel li { position: absolute; left: 0; top: 0; width: 14vw; max-width: 240px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(-1 * var(--R))); }
.ring-wheel img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ring-stats { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(50vw, 40rem); text-align: left; z-index: 2; }
.ring-stat { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--s3); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ring-stat.is-on { opacity: 1; transform: none; }
.ring-stat b { font-family: var(--sans); font-weight: 400; font-size: clamp(3.4rem, 1.5rem + 9vw, 10rem); letter-spacing: -.045em; line-height: .9; }
.ring-stat span { font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 2.4vw, 3.2rem); line-height: 1; color: var(--snow-2); letter-spacing: -.01em; padding-left: 2.2em; }
.ring-note { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 20px; font-family: var(--sans); font-size: var(--text-xs); color: var(--snow-2); text-align: center; }
.ring-static { display: none; }
html:not(.js) .ring { height: auto; padding: var(--s9) 0; }
html:not(.js) .ring-sticky { position: static; height: auto; }
html:not(.js) .ring-wheel, html:not(.js) .ring-stats { display: none; }
html:not(.js) .ring-static { display: grid; gap: var(--s4); width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: var(--s7) auto 0; font-size: var(--text-xl); }
html:not(.js) .ring-head { position: static; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
@media (max-width: 800px) {
  .ring { height: 280vh; }
  .ring-wheel { --R: 60vw; left: 50%; top: calc(100% + 12vw); }
  .ring-wheel li { width: 26vw; }
  .ring-stats { right: var(--gutter); left: var(--gutter); width: auto; top: 40%; }
  .ring-stat span { padding-left: 0; }
}

/* --- le attestazioni: elenco a filetti ----------------------------------------- */
.ce { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ce .section-head { margin-bottom: 0; }
.ce .actions { grid-column: 1; margin-top: var(--s5); }
.ce-list { border-top: 1px solid var(--line); font-family: var(--sans); font-size: var(--text-sm); }
.ce-row { display: grid; grid-template-columns: 2.4rem 1.2fr 1.6fr 1fr; gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ce-n { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); }
.ce-norm { font-weight: 500; }
.ce-name { color: var(--ink-2); }
.ce-ente { font-family: var(--serif); font-style: normal; color: var(--ink-2); text-align: right; }
@media (max-width: 900px) { .ce { grid-template-columns: 1fr; } .ce-row { grid-template-columns: 2.4rem 1fr; } .ce-name, .ce-ente { grid-column: 2; text-align: left; } }

/* --- gli attestati ------------------------------------------------------------ */
.cd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8) var(--s6); }
.cd { display: grid; grid-template-columns: 180px 1fr; gap: var(--s5); align-items: start; }
.cd-doc img { width: 100%; height: auto; border: 1px solid var(--line); }
.cd-n { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); display: block; margin-bottom: var(--s2); }
.cd-body h3 { font-size: var(--text-xl); }
.cd-name { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); margin-top: 4px; }
.cd-body > p:not(.cd-name):not(.cd-ente) { margin-top: var(--s3); font-size: var(--text-sm); line-height: 1.55; }
.cd-ente { margin-top: var(--s3); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 900px) { .cd-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cd { grid-template-columns: 120px 1fr; } }

/* --- le sedi, la tabella «Offices» --------------------------------------------- */
.offices { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s5); align-items: start; }
.of-label { font-family: var(--serif); font-size: var(--text-lg); }
.of-list { border-top: 1px solid var(--line); font-family: var(--sans); font-size: var(--text-sm); }
.of-row { display: grid; grid-template-columns: 1.1fr 1fr 1.5fr 2rem; gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.of-city, .of-addr { color: var(--ink-2); }
.of-city a, .of-addr a { color: var(--ink); }
.of-go { justify-self: end; color: var(--ink-2); font-size: 1rem; }
.of-go:hover { color: var(--arancio-ink); }
[data-tone="dark"] .of-list { border-color: var(--line-dark); }
[data-tone="dark"] .of-row { border-color: var(--line-dark); }
[data-tone="dark"] .of-city, [data-tone="dark"] .of-addr, [data-tone="dark"] .of-go { color: var(--snow-2); }
[data-tone="dark"] .of-city a, [data-tone="dark"] .of-addr a { color: var(--snow); }
@media (max-width: 720px) { .offices { grid-template-columns: 1fr; } .of-row { grid-template-columns: 1fr 2rem; } .of-city, .of-addr { grid-column: 1; } .of-go { grid-column: 2; grid-row: 1; } }

/* --- il modulo con le sedi ------------------------------------------------------ */
.ct { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ct-foot { margin-top: var(--s6); font-size: var(--text-sm); color: var(--ink-2); max-width: 44ch; }
@media (max-width: 900px) { .ct { grid-template-columns: 1fr; } }

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

/* --- il punto -------------------------------------------------------------------- */
.pt { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pt--fig { grid-template-columns: 7fr 5fr; }
.pt--flip .pt-text { order: 2; }
.pt-text .prose { margin-top: var(--s6); }
.pt-fig { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--stone); }
.pt-fig picture, .pt-fig .clip { position: absolute; inset: 0; }
.pt-fig img, .pt-fig video { width: 100%; height: 100%; object-fit: cover; }
.pt-fig figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; font-family: var(--sans); font-size: var(--text-xs); color: var(--snow); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.pt-fig--plain { aspect-ratio: auto; background: none; overflow: visible; }
.pt-fig--plain img { position: static; width: 100%; height: auto; object-fit: contain; }
.pt-fig--plain figcaption { position: static; margin-top: 10px; color: var(--ink-2); text-shadow: none; }
@media (max-width: 800px) { .pt--fig { grid-template-columns: 1fr; } .pt--flip .pt-text { order: 0; } .pt-fig { aspect-ratio: 4 / 3; } }

/* --- righe -------------------------------------------------------------------------- */
.row-list { border-top: 1px solid var(--line); }
.row-item { display: grid; grid-template-columns: 3rem 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); color: var(--ink-2); font-size: var(--text-xs); padding-top: .5em; letter-spacing: .1em; }
.row-item h3 { font-size: var(--text-xl); }
.row-item p { margin-top: var(--s2); color: var(--ink-2); max-width: 58ch; }
.row-meta { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap; padding-top: .3em; }
.rw { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.rw-media { position: sticky; top: 12vh; aspect-ratio: 4 / 5; max-height: 76svh; overflow: hidden; background: var(--stone); }
.rw-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.rw-shot.is-on { opacity: 1; transform: none; }
.rw-shot picture, .rw-shot .clip { position: absolute; inset: 0; }
.rw-shot img, .rw-shot video { width: 100%; height: 100%; object-fit: cover; }
.rw-n { position: absolute; left: 16px; bottom: 12px; z-index: 2; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--snow); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.rw-n b { font-weight: 400; font-size: 1.4em; }
.row-media { display: none; }
.rw-list .row-item.is-on h3 { color: var(--arancio-ink); }
@media (max-width: 800px) {
  .rw { grid-template-columns: 1fr; }
  .rw-media { display: none; }
  .row-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: var(--s4); background: var(--stone); }
  .row-media picture, .row-media .clip { position: absolute; inset: 0; }
  .row-media img, .row-media video { width: 100%; height: 100%; object-fit: cover; }
  .rw-list .row-item.is-on h3 { color: inherit; }
  .row-item { grid-template-columns: 2.5rem 1fr; }
  .row-meta { grid-column: 2; padding-top: 0; }
}

/* --- passi ------------------------------------------------------------------------- */
.step-list { display: grid; gap: var(--gap); }
.step-list--3 { grid-template-columns: repeat(3, 1fr); }
.step-list--4 { grid-template-columns: repeat(4, 1fr); }
.step-list--2 { grid-template-columns: repeat(2, 1fr); }
.step-list li { background: var(--paper); display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
[data-tone="stone"] .step-list li { border-top: 0; }
.step-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.step-media picture, .step-media .clip { position: absolute; inset: 0; }
.step-media img, .step-media video { width: 100%; height: 100%; object-fit: cover; }
.step-body { padding: var(--s5) 0 var(--s4); }
[data-tone="stone"] .step-body { padding: var(--s5) var(--s5) var(--s6); }
.step-n { display: block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--ink-2); margin-bottom: var(--s4); }
.step-list h3 { font-size: var(--text-xl); }
.step-list p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 900px) { .step-list--3, .step-list--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .step-list--3, .step-list--4, .step-list--2 { 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; font-family: var(--sans); font-size: var(--text-sm); }
.tbl th, .tbl td { padding: 14px var(--s4) 14px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; border-bottom-color: var(--ink); }
.tbl tbody th { font-weight: 500; }
.tbl td { color: var(--ink-2); font-family: var(--serif); font-size: var(--text); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

/* --- domande ---------------------------------------------------------------------------- */
.fq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); }
.fq .section-head { margin-bottom: 0; }
.fq-list { border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s4) 0; cursor: pointer; list-style: none; font-family: var(--sans); font-size: var(--text-lg); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; width: 14px; height: 14px; position: relative; }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; background: var(--ink); left: 0; top: 6px; width: 14px; height: 1px; }
.qa summary i::after { transform: rotate(90deg); transition: transform var(--t) var(--ease); }
.qa[open] summary i::after { transform: rotate(0); }
.qa-body { padding: 0 0 var(--s5); color: var(--ink-2); max-width: 60ch; }
.qa-body p + p { margin-top: .8em; }
@media (max-width: 800px) { .fq { grid-template-columns: 1fr; } }

/* --- collegamenti alle altre pagine ---------------------------------------------------------- */
.pl-list { border-top: 1px solid var(--ink); }
.pl-list a { display: grid; grid-template-columns: 1fr auto 2rem; gap: var(--s5); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-family: var(--sans); transition: padding-left var(--t-fast) var(--ease); }
.pl-list a:hover { padding-left: 8px; }
.pl-list b { font-weight: 400; font-size: var(--text-xl); letter-spacing: -.02em; }
.pl-list span { font-family: var(--serif); font-size: var(--text-sm); color: var(--ink-2); text-align: right; }
.pl-list i { font-style: normal; justify-self: end; color: var(--ink-2); }
@media (max-width: 600px) { .pl-list a { grid-template-columns: 1fr 2rem; } .pl-list span { grid-column: 1; text-align: left; } }

/* --- chiusura ----------------------------------------------------------------------------------- */
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: end; border-top: 1px solid var(--line-dark); padding-top: var(--s7); }
[data-tone="light"] .cta-inner { border-color: var(--ink); }
.cta-inner .lede { margin-top: var(--s4); }
.cta-inner .actions { margin-top: 0; }
@media (max-width: 720px) { .cta-inner { grid-template-columns: 1fr; align-items: start; } }

/* --- didascalia grande sopra il ritaglio ------------------------------------------------------ */
.capblock { padding: 0; }
.cb-frame { position: relative; height: clamp(520px, 80vh, 860px); overflow: hidden; display: flex; align-items: flex-end; background: var(--night); color: var(--snow); }
.cb-frame > picture, .cb-frame > .clip { position: absolute; inset: 0; }
.cb-frame > picture img, .cb-frame > .clip img, .cb-frame > .clip video { width: 100%; height: 100%; object-fit: cover; }
.cb-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 70%); }
.cb-text { position: relative; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: clamp(2.5rem, 6vw, 5rem); max-width: none; }
.cb-text h2 { max-width: 20ch; }
.cb-text p { margin-top: var(--s4); font-size: var(--text-lg); color: rgba(255, 255, 255, .92); max-width: 40rem; }
.cb-text .label { color: rgba(255, 255, 255, .85); }

/* --- 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 { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone); }
.sp-img picture, .sp-img .clip { position: absolute; inset: 0; }
.sp-img img, .sp-img video { 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; } }

/* --- pregi ---------------------------------------------------------------------------------------- */
.ft-grid { display: grid; gap: var(--gap); border-top: 1px solid var(--ink); }
.ft-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ft-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ft-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ft { padding: var(--s5) var(--s5) var(--s6) 0; border-bottom: 1px solid var(--line); }
.ft-n { display: block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--ink-2); margin-bottom: var(--s5); }
.ft h3 { font-size: var(--text-xl); }
.ft p { margin-top: var(--s3); color: var(--ink-2); font-size: var(--text); line-height: 1.5; }
[data-tone="dark"] .ft-grid { border-color: var(--line-dark-2); }
[data-tone="dark"] .ft { border-color: var(--line-dark); }
[data-tone="dark"] .ft p, [data-tone="dark"] .ft-n { color: var(--snow-2); }
@media (max-width: 900px) { .ft-grid--3, .ft-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ft-grid--3, .ft-grid--2, .ft-grid--4 { grid-template-columns: 1fr; } }

/* --- il retino ------------------------------------------------------------------------------------ */
.rt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.rt--flip .rt-fig { order: 2; }
.rt-fig img { width: 100%; height: auto; }
.rt-text .prose { margin-top: var(--s5); }
@media (max-width: 900px) { .rt { grid-template-columns: 1fr; } .rt--flip .rt-fig { order: 0; } }

/* --- la storia ------------------------------------------------------------------------------------- */
.tl-mark { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: var(--s5); align-items: end; margin: 0 0 var(--s6); }
.tl-mark img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.tl-mark figcaption { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; max-width: 46ch; padding-bottom: 6px; }
@media (max-width: 520px) { .tl-mark { grid-template-columns: minmax(0, 220px); } }
.tl-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); border-top: 1px solid var(--ink); }
.tl-item { padding: var(--s5) var(--s5) var(--s6) 0; border-bottom: 1px solid var(--line); }
.tl-when { display: block; font-family: var(--sans); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.04em; line-height: 1; margin-bottom: var(--s4); }
.tl-item h3 { font-size: var(--text-xl); }
.tl-item p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 900px) { .tl-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tl-list { grid-template-columns: 1fr; } }

/* --- le posizioni ----------------------------------------------------------------------------------- */
.job-list { border-top: 1px solid var(--ink); }
.job { display: grid; grid-template-columns: 3rem 1fr auto 2rem; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.job-n { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); letter-spacing: .1em; }
.job h3 { font-size: var(--text-xl); }
.job p { margin-top: var(--s2); color: var(--ink-2); max-width: 56ch; font-size: var(--text-sm); }
.job-meta { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) { .job { grid-template-columns: 2.5rem 1fr 2rem; } .job-meta { grid-column: 2; } }

/* --- il catalogo ------------------------------------------------------------------------------------- */
.gal input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ink); }
.seg-item { padding: 10px 18px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); border-right: 1px solid var(--ink); }
.seg-item:last-child { border-right: 0; }
.seg-item:hover { background: var(--stone); }
/* lo stato scelto si INVERTE: fondo pieno, testo bianco */
#gf-tutti:checked ~ .seg [for="gf-tutti"], #gf-ascensori:checked ~ .seg [for="gf-ascensori"], #gf-scale:checked ~ .seg [for="gf-scale"], #gf-stazioni:checked ~ .seg [for="gf-stazioni"], #gf-cantieri:checked ~ .seg [for="gf-cantieri"] { background: var(--ink); color: var(--snow); }
.gal-grid { margin-top: var(--s6); columns: 3; column-gap: var(--s6); }
.gi { break-inside: avoid; margin-bottom: var(--s6); }
.gi img { width: 100%; height: auto; }
.gi figcaption { display: flex; justify-content: space-between; gap: var(--s4); margin-top: 8px; font-family: var(--sans); font-size: var(--text-sm); }
.gi figcaption em { font-family: var(--serif); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.gal:has(#gf-ascensori:checked) .gi:not([data-t~="ascensori"]), .gal:has(#gf-scale:checked) .gi:not([data-t~="scale"]), .gal:has(#gf-stazioni:checked) .gi:not([data-t~="stazioni"]), .gal:has(#gf-cantieri:checked) .gi:not([data-t~="cantieri"]) { display: none; }
@media (max-width: 900px) { .gal-grid { columns: 2; } }
@media (max-width: 560px) { .gal-grid { columns: 1; } }

/* i ritagli in ciclo */
.clip { position: relative; overflow: hidden; background: var(--night-2); }
.clip img, .clip video { width: 100%; height: 100%; object-fit: cover; }
.clip video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.clip video[data-playing] { opacity: 1; }

/* 06-forms.css */
/* ============================================================
   Il modulo: campi a spigolo vivo con il filetto sotto, etichetta
   dentro il campo che sale, bottone d'inchiostro.
   ============================================================ */
.form { display: grid; gap: var(--s5); font-family: var(--sans); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); }
.fld { position: relative; display: grid; }
.fld--wide { grid-column: 1 / -1; }
.fld label { position: absolute; left: 0; top: 16px; font-size: var(--text-sm); 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(--arancio-ink); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 54px; padding: 24px 0 8px; font: inherit; font-size: var(--text); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; transition: border-color var(--t-fast) var(--ease); -webkit-appearance: none; appearance: none; }
.fld select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 28px, calc(100% - 7px) 28px; background-size: 5px 5px; background-repeat: no-repeat; }
.fld textarea { resize: vertical; min-height: 110px; }
.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(-14px); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--mono); }
.fld-err { font-size: var(--text-xs); color: var(--arancio-ink); margin-top: 4px; min-height: 0; }
.fld[data-invalid] input, .fld[data-invalid] select, .fld[data-invalid] textarea { border-color: var(--arancio-ink); }
.hp { position: absolute; left: -9999px; }
.consents { display: grid; gap: var(--s3); font-size: var(--text-sm); color: var(--ink-2); font-family: var(--serif); }
.chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.chk a { color: var(--arancio-ink); text-decoration: underline; }
.form .actions { margin-top: 0; }
.form-ok { padding: var(--s5); border: 1px solid var(--ink); font-family: var(--serif); }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* dentro il pannello, sul nero */
.b2b-panel .form { color: var(--snow); }
.b2b-panel .fld label, .b2b-panel .fld label em { color: var(--snow-2); }
.b2b-panel .fld input, .b2b-panel .fld select, .b2b-panel .fld textarea { color: var(--snow); border-color: var(--line-dark-2); }
.b2b-panel .fld select { background-image: linear-gradient(45deg, transparent 50%, var(--snow) 50%), linear-gradient(135deg, var(--snow) 50%, transparent 50%); }
.b2b-panel .fld input:focus, .b2b-panel .fld select:focus, .b2b-panel .fld textarea:focus { border-color: var(--snow); }
.b2b-panel .consents { color: var(--snow-2); }
.b2b-panel .chk a { color: var(--snow); }
.b2b-panel .chk input { accent-color: var(--arancio); }
.b2b-panel .btn { background: var(--snow); color: var(--ink); }
.b2b-panel .btn:hover { background: var(--stone); }
.b2b-panel .form-ok { border-color: var(--line-dark-2); }
.b2b-panel .fields { grid-template-columns: 1fr; gap: var(--s4); }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto: nero, spigolo vivo.
   ============================================================ */
.b2b-panel { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(400px, calc(100vw - 40px)); max-height: calc(100svh - 40px); overflow-y: auto; background: var(--night); color: var(--snow); padding: var(--s6); border: 1px solid var(--line-dark); 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-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.5rem; color: var(--snow-2); }
.b2b-close:hover { color: var(--snow); }
.b2b-panel h2 { font-size: var(--text-xl); padding-right: 40px; }
.b2b-panel .label { color: var(--snow-2); }
.b2b-intro { margin-top: var(--s2); font-size: var(--text-sm); color: var(--snow-2); }
.b2b-choices { display: grid; gap: 0; margin-top: var(--s5); border-top: 1px solid var(--line-dark-2); }
.b2b-option { display: grid; gap: 2px; text-align: left; padding: var(--s3) 0; border-bottom: 1px solid var(--line-dark); font-family: var(--sans); transition: padding-left var(--t-fast) var(--ease); }
.b2b-option:hover { padding-left: 8px; }
.b2b-option b { font-weight: 400; font-size: var(--text); }
.b2b-option span { font-family: var(--serif); font-size: var(--text-sm); color: var(--snow-2); }
.b2b-back { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--snow-2); margin-bottom: var(--s3); }
.b2b-panel .form { margin-top: var(--s4); }
@media (max-width: 480px) { .b2b-panel { right: 12px; bottom: 12px; left: 12px; width: auto; padding: var(--s5); } }

/* 08-motion.css */
/* ============================================================
   Il movimento: i diagrammi con la variabile --p, le tendine, il
   vano che si disegna con lo scorrimento, la cabina componibile.
   ============================================================ */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes gs-p { from { --p: 0; } to { --p: 1; } }
@keyframes gs-p-loop { 0% { --p: 0; } 100% { --p: 1; } }
@keyframes gs-p-pingpong { 0% { --p: 1; } 45% { --p: 0; } 55% { --p: 0; } 100% { --p: 1; } }
[data-count] { font-variant-numeric: tabular-nums; }

/* --- la tendina delle immagini ---------------------------------------------- */
.js .wipe { clip-path: inset(0 100% 0 0); }
.js .is-in .wipe { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) .1s; }

/* --- il vano ------------------------------------------------------------------- */
.vano { width: 100%; height: auto; color: var(--ink); --p: 1; }
[data-tone="dark"] .vano { color: var(--snow); }
.vano path, .vano rect, .vano circle { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.vano .vn-txt { fill: var(--ink-2); stroke: none; font-family: var(--mono); font-size: 11px; }
.vano .vn-sheave { stroke-width: 2; }
.vano .vn-car rect { fill: var(--paper); }
[data-tone="stone"] .vano .vn-car rect { fill: var(--stone); }
.vano .vn-cw rect { fill: var(--ink); }
.vano .vn-rope { stroke: var(--arancio); }
/* si disegna con lo scorrimento: --p la scrive app.js sul contenitore */
.js .vano--draw path, .js .vano--draw rect, .js .vano--draw circle { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p) * 1.15, 1)); }
.js .vano--draw .vn-doors path { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .3) * 1.6, 1)); }
.js .vano--draw .vn-car rect, .js .vano--draw .vn-car path, .js .vano--draw .vn-cw rect { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .45) * 2.2, 1)); }
.js .vano--draw .vn-car rect { fill-opacity: clamp(0, (var(--p) - .6) * 4, 1); }
.js .vano--draw .vn-cw rect { fill-opacity: clamp(0, (var(--p) - .6) * 4, 1); }
.js .vano--draw .vn-txt { opacity: clamp(0, (var(--p) - .7) * 4, 1); }
/* corre: la cabina sale, il contrappeso scende */
/* Il vano vive: --q e' il piano della cabina (0 terra, 0,5 primo, 1 secondo).
   Una sola animazione la muove, con le fermate; al passaggio del mouse lo
   script la ferma e scrive --q dal piano sotto il cursore, e --q transita.
   Cabina, contrappeso, funi, puleggia, spie e porte si ricavano da --q. */
@property --q { syntax: '<number>'; inherits: true; initial-value: 0; }
.vano { --q: 0; }
.vano .vn-car { transform: translateY(calc(var(--travel) * (1 - var(--q)))); }
.vano .vn-cw { transform: translateY(calc(-1 * var(--travel) * (1 - var(--q)))); }
.vano .vn-rope--car { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(calc(1 + (1 - var(--q)) * var(--k, 1))); }
.vano .vn-rope--cw { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(calc(1 - (1 - var(--q)) * var(--k, 1))); }
.vano .vn-glint { stroke: var(--paper); stroke-width: 2.5; stroke-dasharray: .04 .16; stroke-dashoffset: calc(var(--q) * -3.2); }
[data-tone="stone"] .vano .vn-glint { stroke: var(--stone); }
[data-tone="dark"] .vano .vn-glint { stroke: var(--night); }
.vano .vn-wheel { transform-origin: var(--ox) var(--oy); transform: rotate(calc(var(--q) * 540deg)); }
.vano .vn-wheel path { stroke-width: 1.5; }
/* la spia e la porta del piano dove sta la cabina: la prima (in alto) e' il
   secondo piano, l'ultima e' terra */
.vano .vn-labels text:nth-child(1) { --f: 1; } .vano .vn-labels text:nth-child(2) { --f: .5; } .vano .vn-labels text:nth-child(3) { --f: 0; }
.vano .vn-doors path:nth-child(1) { --f: 1; } .vano .vn-doors path:nth-child(2) { --f: .5; } .vano .vn-doors path:nth-child(3) { --f: 0; }
.vano .vn-labels text { --at: clamp(0, calc(1 - abs(var(--q) - var(--f)) * 5), 1); fill: color-mix(in srgb, var(--arancio) calc(var(--at) * 100%), var(--ink-2)); font-weight: 500; }
.vano .vn-doors path { --at: clamp(0, calc(1 - abs(var(--q) - var(--f)) * 8), 1); transform: translateX(calc(var(--at) * -7px)); stroke: color-mix(in srgb, var(--arancio) calc(var(--at) * 100%), currentColor); }
@keyframes vn-travel { 0%, 9% { --q: 0; } 31%, 41% { --q: .5; } 63%, 73% { --q: 1; } 100% { --q: 0; } }
.is-playing .vano--run, .js .is-in .vano--draw { animation: vn-travel 13s cubic-bezier(.5, 0, .2, 1) infinite 1.2s; }
.vano.is-held { animation: none; transition: --q 1.5s cubic-bezier(.5, 0, .2, 1); cursor: pointer; }
.vb { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.vb-fig { width: min(100%, 360px); margin-inline: auto; }
.vb-legend { border-top: 1px solid var(--ink); }
.vb-legend li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s2) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.vb-legend span { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); letter-spacing: .1em; }
.vb-legend b { font-family: var(--sans); font-weight: 400; font-size: var(--text-lg); letter-spacing: -.01em; }
.vb-legend p { grid-column: 2; color: var(--ink-2); font-size: var(--text-sm); }
.vb-legend--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s6); }
.vb-legend--row li { border-bottom: 0; }
@media (max-width: 800px) { .vb { grid-template-columns: 1fr; } .vb-legend--row { grid-template-columns: 1fr; } }

/* --- la cabina componibile ----------------------------------------------------------- */
.cab { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.cab input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cab-groups { display: grid; gap: var(--s5); }
.cab-group { display: grid; gap: 6px; }
.cab-group legend { font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s3); }
.swatch { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 8px 10px; font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; border: 1px solid transparent; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.swatch i { width: 22px; height: 22px; background: var(--sw); border: 1px solid rgba(0, 0, 0, .12); }
.swatch:hover { border-color: var(--line-2); }
/* lo stato scelto si inverte */
.cab input:checked + .swatch { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.cab input:focus-visible + .swatch { outline: 2px solid var(--arancio); outline-offset: 2px; }
.cab-stage { position: sticky; top: 12vh; background: var(--paper); padding: clamp(12px, 3vw, 32px); }
.cab-svg { width: 100%; height: auto; }
.cab-summary { margin-top: var(--s4); font-family: var(--serif); font-size: var(--text-sm); color: var(--ink-2); }
.cab-s { display: none; }
/* i materiali, per id: :has() legge la scelta e scrive le variabili */
.cab { --wall: #6D513B; --wall-hi: #8C6A4E; --floor: #D9D3C8; --light: #FFE3B8; --rail: #C4A687; }
.cab:has(#pa-noce:checked) { --wall: #6D513B; --wall-hi: #8C6A4E; }
.cab:has(#pa-acciaio:checked) { --wall: #9A979E; --wall-hi: #C2C0C6; }
.cab:has(#pa-bronzo:checked) { --wall: #7A5A40; --wall-hi: #A98460; }
.cab:has(#pa-laccato:checked) { --wall: #ECEAE4; --wall-hi: #FFFFFF; }
.cab:has(#pa-pietra:checked) { --wall: #C9C2B6; --wall-hi: #E1DBD0; }
.cab:has(#pv-pietra-chiara:checked) { --floor: #D9D3C8; }
.cab:has(#pv-granito:checked) { --floor: #2E2C2A; }
.cab:has(#pv-rovere:checked) { --floor: #A67C52; }
.cab:has(#pv-gomma:checked) { --floor: #3C3C3C; }
.cab:has(#lu-calda:checked) { --light: #FFE3B8; }
.cab:has(#lu-neutra:checked) { --light: #F4F6F8; }
.cab:has(#co-ottone:checked) { --rail: #C4A687; }
.cab:has(#co-inox:checked) { --rail: #B9BCC2; }
.cab:has(#pa-noce:checked) .cab-s--pa-noce, .cab:has(#pa-acciaio:checked) .cab-s--pa-acciaio, .cab:has(#pa-bronzo:checked) .cab-s--pa-bronzo, .cab:has(#pa-laccato:checked) .cab-s--pa-laccato, .cab:has(#pa-pietra:checked) .cab-s--pa-pietra,
.cab:has(#pv-pietra-chiara:checked) .cab-s--pv-pietra-chiara, .cab:has(#pv-granito:checked) .cab-s--pv-granito, .cab:has(#pv-rovere:checked) .cab-s--pv-rovere, .cab:has(#pv-gomma:checked) .cab-s--pv-gomma,
.cab:has(#lu-calda:checked) .cab-s--lu-calda, .cab:has(#lu-neutra:checked) .cab-s--lu-neutra,
.cab:has(#co-ottone:checked) .cab-s--co-ottone, .cab:has(#co-inox:checked) .cab-s--co-inox { display: inline; }
.cb-wall { fill: var(--wall); transition: fill .5s var(--ease); }
.cb-wall--back { fill: var(--wall-hi); }
.cb-floor { fill: var(--floor); transition: fill .5s var(--ease); }
.cb-ceiling { fill: #F2F0EB; }
.cb-light { fill: var(--light); }
.cb-light-stop { stop-color: var(--light); }
.cb-mirror { fill: rgba(255, 255, 255, .35); stroke: rgba(255, 255, 255, .6); }
.cb-rail { stroke: var(--rail); stroke-width: 6; stroke-linecap: round; transition: stroke .5s var(--ease); }
.cb-rail--side { stroke-width: 5; }
.cb-panel rect { fill: #DDD9D2; } .cb-panel circle { fill: #8A8680; }
.cb-seam { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
@media (max-width: 900px) { .cab { grid-template-columns: 1fr; } .cab-stage { position: static; order: -1; } .cab-groups { grid-template-columns: 1fr 1fr; } }

/* --- la catena dei gradini ----------------------------------------------------------- */
.grd input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#gw-600:checked ~ .seg [for="gw-600"], #gw-800:checked ~ .seg [for="gw-800"], #gw-1000:checked ~ .seg [for="gw-1000"] { background: var(--ink); color: var(--snow); }
.gr-stage { display: grid; grid-template-columns: 7fr 4fr; gap: var(--s6); align-items: center; margin-top: var(--s6); }
.gradini { width: 100%; height: auto; --p: 0; }
.is-playing .gradini { animation: gs-p-loop 6s linear infinite; }
.gr-ground, .gr-truss { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.gr-chain { stroke: var(--ink); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.gr-rail { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.gr-wheel { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.gr-hub { fill: var(--arancio); }
.gr-step { offset-distance: calc(mod(var(--p) + var(--k), 1) * 100%); offset-rotate: 0deg; }
.gr-step rect { fill: var(--stone-2); stroke: var(--ink); stroke-width: 1; }
.gr-step .gr-tread { fill: var(--ink); stroke: none; }
.gr-cap { display: none; }
.gr-cap b { display: block; font-family: var(--sans); font-weight: 400; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); letter-spacing: -.04em; line-height: 1; }
.gr-cap span { display: block; font-family: var(--serif); font-size: var(--text-lg); color: var(--ink-2); margin-top: var(--s2); }
#gw-600:checked ~ .gr-stage .gr-cap--600, #gw-800:checked ~ .gr-stage .gr-cap--800, #gw-1000:checked ~ .gr-stage .gr-cap--1000 { display: block; }
.gr-note { margin-top: var(--s4); font-size: var(--text-sm); color: var(--ink-2); max-width: 30ch; }
@media (max-width: 800px) { .gr-stage { grid-template-columns: 1fr; } }

/* --- il montascale ------------------------------------------------------------------- */
.mtb { display: grid; gap: var(--s6); }
.monta { width: 100%; height: auto; --p: 0; max-width: 900px; margin-inline: auto; }
.is-playing .monta { animation: gs-p-pingpong 10s cubic-bezier(.45, 0, .2, 1) infinite; }
.mt-steps { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.mt-landing { fill: var(--stone); stroke: var(--line-2); }
.mt-rail { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.mt-chair { offset-distance: calc((1 - var(--p)) * 100%); offset-rotate: 0deg; }
.mt-seat, .mt-back, .mt-arm, .mt-foot { fill: var(--ink); }
.mt-post { fill: var(--arancio); }

/* --- il calendario ------------------------------------------------------------------- */
.cal { display: grid; gap: var(--s6); }
.calen { width: 100%; height: auto; --p: 0; }
.is-playing .calen { animation: gs-p-loop 14s linear infinite; }
.ca-year { font-family: var(--mono); font-size: 14px; fill: var(--ink-2); }
.ca-sep { stroke: var(--ink); stroke-width: 1; }
.ca-cell { fill: none; stroke: var(--line); }
.ca-visit { fill: var(--line-2); transition: fill .3s; }
.ca-m--sem .ca-visit { fill: var(--ink-2); }
.ca-m--bien .ca-visit { fill: var(--arancio); }
.ca-m { opacity: clamp(.35, (var(--p) - var(--k)) * 60 + 1, 1); }
.ca-txt { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); }
.ca-now { stroke: var(--arancio); stroke-width: 2; transform: translateX(calc(var(--x0) + var(--w) * var(--p))); }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); font-family: var(--sans); font-size: var(--text-sm); }
.cal-l { display: grid; grid-template-columns: 14px 1fr; gap: 2px 10px; align-items: center; }
.cal-l i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.cal-l--sem i { background: var(--ink-2); }
.cal-l--bien i { background: var(--arancio); width: 14px; height: 14px; }
.cal-l span { grid-column: 2; color: var(--ink-2); font-family: var(--serif); }
.diag-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); border-top: 1px solid var(--ink); }
.diag-nums > div { padding: var(--s5) var(--s4) var(--s5) 0; border-bottom: 1px solid var(--line); }
.diag-nums dd { display: flex; align-items: baseline; gap: .2em; }
.diag-nums dd b { font-family: var(--sans); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.8vw, 3.2rem); letter-spacing: -.04em; line-height: 1; }
.diag-nums dd small { font-family: var(--serif); font-size: var(--text); color: var(--ink-2); }
.diag-nums dt { margin-top: var(--s2); font-family: var(--serif); font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 720px) { .diag-nums { grid-template-columns: repeat(2, 1fr); } }

/* --- il movimento ridotto ------------------------------------------------------------- */
/* --- i pittogrammi che vivono ------------------------------------------------
   Unita' in px = celle da 12 nella viewBox. Le durate sono lunghe e i
   fermi veri: una cabina che si ferma ai piani, ante che si aprono, gradini
   che salgono alla velocita' del corrimano, una poltroncina che va e torna,
   un radar che gira. Ogni gruppo parte da capo quando la scheda si apre. */
.pic--ascensore .pg-cab { animation: pic-cab 9s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes pic-cab { 0%, 10% { transform: none; } 34%, 46% { transform: translateY(-72px); } 60%, 72% { transform: translateY(-144px); } 100% { transform: none; } }
.pic--ascensore .pg-cw { animation: pic-cw 9s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes pic-cw { 0%, 10% { transform: none; } 34%, 46% { transform: translateY(72px); } 60%, 72% { transform: translateY(144px); } 100% { transform: none; } }
.pic--ascensore .pg-dl { animation: pic-dl 9s var(--ease) infinite; }
.pic--ascensore .pg-dr { animation: pic-dr 9s var(--ease) infinite; }
@keyframes pic-dl { 0%, 1% { transform: none; } 3%, 7% { transform: translateX(-12px); } 9.5%, 34.5% { transform: none; } 36.5%, 43% { transform: translateX(-12px); } 45.5%, 60.5% { transform: none; } 62.5%, 69% { transform: translateX(-12px); } 71.5%, 100% { transform: none; } }
@keyframes pic-dr { 0%, 1% { transform: none; } 3%, 7% { transform: translateX(12px); } 9.5%, 34.5% { transform: none; } 36.5%, 43% { transform: translateX(12px); } 45.5%, 60.5% { transform: none; } 62.5%, 69% { transform: translateX(12px); } 71.5%, 100% { transform: none; } }
.pic--ascensore .pg-ind0 .pd { animation: pic-ind0 9s linear infinite; }
.pic--ascensore .pg-ind1 .pd { animation: pic-ind1 9s linear infinite; }
.pic--ascensore .pg-ind2 .pd { animation: pic-ind2 9s linear infinite; }
@keyframes pic-ind0 { 0%, 10% { fill: var(--arancio); } 11%, 97% { fill: var(--matrice-chiara); } 98%, 100% { fill: var(--arancio); } }
@keyframes pic-ind1 { 0%, 33% { fill: var(--matrice-chiara); } 34%, 46% { fill: var(--arancio); } 47%, 100% { fill: var(--matrice-chiara); } }
@keyframes pic-ind2 { 0%, 59% { fill: var(--matrice-chiara); } 60%, 72% { fill: var(--arancio); } 73%, 100% { fill: var(--matrice-chiara); } }

.pic--cabina .pg-dl { animation: pic-cdl 8s var(--ease) infinite; }
.pic--cabina .pg-dr { animation: pic-cdr 8s var(--ease) infinite; }
@keyframes pic-cdl { 0%, 12% { transform: none; opacity: 1; } 30%, 70% { transform: translateX(-72px); opacity: 0; } 88%, 100% { transform: none; opacity: 1; } }
@keyframes pic-cdr { 0%, 12% { transform: none; opacity: 1; } 30%, 70% { transform: translateX(72px); opacity: 0; } 88%, 100% { transform: none; opacity: 1; } }
.pic--cabina .pg-lamp .pd { animation: pic-lamp 2.4s ease-in-out infinite; }
@keyframes pic-lamp { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: .45; } }
.pic--cabina .pg-wall .pd { animation: pic-wall 8s linear infinite; animation-delay: calc(var(--a, 0) * .9s); }
@keyframes pic-wall { 0%, 28% { fill: var(--matrice-chiara); } 31% { fill: var(--arancio); } 42%, 100% { fill: var(--matrice-chiara); } }

.pic--scala .pg-steps, .pic--scala .pg-stepin, .pic--scala .pg-stepout { animation: pic-step 2.4s linear infinite; }
.pic--scala .pg-stepin { animation: pic-step 2.4s linear infinite, pic-stepin 2.4s linear infinite; }
.pic--scala .pg-stepout { animation: pic-step 2.4s linear infinite, pic-stepout 2.4s linear infinite; }
@keyframes pic-step { to { transform: translate(36px, -36px); } }
@keyframes pic-stepin { 0% { opacity: 0; } 55% { opacity: 1; } }
@keyframes pic-stepout { 25% { opacity: 1; } 75%, 100% { opacity: 0; } }
.pic--scala .pg-rider { animation: pic-rider 9.6s linear infinite; }
@keyframes pic-rider { 0% { transform: none; opacity: 0; } 7% { opacity: 1; } 91% { opacity: 1; } 100% { transform: translate(144px, -144px); opacity: 0; } }
.pic--scala .pg-rail .pd { animation: pic-rail 6.4s linear infinite; animation-delay: calc(var(--a, 0) * 6.4s); }
@keyframes pic-rail { 0%, 4% { fill: var(--arancio); } 14%, 100% { fill: var(--matrice-chiara); } }

.pic--piattaforma .pg-seat { animation: pic-seat 8s linear infinite; }
@keyframes pic-seat { 0%, 10% { transform: none; } 45%, 55% { transform: translate(144px, -144px); } 90%, 100% { transform: none; } }
.pic--piattaforma .pg-guide .pd { animation: pic-guide 8s linear infinite; animation-delay: calc((var(--a, 0) * 15 - 1) / 12 * 2.8s); }
@keyframes pic-guide { 0%, 9% { fill: var(--matrice-chiara); } 10%, 12% { fill: var(--arancio); } 20%, 100% { fill: var(--matrice-chiara); } }

.pic--chiave .pg-ring .pd { animation: pic-sweep 4s linear infinite; animation-delay: calc(var(--a, 0) * 4s); }
@keyframes pic-sweep { 0%, 2% { fill: var(--arancio); } 24%, 100% { fill: var(--matrice-chiara); } }
.pic--chiave .pg-blip .pd { animation: pic-blip 4s linear infinite; animation-delay: calc(var(--a, 0) * 4s); }
@keyframes pic-blip { 0%, 6% { fill: var(--arancio); } 70%, 100% { fill: var(--ink); } }

@media (prefers-reduced-motion: reduce) {
  .pic { --o: 1 !important; }
  .pic .pd, .pic .pg { transition: none; animation: none !important; }
  .js .wipe, .js .is-in .wipe { clip-path: none; transition: none; }
  .vano, .gradini, .monta, .calen, .is-playing .vano--run, .is-playing .gradini, .is-playing .monta, .is-playing .calen, .js .is-in .vano--draw { animation: none; --p: 1; --q: 0; }
  .js .vano--draw path, .js .vano--draw rect, .js .vano--draw circle { stroke-dashoffset: 0; fill-opacity: 1; }
  .rw-shot { transition: none; transform: none; }
  .wm rect { transition: none; opacity: 1; transform: none; }
  .ring-wheel { transform: none !important; }
}