/* ==========================================================
   AC Boschese — Brand Book
   Palette ufficiale (Color PDF) · Rector / Antarctica / PIVS
   Regole: titoli Rector sempre MAIUSCOLI e senza accentate;
   mai italic; Helvetica mai oltre 500.
   ========================================================== */

/* PIVS: il nostro carattere, ricavato dalle lettere del monogramma (solo maiuscole) */
@font-face { font-family: 'PIVS'; src: url('../fonts/PIVS-Regular-019.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PIVS Inline'; src: url('../fonts/PIVS-Inline-022.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rector'; src: url('../fonts/Rector-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* PIVS (le lettere del monogramma) e Antarctica sono solo immagini SVG (tracciati generati dai font): i file dei font non vanno online. */

/* I token (colori, caratteri, testi, spazi, movimento) sono in /assets/tokens.css, caricato prima di questo file. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; }  /* gli accordion compensano da soli: niente scroll anchoring del browser */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bosco);
  color: var(--avorio);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--fs-m);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
em, i, cite { font-style: normal; }
b, strong { font-weight: 500; }
::selection { background: var(--oro); color: var(--bosco); }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--avorio); color: var(--bosco); padding: 10px 16px; border-radius: var(--r-pill); font-size: var(--fs-xs); text-decoration: none; transition: top var(--dur-300); }
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.eyebrow {
  font: 400 var(--fs-meta)/1.2 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 22px;
  opacity: .8;
}
.display {
  font-family: var(--f-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  margin: 0;
}
.display--xl { font-size: var(--fs-display-xl); }
.display--l { font-size: var(--fs-display-l); }
.display--m { font-size: var(--fs-display-m); line-height: .95; }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 34em; margin: 28px 0 0; }
.small { font-size: var(--fs-xs); letter-spacing: .02em; opacity: .75; margin: 0; }
.f-rector { font-family: var(--f-display); text-transform: uppercase; }
.f-pivs { font-family: 'PIVS', var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }   /* la spaziatura è già nel font */

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  font: 400 var(--fs-xs)/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-300), color var(--dur-300), border-color var(--dur-300);
}
.pill.is-on, .pill[aria-pressed="true"], .pill:hover { color: var(--avorio); background: var(--verde); border-color: var(--verde); }
.pill--solid { background: var(--avorio); color: var(--bosco); border-color: var(--avorio); }
.pill--solid:hover { background: var(--oro); border-color: var(--oro); color: var(--bosco); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bosco);
  display: grid; place-items: center; align-content: center; gap: 28px;
  transition: clip-path 1s var(--ease);
  clip-path: inset(0 0 0 0);
}
.loader.is-out { clip-path: inset(0 0 100% 0); }
.loader__mono { width: 74px; height: auto; overflow: visible; }
.loader__mono path {
  fill: transparent; stroke: var(--avorio); stroke-width: .7;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ld-draw 1.5s var(--ease) forwards, ld-fill var(--dur-500) 1.3s forwards;
}
.loader__mono path + path { animation-delay: var(--dur-200), 1.4s; }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-fill { to { fill: var(--avorio); stroke-width: 0; } }
.loader__count { font: 500 clamp(40px, 6vw, 84px)/1 var(--f-display); color: var(--oro); font-variant-numeric: tabular-nums; }
.loader__label { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 6px var(--gut);
  color: var(--avorio); mix-blend-mode: difference;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__brand { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; text-decoration: none; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; }
.hud__brand svg { width: 20px; height: 23px; color: currentColor; }
.hud__chapter { display: flex; gap: 14px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; overflow: hidden; }
.hud__num { opacity: .6; font-variant-numeric: tabular-nums; }
.hud__name { display: inline-block; }
.hud__menu { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; padding-left: 12px; gap: 12px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; }
.hud__menu i { width: 22px; height: 8px; border-block: 1px solid currentColor; transition: transform var(--dur-400) var(--ease), height var(--dur-400) var(--ease); }
.hud__menu[aria-expanded="true"] i { height: 0; border-bottom: 0; transform: rotate(45deg); }
@media (hover: none), (max-width: 900px) {
  .hud { mix-blend-mode: normal; color: var(--avorio); transition: color var(--dur-400); }
  .hud.is-light { color: var(--bosco); }
}
.progress { position: fixed; left: 0; top: 0; bottom: 0; width: 3px; z-index: 51; background: rgb(var(--avorio-rgb) / .06); }
.progress i { position: absolute; inset: 0; background: var(--oro); transform-origin: top; transform: scaleY(0); }

/* index overlay */
.index {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bosco); color: var(--avorio);
  padding: 110px var(--gut) 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-800) var(--ease);
}
.index[hidden] { display: flex; visibility: hidden; }
.index.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.index__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gut); }
.index__list li { break-inside: avoid; border-top: 1px solid var(--line-d); }
.index__list a { display: flex; align-items: baseline; gap: 22px; padding: 14px 0; text-decoration: none; }
.index__list span { font-size: var(--fs-meta); opacity: .5; letter-spacing: .12em; flex: none; width: 76px; }  /* largo abbastanza per "Epilogo" */
.index__list b { font: 500 clamp(28px, 4vw, 60px)/1 var(--f-display); text-transform: uppercase; transition: color var(--dur-300), transform var(--dur-500) var(--ease); }
.index__list a:hover b { color: var(--oro); transform: translateX(12px); }
.index__foot { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .5; margin: 0; }

/* cursor */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--r-round);
  background: var(--oro);
  display: grid; place-items: center;
  transition: width var(--dur-350) var(--ease), height var(--dur-350) var(--ease), margin var(--dur-350) var(--ease), opacity var(--dur-300);
  opacity: 0;
}
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.cursor span { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--bosco); opacity: 0; transition: opacity var(--dur-200); }
.cursor.is-big span { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ==========================================================
   00 HERO
   ========================================================== */
.hero { height: 340vh; position: relative; background: var(--bosco); }
.hero__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.hero__pic { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; translate: -50% -50%; overflow: hidden; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.12); filter: saturate(.95); }
.hero__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--ink-rgb) / .55), rgb(var(--ink-rgb) / .2) 40%, rgb(var(--ink-rgb) / .78)); opacity: var(--shade, 0); }
/* Sempre Audaci in PIVS sopra la foto: con lo scroll SEMPRE esce a sinistra, AUDACI a destra */
.hero__title { position: absolute; inset: 0; margin: 0; pointer-events: none; font-size: clamp(110px, min(30vw, 38vh), 440px); line-height: .9; color: var(--avorio); text-transform: none; z-index: 2; }
.hero__line { position: absolute; white-space: nowrap; }
.hero__line--a { left: var(--edge); top: 9vh; }
.hero__line--b { right: var(--edge); bottom: 11vh; }
.hero__hint { position: absolute; bottom: 29px; left: 50%; transform: translateX(-50%); font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin: 0; white-space: nowrap; }
.hero__hint::before { content: ""; display: block; width: 1px; height: 28px; margin: 0 auto 10px; background: currentColor; animation: hint 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero__meta { position: absolute; left: var(--edge); right: var(--edge); bottom: 30px; display: flex; justify-content: space-between; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; pointer-events: none; }
.hero__intro { position: absolute; left: var(--edge); right: var(--edge); bottom: 12vh; z-index: 3; opacity: 0; visibility: hidden; }
.hero__intro .lead { max-width: 30em; }
@media (min-width: 901px) {
  .hero__intro { right: auto; left: var(--edge); bottom: 8vh; width: min(30vw, 470px); }
  .hero__intro .display--xl { font-size: clamp(36px, 3.8vw, 68px); }
  .hero__intro .lead { font-size: clamp(16px, 1.2vw, 19px); }
}

/* ==========================================================
   01 RADICI
   ========================================================== */
.radici { height: 520vh; position: relative; background: var(--pietra); color: var(--bosco); }
.radici__stick {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr auto;
  gap: 0 var(--gut); padding: 96px var(--edge) 40px;
}
.radici__steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; font-size: var(--fs-meta); letter-spacing: .16em; }
.radici__steps li { position: relative; opacity: .62; transition: opacity var(--dur-400); padding-bottom: 10px; }
.radici__steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-600) var(--ease); }
.radici__steps li.is-on { opacity: 1; }
.radici__steps li.is-on::after { transform: scaleX(1); }
.radici__year { grid-column: 1; grid-row: 2; align-self: center; }
.odo { display: flex; font: 400 clamp(148px, 28vw, 510px)/1 'PIVS', var(--f-display); letter-spacing: 0; font-variant-numeric: tabular-nums; }   /* gli anni nel nostro carattere */
.odo__d { height: 1em; overflow: hidden; display: inline-block; }
.odo__col { display: flex; flex-direction: column; }
.odo__col span { height: 1em; line-height: 1; display: block; text-align: center; }
.radici__media { grid-column: 2; grid-row: 2 / 4; position: relative; align-self: stretch; margin: 12px 0 0; }
.radici__media figure { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); }
.radici__media figure:first-child { clip-path: inset(0 0 0 0); }
.radici__media img { width: 100%; height: 100%; object-fit: cover; }
.radici__copy { grid-column: 1; grid-row: 3; position: relative; min-height: 210px; }
.radici__copy article { position: absolute; inset: auto 0 0 0; opacity: 0; visibility: hidden; }
.radici__copy article:first-child { opacity: 1; visibility: visible; }
.radici__copy p:not(.eyebrow) { max-width: 30em; margin: 16px 0 0; }

/* ==========================================================
   02 GELSO
   ========================================================== */
.gelso { background: var(--bosco); padding: var(--sec-y) var(--edge); position: relative; }
.gelso__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); align-items: center; }
.gelso__media { aspect-ratio: 4 / 5; overflow: hidden; }
.gelso__media img { object-position: 50% 58%; }
.gelso__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; }
.values { list-style: none; margin: 40px 0 0; padding: 0; display: flex; gap: 0; border-top: 1px solid var(--line-d); }
.values li { flex: 1; padding: 18px 0 0; font: 500 clamp(24px, 2.6vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.values span { display: block; font: 400 11px/1 var(--f-body); letter-spacing: .16em; opacity: .55; margin-bottom: 14px; }
.wind { padding: var(--head-gap) 0 0; cursor: none; }
@media (hover: none) { .wind { cursor: auto; } }
.wind__quote { font: 400 clamp(40px, 7.4vw, 136px)/1.02 var(--f-body); letter-spacing: -.035em; margin: 0; max-width: 13em; }
.wind__quote b { font-weight: 400; color: var(--oro); }
.wind__quote .nw { white-space: nowrap; }
.wind__quote .w { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
.wind__hint { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 34px 0 0; }
.wind__note { max-width: 32em; margin: var(--head-gap) 0 0 auto; }

/* ==========================================================
   03 EVOLUZIONE
   ========================================================== */
.evo { background: var(--avorio); color: var(--bosco); padding: var(--sec-y) 0; overflow: hidden; }
.evo__compare { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--gut); align-items: center; padding: 0 var(--edge); }
.compare { position: relative; aspect-ratio: 5 / 4; background: var(--verde); overflow: hidden; touch-action: pan-y; user-select: none; --pos: 50%; }
.compare__layer { position: absolute; inset: 0; display: grid; place-items: center; }
.compare__layer svg, .compare__layer img { position: absolute; top: 50%; left: 50%; height: 64%; width: auto; max-width: 80%; transform: translate(-50%, -50%); }
.compare__layer--new { color: var(--avorio); }
.compare__layer--old { background: var(--gelso); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag { position: absolute; left: 20px; bottom: 18px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--avorio); opacity: .85; }
.compare__tag--r { left: auto; right: 20px; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--avorio); }
.compare__handle i { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: var(--r-round); border: 1px solid var(--avorio); background: rgb(var(--bosco-rgb) / .35); backdrop-filter: blur(6px); }
.compare__handle i::before, .compare__handle i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid var(--avorio); border-width: 0 0 1px 1px; margin-top: -4px; }
.compare__handle i::before { left: 14px; transform: rotate(45deg); }
.compare__handle i::after { right: 14px; transform: rotate(-135deg); }
.evo__side p:not(.small) { margin: 22px 0 18px; max-width: 30em; }

/* ==========================================================
   04 LAB
   ========================================================== */
.lab { background: var(--bosco); padding: var(--sec-y) var(--edge); }
.lab__head { margin-bottom: var(--head-gap); }
.lab__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gut); align-items: start; }
.lab__stage { position: relative; aspect-ratio: 1; background: var(--c-bg, var(--verde)); color: var(--c-mark, var(--avorio)); --wm-year: var(--c-year, var(--oro)); transition: background var(--dur-600) var(--ease), color var(--dur-600) var(--ease); overflow: hidden; display: grid; place-items: center; }
.lab__mark { position: relative; width: 62%; height: 62%; }
.lab__m { position: absolute; inset: 0; will-change: clip-path, transform; }
.lab__m.is-small { inset: 15%; }  /* 19/28: 30% più piccolo degli altri marchi */
.lab__m svg, .lab__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.lab__panel { display: flex; flex-direction: column; gap: 34px; }
.lab__tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line-d); }
.lab__tab { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-d); text-align: left; transition: color var(--dur-300); }
.lab__tab b { font: 500 clamp(24px, 2.4vw, 36px)/1 var(--f-display); text-transform: uppercase; transition: transform var(--dur-500) var(--ease); }
.lab__tab span { font-size: var(--fs-meta); letter-spacing: .16em; opacity: .5; }
.lab__tab[aria-expanded="true"] { color: var(--oro); }
.lab__tab[aria-expanded="true"] b, .lab__tab:hover b { transform: translateX(10px); }
.lab__info { min-height: 150px; }
.lab__info p { margin: 0 0 14px; max-width: 30em; }
.lab__info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: var(--fs-xs); }
.lab__info dt { opacity: .55; letter-spacing: .16em; text-transform: uppercase; font-size: var(--fs-meta); padding-top: 2px; }
.lab__info dd { margin: 0; }

.lab__acc, .soc__acc { display: none; }
.lab__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.lab__ctrl .small { width: 100%; margin: 0; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: var(--r-round); border: 1px solid var(--line-ctl); background: var(--sw); transition: transform var(--dur-300) var(--ease); }
.swatch[aria-pressed="true"] { outline: 1px solid var(--avorio); outline-offset: 4px; }
.swatch:hover { transform: scale(1.12); }

/* ==========================================================
   05 PALETTE
   ========================================================== */
.pal { background: var(--avorio); color: var(--bosco); padding: var(--sec-y) 0 0; }  /* le barre poggiano direttamente sulla sezione dei caratteri */
.pal__head { padding: 0 var(--edge); margin-bottom: var(--head-gap); }
.pal__bars { display: flex; height: 82vh; min-height: 520px; overflow: hidden; }
.bar {
  position: relative; flex: 1; background: var(--c); color: var(--t);
  text-align: left; overflow: hidden;
  transition: flex-grow var(--dur-800) var(--ease);
  transform-origin: bottom;
}
.bar:hover, .bar:focus-visible, .bar.is-open { flex-grow: 3.4; }
.bar:focus-visible { outline-offset: -4px; }
.bar__hex { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%) rotate(-90deg); transform-origin: center; font: 500 clamp(14px, 1.3vw, 19px)/1 var(--f-body); letter-spacing: .08em; white-space: nowrap; transition: opacity var(--dur-300); }
.bar__info { position: absolute; left: 28px; right: 28px; bottom: 32px; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-400), transform var(--dur-600) var(--ease); min-width: 220px; }
.bar:hover .bar__info, .bar:focus-visible .bar__info, .bar.is-open .bar__info { opacity: 1; transform: none; transition-delay: .15s; }
.bar:hover .bar__hex, .bar:focus-visible .bar__hex, .bar.is-open .bar__hex { opacity: 0; }
.bar__name { font: 500 clamp(30px, 3.2vw, 52px)/.95 var(--f-display); text-transform: uppercase; display: block; }
.bar__role { display: block; font-size: var(--fs-s); margin: 12px 0 18px; max-width: 22em; opacity: .85; }

.bar__code { display: block; font-size: var(--fs-meta); letter-spacing: .16em; opacity: .7; }

.bar__idx { position: absolute; top: 22px; right: 22px; font-size: var(--fs-meta); letter-spacing: .16em; opacity: .6; }

/* ==========================================================
   06 TIPOGRAFIA
   ========================================================== */
.type { background: var(--pietra); color: var(--bosco); padding: var(--sec-y) var(--edge); }
.type__head { margin-bottom: var(--head-gap); }
.type__cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-l); }
.tcard { padding: 28px 28px 34px 0; border-right: 1px solid var(--line-l); }
.tcard + .tcard { padding-left: 28px; }
.tcard:last-child { border-right: 0; padding-right: 0; }
.tcard__role { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0; }
.tcard__glyph { font-size: clamp(130px, 15vw, 250px); line-height: 1; margin: 20px 0 6px; color: var(--verde); transition: transform var(--dur-800) var(--ease); }
.tcard:hover .tcard__glyph { transform: translateY(-10px) scale(1.04); }
.tcard__name { font-size: clamp(32px, 3vw, 46px); font-weight: 400; margin: 0 0 14px; line-height: 1; }
.tcard__name.f-rector { font-weight: 500; }
.tcard__glyph--img { height: 1em; display: flex; align-items: flex-end; padding-bottom: .1em; }  /* le immagini poggiano sulla stessa linea di base della R in Rector */
.tcard__glyph--img img { height: .74em; width: auto; }
.tcard__nameimg { height: .78em; width: auto; display: block; }
.tcard__nameimg--caps { height: .56em; max-width: 100%; object-fit: contain; object-position: left; margin: .3em 0 .66em; }  /* stessa riga di "RECTOR" e "PIVS" */  /* tracciato tagliato all'altezza delle maiuscole */
.tcard__abcimg { display: block; width: min(100%, 250px); height: auto; margin: 24px 0 0; opacity: .85; }
.tcard p:not(.tcard__role):not(.tcard__abc) { margin: 0; max-width: 26em; }
.type__film { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: end; margin-top: var(--head-gap); padding-top: 28px; border-top: 1px solid var(--line-l); }
.type__filmtext p:not(.tcard__role) { margin: 12px 0 0; max-width: 26em; }
.type__filmframe { position: relative; aspect-ratio: 16 / 9; background: var(--bosco); overflow: hidden; }
.tcard__abc { font-size: 22px; line-height: 1.3; margin: 24px 0 0; opacity: .85; letter-spacing: .02em; word-break: break-all; }

/* ==========================================================
   07 CENTENARIO
   ========================================================== */
.cent { height: 330vh; position: relative; background: var(--oro); color: var(--bosco); }
.cent__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.cent__num { position: relative; width: clamp(200px, 30vw, 520px); aspect-ratio: 147 / 160; color: var(--avorio); }
.cent__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.cent__copy { position: absolute; left: var(--edge); bottom: clamp(24px, 4vh, 44px); max-width: 30em; opacity: 0; }
.cent__copy .lead { margin-top: 22px; }
.cent__count { position: absolute; right: var(--edge); top: 18vh; text-align: right; opacity: 0; }
.cent__count span { display: block; font: 500 clamp(60px, 7vw, 120px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cent__count small { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; }

.fullbleed { margin: 0; position: relative; aspect-ratio: 1350 / 1080; max-height: 82vh; width: 100%; overflow: hidden; background: var(--bosco); }
.fullbleed__img { position: absolute; inset: -6% 0; }
.fullbleed__img img { width: 100%; height: 100%; object-fit: cover; }
.fullbleed figcaption { position: absolute; left: var(--edge); bottom: 32px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }

/* ==========================================================
   08 APPLICAZIONI
   ========================================================== */
.apps { background: var(--bosco); padding: var(--sec-y) 0; }
.apps__intro { flex: 0 0 clamp(280px, 30vw, 460px); align-self: center; padding-right: 2vw; scroll-snap-align: start; }
.apps__intro .lead { margin-top: 22px; }
.apps__ctrl { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 4vh var(--edge) 0; }
.apps__counter { font-variant-numeric: tabular-nums; margin-right: 10px; }
.apps__arrow { width: 52px; height: 52px; border-radius: var(--r-round); border: 1px solid var(--line-ctl); font: 300 20px/1 var(--f-body); color: var(--avorio); transition: background var(--dur-300), color var(--dur-300), border-color var(--dur-300), opacity var(--dur-300); }
.apps__arrow:hover:not(:disabled) { background: var(--avorio); color: var(--bosco); border-color: var(--avorio); }
.apps__arrow:disabled { opacity: .3; cursor: default; }
.apps__track { display: flex; align-items: flex-start; gap: clamp(16px, 2.4vw, 40px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: var(--edge); padding: 0 var(--edge) 8px; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; }
.apps__track::-webkit-scrollbar { display: none; }
.apps__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.apps__track::after { content: ""; flex: 0 0 1px; }
.app { flex: 0 0 auto; margin: 0; scroll-snap-align: start; overflow: hidden; }
.app img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.app--sq { width: clamp(260px, 34vw, 560px); height: clamp(260px, 34vw, 560px); }
.app--tall { width: clamp(220px, 26vw, 420px); height: clamp(300px, 39vw, 620px); }
.app--wide { width: clamp(320px, 52vw, 860px); height: clamp(220px, 29vw, 480px); }

/* ==========================================================
   OUTRO
   ========================================================== */
.outro { background: var(--verde); padding: var(--sec-y) 0 0; text-align: center; overflow: hidden; }
.marquee { overflow: hidden; }
.marquee__row { display: flex; width: max-content; animation: marquee 56s linear infinite; }  /* due coppie identiche: il -50% chiude il giro */
.marquee__row span { font: 500 clamp(80px, 14vw, 240px)/1 var(--f-display); padding-right: .5em; white-space: nowrap; }
.marquee__row i { font: 400 .62em/1 var(--f-body); vertical-align: .32em; color: var(--oro); margin-right: .06em; }
.marquee__la { color: var(--oro); }   /* il motto in latino, dopo #sempreaudaci */
@keyframes marquee { to { transform: translateX(-50%); } }
.outro__seal { width: clamp(120px, 13vw, 200px); margin: 10vh auto 0; color: var(--avorio); }
.outro__lead { font: 400 clamp(22px, 2.4vw, 36px)/1.25 var(--f-body); letter-spacing: -.01em; margin: 40px auto 0; padding: 0 var(--edge); }
.outro__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; padding: 0 var(--edge); }
.outro__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: var(--sec-y); padding: 22px var(--edge); border-top: 1px solid var(--line-d); font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.outro__top { min-height: 44px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; }

/* ==========================================================
   01 SANTA CROCE
   ========================================================== */
.sc { background: var(--bosco); position: relative; overflow: clip; }
.sc__body { position: relative; z-index: 2; margin-top: -100svh; background: var(--bosco); padding: var(--sec-y) var(--edge); box-shadow: 0 -40px 80px rgb(0 0 0 / .25); }
.sc__head { margin-bottom: var(--head-gap); }
.sc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: start; }
.sc__copy { grid-column: 1 / span 5; }
.sc__copy .lead { margin-top: 0; }
.sc__copy p:not(.lead) { margin: 22px 0 0; opacity: .85; }
.vas__copy { grid-column: 7 / span 6; }
.vas__copy p:not(.lead):not(.eyebrow) { margin: 22px 0 0; opacity: .85; max-width: 34em; }

/* collage: la scena resta ferma, le foto arrivano una per passo di scroll, poi il testo le copre */
.scl { --step: 55svh; position: relative; height: calc(100svh + var(--steps) * var(--step) + 100svh); }
.scl__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scl__bg { position: absolute; inset: 0; }
.scl__bg img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
.scl__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bosco-rgb) / .55), rgb(var(--bosco-rgb) / .25) 40%, rgb(var(--bosco-rgb) / .6)); }
.scl__stage { --u: min(1vw, 1.72svh); position: absolute; inset: 0; margin: auto; width: calc(100 * var(--u)); height: calc(56 * var(--u)); }
.scl__p { --pw: calc(var(--w) * var(--u)); position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: var(--pw); margin: 0; --rot: var(--r); transform: rotate(var(--rot)); }
.scl__p:nth-child(odd) { --dr: -5deg; }
.scl__p:nth-child(even) { --dr: 6deg; }
.scl.is-staged .scl__p { opacity: 0; transform: translate3d(0, calc(-6 * var(--u)), 0) scale(1.12) rotate(calc(var(--rot) + var(--dr) * .6)); transition: opacity .22s linear, transform .6s cubic-bezier(.22, 1.12, .36, 1); }
.scl.is-staged .scl__p.is-in { opacity: 1; transform: rotate(var(--rot)); }

/* nastro adesivo: carta semitrasparente con i bordi strappati */
.scl__p::before, .scl__photo--corners::after { content: ''; position: absolute; z-index: 3; left: 50%; top: calc(-1.3 * var(--u)); width: 38%; height: calc(2.6 * var(--u)); min-height: 12px; translate: -50% 0; rotate: -2deg; background: linear-gradient(90deg, rgb(244 238 214 / .7), rgb(236 228 200 / .58) 50%, rgb(244 238 214 / .68)); box-shadow: 0 1px 2px rgb(0 0 0 / .14); clip-path: polygon(0 6%, 3% 22%, 0 40%, 3% 58%, 0 76%, 3% 92%, 1% 100%, 99% 100%, 97% 82%, 100% 64%, 97% 46%, 100% 28%, 97% 10%, 100% 0, 2% 0); pointer-events: none; }
.scl__photo--corners::before { left: 0; width: 34%; translate: -28% 0; rotate: -38deg; top: calc(.4 * var(--u)); }
.scl__photo--corners::after { left: auto; right: 0; width: 34%; translate: 28% 0; rotate: 38deg; top: calc(.4 * var(--u)); }

/* foto stampata: bordo bianco, didascalia sotto */
.scl__photo { background: #F7F4E8; padding: calc(var(--pw) * .035) calc(var(--pw) * .035) 0; box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .2); }
.scl__photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.scl__photo figcaption { color: var(--bosco); font-size: max(10px, calc(var(--pw) * .042)); letter-spacing: .14em; text-transform: uppercase; padding: .9em 0 1em; }

/* lo scontrino con il bollino, come il "03 days" */
.scl__ticket { isolation: isolate; color: var(--bosco); font-size: max(9px, calc(var(--pw) * .046)); padding: 2.2em 1.6em 1.8em; }
.scl__ticket::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--avorio); filter: drop-shadow(0 calc(1.2 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .35));
  -webkit-mask: radial-gradient(circle .45em at 50% 0, #0000 97%, #000) 50% 0 / 1.3em 51% repeat-x, radial-gradient(circle .45em at 50% 100%, #0000 97%, #000) 50% 100% / 1.3em 51% repeat-x;
          mask: radial-gradient(circle .45em at 50% 0, #0000 97%, #000) 50% 0 / 1.3em 51% repeat-x, radial-gradient(circle .45em at 50% 100%, #0000 97%, #000) 50% 100% / 1.3em 51% repeat-x; }
.scl__ticket p { margin: 0; }
.scl__ticket-top, .scl__ticket-rows li { display: flex; justify-content: space-between; gap: 1em; }
.scl__ticket-top, .scl__ticket-foot { font-size: .78em; letter-spacing: .16em; text-transform: uppercase; }
.scl__ticket-big { font-family: var(--f-pivs); font-size: 3.6em; line-height: .92; margin: .5em 0 .45em !important; letter-spacing: .01em; }
.scl__ticket-rows { list-style: none; margin: 0; padding: .6em 0; border-block: 1px dashed rgb(var(--bosco-rgb) / .5); }
.scl__ticket-rows li { padding: .32em 0; font-variant-numeric: tabular-nums; }
.scl__ticket-rows li span:last-child { font-family: var(--f-display); letter-spacing: .06em; }
.scl__ticket-foot { margin-top: 1em !important; opacity: .7; }
.scl__sticker { position: absolute; right: -2.4em; top: -2.6em; width: 7.4em; aspect-ratio: 1; border-radius: 50%; background: var(--verde); color: var(--avorio); display: grid; place-content: center; text-align: center; gap: .2em; box-shadow: 0 .3em .8em rgb(0 0 0 / .3); transform: rotate(14deg); }
.scl__sticker b { font-family: var(--f-display); font-weight: 500; font-size: 1.45em; letter-spacing: .04em; line-height: 1; }
.scl__sticker small { font-size: .62em; letter-spacing: .18em; text-transform: uppercase; }
.scl.is-staged .scl__sticker { opacity: 0; transform: rotate(-10deg) scale(1.7); transition: opacity .18s linear .32s, transform .55s cubic-bezier(.22, 1.12, .36, 1) .32s; }
.scl.is-staged .is-in .scl__sticker { opacity: 1; transform: rotate(14deg) scale(1); }

@media (max-width: 900px) {
  .scl { --step: 48svh; }
  .scl__stage { --u: min(1vw, .54svh); height: calc(178 * var(--u)); }
  .scl__p { --pw: calc(var(--mw) * var(--u)); left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); --rot: var(--mr, var(--r)); }
  .sc__grid { grid-template-columns: 1fr; gap: 12vh; }
  .sc__copy, .vas__copy { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scl { height: auto; }
  .scl__pin { position: relative; }
  .sc__body { margin-top: 0; }
}

.radici__media figure { overflow: hidden; }
.radici__credit { position: absolute; right: 10px; bottom: 8px; font-size: 10px; letter-spacing: .04em; color: var(--avorio); opacity: .75; text-shadow: 0 1px 6px rgba(0,0,0,.4); }



/* ==========================================================
   08 IN CAMPO
   ========================================================== */
.campo { background: var(--bosco); padding: var(--sec-y) var(--edge); overflow: hidden; }
.campo__head { margin-bottom: var(--head-gap); max-width: 1100px; }
.campo__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3vw var(--gut); align-items: start; }
.ci { margin: 0; overflow: hidden; }
.ci img { width: 100%; height: 100%; object-fit: cover; }
.ci--a { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.ci--b { grid-column: 9 / span 4; aspect-ratio: 4 / 5; margin-top: 14vh; }
.ci--c { grid-column: 2 / span 5; aspect-ratio: 3 / 2; }

.ci--e { grid-column: 8 / span 5; aspect-ratio: 4 / 5; margin-top: 10vh; }

@media (max-width: 900px) {
  .campo__grid { grid-template-columns: 1fr; gap: 24px; }
  .ci--a, .ci--b, .ci--c, .ci--e { grid-column: 1; margin-top: 0; }
  .ci--b, .ci--e { width: 78%; }
  .ci--e { justify-self: end; }
}

/* ==========================================================
   09 SOCIETAS
   ========================================================== */
.soc { background: var(--avorio); color: var(--bosco); padding: var(--sec-y) var(--edge); }
.soc__head { margin-bottom: var(--head-gap); }
.soc__lockup { display: flex; align-items: center; gap: clamp(20px, 3.5vw, 64px); margin: 0; color: var(--verde); --lk: clamp(96px, 12vw, 200px); }
.soc__acb { height: var(--lk); width: auto; color: var(--verde); }
.soc__x { font: 300 calc(var(--lk) * .42)/1 var(--f-body); color: var(--verde); }
.soc__mark { display: flex; flex-direction: column; align-items: center; gap: calc(var(--lk) * .1); }
.soc__sym { height: calc(var(--lk) * .72); width: auto; }
.soc__wm { height: calc(var(--lk) * .17); width: auto; }
.soc__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gut); align-items: start; }
.soc__stage { position: relative; }
.soc__set { display: none; columns: 3; column-gap: 10px; }
.soc__set.is-on { display: block; }
.soc__f { margin: 0 0 10px; overflow: hidden; background: var(--pietra); break-inside: avoid; }
.soc__f img { width: 100%; height: auto; display: block; }
.soc__panel { display: flex; flex-direction: column; gap: 34px; }
.soc__tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line-l); }
.soc__tab { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line-l); text-align: left; color: var(--bosco); }
.soc__tab span { font-size: var(--fs-meta); letter-spacing: .16em; opacity: .5; }
.soc__tab b { font: 500 clamp(26px, 2.6vw, 42px)/1 var(--f-display); text-transform: uppercase; transition: transform var(--dur-500) var(--ease), color var(--dur-300); }
.soc__tab[aria-expanded="true"] b, .soc__tab:hover b { color: var(--verde); transform: translateX(10px); }
.soc__info p:not(.eyebrow) { margin: 0; max-width: 30em; }
.soc__sw { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 22px; font-size: var(--fs-xs); }
.soc__sw li { display: flex; align-items: center; gap: 10px; }
.soc__sw i { width: 28px; height: 28px; border-radius: var(--r-round); border: 1px solid var(--line-l); }
@media (max-width: 900px) {
  .soc__body { grid-template-columns: 1fr; }
  .soc__panel { order: -1; gap: 22px; }
  .soc__set { columns: 2; column-gap: 8px; }
  .soc__f { margin-bottom: 8px; }
}

/* ==========================================================
   ATTO I — LA SFIDA
   ========================================================== */
.sfida { background: var(--avorio); color: var(--bosco); padding: var(--sec-y) var(--edge); }
.sfida__head { margin-bottom: var(--head-gap); }
.sfida__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gut); align-items: start; }
.sfida__copy p:not(.lead) { margin: 22px 0 0; max-width: 32em; }
.sfida__copy .lead { margin-top: 0; }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-l); }
.stat { padding: 22px 0 30px; border-bottom: 1px solid var(--line-l); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.stat:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--line-l); }
.stat:nth-child(even) { padding-left: 24px; }
.stat dt { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.stat dd { margin: 0; font: 500 clamp(64px, 8vw, 132px)/.9 var(--f-display); color: var(--verde); font-variant-numeric: tabular-nums; }
.stat__u { font: 300 .42em/1 var(--f-body); vertical-align: .9em; margin-left: .06em; letter-spacing: 0; }
.stat dt { max-width: 22em; }

/* ==========================================================
   ATTO III — IL MONOGRAMMA DISEGNATO
   ========================================================== */
.draw { height: 220vh; position: relative; background: var(--avorio); color: var(--bosco); }
.draw__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gut); padding: 0 var(--edge); overflow: hidden; }
.draw__mono { width: min(100%, 46vh); height: auto; justify-self: center; overflow: visible; }
.draw__ld { fill: var(--verde); fill-opacity: 0; stroke: var(--verde); stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; }  /* stesso tratto del preloader */
.draw__copy { max-width: 30em; }
.draw__copy p:not(.eyebrow) { margin: 22px 0 0; }
.evo--compare { padding-top: 0; }
.evo__crest { margin: var(--sec-y) var(--edge) 0 auto; width: min(56%, 820px); }
.evo__crest img { width: 100%; height: auto; }

/* stage delle insegne: barra di avanzamento della riproduzione automatica */
.lab__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.08); }
.lab__progress i { position: absolute; inset: 0; background: currentColor; opacity: .5; transform-origin: left; transform: scaleX(0); }

/* caratteri: la riga che attraversa lo schermo */
.type__big { margin: var(--sec-y) 0 0; white-space: nowrap; font-size: clamp(96px, 18vw, 320px); line-height: .9; color: var(--verde); }
.type { overflow: hidden; }

/* ==========================================================
   ATTO IV — LE MAGLIE
   ========================================================== */
.soc__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--gut); align-items: start; margin-top: var(--head-gap); }
.soc__intro .lead { margin-top: 0; }
.soc__intro p:not(.lead) { margin: 22px 0 0; max-width: 34em; }
.soc__credit { margin: var(--head-gap) 0 0; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

/* Atto IV: i partner, la notizia, i dettagli */
.collab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--sec-y); border-top: 1px solid var(--line-l); }
.collab__card { padding-top: 34px; }
.collab__card > p:not(.eyebrow) { margin: 22px 0 0; max-width: 32em; }
.collab__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--verde); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size var(--dur-500) var(--ease); }
.collab__link:hover { background-size: 100% 1px; }
.hero__credit a { color: inherit; text-decoration: none; }
.hero__credit a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.notizia { margin-top: var(--sec-y); max-width: 1180px; }
.notizia__quote { margin: 0; font: 400 clamp(36px, 5.6vw, 96px)/1.04 var(--f-body); letter-spacing: -.03em; color: var(--verde); }
.notizia__note { margin: 34px 0 0 auto; max-width: 34em; }
.hero__credit { margin: 22px 0 0; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .85; line-height: 1.7; }
.hero__credit b { font-weight: 400; color: var(--oro); }
.dettagli { margin-top: var(--sec-y); }
.dettagli__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); align-items: start; }
.dettaglio { margin: 0; }
.dettaglio:nth-child(2) { margin-top: 10vh; }
.dettaglio__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
/* la maglia punto per punto: i punti solo su desktop, l'elenco sempre */
.anatomia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gut); align-items: center; margin-bottom: var(--sec-y); }
/* scheda tecnica: la maglia scontornata su una griglia sottile */
.anatomia__fig { position: relative; margin: 0; padding: 6%; background-color: rgb(var(--pietra-rgb) / .35);
  background-image: linear-gradient(var(--line-l) 1px, transparent 1px), linear-gradient(90deg, var(--line-l) 1px, transparent 1px);
  background-size: 12.5% 12.5%; background-position: -1px -1px; border: 1px solid var(--line-l); }
.anatomia__fig img { position: relative; width: 100%; height: auto; }
.anatomia__meta { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.anatomia__hint { margin: 18px 0 0; }
.anatomia__list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line-l); }
.anatomia__list li { border-bottom: 1px solid var(--line-l); transition: opacity var(--dur-350) var(--ease); }
.anatomia__q { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; padding: 18px 0; text-align: left; }
.anatomia__q span { font-size: var(--fs-meta); letter-spacing: .16em; color: var(--verde); }
.anatomia__q b { font: 500 clamp(22px, 2vw, 30px)/1 var(--f-display); text-transform: uppercase; transition: color var(--dur-300); }
.anatomia__q::after { content: "+"; font: 300 22px/1 var(--f-body); transition: transform var(--dur-400) var(--ease); }
.anatomia__list li.is-open .anatomia__q::after { transform: rotate(45deg); }
/* apertura morbida: la riga passa da 0 all'altezza del testo */
.anatomia__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.anatomia__a > p { overflow: hidden; min-height: 0; margin: 0; padding-left: 48px; }
.anatomia__list li.is-open .anatomia__a { grid-template-rows: 1fr; }
.anatomia__list li.is-open .anatomia__a > p { padding-bottom: 20px; }
.anatomia.is-active .anatomia__list li { opacity: .35; }
.anatomia.is-active .anatomia__list li.is-on { opacity: 1; }
.anatomia__list li.is-on b { color: var(--verde); }
.hs { display: none; position: absolute; left: calc(6% + var(--x) * .88); top: calc(6% + var(--y) * .88); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: var(--r-round); place-items: center; }
.hs span { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: var(--r-round); display: grid; place-items: center; background: var(--avorio); color: var(--bosco); font-size: var(--fs-meta); box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: background var(--dur-300), color var(--dur-300), scale var(--dur-400) var(--ease); }
.hs::before { content: ''; position: absolute; inset: 8px; border-radius: var(--r-round); border: 1px solid var(--avorio); animation: hs-pulse 2.4s var(--ease) infinite; }
.hs.is-on span, .hs:hover span { background: var(--oro); color: var(--bosco); scale: 1.15; }
@keyframes hs-pulse { 0% { scale: 1; opacity: .9; } 100% { scale: 2.1; opacity: 0; } }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) { .hs { display: grid; } }
@media (hover: none), (max-width: 900px) { .anatomia__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .hs::before { animation: none; opacity: 0; } }
.dettaglio__img img { width: 100%; height: 100%; object-fit: cover; }
.dettaglio figcaption { margin-top: 16px; font-size: var(--fs-sm); max-width: 26em; }
.dettaglio figcaption b { display: block; font-size: var(--fs-meta); letter-spacing: .16em; color: var(--verde); margin-bottom: 6px; font-weight: 400; }
.soc .soc__body { margin-top: var(--sec-y); }

/* ==========================================================
   TITOLI DI CODA
   ========================================================== */
.credits { background: var(--bosco); padding: var(--sec-y) var(--edge); text-align: center; }
.credits__list { margin: var(--head-gap) auto 0; max-width: 760px; display: grid; gap: 34px; }
.credits__list dt { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.credits__list dd { margin: 10px 0 0; font: 500 clamp(22px, 2.2vw, 32px)/1.1 var(--f-display); text-transform: uppercase; }
.credits__list a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-500) var(--ease), color var(--dur-300); }
.credits__list a:hover { color: var(--oro); background-size: 100% 1px; }
.credits__photo { margin: var(--head-gap) auto 0; max-width: 54em; font-size: var(--fs-meta); line-height: 1.6; opacity: .6; }
.credits__photo a { color: inherit; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 900px) {
  body { font-size: var(--fs-body); }
  .hud { grid-template-columns: 1fr auto; }
  .hud__chapter { display: none; }
  .index__list { columns: 1; }
  .index { padding-top: 76px; }
  .hero__meta { display: none; }
  .hero__intro { bottom: 9vh; }
  .hero__title { font-size: min(36vw, 24vh); }
  .hero__line--a { top: 24vh; }
  .hero__line--b { bottom: 26vh; }
  .radici__stick { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; align-content: start; padding-top: 72px; gap: 12px; }
  .radici__steps { gap: 18px; }
  .radici__year { grid-row: 2; }
  .odo { font-size: clamp(97px, 32vw, 216px); }   /* PIVS ~1.35× per avere l'ingombro del Rector */
  .radici__media { grid-column: 1; grid-row: 3; margin: 0; align-self: start; width: min(100%, 42svh, calc(100svh - 460px)); aspect-ratio: 1; }
  .radici__copy { grid-row: 4; min-height: 180px; }
  .radici__copy .display--m { font-size: 28px; }
  .radici__copy p:not(.eyebrow) { font-size: var(--fs-sm); margin-top: 10px; }
  .gelso__grid, .evo__compare, .lab__body { grid-template-columns: 1fr; }
  .gelso__media { order: 2; }
  .wind__note { margin-left: 0; }
  .pal__bars { flex-direction: column; height: auto; min-height: 0; }
  .bar { height: 76px; flex: none; transition: height .7s var(--ease); }
  .bar.is-open { height: 250px; }
  .bar__hex { left: 20px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .bar.is-open .bar__hex { opacity: 0; }
  .bar__info { left: 20px; bottom: 22px; }
  
  
  
  .type__cards { grid-template-columns: 1fr; }
  .tcard, .tcard + .tcard { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line-l); }
  .tcard__glyph { font-size: 120px; }
  .type__film { grid-template-columns: 1fr; border-top: 0; padding-top: 0; }
  
  
  .cent__copy { bottom: clamp(20px, 3vh, 32px); right: var(--edge); }
  .cent__count { top: 12vh; }
  .apps__arrow { width: 46px; height: 46px; }
  .apps__intro { flex-basis: 78vw; }
  .app--sq { width: 78vw; height: 78vw; }
  .app--tall { width: 64vw; height: 90vw; }
  .app--wide { width: 86vw; height: 58vw; }
}

/* accordion mobile (marchi + Societas) */
@media (max-width: 900px) {
  .lab__acc, .soc__acc { display: block; overflow: hidden; }
  .lab__acc.is-open { padding: 4px 0 22px; border-bottom: 1px solid var(--line-d); }
  .lab__info { min-height: 0; }
  .lab__tab[aria-expanded="true"] { border-bottom-color: transparent; }
  .lab__tab::after, .soc__tab::after { content: "+"; margin-left: auto; font: 300 22px/1 var(--f-body); transition: transform var(--dur-400) var(--ease); }
  .lab__tab span { margin-left: auto; margin-right: 14px; }
  .lab__tab[aria-expanded="true"]::after, .soc__tab[aria-expanded="true"]::after { transform: rotate(45deg); }
  .lab__body > .lab__viz { display: none; }
  
  .lab__panel > .lab__info, .lab__panel > .lab__ctrl { display: none; }
  .lab__acc .lab__viz { padding: 6px 0 22px; }
  .lab__stage { aspect-ratio: 4 / 3; }
  .lab__acc .lab__ctrl { margin-top: 18px; }
  .lab__ctrl .small { display: none; }
  .swatch { width: 32px; height: 32px; }
  /* niente outline esterno: su mobile verrebbe tagliato a sinistra */
  .swatch[aria-pressed="true"] { outline: none; box-shadow: inset 0 0 0 2px var(--avorio), inset 0 0 0 4px var(--bosco); }
  .swatch:hover { transform: none; }
  
  
  
  /* dentro l'accordion (overflow hidden) l'anello di selezione va disegnato all'interno */
  
  
  
  .soc__panel { order: 0; }
  .soc__tab[aria-expanded="true"] { border-bottom-color: transparent; }
  .soc__acc.is-open { padding: 4px 0 26px; border-bottom: 1px solid var(--line-l); }
  .soc__acc .soc__stage { margin-top: 22px; }
  .fullbleed { aspect-ratio: 1350 / 1080; }
  .evo__crest { width: auto; margin: var(--head-gap) var(--edge) 0; }
}

/* caso studio: mobile */
@media (max-width: 900px) {
  .sfida__grid, .soc__intro { grid-template-columns: 1fr; }
  .stat dd { font-size: clamp(56px, 18vw, 96px); }
  .draw__stick { grid-template-columns: 1fr; align-content: center; gap: 36px; padding-top: 64px; }
  .draw__mono { width: min(56vw, 34vh); }
  .lab__progress { display: none; }
  .credits__list { gap: 32px; }
  .collab, .dettagli__grid { grid-template-columns: 1fr; }
  .anatomia { grid-template-columns: 1fr; }
  .dettaglio:nth-child(2) { margin-top: 0; }
  }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* zoom leggero al passaggio del mouse sulle foto.
   Usa la proprietà `scale`, separata da `transform`: non litiga con parallasse e scrub di GSAP */
.evo__crest { overflow: hidden; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.sc__img, .vas__frame, .gelso__media, .evo__crest, .dettaglio__img, .soc__f, .ci, .app, .radici__media figure) img { transition: scale 1.2s var(--ease); }
  :is(.sc__img, .vas__frame, .gelso__media, .evo__crest, .dettaglio__img, .soc__f, .ci, .app, .radici__media figure):hover img { scale: 1.04; }
}

/* testi che si compongono con lo scroll (vedi splitText in brandbook.js) */
.st__w { display: inline-block; }
.st--chars .st__w { clip-path: inset(-.15em -.1em 0 -.1em); }   /* le lettere salgono da sotto la riga */
.st__c { display: inline-block; will-change: transform; }
.tcard__abcimg--ant { width: min(100%, 196px); }  /* Antarctica è più pesante: stessa presenza degli altri alfabeti */
.marquee__row .marquee__la { font-family: 'PIVS', var(--f-display); font-weight: 400; letter-spacing: 0; }   /* il motto latino nel nostro carattere */
/* il PIVS è molto stretto: un po' più grande per avere la stessa presenza di Rector e Antarctica */
.tcard__name.f-pivs { font-size: clamp(38px, 3.6vw, 56px); line-height: .84; }  /* descrizione alla stessa altezza delle altre colonne */
.tcard__abc.f-pivs { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.15; letter-spacing: 0; }   /* cresce con la colonna senza andare a capo */

/* video della costruzione del marchio */
.film { background: var(--bosco); padding: var(--sec-y) var(--edge); }
.film__frame { position: relative; aspect-ratio: 16 / 9; background: var(--nero); overflow: hidden; }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film + .evo--compare { padding-top: var(--sec-y); }

/* ---------- testi lunghi (proposta testi ottobre 2026): paragrafi dopo il lead ---------- */
.lab__head p:not(.lead):not(.eyebrow), .pal__head p:not(.lead):not(.eyebrow), .type__head p:not(.lead):not(.eyebrow),
.gelso__copy p:not(.lead):not(.eyebrow), .campo__head p:not(.lead):not(.eyebrow), .apps__intro p:not(.lead):not(.eyebrow),
.cent__copy p:not(.lead):not(.eyebrow), .evo__side p:not(.small) { margin: 18px 0 0; max-width: 34em; opacity: .85; }
.evo__side p:not(.small):first-of-type { margin-top: 22px; }
.gelso__copy .values + p { margin-top: 26px; }
.tcard p:not(.tcard__role):not(.tcard__abc) + p:not(.tcard__abc) { margin-top: .8em; }
.notizia__note + .notizia__note { margin-top: 18px; }
.draw__copy p:not(.eyebrow) + p { margin-top: 14px; }
.soc__intro + .soc__intro { margin-top: var(--sec-y); }
.outro__years { margin: 28px 0 0; text-align: center; }
.outro__years + .outro__lead { margin-top: 14px; }
.cent__copy { max-width: min(30em, 28vw); }

/* ==========================================================
   PIVS — type design (sezione dedicata)
   ========================================================== */
.pivs { background: var(--bosco); color: var(--avorio); padding: var(--sec-y) var(--edge); }
.pivs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gut); align-items: end; }
.pivs__name { font-size: clamp(150px, 22vw, 380px); line-height: .8; margin: 18px 0 0; }
.pivs__copy .lead { margin-top: 0; }
.pivs__copy p:not(.lead) { margin: 18px 0 0; max-width: 34em; opacity: .85; }
.pivs__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--head-gap) 0 0; border-top: 1px solid var(--line-d); }
.pivs__facts div { padding: 22px 22px 0 0; }
.pivs__facts div + div { padding-left: 22px; border-left: 1px solid var(--line-d); }
.pivs__facts dt { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.pivs__facts dd { margin: 14px 0 0; font: 400 clamp(44px, 5vw, 84px)/.9 'PIVS', var(--f-display); color: var(--oro); }
.pivs__facts dd.pivs__fmt { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.05; }
.pivs__liga { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); margin-top: var(--sec-y); }
.pivs__liga figure { margin: 0; padding-top: 22px; border-top: 1px solid var(--line-d); }
.pivs__liga figcaption { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.pivs__sample { margin: 24px 0 0; font-size: clamp(110px, 15vw, 260px); line-height: .85; }
.pivs__sample--dlig { font-feature-settings: "dlig" 1; font-variant-ligatures: discretionary-ligatures; color: var(--oro); }
.pivs .type__film { border-top-color: var(--line-d); margin-top: var(--sec-y); }
.pivs .type__filmframe { background: var(--ink); }
@media (max-width: 900px) {
  .pivs__grid, .pivs__liga { grid-template-columns: 1fr; }
  .pivs__facts { grid-template-columns: 1fr 1fr; }
  .pivs__facts div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---------- manifesto ---------- */
.manifesto { background: var(--avorio); color: var(--bosco); padding: var(--sec-y) var(--edge); }
.manifesto__text { margin: 0; max-width: 18em; font: 400 clamp(36px, 5.6vw, 96px)/1.04 var(--f-body); letter-spacing: -.03em; }
.manifesto__text span { color: var(--verde); }

/* ---------- ATTO I — lo scudetto al posto dei numeri ---------- */
.sfida__grid { align-items: center; }
.sfida__crest { margin: 0; justify-self: center; width: min(100%, 380px); perspective: 900px; }
.sfida__crestIn { position: relative; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 26px 34px rgb(var(--bosco-rgb) / .22)); }
.sfida__crestIn img { display: block; width: 100%; height: auto; }
.sfida__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-600) var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
  mix-blend-mode: soft-light;
  -webkit-mask: url('../brand/scudetto.svg') center / 100% 100% no-repeat; mask: url('../brand/scudetto.svg') center / 100% 100% no-repeat; }
.sfida__crest:hover .sfida__glare { opacity: 1; }
@media (max-width: 900px) { .sfida__crest { width: min(72%, 320px); margin-top: 12px; } }

/* titoli dei blocchi maglie: più piccoli, così "CATEGORIA" sta nella colonna senza spezzarsi */
.soc__intro .display--l { font-size: clamp(40px, 4.6vw, 84px); }
.soc__intro--solo { display: block; }
.soc__intro--solo > div { max-width: 40em; }
.soc__intro .display--l { white-space: nowrap; }   /* "OLTRE LA / CATEGORIA" va a capo solo dove c'è il <br> */

/* PIVS: il set di caratteri, in quattro righe separate da filetti */
.pivs__set { margin-top: var(--head-gap); border-top: 1px solid var(--line-d); }
.pivs__row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3.2fr); gap: var(--gut); align-items: baseline; padding: 26px 0 30px; border-bottom: 1px solid var(--line-d); }
.pivs__label { margin: 0; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.pivs__chars { margin: 0; font-size: clamp(34px, 4.2vw, 72px); line-height: 1.15; letter-spacing: .14em; word-break: break-all; font-feature-settings: "liga" 0, "dlig" 0; }
@media (max-width: 900px) { .pivs__row { grid-template-columns: 1fr; gap: 14px; } }
.pivs__chars { color: var(--oro); }
/* legature facoltative: niente spaziatura tra le lettere, altrimenti il browser non le applica */
.pivs__chars--liga { letter-spacing: 0; word-spacing: .45em; font-feature-settings: "dlig" 1; font-variant-ligatures: discretionary-ligatures; }
.compare__hint { margin: 16px 0 0; }
.outro__foot a { color: inherit; text-decoration: none; }
.outro__foot a:hover { color: var(--oro); }

/* PIVS 0.17: minuscole, lente Inline, tester */
.pivs__chars--lc { font-family: 'PIVS', var(--f-display); text-transform: none; letter-spacing: .1em; }

.plens { margin-top: var(--head-gap); border-top: 1px solid var(--line-d); padding-top: 22px; }
.plens__meta { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.plens__stage { --x: 50%; --y: 50%; --r: clamp(70px, 11vw, 190px); position: relative; overflow: clip; margin-top: clamp(16px, 3vh, 40px); cursor: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.plens__word { position: relative; z-index: 1; margin: 0; font: 400 var(--lfs, clamp(56px, 24vw, 360px))/1 'PIVS', var(--f-display); text-align: center; color: var(--avorio); padding: .04em 0 .12em; white-space: nowrap; }
/* il Regular si buca dove c'è la lente, così sotto non traspare nei filetti dell'Inline */
.plens__word:not(.plens__word--in) { -webkit-mask: radial-gradient(circle var(--r) at var(--x) var(--y), #0000 calc(100% - .5px), #000 100%); mask: radial-gradient(circle var(--r) at var(--x) var(--y), #0000 calc(100% - .5px), #000 100%); }
.plens__word--in { position: absolute; inset: 0; font-family: 'PIVS Inline', 'PIVS', var(--f-display); color: var(--avorio); clip-path: circle(var(--r) at var(--x) var(--y)); }
.plens__ring { position: absolute; z-index: 0; left: var(--x); top: var(--y); width: calc(var(--r) * 2); aspect-ratio: 1; translate: -50% -50%; background: var(--verde); border: 1px solid rgb(var(--avorio-rgb) / .7); border-radius: 50%; pointer-events: none; transition: background-color .5s, border-color .5s; }
.plens__ring span { position: absolute; left: 50%; top: 100%; translate: -50% 10px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.plens.is-done .plens__ring { background-color: transparent; border-color: transparent; }
.plens__ring span { transition: opacity .3s; }
.plens.is-full .plens__ring span { opacity: 0; }
@media (hover: none) { .plens__stage { cursor: auto; } .plens__hint { display: none; } }

.ptest { margin-top: var(--sec-y); border-top: 1px solid var(--line-d); padding-top: 22px; }
.ptest__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ptest__seg { display: inline-flex; border: 1px solid var(--line-ctl); border-radius: var(--r-pill); padding: 3px; }
.ptest__seg button, .ptest__toggle, .ptest__samples button { font: inherit; font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: inherit; background: none; border: 0; border-radius: var(--r-pill); padding: 9px 14px; min-height: 36px; cursor: pointer; }
.ptest__seg button[data-case] { letter-spacing: .04em; text-transform: none; font-size: var(--fs-s); }
.ptest__seg button.is-on { background: var(--avorio); color: var(--bosco); }
.ptest__toggle { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-ctl); }
.ptest__knob { width: 30px; height: 16px; border: 1px solid currentColor; border-radius: 9px; position: relative; }
.ptest__knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: translate .3s var(--ease); }
.ptest__toggle[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--bosco); }
.ptest__toggle[aria-pressed="true"] .ptest__knob::after { translate: 14px 0; }
.ptest__size { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; }
.ptest__size input { width: clamp(120px, 14vw, 200px); accent-color: var(--oro); }
.ptest__size output { min-width: 3ch; font-variant-numeric: tabular-nums; opacity: .7; }
.ptest__out { --fs: 150px; margin: clamp(24px, 5vh, 56px) 0 0; font: 400 min(var(--fs), 22vw)/1.02 'PIVS', var(--f-display); color: var(--oro); outline: none; overflow-wrap: anywhere; min-height: 1.1em; caret-color: var(--avorio); font-feature-settings: "liga" 0, "dlig" 0; }
.ptest__out[data-style="inline"] { font-family: 'PIVS Inline', 'PIVS', var(--f-display); }
.ptest__out[data-liga] { font-feature-settings: "dlig" 1; font-variant-ligatures: discretionary-ligatures; }
.ptest__out:focus-visible { box-shadow: 0 1px 0 0 rgb(var(--avorio-rgb) / .3); }
.ptest__samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 4vh, 40px); }
.ptest__samples button { border: 1px solid var(--line-d); opacity: .75; transition: opacity .2s, border-color .2s; }
.ptest__samples button:hover { opacity: 1; border-color: var(--line-ctl); }
@media (max-width: 900px) { .ptest__size { margin-left: 0; } }
@media (max-width: 700px) {
  .plens__word { white-space: normal; --lfs: 40vw; line-height: .95; }
  .plens__stage { --r: clamp(56px, 21vw, 100px); }
}