/* Katia & Marielle Labèque — sito pubblico. Minimale, fondo bianco. */

:root {
  --ink: #111;
  --title: #666;
  --link: #999;
  --hover: #ddd;
  --line: #eee;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Garamond-Italic", Garamond, "Times New Roman", serif;
  --track: 0.06em;
  --header-h: 2.4rem; /* riga in alto: marchio + menu principale (2026-10-27: più bassa, come in home) */
  --side-w: 230px;
  --gutter: 2.5rem;
}

html { scroll-padding-top: calc(var(--header-h) + 1.5rem); }

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--line); color: var(--ink); }

a { color: var(--link); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:focus-visible, a.active { color: var(--hover); }
:focus-visible { outline: 1px solid var(--title); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, .page-title, .section-title {
  color: var(--title);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-title { font-size: 1rem; margin: 0 0 2rem; }
.section-title { font-size: 0.8rem; margin: 0 0 1.25rem; }
.small-caps { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--title); }

/* Testi lunghi da editor */
.text { max-width: 40rem; letter-spacing: 0.02em; line-height: 1.75; }
.text p { margin: 0 0 1.1rem; text-wrap: pretty; }
.text a { color: var(--title); text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 3px; }
.text a:hover { color: var(--hover); }

/* Citazioni e stampa: Garamond corsivo */
.quote, .press-text, blockquote {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink);
}
.quote p, .press-text p { margin: 0 0 1.4rem; }
.press-text { font-size: 1.12rem; } /* 2026-10-23: stampa più piccola delle citazioni, in equilibrio col resto */
.press-source { font-family: var(--sans); font-style: normal; font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--title); }
.press-source .press-byline { color: var(--link); }
.press-rating { letter-spacing: 0.1em; color: var(--title); margin-left: 0.4rem; }

/* ---------- Header: marchio + menu principale (una riga in alto, fissa) ---------- */
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--gutter);
  background: #fff;
}
.site-brand { display: block; color: var(--ink); font-size: 0.78rem; letter-spacing: 0.22em; line-height: 1.6; text-transform: uppercase; white-space: nowrap; }
.site-brand:hover { color: var(--title); }
.main-menu { display: flex; gap: 1.6rem; margin-left: auto; }
.main-menu a { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.main-menu a.active { color: var(--ink); }

/* ---------- Sidebar ---------- */
.site-sidebar {
  position: fixed; z-index: 20;
  top: var(--header-h); left: 0; bottom: 7.5rem;
  width: var(--side-w);
  padding: 2rem var(--gutter) 1rem;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
}
.sidebar-title { color: var(--title); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { margin-bottom: 0.6rem; line-height: 1.35; }
.sidebar-list li.is-sub { padding-left: 0.9rem; font-size: 0.92em; }
.sidebar-list li.is-sub2 { padding-left: 1.8rem; }
.sidebar-list li.is-sep { margin-top: 1.5rem; }
.sidebar-list a { font-size: 0.84rem; }
.sidebar-list li.is-section a { font-size: 0.78rem; }
.sidebar-list li.is-section a::before { content: "- "; } /* sezioni della creation: Press, Video, Photo, Text, Recordings */
.site-sidebar .sidebar-list a.active { color: var(--ink); } /* voce aperta più scura */

/* ---------- Pannello navigazione (basso a sinistra) ---------- */
.site-navpanel {
  position: fixed; z-index: 25;
  left: var(--gutter); bottom: 1.75rem;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; line-height: 1.9; /* 2026-10-23: più grande, nero, semi-grassetto */
  color: var(--ink);
}
.site-navpanel a, .site-navpanel button { color: var(--ink); background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; cursor: pointer; }
.site-navpanel a:hover, .site-navpanel button:hover { color: var(--link); }
.site-navpanel .is-off { color: var(--hover); cursor: default; }
.site-navpanel .sep { color: var(--hover); margin: 0 0.15rem; }
.navpanel-counter { margin-left: 0.6rem; color: var(--ink); }

/* ---------- Contenuto ---------- */
.site-main {
  margin-left: var(--side-w);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.site-main > :not(.site-footer) { flex-shrink: 0; }
.site-footer {
  margin-top: auto; padding-top: 5rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end;
  font-size: 0.72rem; color: var(--link);
}
.site-footer .footer-text p { margin: 0; }
.site-footer .footer-links { display: flex; gap: 1.5rem; margin-left: auto; text-transform: uppercase; letter-spacing: 0.14em; }

.block { margin-bottom: 5rem; }

/* ---------- Video ---------- */
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #f4f4f4; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-file video { display: block; width: 100%; height: auto; background: #f4f4f4; }

/* ---------- Home: senza sidebar, foto a tutto schermo + citazione sopra la foto (link alla 55) ---------- */
.no-sidebar .site-main { margin-left: 0; }
.home-hero { margin: -2rem calc(-1 * var(--gutter)) 0; }
.home-hero-link { display: block; }
.home-hero-link img, .home-hero .video-frame, .home-hero .video-file video {
  display: block; width: 100%; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); object-fit: cover; object-position: center 60%; background: #000;
}
.home-hero .video-frame { aspect-ratio: auto; overflow: hidden; }
.home-hero .video-frame iframe {
  /* "cover" per gli iframe 16:9 */
  top: 50%; left: 50%; right: auto; bottom: auto;
  width: max(100%, calc((100vh - var(--header-h)) * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.home-hero { display: block; position: relative; }
/* citazione + "Enter →" sopra la foto, in basso al centro; clic fuori da Enter = foto (link alla 55) */
.home-hero-overlay { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); width: min(50rem, calc(100% - 2 * var(--gutter))); text-align: center; pointer-events: none; }
.home-hero .home-quote { color: #fff; }
.home-enter { display: inline-block; margin-top: 1.4rem; color: #fff; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: auto; text-shadow: 0 0 8px rgba(0, 0, 0, 0.35); }
.home-enter:hover { color: var(--hover); }
.home-hero .home-quote p + p:last-child { color: rgba(255, 255, 255, 0.7); }
.home-intro { text-align: center; padding: 5.5rem 0 1rem; } /* citazione senza foto */
.home-quote { margin: 0 auto; max-width: 50rem; font-size: clamp(1.3rem, 2.5vw, 2.1rem); line-height: 1.25; text-wrap: balance; color: var(--ink); }
.home-quote p { margin: 0; }
.home-quote p + p:last-child { margin-top: 0.8rem; font-size: 0.5em; letter-spacing: 0.06em; color: var(--title); }
.no-sidebar .site-main { padding-bottom: 0.6rem; }
.no-sidebar .site-footer { padding-top: 0.6rem; font-size: 0.62rem; }
.no-sidebar .site-footer .footer-links { gap: 1.2rem; }

/* ---------- Creation, panoramica: foto/video a tutto schermo, sotto le sezioni; dock in basso quando si scorre ---------- */
.creation-cover { margin: -2rem calc(-1 * var(--gutter)) 0; background: #000; }
.creation-cover > img, .creation-cover .video-file video, .creation-cover .video-frame {
  display: block; width: 100%; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); object-fit: cover; background: #000;
}
.creation-cover .video-frame { aspect-ratio: auto; overflow: hidden; }
.creation-cover .video-frame iframe { /* "cover" per gli iframe 16:9 */
  top: 50%; left: 50%; right: auto; bottom: auto;
  width: max(100%, calc((100svh - var(--header-h)) * 16 / 9)); height: max(100%, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
}
/* madre: le foto delle sottosezioni affiancate a tutta altezza, ognuna è un link */
.creation-cover--children { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: #fff; }
.creation-cover--children a { position: relative; display: block; overflow: hidden; background: #000; }
.creation-cover--children img { display: block; width: 100%; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); object-fit: cover; transition: opacity 0.3s ease; }
.creation-cover--children a:hover img { opacity: 0.85; }
.creation-cover--children span { position: absolute; left: 1rem; bottom: 0.9rem; color: #fff; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.creations-archive-link { margin: 3rem 0 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.creations-archive-link a { color: var(--ink); }
.creations-archive-link a:hover { color: var(--link); }
.creation-subnav, .creation-dock { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.3rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.creation-subnav { padding: 0.6rem 0 0.1rem; }
.subnav-title { color: var(--ink); margin-right: 1.6rem; } /* titolo della creation, prima delle sezioni */
.creation-subnav .dot, .creation-dock .dot { margin: 0 0.6rem; color: var(--hover); }
.subnav-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 2.2rem; color: var(--ink); }
.subnav-back:hover { color: var(--link); }
.creation-dock {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  transform: translateY(100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}
.creation-dock.is-visible { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Griglie ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3rem 2rem; }
.grid--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2rem 1.5rem; }
.card-item { display: block; color: var(--ink); }
.card-item .card-media { aspect-ratio: 4 / 3; background: #f4f4f4; overflow: hidden; margin-bottom: 0.8rem; }
.card-item .card-media--square { aspect-ratio: 1; }
/* miniature YouTube (hqdefault 4:3 con bande nere sopra e sotto): ingrandite di 4/3 per tagliare le bande */
.card-item .card-media img[src*="i.ytimg.com/vi/"][src$="/hqdefault.jpg"] { transform: scale(1.34); }
/* Photos: i primi 2 album su una riga, poi 4 per riga (2 su tablet, 1 su telefono) */
.grid--photos { grid-template-columns: repeat(12, 1fr); }
.grid--photos > * { grid-column: span 3; }
.grid--photos > :nth-child(-n+2) { grid-column: span 6; }
@media (max-width: 1199.98px) { .grid--photos > * { grid-column: span 6; } }
@media (max-width: 575.98px) { .grid--photos > *, .grid--photos > :nth-child(-n+2) { grid-column: 1 / -1; } }
.card-item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.card-item:hover img { opacity: 0.75; }
.card-item .card-title { color: var(--title); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
.card-item .card-meta { color: var(--link); font-size: 0.72rem; }
.card-item:hover .card-title, .card-item:hover .card-meta { color: var(--hover); }
/* griglia Creations, 2026-11-06: la madre (Concertos) senza miniatura, titolo + elenco delle figlie */
.card-item--list .card-title { display: block; margin-bottom: 1.2rem; }
/* pagina di apertura della creation, 2026-11-07: didascalie sotto le miniature, in nero (prova) */
.creation-opening .thumb-caption { color: var(--ink); }
.creation-opening .thumb-item:hover .thumb-caption { color: var(--hover); }
/* griglia Creations (main), 2026-11-07: titolo sopra la foto, bianco su sfumatura scura, leggibile */
.grid--creations-main .card-media { position: relative; }
.grid--creations-main .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 35%); pointer-events: none; }
.card-overlay-title { position: absolute; z-index: 1; top: 1.1rem; left: 1.2rem; right: 1.2rem; color: #fff; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
@media (max-width: 767.98px) { .card-overlay-title { top: 0.7rem; left: 0.75rem; right: 0.75rem; font-size: 0.7rem; letter-spacing: 0.12em; } }
.card-item--list .card-title:hover { color: var(--hover); }
.card-item--list .creation-children-texts { gap: 1.4rem; }
.card-item--list .child-text-name { font-size: 0.84rem; }
.card-item--list .child-text-work { font-size: 0.78rem; }

/* ---------- Creation ---------- */
.creation-hero { margin-bottom: 3.5rem; }
.paragraph-images figure { margin: 0; }
.paragraph-video { margin-top: 3.5rem; } /* stesso stacco della foto di apertura sopra il testo */
.paragraph-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
.paragraph-images img { width: auto; max-width: 100%; height: auto; } /* mai ingrandite oltre la dimensione reale */
.photo-grid { columns: 3 220px; column-gap: 1rem; }
.photo-grid a { display: block; margin-bottom: 1rem; break-inside: avoid; }
.photo-grid img { width: 100%; height: auto; transition: opacity 0.3s ease; }
.photo-grid a:hover img { opacity: 0.75; }
.video-list { display: grid; gap: 2.5rem; max-width: 60rem; }
.video-list .video-title { margin-top: 0.6rem; }
.final-subtitle { color: var(--title); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- Creation: elemento singolo e griglie (press / video / photo) ---------- */
.single { max-width: 64rem; }
.single-caption { color: var(--link); font-size: 0.72rem; margin-top: 0.8rem; letter-spacing: 0.08em; }
.single-credit { display: block; margin-top: 0.25rem; } /* crediti del video (videos.credit) sotto il titolo */
.single-photo figure { margin: 0; }
.single-photo img { cursor: e-resize; }
.single-press { max-width: 46rem; }
.single-press .press-source { margin-bottom: 1.5rem; }
.single-press .page-title { margin-bottom: 1.5rem; }
.single-press .press-text { font-size: 1.2rem; text-wrap: pretty; }

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.thumb-grid--video { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2rem 1.25rem; }
.thumb-item { display: block; color: var(--title); }
.thumb-media { display: block; aspect-ratio: 1; overflow: hidden; background: #f4f4f4; }
.thumb-grid--video .thumb-media { aspect-ratio: 16 / 9; }
.thumb-grid--recording { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem 1.25rem; }
.thumb-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.thumb-item:hover img { opacity: 0.7; }
.thumb-title { display: block; margin-top: 0.6rem; font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.06em; }
.thumb-item:hover .thumb-title { color: var(--hover); }
/* madre (Concertos), 2026-11-06: un paragrafo di testo per figlia al posto delle foto */
.creation-children-texts { display: flex; flex-direction: column; gap: 2.2rem; max-width: 40rem; }
.child-text { display: block; color: var(--ink); text-decoration: none; }
.child-text-name { display: block; font-size: 1rem; letter-spacing: var(--track); }
.child-text-work { display: block; margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--title); }
.child-text:hover .child-text-name, .child-text:hover .child-text-work { color: var(--hover); }
/* titolo dell'opera sotto il nome (griglia delle sottosezioni, es. Concertos; 2026-11-05) */
.thumb-subtitle { display: block; margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.04em; color: var(--title); }
.thumb-item:hover .thumb-subtitle { color: var(--hover); }

/* ---------- Griglie di foto e video (2026-10-31) ----------
   Tutte le griglie con foto/video (Creations/Archive, Photos, album, Videos, sezioni Photo/Video/specifiche delle creation,
   Pro archive videos): celle verticali 4:5 (come Instagram), immagine in cover; una colonna in meno rispetto alle vecchie
   griglie auto-fill (stessi punti di passaggio, minimo 2). Le soglie seguono la larghezza utile: viewport − sidebar − margini.
   Esclusi: Recordings (copertine quadrate), scansioni press, piante palco Pro. */
.grid--creations, .thumb-grid:not(.thumb-grid--recording), .slideshow.is-grid + .album-thumbs, .no-js .album-thumbs {
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.grid--creations .card-media, .thumb-grid:not(.thumb-grid--recording) .thumb-media, .album-thumbs button { aspect-ratio: 4 / 5; }
/* miniature YouTube (hqdefault 4:3 con bande nere): ingrandite di 4/3 per tagliare le bande anche nelle celle verticali */
.thumb-media img[src*="i.ytimg.com/vi/"][src$="/hqdefault.jpg"] { transform: scale(1.34); }
.thumb-grid { --cols: 2; }
@media (min-width: 836px) { .thumb-grid { --cols: 3; } }
@media (min-width: 992px) { .thumb-grid { --cols: 3; } }
@media (min-width: 1287px) { .thumb-grid { --cols: 4; } }
@media (min-width: 1551px) { .thumb-grid { --cols: 5; } }
@media (min-width: 1756px) { .thumb-grid { --cols: 6; } }
@media (min-width: 1960px) { .thumb-grid { --cols: 7; } }
@media (min-width: 2165px) { .thumb-grid { --cols: 8; } }
@media (min-width: 2369px) { .thumb-grid { --cols: 9; } }
@media (min-width: 2574px) { .thumb-grid { --cols: 10; } }
@media (min-width: 2779px) { .thumb-grid { --cols: 11; } }
.thumb-grid--video { --cols: 2; }
@media (min-width: 1404px) { .thumb-grid--video { --cols: 3; } }
@media (min-width: 1430px) { .thumb-grid--video { --cols: 2; } }
@media (min-width: 1463px) { .thumb-grid--video { --cols: 3; } }
@media (min-width: 1749px) { .thumb-grid--video { --cols: 4; } }
@media (min-width: 2035px) { .thumb-grid--video { --cols: 5; } }
@media (min-width: 2321px) { .thumb-grid--video { --cols: 6; } }
@media (min-width: 2607px) { .thumb-grid--video { --cols: 7; } }
/* 2026-11-09: stesse colonne della pagina Photos (.thumb-grid), le miniature non cambiano dimensione */
.album-thumbs { --cols: 2; }
@media (min-width: 836px) { .album-thumbs { --cols: 3; } }
@media (min-width: 1287px) { .album-thumbs { --cols: 4; } }
@media (min-width: 1551px) { .album-thumbs { --cols: 5; } }
@media (min-width: 1756px) { .album-thumbs { --cols: 6; } }
@media (min-width: 1960px) { .album-thumbs { --cols: 7; } }
@media (min-width: 2165px) { .album-thumbs { --cols: 8; } }
@media (min-width: 2369px) { .album-thumbs { --cols: 9; } }
@media (min-width: 2574px) { .album-thumbs { --cols: 10; } }
@media (min-width: 2779px) { .album-thumbs { --cols: 11; } }
.grid--creations { --cols: 2; }
/* 2026-11-11: tornati i punti di prima (3 da 1591, 4 da 1912); le 4 creations main: 2×2 sotto 1912, tutte su una riga da 1912 */
@media (min-width: 1591px) { .grid--creations { --cols: 3; } .grid--creations-main { --cols: 2; } }
@media (min-width: 1912px) { .grid--creations, .grid--creations-main { --cols: 4; } }
@media (min-width: 2233px) { .grid--creations { --cols: 5; } }
@media (min-width: 2554px) { .grid--creations { --cols: 6; } }
/* sezioni specifiche della creation (album): un elemento video ha il triangolo "play" sopra l'anteprima */
.thumb-media.is-video { position: relative; }
.thumb-media.is-video::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-35%, -50%);
  border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4)); pointer-events: none;
}

.cpress-list { list-style: none; margin: 0; padding: 0; max-width: 72rem; }
.cpress-list li { display: grid; grid-template-columns: 7rem 11rem minmax(0, 1fr) 9rem auto; gap: 1.25rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cpress-date { color: var(--link); font-size: 0.74rem; }
.cpress-paper { color: var(--title); font-size: 0.78rem; letter-spacing: 0.04em; }
.cpress-title { font-family: var(--serif); font-style: italic; letter-spacing: 0.01em; font-size: 1.18rem; line-height: 1.4; }
.cpress-author { color: var(--link); font-size: 0.74rem; }
.cpress-view { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Recording ---------- */
.recording { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 3rem; }
.recording-cover img { width: 100%; }
.recording-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.5rem 0; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.recording .text ol, .recording .text ul { padding-left: 1.2rem; }
.recording .page-title a { color: inherit; }
.tracklist { font-size: 0.86rem; line-height: 1.75; }
.tracklist p { margin-bottom: 1.4rem; }
.tracklist strong { font-weight: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--title); }
.tracklist em { font-style: normal; color: var(--title); }

/* ---------- Concerts ---------- */
.concerts { width: 100%; max-width: 64rem; border-collapse: collapse; }
/* colonne fisse: allineate tra le tabelle dei diversi anni */
.concerts { table-layout: fixed; }
.concerts td:nth-child(1) { width: 9rem; }
.concerts td:nth-child(2) { width: 34%; }
.concerts td:nth-child(4) { width: 6.5rem; }
.concerts td { padding: 1.1rem 1.5rem 1.1rem 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.concert-date { white-space: nowrap; color: var(--title); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; width: 9rem; }
.concert-date small { display: block; color: var(--link); font-size: 0.9em; }
.concert-city { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; }
.concert-city .country { color: var(--link); }
.concert-project { font-family: var(--serif); font-style: italic; letter-spacing: 0.01em; font-size: 1.18rem; }
.concert-note { color: var(--title); font-size: 0.8rem; margin-top: 0.3rem; }
.concert-note p { margin: 0; }
.concert-links { white-space: nowrap; text-align: right; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.concert-links a { margin-left: 1rem; }
.concerts-year { color: var(--title); font-size: 0.78rem; letter-spacing: 0.16em; margin: 3rem 0 0.5rem; }
.page-title + .concerts-year { margin-top: 0; }

/* ---------- Album (slideshow) ---------- */
.slideshow { position: relative; }
.slideshow .slide { display: none; margin: 0; }
.slideshow .slide.is-current { display: block; }
.slideshow .slide img { cursor: e-resize; }
.slideshow figcaption, .lightbox figcaption { color: var(--link); font-size: 0.72rem; margin-top: 0.7rem; }
.slideshow.is-grid .slide { display: none; }
.album-thumbs { display: none; }
.slideshow.is-grid + .album-thumbs, .no-js .album-thumbs { display: grid; gap: 1rem; } /* colonne e celle 4:5: vedi "Griglie di foto e video" */
.album-thumbs button { padding: 0; border: 0; background: #f4f4f4; overflow: hidden; }
.album-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.album-thumbs button:hover img { opacity: 0.7; }
.album-info { max-width: 44rem; margin-top: 3rem; }

/* ---------- Press ---------- */
.press-featured { display: grid; gap: 4rem; max-width: 52rem; margin-bottom: 5rem; }
.press-featured .press-text { font-size: 1.25rem; text-wrap: pretty; }
.press-list { list-style: none; padding: 0; margin: 0; max-width: 52rem; }
.press-list li { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.press-list a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; color: var(--ink); }
.press-list a:hover, .press-list a:hover * { color: var(--hover); }
.press-list .press-date { color: var(--link); font-size: 0.74rem; }
.press-list .press-title { font-family: var(--serif); font-style: italic; letter-spacing: 0.01em; font-size: 1.22rem; line-height: 1.45; text-wrap: pretty; }
.press-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 3rem; max-width: 60rem; }
.press-images--list { grid-template-columns: repeat(auto-fill, minmax(120px, 160px)); margin-top: 1rem; } /* scansioni nell'elenco della pagina Press (2026-11-05) */

/* ---------- Pagine (Bio, Contacts…) ---------- */
.page-figure { margin: 0 0 3rem; }
.page-figure .page-image { margin-bottom: 0; }
.subsection { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 320px); gap: 2.5rem; margin-top: 4rem; }
.subsection:not(:has(img)) { grid-template-columns: minmax(0, 44rem); }
.social-links { display: flex; gap: 1.4rem; margin-top: 4rem; }
.social-links a { color: var(--link); transition: color 0.2s ease; }
.social-links a:hover { color: var(--hover); }
.social-links svg { display: block; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem var(--gutter) 4.5rem; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; margin: 0 auto; }
.lightbox button { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 0.74rem; letter-spacing: 0.14em; }
.lightbox button:hover { color: var(--hover); }
.lightbox-close { position: absolute; top: 1.5rem; right: var(--gutter); }
.lightbox-nav { position: absolute; left: var(--gutter); bottom: 1.75rem; color: var(--hover); font-size: 0.74rem; }
.lightbox-count { margin-left: 0.6rem; color: var(--title); }

.empty { color: var(--link); }

/* ---------- Responsive ---------- */
@media (min-width: 992px) and (max-width: 1299.98px) {
  :root { --gutter: 1.75rem; --side-w: 200px; }
  .site-header { gap: 1.25rem; }
  .site-brand { font-size: 0.74rem; letter-spacing: 0.14em; }
  .main-menu { gap: 1rem; }
  .main-menu a { font-size: 0.7rem; letter-spacing: 0.1em; }
}

@media (max-width: 991.98px) {
  :root { --gutter: 1rem; --header-h: 0px; } /* l'header non è più fisso: sta nel flusso */
  .site-brand { font-size: 0.72rem; letter-spacing: 0.16em; }
  /* header: marchio sopra, menu principale in una riga scorrevole; sotto, il sottomenu della sezione */
  .site-header { position: static; height: auto; flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 1rem var(--gutter) 0.9rem; }
  .main-menu { margin-left: 0; gap: 1.2rem; overflow-x: auto; scrollbar-width: none; }
  .main-menu a { font-size: 0.72rem; }
  .site-sidebar { -webkit-mask-image: none; mask-image: none; }
  .site-sidebar { position: static; width: auto; padding: 1rem var(--gutter) 0; overflow-x: auto; scrollbar-width: none; }
  .sidebar-title { display: none; }
  .sidebar-list { display: flex; gap: 1.2rem; white-space: nowrap; }
  .sidebar-list li, .sidebar-list li.is-sub { margin: 0; padding: 0; }
  .site-navpanel { left: 0; right: 0; bottom: 0; display: flex; gap: 1.5rem; padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .site-main { margin-left: 0; padding: 1.5rem var(--gutter) 4rem; min-height: 0; }
  .home-hero { margin-top: -1.5rem; }
  .creation-cover { margin-top: -1.5rem; }
  .creation-cover > img, .creation-cover .video-file video, .creation-cover .video-frame { height: calc(100svh - 5rem); } /* 5rem ≈ header non fisso */
  .creation-cover .video-frame iframe { width: max(100%, calc((100svh - 5rem) * 16 / 9)); }
  .subnav-back { margin-left: 1.4rem; }
  .creation-cover--children { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .creation-cover--children img { height: calc((100svh - 5rem) / 2); }
  .home-hero .video-frame, .home-hero .video-file video, .home-hero-link img { height: auto; aspect-ratio: 3 / 2; }
  .no-sidebar .site-header { padding-top: 0.6rem; padding-bottom: 0.5rem; gap: 0.4rem; }
  .home-hero-overlay { bottom: 0.9rem; }
  .home-hero .home-quote { font-size: 1rem; }
  .home-enter { margin-top: 0.6rem; font-size: 0.66rem; }
  .home-hero .home-quote p + p:last-child { margin-top: 0.4rem; font-size: 0.7em; }
  .home-intro { padding-top: 3.5rem; }
  .home-hero .video-frame iframe { inset: 0; width: 100%; height: 100%; transform: none; top: 0; left: 0; }
  .recording, .subsection { grid-template-columns: 1fr; gap: 1.5rem; }
  .concerts, .concerts tbody, .concerts tr, .concerts td { display: block; }
  .concerts tr { border-bottom: 1px solid var(--line); padding: 1rem 0; }
  .concerts td { border: 0; padding: 0.1rem 0; }
  .concert-links { text-align: left; padding-top: 0.5rem !important; }
  .concert-links a { margin: 0 1rem 0 0; }
  .press-list a { grid-template-columns: 1fr; gap: 0.2rem; }
  .cpress-list li { grid-template-columns: 1fr auto; gap: 0.15rem 1rem; }
  .cpress-date, .cpress-paper, .cpress-title, .cpress-author { grid-column: 1; }
  .cpress-view { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .site-footer .footer-links { margin-left: 0; }
}

/* Griglia creation: elemento da cui si è arrivati */
.thumb-item.is-current .thumb-media { outline: 1px solid var(--title); outline-offset: 3px; }
.card-item.is-current .card-media { outline: 1px solid var(--title); outline-offset: 3px; }
.cpress-list li.is-current .cpress-title { text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 4px; }

/* Creation: citazione in apertura (ultimo paragrafo = fonte) */
.creation-quote { max-width: 50rem; margin: 0 0 4rem; font-family: var(--serif); font-style: italic; letter-spacing: 0.01em; font-size: 1.65rem; line-height: 1.45; color: var(--ink); }
.creation-quote p { margin: 0; }
.creation-quote p + p:last-child { margin-top: 1.1rem; font-size: 0.6em; letter-spacing: 0.04em; color: var(--title); }

/* Press singola: scansioni dell'articolo */
.press-scans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.press-scans img { width: 100%; height: auto; border: 1px solid var(--line); transition: opacity 0.3s ease; }
.press-scans a:hover img { opacity: 0.75; }

/* Paragrafo-citazione della creation (testo che inizia con “): Garamond corsivo, ultima riga = fonte */
.paragraph-quote { font-family: var(--serif); font-style: italic; letter-spacing: 0.01em; font-size: 1.32rem; line-height: 1.5; }
.paragraph-quote p + p:last-child { font-size: 0.75em; letter-spacing: 0.06em; color: var(--title); }

/* Recordings: tabella Archives per anni */
.archive-table { width: 100%; max-width: 60rem; border-collapse: collapse; }
.archive-table td { padding: 0.55rem 1.5rem 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.85rem; }
.archive-year { width: 5.5rem; color: var(--title); font-size: 0.78rem !important; letter-spacing: 0.1em; white-space: nowrap; }
.archive-label { color: var(--link); white-space: nowrap; text-align: right; font-size: 0.78rem !important; }
@media (max-width: 991.98px) { .archive-label { white-space: normal; } }
.archive-performers { display: block; margin-top: 0.2rem; color: var(--ink); font-size: 0.78rem; letter-spacing: 0.04em; } /* direttore e orchestra (Archives with Orchestra) */

/* Creation: video in apertura "a tutto schermo" (tutta l'area contenuti fino al bordo destro, alto quanto la finestra) */
.creation-hero--full { margin: 0 calc(-1 * var(--gutter)) 3rem 0; background: #000; }
.creation-hero--full .video-frame { aspect-ratio: auto; height: calc(100vh - var(--header-h)); background: #000; }
.creation-hero--full .video-file video { height: calc(100vh - var(--header-h)); object-fit: contain; }
/* video_top (prova 55): video a tutta larghezza sotto il menu, poi sidebar + contenuti; la sidebar si ferma sotto il menu quando si scorre */
.top-hero { margin-top: var(--header-h); background: #000; }
.top-hero .video-frame, .top-hero .video-file video { width: 100%; height: min(56.25vw, calc(100vh - var(--header-h) - 5rem)); aspect-ratio: auto; object-fit: cover; background: #000; }
@media (min-width: 992px) {
  .has-tophero .site-sidebar { --side-h: calc(100vh - var(--header-h) - 7.5rem); position: sticky; top: var(--header-h); bottom: auto; height: var(--side-h); margin-bottom: calc(-1 * var(--side-h)); }
  .has-tophero .site-main { padding-top: 2rem; min-height: 0; }
  .has-tophero .site-navpanel { transition: opacity 0.3s ease; }
  .has-tophero:not(.tophero-seen) .site-navpanel { opacity: 0; pointer-events: none; } /* finché si vede solo il video */
}
@media (max-width: 991.98px) {
  .creation-hero--full { margin: 0 calc(-1 * var(--gutter)) 2rem; }
  .creation-hero--full .video-frame, .creation-hero--full .video-file video { height: auto; aspect-ratio: 16 / 9; }
}

/* Creation: sezione Text (interviste, note) */
.single-text { max-width: 52rem; } /* 2026-11-07: più largo (prima 46rem, testo 40rem) */
.single-text .text { max-width: none; }
.single-text .page-title { margin-bottom: 2rem; }
.single-text-author { margin-top: 2rem; color: var(--title); font-size: 0.8rem; letter-spacing: 0.08em; }
.single-text--image { max-width: 76rem; display: grid; grid-template-columns: minmax(0, 52rem) minmax(0, 320px); gap: 3rem; align-items: start; }
.single-text-image { margin: 0; padding-top: 2.2rem; }
.single-text-image img { width: 100%; }
@media (max-width: 991.98px) { .single-text--image { grid-template-columns: 1fr; gap: 2rem; } .single-text-image { padding-top: 0; max-width: 420px; order: -1; } }
.ctext-list li { grid-template-columns: 9rem minmax(0, 1fr) 11rem auto; }

/* Cambio foto (slideshow, lightbox): dissolvenza breve */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.slideshow .slide.is-current img, .lightbox img { animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.page-title + .subsection { margin-top: 1rem; }

/* ---------- Foto e video grandi: alti quanto lo spazio disponibile, senza uscire dalla colonna ----------
   --fit-h = altezza utile; le foto hanno --ar (larghezza/altezza, da media_ratio()), i video sono 16:9. */
.creation, .creation-hero, .paragraph-video { --fit-h: calc(100vh - var(--header-h) - 8rem); } /* hero: sotto il titolo */
.single-photo, .single-video, .slideshow, .page-figure, .page-video { --fit-h: calc(100vh - var(--header-h) - 6rem); }
@supports (height: 100svh) {
  .creation, .creation-hero, .paragraph-video { --fit-h: calc(100svh - var(--header-h) - 8rem); }
  .single-photo, .single-video, .slideshow, .page-figure, .page-video { --fit-h: calc(100svh - var(--header-h) - 6rem); }
}
.single-photo, .single-video { max-width: none; }
.creation-hero img, .single-photo img, .slideshow .slide img, .page-figure img {
  width: auto; height: auto; max-width: 100%; max-height: var(--fit-h); /* senza --ar: non oltre la dimensione reale */
}
.creation-hero img[style*="--ar"], .single-photo img[style*="--ar"], .slideshow .slide img[style*="--ar"], .page-figure img[style*="--ar"] {
  width: min(100%, calc(var(--fit-h) * var(--ar))); max-height: none;
}
.creation-hero:not(.creation-hero--full) .video-frame, .single-video .video-frame, .paragraph-video .video-frame, .page-video .video-frame {
  width: min(100%, calc(var(--fit-h) * 16 / 9));
}
.creation-hero:not(.creation-hero--full) .video-file video, .single-video .video-file video, .paragraph-video .video-file video, .page-video .video-file video {
  width: auto; max-width: 100%; max-height: var(--fit-h);
}
@media (max-width: 991.98px) {
  /* telefono e tablet: larghezza piena */
  .creation-hero img[style*="--ar"], .single-photo img[style*="--ar"], .slideshow .slide img[style*="--ar"], .page-figure img[style*="--ar"],
  .creation-hero:not(.creation-hero--full) .video-frame, .single-video .video-frame, .paragraph-video .video-frame, .page-video .video-frame { width: 100%; }
}

/* Creation: titolo in testa alla colonna (Madre · Creation · Sezione) */
.creation-heading a { color: inherit; }
.creation-heading a:hover { color: var(--hover); }
.album-heading { margin-bottom: 2rem; } /* sezione specifica: titolo + sottotitolo (es. A night at the Opera) */
.album-heading .page-title { margin-bottom: 0.5rem; }
.album-heading .small-caps { margin: 0; }
.creation-heading .sep { color: var(--hover); margin: 0 0.3rem; }
/* sottosezioni (Concertos), 2026-11-06: opera sotto il titolo, come nella pagina della madre */
.creation-heading-wrap { margin-bottom: 2rem; }
.creation-heading-wrap .page-title { margin-bottom: 0.5rem; }
.creation-subheading { margin: 0; font-size: 0.9rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--title); }

/* Creation: i testi sono larghi quanto la foto/video di apertura (--ar sull'article), almeno 40rem */
.creation { --hero-w: min(100%, calc(var(--fit-h) * var(--ar, 0))); }
.creation .text, .creation .creation-quote, .creation .paragraph-quote { max-width: min(100%, max(48rem, var(--hero-w))); } /* 2026-11-07: 48rem (prima 40) */
.creation-hero:not(.creation-hero--full) .video-file video { width: min(100%, calc(var(--fit-h) * var(--ar, 1.7778))); max-height: none; height: auto; background: #000; }
@media (max-width: 991.98px) {
  .creation .text, .creation .creation-quote, .creation .paragraph-quote { max-width: none; }
  .creation-hero:not(.creation-hero--full) .video-file video { width: 100%; }
}

/* Creation madre (es. Concertos): le sottosezioni in apertura, tutte su una riga (2 per riga su schermi stretti) */
.grid--children { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.grid--children .card-media { aspect-ratio: 4 / 5; }
@media (max-width: 991.98px) { .grid--children { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Creation: paragrafi 2 e 3 in due colonne, allineate alle foto (stessa griglia di .paragraph-images) */
.paragraph-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: -2rem; }
.paragraph-columns > .block { margin-bottom: 0; padding-right: 1.5rem; }
.creation .paragraph-columns .text { max-width: none; }
@media (max-width: 767.98px) { .paragraph-columns { grid-template-columns: 1fr; gap: 3rem; margin-top: 0; } .paragraph-columns > .block { padding-right: 0; } }

/* ---------- Area Pro (pro.php): login, elenchi documenti, piante del palco, calendario iCal ---------- */
.pro-login form { max-width: 26rem; margin-top: 2rem; }
.pro-login-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.pro-login input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--title); padding: 0.4rem 0; font: inherit; letter-spacing: var(--track); background: transparent; }
.pro-login input:focus { outline: none; border-bottom-color: var(--ink); }
.pro-login button { border: 0; background: none; padding: 0.4rem 0; font: inherit; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.pro-login button:hover { color: var(--link); }
.pro-error { margin-top: 1rem; color: var(--ink); }
.pro-welcome { font-family: var(--serif); font-style: italic; letter-spacing: 0.01em; font-size: 1.65rem; margin: -0.5rem 0 3rem; }
.pro-list { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.pro-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.pro-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 1.25rem; font-size: 0.78rem; }
.pro-links a { color: var(--title); }
.pro-links a:hover { color: var(--hover); }
.pro-stage { margin-bottom: 1.5rem; max-width: 60rem; }
.pro-stage figure { margin: 0; }
.pro-stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f6f6f6; }
.pro-stage figcaption { font-size: 0.74rem; color: var(--title); margin-top: 0.5rem; line-height: 1.4; }
.pro-cal-switch { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.78rem; margin-bottom: 1.5rem; }
.pro-cal-months { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.pro-cal-month { font-size: 0.74rem; margin: 2.5rem 0 0.5rem; }
.pro-cal { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.pro-cal li { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 0.25rem 2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.pro-cal-when { color: var(--title); font-size: 0.8rem; }
.pro-cal-title { display: block; }
.pro-cal-where { display: block; color: var(--title); font-size: 0.8rem; }
.pro-cal details { margin-top: 0.35rem; font-size: 0.8rem; }
.pro-cal summary { color: var(--link); cursor: pointer; }
.pro-cal-desc { margin-top: 0.5rem; color: var(--title); line-height: 1.6; overflow-wrap: anywhere; }
.pro-cal-desc p { margin: 0 0 0.6rem; }
@media (max-width: 991.98px) {
  .pro-list li, .pro-cal li { grid-template-columns: 1fr; }
  .pro-links { justify-content: flex-start; }
}

/* Photos (2026-10-30): tutte le foto insieme, miniature quadrate uguali; l'album è solo un titolo */
.photos-album { margin-bottom: 4rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.photos-album-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--title); margin: 0 0 1rem; font-weight: 400; }
.photos-album-title a { color: inherit; }
.photos-album-title a:hover { color: var(--hover); }

/* "Download photo in HD" sotto le foto con album_photos.hd (2026-10-30, come nel vecchio sito) */
.photo-hd { display: inline-block; margin-top: 0.5rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); }
.photo-hd:hover { color: var(--hover); }
figcaption .photo-hd { display: block; }

/* ---------- Scorrimento tra le foto in stile Instagram (2026-10-31): foto singola delle creation, sezioni specifiche
   (anche i video), slideshow album. .ig-post = foto (.ig-media: frecce + puntini) a sinistra e testo (.ig-side:
   titolo della gallery, copyright/didascalia, HD) a destra come su Instagram; sotto 992px il testo va sotto ---------- */
.ig-post { --ig-side: 16rem; --ig-gap: 2.5rem; display: flex; align-items: flex-start; gap: var(--ig-gap); margin: 0; }
.slideshow:not(.is-grid) .slide.ig-post.is-current { display: flex; }
.ig-media { flex: 0 0 auto; width: fit-content; max-width: calc(100% - var(--ig-side) - var(--ig-gap)); }
.ig-media[style*="--ar"] { width: min(calc(100% - var(--ig-side) - var(--ig-gap)), calc(var(--fit-h) * var(--ar))); }
.ig-post--solo .ig-media { max-width: 100%; }
.ig-post--solo .ig-media[style*="--ar"] { width: min(100%, calc(var(--fit-h) * var(--ar))); }
.ig-frame { position: relative; }
.ig-frame > a { display: block; }
.ig-media[style*="--ar"] .ig-frame img, .ig-media[style*="--ar"] .video-frame, .ig-media[style*="--ar"] .video-file video {
  display: block; width: 100%; height: auto; max-width: 100%; max-height: none;
}
.ig-media .video-file video { background: #000; }
.ig-side { flex: 1 1 var(--ig-side); min-width: 0; max-width: var(--ig-side); margin: 0 !important; color: var(--link); font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.6; }
.ig-side-title { margin: 0 0 0.6rem; color: var(--ink); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.ig-side-caption { margin: 0; }
.ig-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); color: #262626; cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.18); transition: background-color 0.2s ease, opacity 0.2s ease;
}
.ig-arrow:hover, .ig-arrow:focus-visible { background: #fff; color: #262626; }
.ig-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ig-prev { left: 12px; }
.ig-next { right: 12px; }
.ig-dots { display: flex; justify-content: center; align-items: center; gap: 4px; height: 6px; margin-top: 12px; }
.ig-dots span { width: 6px; height: 6px; border-radius: 50%; background: #a8a8a8; transition: transform 0.2s ease; }
.ig-dots span.is-current { background: #0095f6; }
.ig-dots span.is-sm { transform: scale(0.67); }
.ig-dots span.is-xs { transform: scale(0.4); }
.slideshow .slide .ig-frame img { cursor: e-resize; }
/* album: sulla foto grande il titolo sta già a destra, sotto resta solo nelle miniature */
.slideshow:not(.is-grid) ~ .album-info .page-title { display: none; }
@media (hover: none) { .ig-arrow { width: 28px; height: 28px; } }
@media (max-width: 991.98px) {
  .ig-post { flex-direction: column; gap: 0.9rem; }
  .ig-media, .ig-media[style*="--ar"] { width: 100%; max-width: none; }
  .ig-side { max-width: none; }
}

/* Area Pro, Archives (2026-10-31): testi con titolo, chiusi; clic sul titolo = si apre */
.pro-archive { max-width: 46rem; border-bottom: 1px solid var(--line); }
.pro-archive summary { padding: 0.75rem 0; cursor: pointer; list-style: none; }
.pro-archive summary::-webkit-details-marker { display: none; }
.pro-archive summary::after { content: "+"; float: right; color: var(--title); }
.pro-archive[open] summary::after { content: "–"; }
.pro-archive summary:hover { color: var(--link); }
.pro-archive .text { padding: 0.5rem 0 2rem; }

/* Creation, sezione Press: link al PDF della press (creations.press_pdf) in fondo allo scorrimento */
.press-pdf { margin-top: 3rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.press-pdf a { color: var(--ink); }
.press-pdf a:hover { color: var(--link); }

/* Press singola: titolo con lo stesso font del testo (Garamond corsivo, stessa dimensione), 2026-11-01 */
.single-press .press-heading { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.2rem; letter-spacing: 0.01em; line-height: 1.5; text-transform: none; color: var(--ink); margin: 0 0 1.4rem; }

/* Creation madre (es. Concertos), CHILDREN_COVER = 'thumbs' (2026-11-01): sottosezioni a miniature come Photos */
.creation-children-thumbs { padding-top: 0.5rem; }
.creation-children-thumbs + .creation-subnav { margin-top: 2.5rem; }
.subnav-back.subnav-back--only { margin-left: 0; }

/* 2026-11-03: titoli sotto le miniature dei video un po' più grandi; testo in testa alle sezioni (album, Recordings);
   elenco press col testo intero (creations.press_full, es. 55) */
.thumb-grid--video .thumb-title, .creation-videos .thumb-title { font-size: 0.8rem; }
.section-intro { max-width: 46rem; margin-bottom: 2.5rem; }
.cpress-list--full li { grid-template-columns: 7rem 11rem minmax(0, 1fr) 9rem; }
.cpress-list--full .cpress-title p { margin: 0 0 0.6em; }
.cpress-list--full .cpress-title p:last-child { margin-bottom: 0; }
.cpress-list--full .cpress-heading { font-style: normal; font-family: inherit; }
@media (max-width: 991.98px) {
  .cpress-list--full li { grid-template-columns: 1fr; }
}
.section-intro--after { margin: 2.5rem 0 0; }

/* 2026-11-03: sezione album impaginata a elenco (albums.layout = 'list', es. 55 → Women): foto a sinistra, titolo e testo a destra */
.album-list { max-width: 68rem; }
.album-list-item { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding: 2.5rem 0; border-top: 1px solid var(--line); }
.album-list-image { margin: 0; }
.album-list-image img { display: block; width: 100%; height: auto; }
.album-list-title { margin: 0 0 1rem; color: var(--title); font-size: 0.86rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.album-list-body .text p:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .album-list-item { grid-template-columns: 1fr; gap: 1.2rem; padding: 2rem 0; }
}

/* 2026-11-07, richiesta dell'utente: TUTTE le didascalie del sito in nero (foto, video, miniature, lightbox, slideshow, Pro) */
.single-caption, .single-caption a, .single-credit, .slideshow figcaption, .lightbox figcaption, .ig-side, .ig-side-caption,
.thumb-item .thumb-title, .thumb-item .thumb-subtitle, .pro-stage figcaption, .page-figure figcaption { color: var(--ink); }
.thumb-item:hover .thumb-title, .thumb-item:hover .thumb-subtitle, .single-caption a:hover { color: var(--hover); }

/* Recordings (2026-11-07): copertina con video (The Labèque Way) = play sopra; clic = video in sovrimpressione, precaricato */
.card-media.is-video { position: relative; }
.card-media.is-video::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-35%, -50%);
  border-style: solid; border-width: 18px 0 18px 30px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.45)); pointer-events: none;
}
.video-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.video-modal[hidden] { display: none; }
.video-modal-item { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.video-modal-item[hidden] { display: none; }
.video-modal video { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; background: #000; }
.video-modal figcaption { margin-top: 0.8rem; color: #fff; font-size: 0.75rem; letter-spacing: 0.08em; }
.video-modal figcaption a { color: #fff; text-decoration: underline; }
.recording-cover-video { display: block; }
.recording-cover-video img { display: block; width: 100%; }
.video-modal-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; color: #fff; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

/* tabelle nei testi (2026-11-07, es. Bryce Dessner › Presentation › Performances) */
.text table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; font-size: 0.82rem; }
.text th { text-align: left; font-weight: normal; color: var(--title); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.text td { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.text td:first-child { white-space: nowrap; }
@media (max-width: 767.98px) {
  .text table, .text thead, .text tbody, .text tr, .text td { display: block; }
  .text thead { display: none; }
  .text tr { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .text td { padding: 0.1rem 0; border: 0; }
  .text td:first-child { color: var(--title); }
}

/* 2026-11-09: miniature dell'album con la didascalia sotto (PHOTOS_THUMB_CAPTIONS, es. Live): la cella 4:5 è solo la foto */
.album-thumbs--captions button { aspect-ratio: auto; background: none; overflow: visible; text-align: left; align-self: start; color: var(--ink); }
.album-thumbs--captions img { aspect-ratio: 4 / 5; height: auto; display: block; background: #f4f4f4; }
.album-thumbs--captions button:hover .thumb-title { color: var(--hover); }

/* Documentaries (2026-11-09): miniature con didascalia sotto; scheda = estratto video a sinistra, informazioni a destra (colonna più larga) */
.documentary-post { --ig-side: 22rem; }
.documentary-info { color: var(--ink); font-size: 0.8rem; letter-spacing: 0.04em; }
.documentary-info .ig-side-title { font-size: 0.9rem; font-weight: 400; }
.documentary-meta { margin: 0 0 0.3rem; color: var(--ink); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.documentary-meta a { color: var(--ink); }
.documentary-meta a:hover { color: var(--hover); }
.documentary-text { margin-top: 1.2rem; line-height: 1.65; }
.documentary-text p { margin: 0 0 0.9rem; }
.documentary-text a { color: var(--ink); text-decoration: underline; }
.documentary-caption { margin-top: 0.6rem; }

/* Area Pro: press kit (2026-11-09) */
.pro-download a { color: var(--ink); letter-spacing: 0.08em; }
.pro-download a:hover { color: var(--hover); }
.pro-note { max-width: 46rem; font-size: 0.8rem; color: var(--ink); }

/* Recording della creation con un solo disco + foto aggiuntiva (2026-11-09, 55): copertina e cofanetto affiancati, testo sotto */
.recording-feature { margin-top: 1rem; }
.recording-feature-media { display: flex; gap: 1.25rem; align-items: flex-start; }
.recording-feature-media a { flex: 0 1 22rem; }
.recording-feature-media img { display: block; width: 100%; height: auto; }
.recording-feature-text { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ink); }
.recording-feature-text p { margin: 0 0 0.9rem; }
.recording-feature-title { letter-spacing: 0.08em; }
.recording-feature-title a { color: var(--ink); }
.recording-feature-title a:hover { color: var(--hover); }
@media (max-width: 575.98px) { .recording-feature-media { gap: 0.75rem; } }

/* Concerts: foto della sala (2026-11-09), miniatura quadrata a destra di città/sala, clic = lightbox */
.concert-place::after { content: ""; display: block; clear: both; }
/* 2026-11-10: miniatura 5.5rem a sinistra nella colonna del progetto; al passaggio del mouse si allarga lentamente verso destra
   e verso il basso, il testo del progetto scivola sotto; la colonna città/sala resta ferma */
.concert-info::after { content: ""; display: block; clear: both; }
.concert-hall { float: left; display: block; width: 6.5rem; height: 6.5rem; margin: 0 1.25rem 0.6rem 0; overflow: hidden; transition: width 0.9s ease, height 0.9s ease; }
.concert-hall img { width: 100%; max-width: 20rem; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) {
  .concert-hall:hover { width: 100%; height: 13rem; }
}
@media (max-width: 991.98px) { .concerts td.concert-place { width: auto; } }

/* Press, 2026-11-09: "Read more" mostra le press precedenti al 2026 */
.press-readmore { display: block; width: auto; margin: 1.5rem auto 0 0; text-align: left; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; cursor: pointer; }
.press-readmore::after { content: " \2192"; }
.press-readmore:hover { color: var(--hover); }

/* Photos, 2026-11-10: le voci della sidebar scorrono alla sezione nella stessa pagina */
html:has(.photos-album) { scroll-behavior: smooth; }

/* 2026-11-10: sezione Text su una sola pagina (Trilogy): spazio tra un testo e l'altro */
.single-text--onepage + .single-text--onepage { margin-top: 4.5rem; }

/* 2026-11-10: link di servizio ("← back", prev/next, thumbnails) in fondo alla sidebar, sotto le voci del menu,
   staccati da una riga sottile e più piccoli (non più il pannello fisso in basso a sinistra) */
@media (min-width: 992px) {
  .site-sidebar { bottom: 1rem; }
  .sidebar-service { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); max-width: 9rem; }
  .sidebar-service-list { list-style: none; margin: 0 0 0.4rem; padding: 0; }
  .sidebar-service-list li { margin-bottom: 0.4rem; }
  .sidebar-service-list a, .sidebar-service .site-navpanel { font-size: 0.72rem; letter-spacing: 0.12em; }
  .sidebar-service .site-navpanel { position: static; font-weight: 400; line-height: 1.9; }
  .sidebar-service-list a { color: var(--link); }
  .sidebar-service-list a:hover { color: var(--hover); }
}
@media (max-width: 991.98px) {
  .sidebar-service { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .sidebar-service-list { list-style: none; margin: 0; padding: 0; }
  .sidebar-service-list li { margin-bottom: 0.6rem; }
  .sidebar-service-list a { font-size: 0.84rem; }
}

/* 2026-11-11: testi della 55 con foto (es. Edison Award): foto sopra, larga quanto il testo, testo sotto */
.single-text--image-top { display: flex; flex-direction: column; }
.single-text--image-top .single-text-image { order: -1; padding-top: 0; margin-bottom: 2.5rem; }
.single-text--image-top .single-text-image img { width: auto; max-width: 100%; max-height: calc(100svh - 12rem); }

/* 2026-11-11: link back in fondo alle press precedenti (press.php) */
.press-back { margin-top: 2.5rem; font-size: 0.8rem; letter-spacing: 0.08em; }

/* 2026-11-11: titolo della presentazione della 55 (prima riga in grassetto) in Garamond corsivo grande */
.text--titled > p:first-child strong { font-family: var(--serif); font-style: italic; font-weight: normal; font-size: 2rem; line-height: 1.25; letter-spacing: 0.01em; color: var(--ink); }
.text--titled > p:first-child { margin-bottom: 1.6rem; }

/* 2026-11-12: versione mobile (<992px). Header fisso in alto: a sinistra l'hamburger della sidebar (3 linee verticali,
   solo nelle pagine con sidebar), al centro il marchio, a destra l'hamburger del menu principale (3 linee orizzontali,
   come Instagram). Sidebar e menu scivolano dai lati, larghi metà pagina, in sovraimpressione. Copie in
   LABEQUE2027-backup-2026-11-09/before-mobile-menu/ */
.nav-toggle, .nav-backdrop { display: none; }
@media (max-width: 991.98px) {
  :root { --mob-h: 3.2rem; --drawer-w: max(50vw, 12rem); }
  html { scroll-padding-top: calc(var(--mob-h) + 1rem); }
  .site-header, .no-sidebar .site-header {
    position: sticky; top: 0; z-index: 40; height: var(--mob-h);
    display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: 0;
    padding: 0 0.4rem; background: #fff;
  }
  .site-brand { grid-column: 2; text-align: center; font-size: 0.7rem; letter-spacing: 0.16em; overflow: hidden; text-overflow: ellipsis; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  }
  .nav-toggle span { display: block; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle--main { grid-column: 3; flex-direction: column; }
  .nav-toggle--main span { width: 22px; height: 1.5px; }
  .nav-toggle--side { grid-column: 1; flex-direction: row; }
  .nav-toggle--side span { width: 1.5px; height: 20px; }
  .main-open .nav-toggle--main span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .main-open .nav-toggle--main span:nth-child(2) { opacity: 0; }
  .main-open .nav-toggle--main span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .side-open .nav-toggle--side span:nth-child(1) { transform: translateX(6.5px) rotate(45deg); }
  .side-open .nav-toggle--side span:nth-child(2) { opacity: 0; }
  .side-open .nav-toggle--side span:nth-child(3) { transform: translateX(-6.5px) rotate(-45deg); }

  /* pannelli laterali: si muovono con left/right (niente transform, così la barra prev/next resta fissa in basso) */
  .main-menu, .site-sidebar {
    position: fixed; z-index: 35; top: var(--mob-h); bottom: 0; width: var(--drawer-w);
    overflow-y: auto; overscroll-behavior: contain; background: #fff;
    padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  }
  .main-menu { right: calc(-1 * var(--drawer-w) - 1px); left: auto; margin: 0; display: flex; flex-direction: column; gap: 1.05rem; transition: right 0.35s ease; border-left: 1px solid var(--line); }
  .main-menu a { font-size: 0.8rem; letter-spacing: 0.16em; }
  .main-open .main-menu { right: 0; }
  .site-sidebar { left: calc(-1 * var(--drawer-w) - 1px); display: block; transition: left 0.35s ease; border-right: 1px solid var(--line); }
  .side-open .site-sidebar { left: 0; }
  .sidebar-title { display: block; }
  .sidebar-list { display: block; white-space: normal; }
  .sidebar-list li { margin-bottom: 0.8rem; }
  .sidebar-list li.is-sub { padding-left: 0.9rem; }
  .sidebar-list li.is-sub2 { padding-left: 1.8rem; }
  .sidebar-list li.is-sep { margin-top: 1.5rem; }
  .nav-backdrop { display: block; position: fixed; inset: var(--mob-h) 0 0 0; z-index: 34; background: rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .nav-backdrop[hidden] { display: block; }
  .main-open .nav-backdrop, .side-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .main-open, .side-open { overflow: hidden; }
  .site-main { padding-top: 1.25rem; }
  .home-hero, .creation-cover { margin-top: -1.25rem; }
}

/* 2026-11-12: home su mobile = foto verticale (HOME_MOBILE_IMAGE) intera (le sorelle ai lati non si tagliano),
   centrata su fondo nero alto quanto lo schermo sotto l'header; bordi in alto e in basso sfumati nel nero. Solo schermo verticale: in orizzontale resta la foto del desktop */
@media (max-width: 991.98px) and (orientation: portrait) {
  .home-hero-link { display: flex; align-items: center; height: calc(100vh - var(--mob-h)); height: calc(100svh - var(--mob-h)); background: #000; }
  .home-hero-link picture { display: block; width: 100%; margin-top: -3rem; }
  .home-hero-link img { width: 100%; height: auto; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%); }
  .home-hero-overlay { bottom: 1.6rem; }
}