@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-300-900.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-600.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: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-var.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;
}
/* 100 anni Confindustria Siracusa · landing
   Linea grafica dalla bozza Figma di Valentina (carta, serif per gli anni, mono per i testi, filo blu tratteggiato)
   e dai materiali stampati (blu Pantone 280 C, claim in Montserrat). */
:root {
  --carta: #F1F1EE;
  --carta-2: #FAF8F2;
  --azzurro: #E2E8F3;
  --inchiostro: #1B1A16;
  --grigio: #57554D;
  --linea: rgba(27, 26, 22, .16);
  --blu: #1B4690;
  --logo: #004990;
  --notte: #0A1A44;
  --oro: #E3C48F;
  --seppia: #D6CDBC;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --testata: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--testata) + 12px); }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 15.5px/1.65 var(--mono); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--logo); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--inchiostro); color: #fff; padding: 10px 16px; border-radius: 8px; }
.salta:focus { top: 12px; }
.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }

/* ---------- tipografia */
.h2 { font: 700 clamp(36px, 5.2vw, 66px)/1.02 var(--serif); letter-spacing: -.02em; font-optical-sizing: auto; margin-top: 18px; text-wrap: balance; }
.h2--grande { font-size: clamp(48px, 8vw, 104px); }
.h3 { font: 700 clamp(26px, 3vw, 36px)/1.1 var(--serif); letter-spacing: -.01em; margin: 90px 0 26px; }
.lead { font-size: clamp(16px, 1.4vw, 18px); max-width: 46em; margin-top: 22px; color: var(--inchiostro); }
.sotto { margin-top: 14px; color: var(--grigio); }
.nota { margin-top: 30px; font-size: 13px; color: var(--grigio); }
.kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--logo); color: #fff; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; }
.kicker span { opacity: .75; }
.kicker--oro { background: var(--oro); color: var(--inchiostro); }

/* ---------- bottoni */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 500 14px/1.2 var(--mono); text-decoration: none; border: 1.5px solid transparent; transition: transform .2s, background .2s, color .2s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--scuro { background: var(--inchiostro); color: var(--carta); }
.btn--scuro:hover { background: var(--logo); }
.btn--linea { border-color: var(--inchiostro); }
.btn--linea:hover { background: var(--inchiostro); color: var(--carta); }
.btn--bianco { background: #fff; color: var(--inchiostro); }
.btn--linea-bianco { border-color: rgba(255,255,255,.8); color: #fff; }
.btn--linea-bianco:hover { background: #fff; color: var(--inchiostro); }

/* ---------- testata */
.testata { position: sticky; top: 0; z-index: 50; height: var(--testata); display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); background: rgba(241, 241, 238, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #d9cdb8; }
.testata__logo img { width: 40px; height: auto; }
.menu { margin-inline: auto; }
.menu ul { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.menu a { text-decoration: none; font-size: 14px; padding: 6px 0; background: linear-gradient(var(--logo), var(--logo)) 0 100% / 0 1.5px no-repeat; transition: background-size .25s; }
.menu a:hover, .menu a[aria-current="true"] { background-size: 100% 1.5px; }
@media (max-width: 899px) {
  .menu { display: none; }
  .testata { justify-content: space-between; }
}

/* ---------- hero */
.hero { position: relative; text-align: center; padding: clamp(28px, 5vh, 56px) var(--gut) 150px; display: flex; flex-direction: column; align-items: center; }
.hero__in { display: flex; flex-direction: column; align-items: center; }
.hero__testo { display: flex; flex-direction: column; align-items: center; }
.hero__tag { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--logo); margin-bottom: 18px; }
.hero__logo { width: clamp(140px, 17vw, 220px); margin: 0 auto 26px; color: var(--logo); }
@media (min-width: 1000px) {
  .hero { min-height: calc(100svh - var(--testata)); justify-content: center; padding-top: 40px; padding-bottom: 130px; }
  .hero__in { flex-direction: row; align-items: center; gap: clamp(48px, 6vw, 110px); text-align: left; }
  .hero__testo { align-items: flex-start; }
  .hero__logo { width: clamp(220px, 21vw, 300px); margin: 0; }
  .hero__cta, .conto__num { justify-content: flex-start; }
  .conto__num li { align-items: flex-start; }
}
.logo-anim { width: 100%; height: auto; overflow: visible; }
.logo-anim .ko { fill: var(--carta); }
.logo-anim .l-inf { opacity: 0; }
.claim { font-family: var(--sans); text-transform: uppercase; color: var(--logo); line-height: 1; letter-spacing: .005em; font-size: clamp(36px, 6.4vw, 84px); }
.claim span { display: block; }
.claim__a { font-weight: 300; }
.claim__b { font-weight: 400; margin-top: .06em; }
.claim__c { font-weight: 800; font-size: 1.14em; margin-top: .04em; letter-spacing: .01em; }
.hero__sub { font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--serif); margin-top: 22px; }
.hero__quando { margin-top: 10px; font-size: 14.5px; color: var(--grigio); }
.conto { margin-top: 30px; }
.conto__lab { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); }
.conto__num { display: flex; justify-content: center; gap: clamp(18px, 4vw, 44px); margin-top: 6px; }
.conto__num li { display: flex; flex-direction: column; align-items: center; min-width: 3ch; }
.conto__num b { font: 800 clamp(40px, 5vw, 60px)/1 var(--serif); color: var(--logo); font-variant-numeric: tabular-nums; }
.conto__num span { font-size: 12px; color: var(--grigio); margin-top: 6px; }
.conto__stato { font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); color: var(--logo); margin-top: 6px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.hero__pe { margin-top: 34px; }
.hero__pe img { height: 54px; width: auto; }
.hero__filo { position: absolute; left: 50%; bottom: 0; width: 2px; height: 120px; background: repeating-linear-gradient(var(--logo) 0 6px, transparent 6px 12px); transform-origin: top; }
.hero__anni { position: absolute; right: calc(-50vw + var(--gut) + 1px); top: 40px; font: 800 clamp(18px, 1.8vw, 24px)/1 var(--serif); color: var(--logo); white-space: nowrap; }
@media (max-width: 699px) { .hero__anni { display: none; } .hero { padding-bottom: 110px; } .hero__filo { height: 80px; } }

/* animazione del logo: solo con JS e senza riduzione del movimento */
@media (prefers-reduced-motion: no-preference) {
  .js .logo-anim [class^="l-"] { transform-box: fill-box; }
  .js .logo-anim .l-inf { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: inf-disegna 1.1s .25s cubic-bezier(.6,.1,.3,1) forwards, sfuma-via .5s 1.45s forwards; }
  .js .logo-anim .l-cento { opacity: 0; transform: scale(.94); transform-origin: 60% 50%; animation: appare .6s 1.15s cubic-bezier(.2,.7,.2,1) forwards; }
  .js .logo-anim .l-aquila { opacity: 0; transform: translateY(14px); animation: appare .9s 1.55s cubic-bezier(.2,.7,.2,1) forwards; }
  .js .logo-anim .l-anni { opacity: 0; transform: translateX(-12px); animation: appare .6s 2.05s ease-out forwards; }
  .js .logo-anim .l-riga { transform: scaleX(0); transform-origin: left center; animation: riga .7s 2.25s cubic-bezier(.6,.1,.3,1) forwards; }
  .js .logo-anim .l-cf, .js .logo-anim .l-sr { opacity: 0; animation: appare .7s 2.45s ease-out forwards; }
  .js .logo-anim .l-sr { animation-delay: 2.65s; }
  .js .claim span, .js .hero__sub, .js .hero__quando, .js .conto, .js .hero__cta, .js .hero__pe { opacity: 0; transform: translateY(14px); animation: appare .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .js .claim__a { animation-delay: .15s !important; }
  .js .claim__b { animation-delay: .3s !important; }
  .js .claim__c { animation-delay: .45s !important; }
  .js .hero__sub { animation-delay: .7s !important; }
  .js .hero__quando { animation-delay: .8s !important; }
  .js .conto { animation-delay: .95s !important; }
  .js .hero__cta { animation-delay: 1.1s !important; }
  .js .hero__pe { animation-delay: 1.25s !important; }
  .js .hero__filo { transform: scaleY(0); animation: filo 1.2s 2.9s cubic-bezier(.6,.1,.3,1) forwards; }
  .js .hero__anni { opacity: 0; animation: appare .8s 3.3s forwards; }
}
@keyframes inf-disegna { to { stroke-dashoffset: 0; } }
@keyframes sfuma-via { to { opacity: 0; } }
@keyframes appare { to { opacity: 1; transform: none; } }
@keyframes riga { to { transform: scaleX(1); } }
@keyframes filo { to { transform: scaleY(1); } }

/* ---------- sezioni */
.sez { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.sez--azzurra { background: var(--azzurro); }
.sez--carta { background: var(--carta-2); }
.sez--blu { background: linear-gradient(170deg, var(--blu) 0%, #133778 55%, var(--notte) 100%); color: #fff; }
.sez--blu .lead { color: rgba(255,255,255,.9); }

/* 01 assemblea */
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 52px; }
.tre__col { border-top: 2px solid var(--inchiostro); padding-top: 18px; }
.tre__col h3 { font: 700 clamp(28px, 3vw, 40px)/1 var(--serif); margin-bottom: 12px; }
@media (max-width: 799px) { .tre { grid-template-columns: 1fr; } }

/* 02 programma */
.prog { margin-top: 44px; border-bottom: 1px solid var(--linea); }
.prog--fine { margin-top: 0; }
.prog__voce { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--linea); }
.prog__ora { font-weight: 600; color: var(--logo); font-variant-numeric: tabular-nums; padding-top: 4px; }
.prog__tit { font: 600 clamp(20px, 2vw, 25px)/1.2 var(--serif); }
.prog__det { color: var(--grigio); margin-top: 4px; }
.prog__chi { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 12px; }
.prog__chi li { display: flex; align-items: center; gap: 12px; max-width: 360px; font-size: 13.5px; line-height: 1.35; color: var(--grigio); }
.prog__chi li b { display: block; color: var(--inchiostro); font-size: 14.5px; }
.av { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--blu); display: grid; place-items: center; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av--vuoto { font: 700 15px/1 var(--serif); color: #fff; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 20px 0; }
.pan { background: var(--azzurro); padding: clamp(22px, 3vw, 34px); border-top: 3px solid var(--logo); }
.pan__ora { font-weight: 600; color: var(--logo); font-size: 14px; }
.pan__tit { font: 700 clamp(22px, 2.3vw, 30px)/1.15 var(--serif); margin-top: 10px; text-wrap: balance; }
.pan__mod { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; }
.pan__chi { flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(27,26,22,.14); }
.pan__extra { font-style: normal; color: var(--inchiostro) !important; padding-left: 58px; position: relative; min-height: 46px; }
.pan__extra::before { content: "+"; position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; border: 1.5px dashed var(--logo); display: grid; place-items: center; color: var(--logo); font-weight: 600; }
.pan__focus { margin-top: 20px; font-size: 14px; }
.pan__focus span { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--inchiostro); color: #fff; padding: 2px 7px; margin-right: 6px; }
.prog__coord { margin-top: 26px; font-size: 14px; color: var(--grigio); max-width: 60em; }
.prog__coord span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--oro); color: var(--inchiostro); padding: 2px 7px; margin-right: 6px; }
@media (max-width: 799px) {
  .prog__voce { grid-template-columns: 1fr; gap: 6px; }
  .panel-grid { grid-template-columns: 1fr; }
}

/* 03 relatori */
.rel-gruppo { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--logo); margin: 56px 0 22px; display: flex; align-items: center; gap: 14px; }
.rel-gruppo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; }
@media (min-width: 1000px) { .rel-grid { grid-template-columns: repeat(4, minmax(0, 220px)); gap: 40px 48px; } }
.rel__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(180deg, var(--blu), var(--notte)); border: 8px solid #fff; box-shadow: 0 10px 24px -14px rgba(27,26,22,.45); }
.rel__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rel:hover .rel__foto img { transform: scale(1.04); }
.rel__foto--vuoto { display: grid; place-items: center; font: 700 40px/1 var(--serif); color: rgba(255,255,255,.9); }
.rel__nome { font: 600 18px/1.2 var(--serif); margin-top: 14px; }
.rel__ruolo { font-size: 13px; line-height: 1.4; color: var(--grigio); margin-top: 4px; }

/* 04 film */
.film__testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.film__logo { width: clamp(60px, 7vw, 88px); height: auto; }
.player { position: relative; margin-top: 40px; background: var(--notte); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); aspect-ratio: var(--r, 1600 / 686); }
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 2px solid #fff; background: rgba(10, 26, 68, .35); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .25s, background .25s; }
.player__play svg { width: 34px; height: 34px; margin-left: 5px; }
.player__play:hover { transform: scale(1.06); background: rgba(10, 26, 68, .6); }
.player.in-play .player__play { display: none; }
.vtab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.vtab button { text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; transition: background .2s; }
.vtab button span { opacity: .7; }
.vtab button:hover { background: rgba(255,255,255,.14); }
.vtab button[aria-pressed="true"] { background: #fff; color: var(--inchiostro); border-color: #fff; }
.nota--chiara { color: rgba(255,255,255,.75); }
@media (max-width: 699px) { .vtab { grid-template-columns: 1fr; } }

/* 05 manifesto */
.manifesto { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.manifesto__frase { font: 500 clamp(28px, 3.4vw, 46px)/1.15 var(--serif); letter-spacing: -.01em; margin-top: 22px; text-wrap: balance; }
.parole { margin-top: 40px; }
.parole > div { border-top: 1px solid var(--linea); padding: 18px 0; display: grid; grid-template-columns: 220px 1fr; gap: 18px; }
.parole dt { font-size: 12.5px; color: var(--grigio); }
.parole dt span { display: block; font: 800 clamp(18px, 1.8vw, 22px)/1.1 var(--sans); text-transform: uppercase; color: var(--logo); margin-bottom: 4px; }
.manifesto__video { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(10, 26, 68, .6); background: var(--notte); }
.manifesto__video video { width: 100%; height: auto; }
@media (max-width: 899px) { .manifesto { grid-template-columns: 1fr; } .parole > div { grid-template-columns: 1fr; gap: 6px; } }

/* 06 storia */
.sez--storia { overflow: hidden; }
.capitoli { position: relative; width: min(1200px, 100% - 2 * var(--gut)); margin: 40px auto 0; }
.filo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.filo__linea { fill: none; stroke: var(--logo); stroke-width: 2; stroke-dasharray: 6 8; }
.filo__maschera { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(60px, 9vw, 120px) 0; }
.cap--dx .cap__testo { order: 2; }
.cap__testo { position: relative; z-index: 1; }
.cap__n { font-size: 14px; }
.cap__anno { font: 900 clamp(88px, 13vw, 184px)/.86 var(--serif); letter-spacing: -.035em; font-variation-settings: "opsz" 144; margin: 14px 0 22px; color: var(--inchiostro); display: inline-block; background: var(--carta); padding-right: .08em; }
.cap__p { max-width: 32em; }
.cap__p b { font-weight: 600; }
.cap__foto { position: relative; min-height: clamp(300px, 34vw, 440px); }
.pol { position: absolute; background: var(--carta-2); padding: 12px 12px 46px; box-shadow: 0 18px 34px -18px rgba(27,26,22,.55); width: 58%; will-change: transform; }
.pol img { width: 100%; aspect-ratio: 1.25; object-fit: cover; filter: grayscale(.15) contrast(1.02); background: var(--seppia); }
.pol figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 11px; line-height: 1.3; color: var(--grigio); }
.pol--0 { left: 2%; top: 4%; rotate: -3deg; }
.pol--1 { right: 2%; bottom: 0; width: 50%; rotate: 4deg; }
.cap--dx .pol--0 { left: auto; right: 4%; rotate: 3deg; }
.cap--dx .pol--1 { right: auto; left: 0; rotate: -4deg; }
@media (max-width: 799px) {
  .cap { grid-template-columns: 1fr; padding: 54px 0; }
  .cap--dx .cap__testo { order: 0; }
  .cap__foto { min-height: 0; display: flex; gap: 12px; padding-top: 8px; }
  .pol, .cap--dx .pol--0, .cap--dx .pol--1 { position: relative; inset: auto; width: 54%; padding: 8px 8px 38px; }
  .pol--1 { margin-top: 30px; }
  .pol figcaption { font-size: 10px; left: 8px; right: 8px; bottom: 6px; }
}
.presidenti { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 20px; scrollbar-width: thin; }
.pres { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; }
.pres__foto { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--seppia); display: grid; place-items: center; margin-bottom: 10px; border: 3px solid #fff; box-shadow: 0 8px 18px -10px rgba(27,26,22,.5); }
.pres__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.pres:hover .pres__foto img, .pres:last-child .pres__foto img { filter: none; }
.pres__vuoto { font: 700 26px/1 var(--serif); }
.pres__anni { font-size: 12.5px; font-weight: 600; color: var(--logo); }
.pres__nome { font: 600 16px/1.2 var(--serif); }
.fonti { margin-top: 26px; font-size: 12px; color: var(--grigio); max-width: 70em; }

/* 07 luoghi */
.luoghi { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.luoghi__intro > p:not(.kicker) { margin-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip { border: 1.5px solid var(--inchiostro); background: transparent; border-radius: 999px; padding: 10px 22px; cursor: pointer; font-size: 14px; transition: background .2s, color .2s; }
.chip:hover { background: rgba(27,26,22,.08); }
.chip[aria-pressed="true"] { background: var(--inchiostro); color: #fff; }
.luoghi__schede { margin-top: 28px; }
.luogo img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border: 8px solid #fff; box-shadow: 0 14px 30px -18px rgba(27,26,22,.5); margin-bottom: 18px; }
.luogo h3 { font: 700 28px/1.1 var(--serif); margin-bottom: 8px; }
.luoghi__mappa { position: sticky; top: calc(var(--testata) + 20px); border: 1.5px dashed rgba(27,26,22,.35); padding: clamp(14px, 2vw, 26px); background: rgba(255,255,255,.35); }
.mappa { width: 100%; height: auto; overflow: visible; }
.mappa__filo { fill: none; stroke: var(--logo); stroke-width: 2.4; stroke-dasharray: 6 7; }
.nodo { cursor: pointer; }
.nodo circle { fill: #fff; stroke: var(--inchiostro); stroke-width: 2; transition: fill .2s, r .2s; }
.nodo text { font: 500 14px var(--mono); fill: var(--inchiostro); }
.nodo.attivo circle, .nodo:hover circle { fill: var(--logo); stroke: var(--logo); r: 10px; }
.nodo.attivo text { font-weight: 600; }
.luoghi__nota { font-size: 11.5px; color: var(--grigio); margin-top: 10px; }
@media (max-width: 899px) { .luoghi { grid-template-columns: 1fr; } .luoghi__mappa { position: static; } }

/* numeri */
.sez--numeri { padding: clamp(56px, 8vw, 96px) 0; }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.numeri b { display: block; font: 800 clamp(64px, 10vw, 140px)/1 var(--serif); color: var(--logo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numeri span { display: block; margin-top: 10px; font-size: 14px; }
@media (max-width: 599px) { .numeri { grid-template-columns: 1fr; gap: 34px; } }

/* 08 info */
.sez--info { background: var(--notte); color: #fff; overflow: hidden; isolation: isolate; }
.info__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .75; }
.sez--info::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,26,68,.92) 0%, rgba(10,26,68,.7) 55%, rgba(10,26,68,.35) 100%); }
.info { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.info__dl { margin-top: 36px; }
.info__dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.22); }
.info__dl dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); padding-top: 5px; }
.info__dl dd { font: 500 clamp(18px, 1.8vw, 22px)/1.35 var(--serif); }
.info__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.info__dopo { margin-top: 26px; font-size: 13.5px; color: rgba(255,255,255,.75); }
.info__foto { background: var(--carta-2); padding: 12px 12px 44px; rotate: 2.5deg; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.info__foto img { width: 100%; aspect-ratio: .72; object-fit: cover; }
@media (max-width: 899px) { .info { grid-template-columns: 1fr; } .info__foto { max-width: 380px; } .info__dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* piede */
.piede { padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); }
.piede__filo { width: calc(100% - 2 * var(--gut)); margin: 0 auto 50px; height: 40px; }
.piede__filo path { fill: none; stroke: var(--logo); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
.piede__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.piede__org { display: flex; align-items: center; gap: 18px; font-size: 13.5px; line-height: 1.55; }
.piede__org img { width: 62px; }
.piede__pe { height: 50px; width: auto; justify-self: center; }
.piede__motto { justify-self: end; display: flex; align-items: center; gap: 12px; font: 800 22px/1 var(--serif); color: var(--logo); }
.piede__motto svg { width: 46px; }
.piede__legal { margin-top: 36px; font-size: 12px; color: var(--grigio); }
@media (max-width: 799px) { .piede__in { grid-template-columns: 1fr; justify-items: start; } .piede__pe, .piede__motto { justify-self: start; } }

/* barra mobile */
.barra { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--inchiostro); color: #fff; padding: 10px 10px 10px 18px; border-radius: 16px; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.barra.vis { transform: none; }
.barra p { font-size: 12.5px; line-height: 1.35; }
.barra p b { display: block; font-size: 14px; }
@media (min-width: 900px) { .barra { display: none !important; } }

/* comparsa allo scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .js .rv.in { opacity: 1; transform: none; }
}

/* 404 */
.p404 { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 2rem; }
.p404 main { max-width: 34em; display: flex; flex-direction: column; align-items: center; gap: 18px; }