/* massimilianocividati.com — programma di sala, seconda edizione.
   Bodoni Moda per la voce (titoli, citazioni, didascalie), Montserrat per il testo e le etichette.
   Asse centrale, due formati fotografici, tavole in cornice, fondo: pianta di Milano, 1817. */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }

:root {
  --paper: #fbfbfa;
  --paper-2: #f1f1ec;
  --ink: #1a1a1a;
  --graphite: #5a5a56;
  --rule: #d6d6d1;
  --blu: #27477a;
  --stage: #0c0c0b;

  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* One spacing unit */
  --s1: 1rem;
  --s2: 1.5rem;
  --s3: 2.5rem;
  --s4: 4rem;
  --s5: 6.5rem;

  /* Short, regular scale */
  --t-label: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: 1.3125rem;
  --t-h3: 1.625rem;
  --t-h2: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);
  --t-h1: clamp(2.375rem, 1.8rem + 2vw, 3.25rem);
  --t-name: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);

  --measure: 38rem;
  --max: 72rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--graphite) var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The shadow under the white: Pianta della città di Milano, 1817, faded to ~7% ink */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper) url("../img/fondo-milano-1817.jpg") center / cover no-repeat;
  pointer-events: none;
}

::selection { background: var(--blu); color: #fff; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 300ms var(--ease), color 300ms var(--ease);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 1px solid var(--blu); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
em, .epigraph, .caption, .thread, .lede { font-family: var(--serif); }
em { font-style: italic; }

.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 60; text-decoration: none; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.small { font-size: var(--t-small); color: var(--graphite); }
.label, .credits dt, .contatti dt, .cronologia dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.caption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: var(--t-small);
  font-style: italic;
  color: var(--graphite);
  line-height: 1.5;
}
.caption em { font-style: normal; }

.todo { background: var(--paper-2); color: var(--graphite); padding: 0 0.35em; border-bottom: 1px dashed var(--graphite); font-family: var(--sans); font-style: normal; font-size: 0.9em; white-space: nowrap; }
.placeholder { border: 1px dashed var(--rule); padding: 1.25rem 1.5rem; color: var(--graphite); font-size: var(--t-small); background: rgb(241 241 236 / 0.7); text-align: center; }
.placeholder strong { color: var(--ink); font-weight: 500; }

/* ---------- Header: centred, like a title page ---------- */
.site-header { position: relative; z-index: 20; text-align: center; }
.site-header .wrap { padding-block: var(--s3) var(--s2); }
.brand { font-family: var(--serif); font-size: 1.375rem; letter-spacing: 0.02em; text-decoration: none; }
.nav ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.35rem 1.75rem; }
.nav a {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color 400ms var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.menu-toggle { display: none; font: inherit; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: inherit; background: none; border: 0; padding: 0.5rem 0; margin-top: 0.5rem; cursor: pointer; }
.site-header--over { position: absolute; inset: 0 0 auto 0; color: #fff; }
.site-header--over .brand, .site-header--over .nav a { text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }

@media (max-width: 760px) {
  .menu-toggle { display: block; margin: 0.35rem auto 0; }
  .nav { position: fixed; inset: 0; background: var(--paper); color: var(--ink); padding: 6rem var(--gutter) 2rem; display: none; z-index: 30; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; margin: 0; }
  .nav li { border-bottom: 1px solid var(--rule); }
  .nav a { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.75rem; letter-spacing: 0; text-transform: none; padding-block: 0.7rem; border: 0; text-shadow: none; }
  .nav a[aria-current="page"] { color: var(--blu); }
  .menu-toggle[aria-expanded="true"] { position: relative; z-index: 40; color: var(--ink); }
  .site-header--over .brand, .site-header--over .menu-toggle { position: relative; z-index: 40; }
  body.menu-open .site-header--over .brand { color: var(--ink); text-shadow: none; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Dissolvenza: full-screen cross-fading photographs ---------- */
.dissolvenza {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 30rem;
  background: var(--stage);
  color: #fff;
  overflow: hidden;
}
.dissolvenza__stage { position: absolute; inset: 0; }
.dissolvenza__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1800ms ease-in-out; }
.dissolvenza__slide.is-active { opacity: 1; }
.dissolvenza__slide img { width: 100%; height: 100%; object-fit: cover; }
.dissolvenza__slide figcaption {
  position: absolute;
  left: var(--gutter);
  bottom: var(--s2);
  max-width: 60%;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-small);
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.6);
}
.dissolvenza__controls { position: absolute; right: var(--gutter); bottom: var(--s2); z-index: 5; display: flex; gap: 0.4rem; }
.dissolvenza__controls button {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: rgb(0 0 0 / 0.3);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.5);
  cursor: pointer;
  transition: background 300ms var(--ease);
}
.dissolvenza__controls button:hover { background: rgb(0 0 0 / 0.55); }
.dissolvenza__controls svg { width: 0.9rem; height: 0.9rem; }
.dissolvenza__controls :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .dissolvenza__slide { transition: none; } }

/* Home cover: the dissolvenza with the title set centred at the foot */
.cover::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgb(0 0 0 / 0.66), rgb(0 0 0 / 0) 50%), linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0) 22%); pointer-events: none; }
.cover__text { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--s4); text-align: center; padding-inline: var(--gutter); }
.cover h1 { font-size: var(--t-name); line-height: 1.05; }
.cover__role { margin-top: var(--s1); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; }
.cover__line { margin: 0.5rem auto 0; max-width: 30ch; font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: 1.4; }
.cover .dissolvenza__slide figcaption { display: none; }
.cover .dissolvenza__controls { z-index: 6; }
@media (max-width: 760px) {
  .cover { height: auto; min-height: 0; }
  .cover .dissolvenza__stage { position: relative; aspect-ratio: 4 / 5; }
  .cover::after { display: none; }
  .cover__text { position: static; padding: var(--s3) var(--gutter) var(--s4); }
  .cover .dissolvenza__controls { top: calc(100vw * 1.25 - 3rem); bottom: auto; }
  .site-header--over { position: relative; background: var(--stage); }
}
@media (prefers-reduced-motion: no-preference) {
  .cover__text > * { animation: rise 1.4s var(--ease) both; }
  .cover__text > :nth-child(2) { animation-delay: 0.15s; }
  .cover__text > :nth-child(3) { animation-delay: 0.3s; }
}
@keyframes rise { from { opacity: 0.001; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--s5); }
.section--tight { padding-block: var(--s4); }
/* Home: less air between "Tre territori" (ending in Direzione artistica) and the portrait below */
section[aria-labelledby="territori-titolo"] { padding-bottom: var(--s3); }
section[aria-labelledby="nota-titolo"] { padding-top: var(--s3); }
.section-head { text-align: center; margin-bottom: var(--s4); }
.section-head h2 { font-size: var(--t-h2); }
.section-head a { display: inline-block; margin-top: 0.75rem; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- Tavole: photographs in a passe-partout ---------- */
.plate, .gallery figure { margin: 0; }
.plate > img, .gallery figure > img, .nota figure > img, .columns > .aside > img {
  padding: 0.55rem;
  background-color: #fff;
  border: 1px solid var(--rule);
}
.plate > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plate { max-width: 60rem; margin-inline: auto; }
.gallery figure > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.gallery .g-wide, .gallery .g-narrow, .gallery .g-full, .gallery .g-third { grid-column: auto; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

.plate-missing {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 3 / 2;
  background: rgb(241 241 236 / 0.85);
  border: 1px dashed var(--rule);
  color: var(--graphite);
  font-size: var(--t-small);
  text-align: center;
  padding: 1rem;
}

/* ---------- Home: Spettacoli ---------- */
.sommario { max-width: 46rem; margin-inline: auto; }
.sommario__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.sommario__item { border-bottom: 1px solid var(--rule); }
.sezione summary { list-style: none; cursor: pointer; }
.sezione summary::-webkit-details-marker { display: none; }
.sommario__link { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding-block: var(--s2); }
.sommario__title { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; transition: color 400ms var(--ease); }
.sommario__year { font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
.sezione summary .sommario__year::after { content: "  +"; }
.sezione[open] summary .sommario__year::after { content: "  −"; }
.sezione summary:hover .sommario__title, .sezione[open] .sommario__title { color: var(--blu); }
.sezione__titoli { list-style: none; margin: 0; padding: 0 0 var(--s2); columns: 2; column-gap: var(--s3); }
.sezione__titoli li { break-inside: avoid; padding-block: 0.2rem; }
.sezione__titoli a { font-family: var(--serif); font-style: italic; font-size: 1.125rem; }
.sezione__tutti a { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }
@media (prefers-reduced-motion: no-preference) { .sezione[open] .sezione__titoli { animation: rise 700ms var(--ease) both; } }
@media (max-width: 560px) { .sezione__titoli { columns: 1; } }

/* ---------- Nota ---------- */
.nota { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: center; }
.nota figure { margin: 0; }
.nota figure > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.nota h2 { font-size: var(--t-h2); margin-bottom: var(--s2); }
.nota .more { margin-top: var(--s2); }
.thread { font-style: italic; color: var(--blu); }
@media (max-width: 860px) { .nota { grid-template-columns: 1fr; } .nota figure { max-width: 26rem; margin-inline: auto; } }

.more { font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- Tre territori ---------- */
.stanze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); text-align: center; }
.stanza { padding: var(--s3) var(--s2) 0; }
.stanza + .stanza { border-left: 1px solid var(--rule); }
.stanza h3 { font-size: var(--t-h3); margin-bottom: var(--s1); }
.stanza p { max-width: 30ch; margin-inline: auto; }
.stanza .more { margin-top: var(--s2); }
@media (max-width: 820px) { .stanze { grid-template-columns: 1fr; } .stanza + .stanza { border-left: 0; border-top: 1px solid var(--rule); } .stanza { padding-bottom: var(--s3); } }

/* ---------- In coda ---------- */
.coda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); text-align: center; }
.coda h2 { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.coda .small { margin-bottom: var(--s2); }
@media (max-width: 760px) { .coda { grid-template-columns: 1fr; } }

/* ---------- Scrivimi ---------- */
.scrivimi { background: var(--ink); color: var(--paper); padding-block: var(--s5); text-align: center; }
.scrivimi a { font-family: var(--serif); font-style: italic; font-size: var(--t-h2); line-height: 1.3; text-decoration: none; display: inline-block; max-width: 30ch; text-wrap: balance; }
.scrivimi a span { background: linear-gradient(var(--paper), var(--paper)) 0 100% / 0 1px no-repeat; transition: background-size 900ms var(--ease); }
.scrivimi a:hover span, .scrivimi a:focus-visible span { background-size: 100% 1px; }
.scrivimi :focus-visible { outline-color: var(--paper); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #b9b9b4; font-size: var(--t-small); border-top: 1px solid rgb(255 255 255 / 0.12); }
.site-footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-block: var(--s3); text-align: center; }
.site-footer p { margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
.site-footer a:hover { color: var(--paper); }
.site-footer .todo { background: rgb(255 255 255 / 0.08); color: inherit; border-bottom-color: currentColor; }
.site-footer :focus-visible { outline-color: var(--paper); }

/* ---------- Inner pages ---------- */
.page-head { text-align: center; padding-block: var(--s4); }
.page-head h1 { font-size: var(--t-h1); }
.page-head .lede { margin: var(--s1) auto 0; font-style: italic; font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; color: var(--graphite); }

.prose { font-size: var(--t-body); }
.prose p { max-width: var(--measure); }
.prose h2 { font-size: var(--t-h2); margin: var(--s4) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }

.columns { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s4); align-items: start; }
.columns > .aside { position: sticky; top: var(--s2); }
.columns > .aside > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 900px) { .columns { grid-template-columns: 1fr; } .columns > .aside { position: static; } }

.block-list { border-top: 1px solid var(--ink); max-width: 56rem; margin-inline: auto; }
.block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s3); padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
.block h2, .block h3 { font-size: var(--t-h3); }
@media (max-width: 760px) { .block { grid-template-columns: 1fr; gap: var(--s1); } }

.credits { margin: 0; border-top: 1px solid var(--ink); font-size: 0.9375rem; }
.credits div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--rule); }
.credits dt { padding-top: 0.3em; line-height: 1.4; }
.credits dd { margin: 0; font-variant-numeric: lining-nums; }
@media (max-width: 460px) { .credits div { grid-template-columns: 1fr; gap: 0.1rem; } }

.epigraph { font-style: italic; font-size: var(--t-lead); line-height: 1.45; max-width: 32rem; margin: 0 auto; text-align: center; }
.epigraph footer { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); margin-top: 0.75rem; }

/* Scheda */
.scheda-sezione { text-align: center; padding-top: var(--s3); margin: 0; }
.scheda-sezione a { font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--graphite); }
.scheda-head { display: block; text-align: center; padding-block: var(--s2) var(--s4); }
.scheda-head h1 { font-size: var(--t-h1); }
.scheda-head p.epigraph { margin-top: 0.5rem; }
.scheda-head .riga { margin: var(--s1) auto 0; max-width: 44ch; color: var(--graphite); font-weight: 300; }
.scheda-head > div + div:not(:empty) { margin-top: var(--s3); }

.scheda-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4); align-items: start; }
.scheda-body .aside { position: sticky; top: var(--s2); }
.scheda-body .aside h2 { font-family: var(--sans); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.75rem; }
@media (max-width: 900px) { .scheda-body { grid-template-columns: 1fr; } .scheda-body .aside { position: static; } }

.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.pager a { display: block; padding-block: var(--s2) var(--s3); text-decoration: none; }
.pager a:last-child { text-align: right; }
.pager .small { display: block; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.3rem; }
.pager strong { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; }

/* Spettacoli index */
.indice-sezioni { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; }
.indice-sezioni a { font-family: var(--serif); font-size: 1.125rem; }
.indice-sezioni .small { margin-left: 0.25rem; }
.sezione-indice { padding-top: var(--s5); scroll-margin-top: 1rem; }
.sezione-indice > h2 { font-size: var(--t-h2); text-align: center; margin-bottom: var(--s3); }
.indice-righe { list-style: none; margin: 0 auto; padding: 0; border-top: 1px solid var(--ink); max-width: 60rem; }
.riga-indice { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--s3); align-items: center; padding-block: var(--s2); border-bottom: 1px solid var(--rule); }
.riga-indice__media { order: 3; display: block; }
.riga-indice__media img, .riga-indice__media .plate-missing { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.riga-indice__media .plate-missing { font-size: 0.75rem; padding: 0.25rem; border: 0; }
.riga-indice__title h3 { font-size: var(--t-h3); }
.riga-indice__title h3 a { text-decoration: none; }
.riga-indice__title .small { margin-top: 0.25rem; font-family: var(--serif); font-style: italic; }
.riga-indice__line { margin: 0; color: var(--graphite); font-size: 0.9375rem; }
@media (max-width: 820px) { .riga-indice { grid-template-columns: 1fr; gap: var(--s1); } .riga-indice__media { order: 0; } }

/* Storia */
.cronologia { margin: 0; border-top: 1px solid var(--ink); }
.cronologia div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.cronologia dt { color: var(--blu); padding-top: 0.25em; }
.cronologia dd { margin: 0; }

/* Formazione */
.istituzioni { border-top: 1px solid var(--ink); max-width: 60rem; margin-inline: auto; }
.istituzione { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s1) var(--s3); padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
.istituzione h3 { font-size: var(--t-h3); }
.istituzione .small { margin-top: 0.3rem; }
.istituzione .link { margin-top: 0.75rem; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; }
.istituzione .link a + a { margin-left: 1.25rem; }
@media (max-width: 760px) { .istituzione { grid-template-columns: 1fr; } }

/* Contatti */
.contatti { margin: 0; border-top: 1px solid var(--ink); }
.contatti div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.9rem; border-bottom: 1px solid var(--rule); }
.contatti dt { padding-top: 0.35em; }
.contatti dd { margin: 0; font-size: var(--t-lead); font-family: var(--serif); }
@media (max-width: 560px) { .contatti div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* Sottomenu (Direzione artistica) */
.sottomenu { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; }
.sottomenu a { font-family: var(--serif); font-size: 1.125rem; text-decoration: none; border-bottom: 1px solid var(--rule); }
.sottomenu a[aria-current="page"] { color: var(--blu); border-bottom-color: var(--blu); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.placeholder .todo, .caption .todo { white-space: normal; }
@media (max-width: 760px) { .coda { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Availability ---------- */
.stato { display: inline-block; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.stato--disponibile { color: var(--blu); }
.stato--repertorio { color: var(--graphite); }
.riga-indice__title .stato { margin-top: 0.5rem; }
.scheda-sezione { padding-top: var(--s2); display: flex; justify-content: center; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; }
.scheda-head > div:first-child .scheda-sezione { margin-top: var(--s1); }
.filtro { margin-top: var(--s3); display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
.filtro button {
  font: inherit; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--rule); padding: 0.55rem 1rem; cursor: pointer;
  transition: border-color 300ms var(--ease), background 300ms var(--ease), color 300ms var(--ease);
}
.filtro button:hover { border-color: var(--ink); }
.filtro button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.riga-indice[hidden], .sezione-indice[hidden] { display: none; }

/* ---------- Index: one continuous column of photographs down the right ---------- */
.indice-righe { border-top: 1px solid var(--ink); }
.riga-indice {
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 15rem;
  gap: 0;
  padding-block: 0;
  border-bottom: 0;
  align-items: stretch;
}
.riga-indice__title, .riga-indice__line { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.riga-indice__media { padding: 0; border: 0; background: var(--stage); min-height: 10rem; }
.riga-indice__media img, .riga-indice__media .plate-missing { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.riga-indice__media .plate-missing { background: #e9e9e4; border: 0; }
.riga-indice + .riga-indice .riga-indice__media { border-top: 1px solid rgb(255 255 255 / 0.35); }
@media (max-width: 820px) {
  .riga-indice { grid-template-columns: 1fr; }
  .riga-indice__media { min-height: 0; aspect-ratio: 3 / 2; }
  .riga-indice__title { padding-bottom: 0; border-bottom: 0; }
  .riga-indice__line { padding-top: 0.5rem; }
}

/* ---------- Gallery: a single column, photographs joined in one passe-partout ---------- */
.colonna-foto {
  max-width: 50rem;
  margin-inline: auto;
  padding: 0.55rem;
  background: #fff;
  border: 1px solid var(--rule);
  display: grid;
  gap: 0.35rem;
}
.colonna-foto figure { position: relative; margin: 0; }
.colonna-foto img { width: 100%; height: auto; background: var(--stage); }
.colonna-foto figcaption {
  position: absolute; left: 1rem; bottom: 0.75rem; right: 1rem;
  font-family: var(--serif); font-style: italic; font-size: var(--t-small);
  color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 10px rgb(0 0 0 / 0.65);
}

/* ---------- Home: one band of photographs, edge to edge ---------- */
.banda { display: flex; width: 100%; background: var(--stage); }
.banda figure { flex: 1 1 0; margin: 0; position: relative; overflow: hidden; }
.banda figure + figure { border-left: 1px solid rgb(255 255 255 / 0.25); }
.banda a { display: block; color: #fff; text-decoration: none; }
.banda img { width: 100%; height: clamp(14rem, 28vw, 26rem); object-fit: cover; transition: transform 1400ms var(--ease), opacity 600ms var(--ease); }
.banda a:hover img { transform: scale(1.03); }
.banda figcaption {
  position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 1.0625rem;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.7);
}
@media (max-width: 760px) { .banda { flex-direction: column; } .banda figure + figure { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.25); } .banda img { height: 56vw; } }
@media (prefers-reduced-motion: reduce) { .banda img { transition: none; } .banda a:hover img { transform: none; } }
/* The row's text sets its height; the photo fills it without stretching it */
.riga-indice__media { position: relative; }
.riga-indice__media img, .riga-indice__media .plate-missing { position: absolute; inset: 0; }
@media (max-width: 820px) { .riga-indice__media img, .riga-indice__media .plate-missing { position: absolute; } }

/* Spacing classes that replace former inline styles */
.scheda-head .sottotitolo { margin-top: 0.6rem; }
.fonti { margin-top: 1.25rem; }
.scheda-body--pagina { padding-bottom: var(--s5); }
.segnaposto-foto { margin-top: var(--s3); }
.congedo { margin-top: 3.5rem; }
/* Drawings and plans are light: captions go under them, in graphite */
.colonna-foto--disegni figcaption { position: static; margin: 0.4rem 0 0.2rem; color: var(--graphite); text-shadow: none; text-align: center; }

/* ---------- Show pages, third edition: cinematic opening ---------- */
.apertura { position: relative; height: 100vh; height: 100svh; min-height: 34rem; background: var(--stage); color: #fff; overflow: hidden; }
.apertura__foto, .apertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura__foto img { object-fit: cover; }
.apertura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0) 55%), linear-gradient(to bottom, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0) 24%); pointer-events: none; }
.apertura__testo { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--s4); text-align: center; padding-inline: var(--gutter); }
.apertura h1 { font-size: var(--t-name); line-height: 1.05; }
.apertura .sottotitolo { margin-top: 0.5rem; font-style: italic; font-size: var(--t-lead); max-width: 36ch; margin-inline: auto; }
.apertura .riga { margin: var(--s1) auto 0; max-width: 46ch; font-weight: 300; color: rgb(255 255 255 / 0.9); }
.apertura .scheda-sezione { padding-top: var(--s1); }
.apertura .scheda-sezione a { color: rgb(255 255 255 / 0.85); }
.apertura .stato--disponibile { color: #b9cdf0; }
.apertura .stato--repertorio { color: rgb(255 255 255 / 0.7); }
.apertura__didascalia { position: absolute; z-index: 2; right: var(--gutter); bottom: var(--s2); margin: 0; max-width: 40ch; text-align: right; font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: rgb(255 255 255 / 0.7); }
.apertura__didascalia .todo { background: rgb(255 255 255 / 0.1); color: inherit; border-bottom-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .apertura__foto img { animation: avvicina 24s ease-out both; }
  .apertura__testo > * { animation: rise 1.4s var(--ease) both; }
  .apertura__testo > :nth-child(2) { animation-delay: 0.15s; }
  .apertura__testo > :nth-child(3) { animation-delay: 0.3s; }
  .apertura__testo > :nth-child(4) { animation-delay: 0.45s; }
}
@keyframes avvicina { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (max-width: 760px) {
  .apertura { height: auto; min-height: 0; }
  .apertura__foto { position: relative; aspect-ratio: 4 / 5; }
  .apertura::after { display: none; }
  .apertura__testo { position: static; padding: var(--s3) var(--gutter) var(--s2); }
  .apertura__didascalia { position: static; text-align: center; max-width: none; padding: 0 var(--gutter) var(--s3); }
}
.epigrafe-scheda { padding-top: var(--s4); }

/* ---------- Scroll-driven sequence ---------- */
.sequenza { position: relative; background: var(--stage); color: #fff; }
.js .sequenza { height: calc(var(--n) * 75vh + 100vh); }
.sequenza__stage { position: relative; }
.js .sequenza__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sequenza__slide { margin: 0; }
.sequenza__slide img { width: 100%; height: auto; }
.js .sequenza__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms ease-in-out; }
.js .sequenza__slide img { height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js .sequenza__slide.is-active { opacity: 1; }
.js .sequenza__slide.is-active img { transform: scale(1); }
.sequenza__meta, .sequenza__barra { display: none; }
.js .sequenza__meta { display: flex; position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: var(--s2); justify-content: space-between; align-items: baseline; text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.sequenza__titolo { font-family: var(--serif); font-size: var(--t-small); color: rgb(255 255 255 / 0.85); }
.sequenza__conta { font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; font-variant-numeric: lining-nums tabular-nums; }
.sequenza__conta b { font-weight: 500; font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0; }
.js .sequenza__barra { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / 0.15); }
.sequenza__barra i { display: block; height: 100%; width: 0; background: rgb(255 255 255 / 0.85); }
@media (prefers-reduced-motion: reduce) {
  .js .sequenza { height: auto; }
  .js .sequenza__stage { position: static; height: auto; }
  .js .sequenza__slide { position: static; opacity: 1; transition: none; }
  .js .sequenza__slide img { height: auto; transform: none; transition: none; }
  .js .sequenza__meta, .js .sequenza__barra { display: none; }
}

/* ---------- Trailer ---------- */
.video { max-width: 60rem; margin-inline: auto; padding: 0.55rem; background: #fff; border: 1px solid var(--rule); }
.video__facciata, .video iframe { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--stage) center / cover no-repeat; }
.video__facciata { position: relative; color: #fff; text-decoration: none; }
.video__facciata::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.35); transition: background 400ms var(--ease); }
.video__facciata:hover::before { background: rgb(0 0 0 / 0.2); }
.video__play { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; border: 1px solid rgb(255 255 255 / 0.85); border-radius: 50%; transition: transform 500ms var(--ease); }
.video__facciata:hover .video__play { transform: scale(1.06); }
.video__play svg { width: 1.5rem; height: 1.5rem; margin-left: 0.2rem; }

/* ---------- Rassegna stampa ---------- */
.rassegna { border-top: 1px solid var(--rule); }
.rassegna__voci { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--s3); }
.recensione { margin: 0; text-align: center; }
.recensione p { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: 1.45; max-width: 38ch; margin-inline: auto; }
.recensione footer { margin-top: 0.75rem; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }
.recensione + .recensione::before { content: ""; display: block; width: 3rem; height: 1px; background: var(--rule); margin: 0 auto var(--s3); }

/* ---------- Inner pages, immersive edition ---------- */
.apertura--pagina h1 { font-size: var(--t-name); }
.soglia { text-align: center; }
.soglia__testo { font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.45; max-width: 34ch; margin: 0 auto; text-wrap: balance; }
.soglia__filo { margin: var(--s3) auto 0; max-width: 46ch; color: var(--graphite); }

.capitolo { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; background: var(--paper); }
.capitolo + .capitolo { border-top: 1px solid var(--rule); }
.capitolo__foto { position: relative; margin: 0; overflow: hidden; background: var(--stage); }
.capitolo__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capitolo__foto figcaption { position: absolute; left: var(--s2); bottom: var(--s2); right: var(--s2); font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.capitolo__testo { display: flex; align-items: center; padding: var(--s5) clamp(1.5rem, 6vw, 6rem); }
.capitolo__testo > div { max-width: 32rem; }
.capitolo__testo h2 { font-size: var(--t-name); line-height: 1; margin-bottom: var(--s3); }
.capitolo__eco { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: 1.45; color: var(--blu); margin-top: var(--s2); }
.capitolo--dx .capitolo__foto { order: 2; }
.capitolo--solo-testo { grid-template-columns: 1fr; min-height: 0; text-align: center; }
.capitolo--solo-testo .capitolo__testo { justify-content: center; padding-block: var(--s5); }
.capitolo--solo-testo .capitolo__testo > div { margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .capitolo__foto img { transform: scale(1.08); transition: transform 2.4s var(--ease); }
  .js .capitolo.in-vista .capitolo__foto img { transform: none; }
  .js .capitolo__testo > div { opacity: 0.001; transform: translateY(1.5rem); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
  .js .capitolo.in-vista .capitolo__testo > div { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .capitolo { grid-template-columns: 1fr; min-height: 0; }
  .capitolo__foto { aspect-ratio: 4 / 5; }
  .capitolo--dx .capitolo__foto { order: 0; }
  .capitolo__testo { padding: var(--s4) var(--gutter); }
}

.banda--cinque img { height: clamp(14rem, 24vw, 22rem); }
.banda--cinque figcaption { font-size: 0.9375rem; padding-inline: 0.5rem; }

/* Institutions and venues with a photograph */
.istituzione:has(.istituzione__foto) { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 14rem; }
.istituzione__foto { margin: 0; }
.istituzione__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.istituzione__foto figcaption { margin-top: 0.5rem; font-family: var(--serif); font-style: italic; font-size: 0.8125rem; line-height: 1.4; color: var(--graphite); }
@media (max-width: 760px) { .istituzione:has(.istituzione__foto) { grid-template-columns: 1fr; } }

/* Storia: plates between the chapters */
.tavola-storia { margin: var(--s4) 0; }
.tavola-storia img { width: 100%; padding: 0.55rem; background: #fff; border: 1px solid var(--rule); }

/* Sequenza, faster pace: half the scroll per photograph and half the fade */
.js .sequenza { height: calc(var(--n) * 37.5vh + 100vh); }
.js .sequenza__slide { transition: opacity 550ms ease-in-out; }
.js .sequenza__slide img { transition: transform 3.5s cubic-bezier(0.2, 0.6, 0.2, 1); }

/* ---------- Dissolvenza, fourth edition: faster crossfade with Ken Burns ---------- */
.dissolvenza__slide { transition: opacity 1200ms ease-in-out; }
.dissolvenza__slide img { transform-origin: 50% 50%; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .dissolvenza__slide.is-active img, .dissolvenza__slide.is-leaving img { animation-duration: 7s; animation-timing-function: linear; animation-fill-mode: both; }
  .dissolvenza__slide.kb0.is-active img, .dissolvenza__slide.kb0.is-leaving img { animation-name: kb0; }
  .dissolvenza__slide.kb1.is-active img, .dissolvenza__slide.kb1.is-leaving img { animation-name: kb1; }
  .dissolvenza__slide.kb2.is-active img, .dissolvenza__slide.kb2.is-leaving img { animation-name: kb2; }
  .dissolvenza__slide.kb3.is-active img, .dissolvenza__slide.kb3.is-leaving img { animation-name: kb3; }
}
@keyframes kb0 { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes kb1 { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1.03) translate(0, 0); } }
@keyframes kb2 { from { transform: scale(1.03) translate(1.5%, -1%); } to { transform: scale(1.15) translate(-1%, 1.5%); } }
@keyframes kb3 { from { transform: scale(1.15) translate(-2%, 1%); } to { transform: scale(1.04) translate(1%, -1%); } }
.dissolvenza__conta {
  position: absolute; z-index: 5; right: calc(var(--gutter) + 8.5rem); bottom: calc(var(--s2) + 0.35rem); margin: 0;
  color: #fff; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.6);
}
.dissolvenza__conta b { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; letter-spacing: 0; }
@media (max-width: 560px) { .dissolvenza__conta { display: none; } }
.egum { margin-top: var(--s3); }

/* ---------- Distribution: always visible, always linked ---------- */
.distribuito { margin-top: var(--s1); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; }
.distribuito a { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.125rem; letter-spacing: 0; text-transform: none; text-decoration-color: rgb(255 255 255 / 0.6); }
.apertura .distribuito { color: rgb(255 255 255 / 0.9); }
.scheda-head .distribuito a { text-decoration-color: var(--rule); }
.distribuzione { margin-top: var(--s4); padding: var(--s3); background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.distribuzione p { max-width: none; }
.distribuzione__etichetta { font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.35rem; }
.distribuzione__nome { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; margin-bottom: 0.75rem; }
.distribuzione__link { margin-top: var(--s2); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; }
.distribuzione__link a { color: var(--blu); text-decoration-color: currentColor; }

/* Faces first: anchor every cover-cropped photograph in its upper third */
.dissolvenza__slide img, .capitolo__foto img, .riga-indice__media img, .banda img { object-position: 50% 30%; }
/* Phones: the opening photograph is shown whole, never cropped, so no face or figure is cut */
@media (max-width: 760px) {
  .apertura__foto { aspect-ratio: auto; }
  .apertura__foto img { position: static; height: auto; object-fit: contain; animation: none; }
}

/* Index: shows distributed by another production */
.distributore { margin: 0.35rem 0 0; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9a5a12; }
.distributore span, .legenda-distributore span { color: #b8660f; font-size: 1.1em; margin-right: 0.15rem; }
.legenda-distributore { margin: var(--s2) auto 0; max-width: 46ch; font-size: var(--t-small); color: var(--graphite); }
.banda--sei img { height: clamp(12rem, 20vw, 20rem); }
.banda--sei figcaption { font-size: 0.875rem; padding-inline: 0.4rem; }
@media (max-width: 1000px) { .banda--sei { flex-wrap: wrap; } .banda--sei figure { flex: 1 1 33%; } }
.repliche { display: inline-block; margin-top: var(--s1); padding: 0.35rem 0.9rem; border: 1px solid currentColor; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Footer, compact: name · Scrivimi · small print ---------- */
.site-footer { background: var(--ink); color: #b9b9b4; border-top: 0; }
.site-footer .wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 2rem; padding-block: var(--s2); text-align: left; }
.site-footer__nome { font-family: var(--serif); font-size: 1.125rem; color: var(--paper); text-decoration: none; }
.site-footer__scrivimi { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--paper); text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.35); transition: border-color 400ms var(--ease); }
.site-footer__scrivimi:hover { border-bottom-color: var(--paper); color: var(--paper); }
.site-footer__note { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; }
@media (max-width: 560px) { .site-footer .wrap { flex-direction: column; align-items: center; text-align: center; } }

/* A chapter photograph that is itself a small crossfade */
.dissolvenza--mini { position: absolute; inset: 0; height: 100%; min-height: 0; }
@media (max-width: 860px) { .capitolo__foto { position: relative; } }
.istituzione .istituzione__foto { align-self: center; }

/* Direzione artistica: the text breathes below the photo banner */
.dissolvenza + .wrap .scheda-body--pagina { padding-top: var(--s4); }

/* Show pages: every photograph in one full-width strip under the cross-fade; it scrolls sideways when too wide */
.striscia { position: relative; background: var(--stage); padding-block: 4px; }
.striscia__binario { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.35) transparent; }
.striscia__binario:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.striscia__binario > figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
.striscia__binario > :first-child { margin-left: auto; }
.striscia__binario > :last-child { margin-right: auto; }
.striscia__binario img { display: block; height: clamp(11rem, 32vh, 22rem); width: auto; transition: opacity 0.3s ease; }
.striscia__binario a:hover img { opacity: 0.85; }
.striscia__freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; display: none; place-items: center; border: 1px solid rgb(255 255 255 / 0.6); background: rgb(12 12 11 / 0.55); color: #fff; cursor: pointer; }
.striscia__freccia svg { width: 1rem; height: 1rem; }
.striscia__freccia--sx { left: var(--gutter); }
.striscia__freccia--dx { right: var(--gutter); }
.striscia--scorre .striscia__freccia { display: grid; }
.striscia__freccia[disabled] { opacity: 0.25; cursor: default; }
@media (max-width: 760px) { .striscia__freccia { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .striscia__binario { scroll-behavior: auto; } }

/* Home: more room for Taccuino and Calendario */
.coda-sezione { padding-block: var(--s5); }
.coda-sezione .coda { gap: var(--s3); }
.coda-sezione .coda > div { padding: var(--s4) var(--s3); border-top: 1px solid var(--ink); background: rgb(255 255 255 / 0.55); min-height: 20rem; display: flex; flex-direction: column; align-items: center; }
.coda-sezione .coda h2 { font-size: var(--t-h2); }
.coda-sezione .coda .placeholder { margin-top: auto; }

/* Direzione artistica list: a portrait photograph keeps its height, so the Torre is seen whole */
.istituzione__foto--alta img { aspect-ratio: 3 / 4; object-position: 50% 20%; }

/* Home: the square portrait inside the 4:5 frame keeps glasses and gaze centred, forehead uncut */
.nota figure > img.ritratto { object-fit: cover; object-position: center 30%; }

/* Formazione: the menu to the method and the ways to take part, right under the opening */
.formazione-menu { padding-top: var(--s4); }
.formazione-menu .sottomenu { margin-top: 0; }
.formazione-foto { margin: var(--s3) auto var(--s4); max-width: 60rem; }
.elenco-metodo { padding-left: 1.1rem; }
.elenco-metodo li { margin-bottom: 0.75rem; }
.elenco-metodo li::marker { color: var(--blu); }
.prose h2 { font-size: var(--t-h3); margin: var(--s3) 0 var(--s1); }
.capitolo .more a + a { margin-left: 1.5rem; }

/* ---------- Names: a typographic wall (Teatro «Ha lavorato con», Formazione «Sono stati suoi allievi») ---------- */
.nomi { text-align: center; }
.nomi__gruppo { max-width: 60rem; margin: 0 auto var(--s3); }
.nomi__etichetta { font-family: var(--sans); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--s1); }
.nomi__elenco { font-family: var(--serif); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.75; text-wrap: balance; }
.siae { margin-top: var(--s1); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }
.aia-invito { text-align: center; }
.aia-invito h2 { font-size: var(--t-name); margin: 0.25rem 0 var(--s1); }
.aia-invito h2 a { text-decoration: none; }
.storia-corpo { padding-top: var(--s4); }

/* ---------- Aia Taumastica: the same system, turned to night, on a neural network instead of the 1817 map ---------- */
body.tema-notte {
  --paper: #0b0b0c; --paper-2: #151517; --ink: #f1efe9; --graphite: #a7a59e; --rule: rgb(255 255 255 / 0.16); --blu: #a9c0ec;
  background: #0b0b0c; color: var(--ink);
}
body.tema-notte::before { background: #0b0b0c url("../img/rete-neurale.svg") center / cover no-repeat; opacity: 0.9; }
body.tema-notte a { color: inherit; }
body.tema-notte ::selection { background: #fff; color: #0b0b0c; }
.aia-apertura { min-height: 78vh; display: grid; place-items: center; text-align: center; padding-block: var(--s5); }
.aia-occhiello, .aia-sottotitolo { font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--graphite); }
.aia-apertura h1 { font-size: clamp(3.25rem, 1.5rem + 8vw, 8.5rem); line-height: 0.95; font-weight: 400; margin: var(--s2) 0; letter-spacing: -0.01em; }
.aia-nome { border-block: 1px solid var(--rule); background: rgb(11 11 12 / 0.72); }
.aia-nome__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding-block: var(--s4); }
.aia-nome h2 { font-size: var(--t-h2); font-style: italic; margin-bottom: var(--s1); }
.aia-nome p { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.55; color: var(--graphite); }
.aia-colonna { max-width: 44rem; margin-inline: auto; }
.aia-testo h2, .aia-produzioni h2, .aia-numeri h2, .aia-persone h2 { font-size: var(--t-h2); text-align: center; margin: var(--s3) 0 var(--s2); }
.aia-testo p, .aia-produzioni p { margin-bottom: var(--s1); line-height: 1.75; }
.aia-testo a, .aia-produzioni a, .aia-persone a { border-bottom: 1px solid var(--rule); text-decoration: none; }
.aia-testo a:hover, .aia-produzioni a:hover, .aia-persone a:hover { border-bottom-color: var(--ink); }
.aia-citazione { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); text-align: center; margin-top: var(--s3) !important; color: var(--blu); }
.aia-numeri { background: rgb(255 255 255 / 0.04); border-block: 1px solid var(--rule); }
.aia-numeri__griglia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); text-align: center; margin: 0 0 var(--s3); }
.aia-numeri__griglia dt { font-family: var(--serif); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.1; }
.aia-numeri__griglia dd { margin: 0.35rem 0 0; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.aia-nota { text-align: center; color: var(--graphite); }
.aia-elenco { list-style: none; padding: 0; margin: var(--s3) 0; counter-reset: prod; }
.aia-elenco li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s1); padding-block: var(--s1); border-top: 1px solid var(--rule); counter-increment: prod; }
.aia-elenco li::before { content: counter(prod, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); color: var(--graphite); }
.aia-elenco strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.aia-elenco span { color: var(--graphite); font-size: var(--t-small); line-height: 1.6; }
.aia-persone__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); max-width: 60rem; margin: 0 auto; }
.aia-persone h3 { font-size: var(--t-h3); margin-bottom: var(--s1); }
.aia-persone p { line-height: 1.75; }
.tema-notte .nomi__elenco { color: var(--ink); }
.aia-fine { text-align: center; padding-bottom: var(--s5); }
.aia-fine a { font-family: var(--serif); font-style: italic; font-size: var(--t-h2); border-bottom: 1px solid var(--ink); text-decoration: none; }
@media (max-width: 860px) {
  .aia-nome__griglia, .aia-persone__griglia { grid-template-columns: 1fr; gap: var(--s3); }
  .aia-numeri__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s3); }
}
/* the night page keeps a black foot */
.tema-notte .site-footer { background: #000; color: #9d9b95; border-top: 1px solid var(--rule); }
.tema-notte .site-footer__nome, .tema-notte .site-footer__scrivimi { color: #f1efe9; }

/* ---------- Aia Taumastica, compact edition: logo, a continuous ribbon of stage photos, two-column blocks ---------- */
.tema-notte .aia-apertura { min-height: 0; display: block; padding: var(--s4) 0 var(--s3); }
.tema-notte .aia-apertura h1 { margin: 0 auto var(--s1); max-width: 46rem; }
.tema-notte .aia-apertura h1 img { width: 100%; height: auto; }
.tema-notte .aia-occhiello { margin: 0; }
.aia-corpo { max-width: 64rem; margin: 0 auto; padding: 0 var(--gutter) var(--s4); }
.aia-corpo h2 { font-size: var(--t-h3); text-align: left; margin: 0 0 var(--s1); }
.aia-corpo h2 a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.aia-corpo p { line-height: 1.65; margin: 0 0 0.75rem; font-size: 0.975rem; }
.aia-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.aia-due > div > h2 + p { margin-top: 0; }
.aia-due > div > p + h2 { margin-top: var(--s2); }
.aia-blocco { padding-block: var(--s3); border-top: 1px solid var(--rule); }
.tema-notte .aia-nome { background: none; border: 0; padding-block: var(--s2) var(--s3); }
.tema-notte .aia-nome h2 { font-style: italic; font-size: var(--t-h3); }
.tema-notte .aia-nome p { font-size: 1.0625rem; line-height: 1.55; }
.tema-notte .aia-citazione { text-align: left; font-size: 1.125rem; margin-top: var(--s1) !important; }
.tema-notte .aia-numeri { background: rgb(255 255 255 / 0.04); border-block: 1px solid var(--rule); padding: var(--s3) var(--s2); margin-inline: calc(-1 * var(--s2)); }
.tema-notte .aia-numeri__griglia { margin-bottom: var(--s1); }
.tema-notte .aia-numeri__griglia dt { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.tema-notte .aia-nota { font-size: var(--t-small); text-align: center; margin: 0; }
.tema-notte .aia-elenco { columns: 2 20rem; column-gap: var(--s3); margin: var(--s1) 0; }
.tema-notte .aia-elenco li { break-inside: avoid; grid-template-columns: 2.25rem minmax(0, 1fr); padding-block: 0.55rem; }
.tema-notte .aia-elenco strong { font-size: 1.0625rem; }
.tema-notte .aia-elenco span { font-size: 0.8125rem; line-height: 1.45; }
.tema-notte .aia-corpo .nomi { text-align: left; }
.tema-notte .aia-corpo .nomi__gruppo { margin: 0 0 var(--s2); max-width: none; }
.tema-notte .aia-corpo .nomi__elenco { font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.tema-notte .aia-fine { text-align: left; padding: 0; margin-top: var(--s2); }
.tema-notte .aia-fine a { font-size: var(--t-h3); }

/* The ribbon: a fixed column on the right that climbs slowly, on loop; a band that slides sideways on phones */
.aia-rullo { overflow: hidden; }
.aia-rullo figure { margin: 0; position: relative; }
.aia-rullo img { display: block; width: 100%; height: auto; filter: grayscale(0.15) contrast(1.05); transition: opacity 0.3s ease; }
.aia-rullo figcaption { position: absolute; left: 0.6rem; bottom: 0.45rem; font-family: var(--serif); font-style: italic; font-size: 0.8125rem; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 0.8); }
.aia-rullo a[href$=".jpg"] { display: block; cursor: zoom-in; }
.aia-rullo a[href$=".jpg"]:hover img { opacity: 0.85; }
@media (min-width: 1100px) {
  body.tema-notte { padding-right: 22vw; }
  .aia-rullo { position: fixed; top: 0; right: 0; bottom: 0; width: 22vw; border-left: 1px solid var(--rule); background: #000; z-index: 5; }
  .aia-rullo__nastro { display: flex; flex-direction: column; gap: 3px; animation: rullo-su 160s linear infinite; }
  .aia-rullo:hover .aia-rullo__nastro { animation-play-state: paused; }
}
@media (max-width: 1099px) {
  .aia-rullo { border-block: 1px solid var(--rule); background: #000; margin-bottom: var(--s2); }
  .aia-rullo__nastro { display: flex; width: max-content; gap: 3px; animation: rullo-lato 120s linear infinite; }
  .aia-rullo figure { width: 15rem; flex: 0 0 auto; }
  .aia-rullo img { aspect-ratio: 3 / 2; object-fit: cover; }
  .aia-due { grid-template-columns: 1fr; gap: var(--s2); }
}
@keyframes rullo-su { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes rullo-lato { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .aia-rullo__nastro { animation: none !important; }
  .aia-rullo { overflow: auto; }
}

/* Altro: one reading column per page */
.altro-corpo { max-width: 44rem; margin: 0 auto; padding-bottom: var(--s4); }
.altro-blocco { padding-block: var(--s3); border-top: 1px solid var(--rule); }
.altro-blocco h2 { font-size: var(--t-h2); margin-bottom: var(--s2); }
.altro-blocco p { line-height: 1.75; margin-bottom: var(--s1); }
.altro-foto { margin: 0 0 var(--s2); }
.altro-foto img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 1099px) { .tema-notte .aia-numeri { margin-inline: 0; padding-inline: var(--s1); } }

/* WhatsApp: a quiet grey pill that follows the reader on every page */
.whatsapp { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem 0.6rem 0.75rem; border-radius: 999px; background: #5f5f5b; color: #fff; text-decoration: none;
  font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.22); transition: background-color 300ms ease, transform 300ms ease; }
.whatsapp svg { width: 1.35rem; height: 1.35rem; flex: none; }
.whatsapp:hover { background: #3f3f3c; transform: translateY(-2px); }
.whatsapp:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }
@media (max-width: 560px) { .whatsapp { right: 1rem; bottom: 1rem; padding: 0.75rem; } .whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.tema-notte .whatsapp { background: #2c2c2e; border: 1px solid rgb(255 255 255 / 0.2); }
@media (min-width: 1100px) { .tema-notte .whatsapp { right: calc(22vw + 1.25rem); } }
@media (prefers-reduced-motion: reduce) { .whatsapp { transition: none; } .whatsapp:hover { transform: none; } }

/* Il Bì: the technical sheet to download */
.scarica { margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid var(--rule); }
.scarica a { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 1.125rem; }
.scarica a::before { content: "↓ "; font-style: normal; }
.scarica .small { display: block; color: var(--graphite); margin-top: 0.25rem; }

/* Aia Taumastica: association data, and a quicker ribbon */
.tema-notte .aia-dati .credits { max-width: 36rem; }
.tema-notte .aia-dati dt { color: var(--graphite); }
@media (min-width: 1100px) { .aia-rullo__nastro { animation-duration: 150s !important; } }
@media (max-width: 1099px) { .aia-rullo__nastro { animation-duration: 110s !important; } }
@media (prefers-reduced-motion: reduce) { .aia-rullo__nastro { animation: none !important; } }

/* Inner pages opening with several photographs */
.cover--pagina .dissolvenza__slide figcaption { display: block; z-index: 4; }
.cover--pagina .cover__line { max-width: 34ch; }

/* Storia: the self-ironic note, up top, beside the child in costume */
.autoironia { display: flex; align-items: center; justify-content: center; gap: var(--s3); max-width: 46rem; margin: var(--s3) auto 0; }
.autoironia figure { margin: 0; flex: 0 0 11rem; transform: rotate(-3deg); }
.autoironia img { width: 100%; height: auto; padding: 0.45rem 0.45rem 1.6rem; background: #fff; border: 1px solid var(--rule); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.autoironia p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); line-height: 1.45; margin: 0; color: var(--blu); }
@media (max-width: 640px) { .autoironia { flex-direction: column; text-align: center; } .autoironia figure { flex-basis: auto; width: 60%; } }
.cv-scarica { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.cv-scarica a { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 0.7rem 1.1rem; border: 1px solid var(--ink); }
.cv-scarica a::before { content: "↓ "; }
.cv-scarica a:hover { background: var(--ink); color: var(--paper); }

/* Aia Taumastica: Laila Pozzo's photograph, set wide between the name and the text */
.aia-foto { margin: var(--s2) 0 var(--s3); }
.aia-foto img { width: 100%; height: auto; display: block; }
.aia-foto figcaption { margin-top: 0.5rem; font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--graphite); }
.tema-notte .scarica { border-top-color: var(--rule); }

/* Altro: the opening photograph of each page */
.altro-foto--testa { margin: 0 0 var(--s2); }
.aia-foto { max-width: 26rem; margin-inline: auto; }
.page-head { overflow-x: clip; }
main { overflow-x: clip; }

/* Medicale: video previews that open on YouTube */
.video-griglia { list-style: none; padding: 0; margin: var(--s2) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--s2) var(--s1); }
.video-griglia a { display: block; text-decoration: none; }
.video-griglia__foto { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stage); }
.video-griglia__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.34); transition: transform 0.5s ease; }
.video-griglia a:hover .video-griglia__foto img { transform: scale(1.4); }
.video-griglia__play { position: absolute; inset: 0; margin: auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; }
.video-griglia__play svg { width: 1rem; height: 1rem; margin-left: 2px; }
.video-griglia__titolo { display: block; margin-top: 0.5rem; font-family: var(--serif); font-size: 0.95rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .video-griglia__foto img { transition: none; } }
@media (min-width: 1100px) { .tema-notte .aia-numeri__griglia { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ---------- AiaLab: an old Victorian grocer's — cream paper, ink, oxblood, hairline double rules ---------- */
body.tema-lab { --drog-carta: #f3ecdd; --drog-inchiostro: #211d18; --drog-sangue: #6e2320; --drog-verde: #22392d; --drog-oro: #a8874a; }
body.tema-lab::before { background: var(--drog-carta); }
body.tema-lab { background: var(--drog-carta); }
.lab { max-width: 52rem; margin: 0 auto; padding: 0 var(--gutter) var(--s4); color: var(--drog-inchiostro); }
.lab-briciole { text-align: center; margin-bottom: var(--s2); }
.lab-insegna { text-align: center; margin: var(--s3) 0 var(--s4); padding: var(--s3) var(--s2); border: 1px solid var(--drog-inchiostro); outline: 1px solid var(--drog-inchiostro); outline-offset: 5px; }
.lab-insegna__sopra, .lab-insegna__dal { font-size: var(--t-label); letter-spacing: 0.3em; text-transform: uppercase; color: var(--drog-sangue); margin: 0; }
.lab-insegna h1 { font-size: clamp(3.75rem, 2rem + 7vw, 7rem); letter-spacing: 0.04em; line-height: 1; margin: var(--s1) 0; font-weight: 400; }
.lab-insegna__sotto { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.4; margin: 0 0 var(--s1); }
.lab-insegna__sotto em { color: var(--drog-sangue); }
.lab h2 { font-size: var(--t-label); letter-spacing: 0.3em; text-transform: uppercase; font-family: var(--sans); font-weight: 500; text-align: center; color: var(--drog-sangue); margin: 0 0 var(--s2); }
.lab h2::before, .lab h2::after { content: "✦"; margin: 0 0.8em; color: var(--drog-oro); letter-spacing: 0; }
.lab-bugiardino { margin-bottom: var(--s4); }
.lab-bugiardino > p { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65; text-align: center; max-width: 38rem; margin: 0 auto var(--s2); }
.lab-avvertenze { margin: var(--s3) auto 0; max-width: 40rem; border-top: 3px double var(--drog-inchiostro); border-bottom: 3px double var(--drog-inchiostro); }
.lab-avvertenze > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s1); padding: 0.75rem 0; border-bottom: 1px solid rgb(33 29 24 / 0.2); }
.lab-avvertenze > div:last-child { border-bottom: 0; }
.lab-avvertenze dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--drog-sangue); padding-top: 0.2rem; }
.lab-avvertenze dd { margin: 0; font-size: var(--t-small); line-height: 1.6; }
.lab-scaffale__sotto { text-align: center; font-family: var(--serif); font-style: italic; margin: -0.75rem 0 var(--s3); color: rgb(33 29 24 / 0.7); }
.etichette { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.etichetta { text-align: center; padding: var(--s2) var(--s2) calc(var(--s2) - 0.25rem); border: 1px solid var(--drog-inchiostro); outline: 1px solid rgb(33 29 24 / 0.35); outline-offset: -6px; background: rgb(255 255 255 / 0.35); }
.etichetta__num { display: block; font-size: var(--t-label); letter-spacing: 0.2em; color: var(--drog-oro); margin-bottom: 0.35rem; }
.etichetta h3 { font-size: 1.375rem; letter-spacing: 0.03em; margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(33 29 24 / 0.25); }
.etichetta p { font-family: var(--serif); font-style: italic; font-size: 0.975rem; line-height: 1.55; margin: 0; }
.etichetta:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 26rem; justify-self: center; }
.lab-fine { text-align: center; margin-top: var(--s5); }
.lab-fine__frase { font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); max-width: 30ch; margin: 0 auto var(--s2); }
.tema-lab .bottone-lab { background: var(--drog-verde); }
/* the prominent button, also used on the Laboratori page */
.bottone-lab { display: inline-grid; grid-template-columns: 1fr auto; column-gap: var(--s2); align-items: center; text-align: left; text-decoration: none;
  margin: var(--s3) 0; padding: var(--s2) var(--s3); background: var(--ink); color: var(--paper); border-radius: 2px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.18); transition: transform 300ms ease, box-shadow 300ms ease; }
.bottone-lab:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 18px 36px rgb(0 0 0 / 0.22); }
.bottone-lab__nome { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.1; }
.bottone-lab__riga { grid-column: 1; font-size: var(--t-small); color: rgb(255 255 255 / 0.75); margin-top: 0.25rem; }
.bottone-lab__freccia { grid-column: 2; grid-row: 1 / span 2; font-size: 2rem; }
/* ribbon on the light page */
.lab-rullo { background: var(--drog-inchiostro) !important; }
@media (min-width: 1100px) { body.tema-lab { padding-right: 22vw; } .tema-lab .whatsapp { right: calc(22vw + 1.25rem); } }
@media (max-width: 860px) { .etichette { grid-template-columns: 1fr; } .lab-avvertenze > div { grid-template-columns: 1fr; gap: 0.2rem; } }
@media (prefers-reduced-motion: reduce) { .bottone-lab { transform: none !important; transition: none; } }

/* ---------- Torre dell'Acquedotto: the archive of ten years ---------- */
.archivio { margin-top: var(--s5); padding-bottom: var(--s4); border-top: 1px solid var(--ink); }
.archivio__apertura { text-align: center; padding-top: var(--s4); }
.archivio__occhiello { font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--graphite); }
.archivio__apertura h2 { font-size: var(--t-name); margin: 0.4rem 0 var(--s2); }
.archivio__intro { max-width: 40rem; margin: 0 auto var(--s3); line-height: 1.75; }
.archivio__indice { list-style: none; padding: 0; margin: 0 auto; max-width: 60rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; }
.archivio__indice a { text-decoration: none; font-family: var(--serif); font-size: 1.0625rem; border-bottom: 1px solid var(--rule); }
.archivio__indice a span { font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.12em; color: var(--graphite); margin-right: 0.45rem; }
.archivio__stagione { padding-top: var(--s4); scroll-margin-top: 1rem; }
.archivio__testa { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; margin-bottom: var(--s2); }
.archivio__anno { grid-row: span 2; font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); color: var(--graphite); margin: 0; }
.archivio__testa h3 { font-size: var(--t-h2); margin: 0 0 0.4rem; }
.archivio__testo { max-width: 44rem; line-height: 1.7; margin: 0; }
.archivio__striscia { background: var(--stage); }
.archivio__striscia .striscia__binario img { height: clamp(10rem, 28vh, 18rem); }
.archivio__locandina img { outline: 1px solid rgb(255 255 255 / 0.25); outline-offset: -1px; }
.archivio__programma { list-style: none; padding: 0; margin: var(--s2) 0 0 calc(9rem + var(--s3)); max-width: 50rem; }
.archivio__programma li { display: grid; grid-template-columns: 8.5rem minmax(0, 13rem) minmax(0, 1fr); gap: var(--s1); padding: 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); line-height: 1.5; }
.archivio__data { color: var(--graphite); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.15rem; }
.archivio__chi { font-weight: 500; }
.archivio__cosa { font-family: var(--serif); font-style: italic; font-size: 1rem; }
.archivio__nota { margin: var(--s1) 0 0 calc(9rem + var(--s3)); color: var(--graphite); }
.archivio__ospiti { padding-top: var(--s4); text-align: center; }
.archivio__ospiti h3 { font-size: var(--t-h2); margin-bottom: var(--s2); }
.archivio__ospiti .nomi__elenco { max-width: 56rem; margin: 0 auto; }
@media (max-width: 760px) {
  .archivio__testa { grid-template-columns: 1fr; }
  .archivio__anno { grid-row: auto; }
  .archivio__programma, .archivio__nota { margin-left: 0; }
  .archivio__programma li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Photo credit set in the corner of the picture */
.formazione-foto { position: relative; }
.credito-angolo { position: absolute; right: 1.1rem; bottom: 1rem; margin: 0; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / 0.75); }
.capitolo__foto figcaption { font-size: 0.6875rem; }

/* Laboratori: AiaLab as a quiet, elegant link — no black box */
.link-lab { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s2); align-items: center; margin: var(--s3) 0; padding: var(--s2) 0; text-decoration: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.link-lab .bottone-lab__nome { font-family: var(--serif); font-size: var(--t-h2); }
.link-lab .bottone-lab__riga { grid-column: 1; font-family: var(--serif); font-style: italic; color: var(--graphite); margin-top: 0.2rem; }
.link-lab .bottone-lab__freccia { grid-column: 2; grid-row: 1 / span 2; font-size: 1.75rem; transition: transform 300ms ease; }
.link-lab:hover .bottone-lab__freccia { transform: translateX(6px); }

/* Direzione artistica list: the Bì shows its people and its building together */
.istituzione__foto--doppia a { display: grid; gap: 4px; }
.istituzione__foto--doppia img { aspect-ratio: 16 / 9 !important; }

/* Cinema: two photographs side by side */
.altro-coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin: var(--s2) 0; }
.altro-coppia figure { margin: 0; }
.altro-coppia img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.altro-coppia figcaption { margin-top: 0.4rem; font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--graphite); }

/* AiaLab: palest grey instead of cream */
body.tema-lab { --drog-carta: #f1f1ef; background: var(--drog-carta); }
body.tema-lab::before { background: var(--drog-carta); }
.etichetta { background: rgb(255 255 255 / 0.6); }

/* Storia: a larger childhood photo; the CVs at the end */
.autoironia figure { flex-basis: 16rem; }
.storia-corpo .cv-scarica { margin-top: var(--s4); }

/* Lightbox (Torre archive) */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgb(10 10 10 / 0.94); padding: 3.5rem 4.5rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 7rem); width: auto; height: auto; box-shadow: 0 20px 60px rgb(0 0 0 / 0.5); }
.lightbox__conta { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgb(255 255 255 / 0.7); font-size: var(--t-label); letter-spacing: 0.16em; margin: 0; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-family: var(--serif); }
.lightbox__chiudi { top: 0.8rem; right: 1.2rem; font-size: 2.5rem; line-height: 1; }
.lightbox__freccia { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 0.5rem 1rem; }
.lightbox__freccia--sx { left: 0.5rem; } .lightbox__freccia--dx { right: 0.5rem; }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.lightbox-aperta { overflow: hidden; }
.archivio a[href$=".jpg"] { cursor: zoom-in; }
@media (max-width: 560px) { .lightbox { padding: 3rem 0.5rem; } .lightbox__freccia { font-size: 2.5rem; } }

/* Cinema: the film */
.film { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s3); align-items: start; margin-bottom: var(--s2); }
.film__manifesto { margin: 0; } .film__manifesto img { width: 100%; height: auto; box-shadow: 0 10px 30px rgb(0 0 0 / 0.15); }
.film__motto { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); color: #a3231c; }
.film__crediti { margin: var(--s2) 0 var(--s3); }
.film__sotto { font-size: var(--t-h3); margin: var(--s3) 0 var(--s1); }
.fb-video { position: relative; display: flex; align-items: flex-end; gap: 0.6rem; text-decoration: none; background: #111 center / cover no-repeat; color: #fff; padding: 0.9rem 1rem; min-height: 5.5rem; }
.fb-video--grande { min-height: 22rem; }
.fb-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.1)); }
.fb-video > * { position: relative; }
.fb-video__play { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgb(255 255 255 / 0.9); color: #111; font-size: 0.9rem; flex: none; }
.fb-video__titolo { font-family: var(--serif); font-size: 1rem; line-height: 1.3; }
.fb-griglia { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; }
.fb-griglia .fb-video { background: #1d1b19; min-height: 6.5rem; }
.fb-iframe { width: 100%; aspect-ratio: 9 / 16; max-height: 80vh; border: 0; background: #000; }
.fb-trailer .fb-iframe { max-width: 26rem; display: block; margin: 0 auto; }
@media (max-width: 700px) { .film { grid-template-columns: 1fr; } .film__manifesto { max-width: 18rem; } }

/* ---------- Progetti: a stylised sea from a medieval chart ---------- */
body.tema-mare { background: #f4f1ea; }
body.tema-mare::before { background: #f4f1ea url("../img/mare-medievale.svg") center / cover no-repeat; opacity: 0.9; }
.mare-pagina { max-width: 56rem; margin: 0 auto; padding: 0 var(--gutter) var(--s5); }
.mare-testa { text-align: center; padding: var(--s4) 0 var(--s3); }
.mare-occhiello { font-size: var(--t-label); letter-spacing: 0.26em; text-transform: uppercase; color: #3b4a5a; }
.mare-testa h1 { font-size: var(--t-name); margin: 0.3rem 0 var(--s1); }
.mare-sotto { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); max-width: 32ch; margin: 0 auto; }
.mare-rotte { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s2); }
.mare-carta { background: rgb(250 248 243 / 0.92); border: 1px solid #3b4a5a; outline: 1px solid rgb(59 74 90 / 0.35); outline-offset: 4px; padding: var(--s2) var(--s2) var(--s3); }
.mare-carta__stato { font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: #8a3b24; margin: 0 0 0.5rem; }
.mare-carta h2 { font-size: var(--t-h3); margin: 0 0 var(--s1); }
.mare-invito { text-align: center; font-family: var(--serif); font-size: var(--t-lead); margin-top: var(--s4); }

/* Full-screen viewer: caption line */
.lightbox__didascalia { position: absolute; bottom: 2.6rem; left: 0; right: 0; text-align: center; color: rgb(255 255 255 / 0.85); font-family: var(--serif); font-style: italic; font-size: var(--t-small); margin: 0; }
.striscia a[href$=".jpg"] { cursor: zoom-in; }

/* nine menu entries stay on one line on wide screens */
@media (min-width: 761px) { .nav ul { gap: 0.35rem 1.35rem; } .nav a { letter-spacing: 0.14em; } }
.mare-carta .todo { white-space: normal; }
.lightbox img { max-height: calc(100vh - 9rem); }
.lightbox__didascalia { bottom: 2.9rem; }
.lightbox__conta { bottom: 1.1rem; }

/* Updates sign-up and privacy page */
.iscrizione { max-width: 44rem; margin: 0 auto var(--s4); }
.iscrizione__consenso { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-small); line-height: 1.5; margin-bottom: var(--s2); }
.iscrizione__consenso input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--ink); flex: none; }
.iscrizione__consenso.is-richiesto { color: #a3231c; }
.iscrizione__vie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
.iscrizione__via { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--s2); border: 1px solid var(--ink); text-decoration: none; transition: background-color 250ms ease, color 250ms ease, opacity 250ms ease; }
.iscrizione__via:hover { background: var(--ink); color: var(--paper); }
.iscrizione__via.is-spenta { opacity: 0.45; }
.iscrizione__nome { font-family: var(--serif); font-size: var(--t-h3); }
.iscrizione__nota { margin-top: var(--s2); color: var(--graphite); }
.privacy h2 { font-size: var(--t-h3); margin: var(--s3) 0 var(--s1); }
.site-footer__note a { color: inherit; }
@media (max-width: 640px) { .iscrizione__vie { grid-template-columns: 1fr; } }

/* Updates: a quiet but visible invitation above every footer */
.invito-aggiornamenti { border-top: 1px solid var(--ink); background: #f3f1ec; }
.invito-aggiornamenti .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); padding-block: var(--s3); }
.invito-aggiornamenti__testo { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: 1.35; }
.invito-aggiornamenti__occhiello { display: block; font-family: var(--sans); font-style: normal; font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.35rem; }
.invito-aggiornamenti__bottone { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.5rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none; font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; transition: background-color 250ms ease, color 250ms ease; }
.invito-aggiornamenti__bottone:hover { background: transparent; color: var(--ink); }
.invito-aggiornamenti__bottone span { transition: transform 250ms ease; }
.invito-aggiornamenti__bottone:hover span { transform: translateX(4px); }
.tema-notte .invito-aggiornamenti { background: #111; border-top-color: var(--rule); }
.tema-notte .invito-aggiornamenti__bottone { background: #f1efe9; color: #0b0b0c; border-color: #f1efe9; }
@media (min-width: 1100px) { .tema-notte .invito-aggiornamenti, .tema-lab .invito-aggiornamenti { margin-right: 0; } }
@media (max-width: 640px) { .invito-aggiornamenti .wrap { flex-direction: column; align-items: flex-start; } }

/* Home: Calendario and Taccuino, fed from api/ */
.calendario { list-style: none; padding: 0; margin: 0 0 var(--s2); width: 100%; text-align: left; }
.calendario__voce { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s1); padding: 0.8rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.calendario__data { margin: 0; text-align: center; }
.calendario__giorno { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; }
.calendario__mese { display: block; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); margin-top: 0.2rem; }
.calendario__titolo { font-size: 1.125rem; margin: 0 0 0.2rem; }
.calendario__dove { margin: 0; font-size: var(--t-small); color: var(--graphite); }
.calendario__vuoto, .taccuino__vuoto { list-style: none; font-family: var(--serif); font-style: italic; color: var(--graphite); padding: var(--s1) 0; }
.taccuino { width: 100%; margin-bottom: var(--s1); }
.taccuino__lista { list-style: none; padding: 0; margin: 0 0 var(--s2); text-align: left; }
.taccuino__voce { border-bottom: 1px solid var(--rule); }
.taccuino__voce a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s1); align-items: start; padding: 0.8rem 0; color: inherit; text-decoration: none; }
.taccuino__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.taccuino__foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.taccuino__voce a:hover .taccuino__foto img { opacity: 0.85; }
.taccuino__testo { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.taccuino__data { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.taccuino__titolo { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taccuino__voce a:hover .taccuino__titolo { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.taccuino__estratto { font-size: var(--t-small); color: var(--graphite); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taccuino__video { position: absolute; bottom: 0.25rem; right: 0.3rem; color: #fff; font-size: 0.625rem; text-shadow: 0 1px 4px rgb(0 0 0 / 0.6); }
@media (prefers-reduced-motion: reduce) { .taccuino__foto img { transition: none; } }