/* =========================================================================
   M.I.A.O. — foglio di stile unico
   Palette: 000000 · f5f5f6 · 848489 · 313132 · 222224
   Tipografia: Redaction (Adobe Fonts). I nomi delle famiglie stanno qui
   sotto: se il tuo kit Typekit espone nomi diversi, cambiali SOLO qui.
   ========================================================================= */

:root {
  /* --- Tipografia ------------------------------------------------------ */
  --f-fallback: "Times New Roman", Times, Georgia, serif;

  /* Redaction regular — testi, e i titoli dei progetti nella barra */
  --f-text: "redaction", "Redaction", var(--f-fallback);
  /* Redaction 20 — metadati, didascalie, etichette */
  --f-ui: "redaction-20", "Redaction 20", var(--f-text);
  /* Redaction 35 — titoli intermedi */
  --f-mid: "redaction-35", "Redaction 35", var(--f-text);
  /* Redaction 70 — titoloni delle schermate */
  --f-display: "redaction-70", "Redaction 70", var(--f-text);
  /* Redaction 100 — marchio M.I.A.O. e "?" */
  --f-mark: "redaction-100", "Redaction 100", var(--f-text);

  /* --- Colore ---------------------------------------------------------- */
  --c-bg: #000000;      /* fondo: nero pieno */
  --c-fg: #f5f5f6;      /* testo */
  --c-dim: #848489;     /* testo secondario, voci non selezionate */
  --c-rule: #313132;    /* filetti, bordi, lente del picker, binario */
  --c-surface: #222224; /* grigio freddo: zone a fondo diverso */
  --c-elev: #141416;    /* fondo delle immagini mentre caricano */
  --c-pure: #ffffff;    /* solo per l'indicatore di posizione */

  /* --- Misure ---------------------------------------------------------- */
  --bar-h: 104px;
  /* Altezza della fascia sensibile del picker: più bassa della barra, così
     sopra e sotto resta margine in cui la rotella torna al contenuto. A
     tutta altezza la ruota rubava lo scorrimento anche dove non si vede
     nessuna voce, per via della dissolvenza. */
  --wheel-h: 74px;
  --item-h: 30px;
  --item-h-touch: 38px; /* righe della tendina su telefono */
  --pick-w: min(60vw, 700px);
  --gutter: clamp(20px, 4vw, 56px);
  /* quanto rientrare il marchio per allinearlo otticamente al sottotitolo */
  --marchio-rientro: 0.075em;
  /* Raggio della sfocatura della barra. Più alto = più costoso da disegnare,
     quindi su telefono scende. */
  --blur: 12px;

  /* Corpo unico per etichette e informazioni (indirizzo, P. IVA, link):
     una sola misura, così le schede non sembrano scomposte. */
  --f-size-info: clamp(1rem, 1.3vw, 1.1rem);

  /* Notch/home indicator. 0 di base: env() entra solo dentro un @supports,
     così un browser che non lo digerisce non invalida l'altezza della barra. */
  --safe-b: 0px;

  /* --- Movimento ------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@supports (padding-bottom: env(safe-area-inset-bottom, 0px)) {
  :root { --safe-b: env(safe-area-inset-bottom, 0px); }
}

@media (max-width: 900px) {
  :root { --pick-w: 72vw; }
}

@media (max-width: 600px) {
  :root {
    --bar-h: 64px;
    --blur: 8px;
    /* nella tendina le righe sono da dito, e se ne vedono tre */
    --item-h: 38px;
    --item-h-touch: 38px;
    --wheel-h: 128px;
  }
}

/* --- Reset mirato ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-fg);
}

body {
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

h1, h2, p, dl, dd, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--c-fg);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-fg);
  color: #000;
  padding: 8px 12px;
}
.skip:focus { left: 8px; top: 8px; }

/* =========================================================================
   SCHERMATE
   ========================================================================= */

/* Longhand invece della scorciatoia `inset`: se un valore fosse invalido,
   la scorciatoia annullerebbe tutti e quattro i lati. */
/* L'area dei contenuti occupa TUTTO lo schermo, barra compresa: è quello
   che le passa sotto a farsi sfocare. Lo spazio per non finirci nascosti lo
   mettono i pannelli, con il loro padding in basso. */
.screens {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.34s var(--ease), visibility 0s;
}

/* --- Rail: lo scorrimento orizzontale ---------------------------------- */

.rail {
  height: 100%;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* NIENTE `scroll-behavior: smooth` qui: renderebbe animata ogni singola
     assegnazione di scrollLeft e le raffiche della rotella del mouse si
     annullerebbero a vicenda. Lo scorrimento morbido lo chiediamo
     esplicitamente con scrollTo() dove serve. */
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gutter);
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-wheeling { scroll-snap-type: none; }

@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
}

/* --- Pannelli ---------------------------------------------------------- */

.panel {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(24px, 5vh, 64px);
  /* il testo resta sopra la barra; lo sfondo del pannello invece prosegue
     fino in fondo, perché i fondi riempiono anche l'area del padding */
  padding-bottom: calc(var(--bar-h) + var(--safe-b) + clamp(12px, 2vh, 28px));
  padding-inline-end: clamp(28px, 5vw, 80px);
}

.panel--intro { max-width: min(52ch, 78vw); }

/* Redaction 35: pixelata quanto basta per avere carattere, ma leggibile
   anche in corpo grande — la 70 sulle parole lunghe si sgranava troppo. */
.intro__title {
  font-family: var(--f-mid);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin-bottom: 0.35em;
  text-wrap: balance;
}

/* Sulle schermate M.I.A.O. e Contatti il blocco si stringe sul titolo:
   il sottotitolo va a capo esattamente sulla sua larghezza, invece di
   correre oltre. */
.screen[data-kind="info"] .intro {
  width: fit-content;
  max-width: 100%;
}

/* Su una riga sola: il JS ci misura sopra la larghezza a cui portare il
   marchio. Sotto i 600px la schermata è verticale e può andare a capo. */
.screen[data-slug="miao"] .intro__title { margin-bottom: 0.1em; }
.screen[data-slug="miao"] .intro__sub { white-space: nowrap; }
@media (max-width: 600px) {
  .screen[data-slug="miao"] .intro__sub { white-space: normal; }
}

/* Il marchio M.I.A.O. usa la Redaction 100, come nella barra.
   La 100 è un carattere a blocchi: la sua M comincia con una colonna di
   pixel vuota, quindi otticamente rientra rispetto al sottotitolo. Il
   rientro negativo qui sotto la riallinea — è UN SOLO numero da ritoccare
   se l'occhio non è ancora soddisfatto. */
.screen[data-slug="miao"] .intro__title {
  font-family: var(--f-mark);
  margin-left: calc(-1 * var(--marchio-rientro));
}

/* Sulla schermata M.I.A.O. i pannelli partono dall'alto e sono allineati
   fra loro, non centrati ognuno per conto suo. */
.screen[data-slug="miao"] .panel {
  justify-content: flex-start;
  padding-block-start: clamp(28px, 8vh, 88px);
}

.intro__sub {
  font-family: var(--f-text);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  line-height: 1.35;
  color: var(--c-dim);
  letter-spacing: 0.01em;
  margin-bottom: 1.4em;
  max-width: 100%;
}

.intro__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem 2rem;
  font-family: var(--f-ui);
  font-size: 0.82rem;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding-block: 0.9rem;
  margin-bottom: 1.4rem;
}
.intro__meta dt {
  color: var(--c-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  margin-bottom: 0.25em;
}
.intro__meta dd { margin: 0; }

.intro__desc {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  max-width: 44ch;
  color: var(--c-fg);
}

/* Pannelli immagine */
.panel--media { justify-content: center; gap: 0.7rem; }
.panel--media img,
.panel--media .ph {
  flex: 0 1 auto;
  min-height: 0;
  height: 100%;
  width: auto;
  max-width: 86vw;
  aspect-ratio: var(--ratio, 16/9);
  object-fit: cover;
  background: var(--c-elev);
}

.ph {
  display: grid;
  place-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 2rem;
  border: 1px solid var(--c-rule);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(244, 245, 245, 0.04) 0 10px,
    transparent 10px 20px
  );
}
.ph__label {
  font-family: var(--f-ui);
  font-size: 0.85rem;
  color: var(--c-dim);
  max-width: 26ch;
}
.ph__hint {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rule);
}

.panel--media figcaption {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-dim);
}

/* Pannelli di testo (M.I.A.O. / Contatti) */
.panel--text {
  max-width: min(38ch, 76vw);
  justify-content: center;
  gap: 0.9rem;
}
/* Etichette in Redaction standard, non pixelata: alla dimensione di un
   testo corrente la 100 diventava illeggibile. Etichetta e contenuto hanno
   lo stesso corpo — la gerarchia la fa il colore, non la misura. */
.block__heading {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--f-size-info);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-dim);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 0.5rem;
}
.block__body {
  font-size: var(--f-size-info);
  line-height: 1.55;
  color: var(--c-fg);
}
.block__list,
.block__links {
  display: grid;
  gap: 0.45rem;
  font-family: var(--f-text);
  font-size: var(--f-size-info);
}
.block__list li { color: var(--c-fg); }
.block__list li::before { content: "— "; color: var(--c-rule); }
.block__links a,
a.mappa {
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}
.block__links a:hover,
a.mappa:hover { border-color: var(--c-fg); }

/* l'indirizzo è su due righe: il filetto va sotto ciascuna */
a.mappa {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Blocchi aggiuntivi ------------------------------------------------- */

.block__prose {
  display: grid;
  gap: 0.9em;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  color: var(--c-fg);
}

/* --- Zone a fondo diverso ---------------------------------------------- */
/* Un blocco di testo o una citazione possono avere il fondo grigio freddo:
   scorrendo, il nero si interrompe in una fascia e il testo ci sta sopra.
   Serve a scandire una scheda lunga senza aggiungere elementi. */
.panel--fondo {
  background: var(--c-surface);
  padding-inline: clamp(28px, 4vw, 72px);
  padding-inline-end: clamp(28px, 4vw, 72px);
  max-width: none;
  width: min(56ch, 88vw);
}
.panel--fondo .block__heading { border-bottom-color: rgba(245, 245, 246, 0.18); }
/* la fascia deve toccare i bordi verticali dell'area, non lasciare margini */
.panel--fondo { padding-block: 0; }
.panel--fondo > * { max-width: 42ch; }
.panel--fondo.panel--quote > * { max-width: 34ch; }

/* Galleria: più immagini in un solo pannello */
.panel--gallery { justify-content: center; gap: 0.7rem; }
.gallery {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  min-height: 0;
  height: 100%;
}
.gallery__cell {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: var(--ratio, 3/4);
  background: var(--c-elev);
}
.gallery__cell img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.panel--gallery figcaption,
.panel--video figcaption,
.panel--model figcaption {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-dim);
}

/* Video incorporato */
.panel--video { justify-content: center; gap: 0.7rem; }
.video {
  flex: 0 1 auto;
  min-height: 0;
  height: 100%;
  width: auto;
  aspect-ratio: var(--ratio, 16/9);
  max-width: 88vw;
  background: var(--c-elev);
}
.video iframe,
.video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Modello tridimensionale */
.panel--model { justify-content: center; gap: 0.7rem; }
.modello {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  height: 100%;
  width: min(70vw, 620px);
}
.panel--model model-viewer {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-elev);
  --poster-color: var(--c-elev);
  --progress-bar-color: var(--c-dim);
}

/* --- Scudo: un clic per interagire ------------------------------------- */
/* Sta davanti a video e modelli. Serve a due cose: lasciare passare la
   rotella al rail (un iframe se la mangerebbe) e non caricare mezzo
   megabyte di player prima che qualcuno lo chieda. */
.scudo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  justify-items: center;
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.2s var(--ease);
}
.scudo:hover { background: rgba(0, 0, 0, 0.12); }
.is-attivo .scudo { display: none; }

.scudo__nota {
  font-family: var(--f-text);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--c-fg);
  opacity: 0.75;
}

.scudo__segno {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--c-fg);
  border-radius: 50%;
  display: grid;
  place-content: center;
}

/* triangolo di riproduzione */
.scudo__segno--play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 13px solid var(--c-fg);
  border-block: 8px solid transparent;
  margin-left: 4px;
}

/* invito a girare: un arco che ruota piano */
.scudo__segno--gira {
  border-style: dashed;
  border-color: var(--c-fg);
  animation: gira 6s linear infinite;
}
.scudo__segno--gira::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid var(--c-fg);
  border-radius: 2px;
  transform: rotate(20deg);
}
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .scudo__segno--gira { animation: none; }
}

/* Il riquadro del video prima del clic: niente iframe, solo un fondo */
.video[data-embed] { background: var(--c-elev); position: relative; }
.video[data-embed] .scudo { background: rgba(0, 0, 0, 0.15); }

/* Elenco a scomparsa */
.fold { border-top: 1px solid var(--c-rule); }
.fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  cursor: pointer;
  list-style: none;
}
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary .block__heading {
  border-bottom: 0;
  padding-bottom: 0;
}
.fold__sign {
  position: relative;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
.fold__sign::before,
.fold__sign::after {
  content: "";
  position: absolute;
  background: var(--c-dim);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.fold__sign::before { left: 0; top: 5px; width: 11px; height: 1px; }
.fold__sign::after { top: 0; left: 5px; width: 1px; height: 11px; }
.fold[open] .fold__sign::after { transform: scaleY(0); opacity: 0; }
.fold[open] .fold__summary .block__heading { color: var(--c-fg); }
.fold .block__list { padding-bottom: 1rem; }

/* Citazione */
.panel--quote { max-width: min(34ch, 74vw); justify-content: center; }
.quote { margin: 0; }
.quote__body {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.quote__source {
  margin-top: 1.2rem;
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-dim);
}

/* Pannello finale: solo la freccia, riporta all'inizio dello scorrimento */
.panel--end {
  align-items: center;
  justify-content: center;
  width: 20vw;
  min-width: 120px;
  padding-inline-end: 0;
}
.end {
  display: grid;
  place-items: center;
  padding: 0.4em 0.6em;
  color: var(--c-dim);
  transition: color 0.2s var(--ease);
}
.end:hover { color: var(--c-fg); }
.end__arrow {
  font-family: var(--f-text);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}

/* Indicatore di posizione: filetto sottile in alto, larghezza proporzionale
   a quanto si è scorso. Dice dove sei senza chiedere attenzione. */
.rail__progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--c-rule);
}
.rail__progress span {
  display: block;
  height: 100%;
  width: 0;
  min-width: 8%;
  background: var(--c-pure);
  transition: width 0.12s linear;
}

/* =========================================================================
   SCHERMATA FERMA (Contatti): niente scorrimento, tutto a vista
   ========================================================================= */

.screen--static .sheet {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px, 6vh, 72px) var(--gutter)
           calc(var(--bar-h) + var(--safe-b) + clamp(16px, 3vh, 32px));
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
}
.screen--static .sheet::-webkit-scrollbar { display: none; }
.screen--static .sheet { scrollbar-width: none; }

.intro--sheet { margin: 0; }
.intro--sheet .intro__sub { margin-bottom: 0; }

/* Le quattro voci su una sola riga, tutte allineate in alto. Scendono a due
   colonne solo quando lo schermo non le regge. */
.sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 52px);
  max-width: 1200px;
}
@media (max-width: 900px) {
  .sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sheet__grid { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-self: start;
  min-width: 0;
}
.card .block__body,
.card .block__links { overflow-wrap: anywhere; }

/* Nota a piè di pagina: in basso a destra, più piccola */
.sheet__note {
  margin-top: auto;
  padding-top: clamp(24px, 4vh, 48px);
  max-width: 46ch;
  align-self: flex-end;
  text-align: right;
}
/* La nota resta secondaria, ma leggibile: il grigio dei filetti (#303030)
   sul nero è troppo debole per del testo. */
.note__heading {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-dim);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 0.5em;
  margin-bottom: 0.7em;
}
.note__body {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--c-dim);
}

/* =========================================================================
   BARRA INFERIORE
   Nessun filetto di separazione: stesso fondo del contenuto, più una
   dissolvenza che sale sopra la barra così il passaggio è graduale.
   ========================================================================= */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40; /* sopra la velatura della tendina, così resta toccabile */
  height: 104px; /* fallback letterale */
  height: calc(var(--bar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  color: var(--c-fg);
  /* RIPIEGO: dove la sfocatura non c'è, la barra è nera piena. Va scritto
     prima, così i browser che non la sostengono si fermano qui. */
  background: var(--c-bg);
}

/* La sfocatura serve a rendere la barra indipendente dal colore che le passa
   sotto: una scheda a fondo caldo non richiede di ricolorare la barra.
   `saturate` sotto 1 spegne i colori, altrimenti una foto satura filtrerebbe
   attraverso e i titoli perderebbero contrasto. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(0.7);
    backdrop-filter: blur(var(--blur)) saturate(0.7);
  }
}

.bar__side {
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: var(--f-mark);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  line-height: 1;
  letter-spacing: 0.04em;
  padding-inline: var(--gutter);
  color: var(--c-dim);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.bar__side:hover,
.bar__side.is-current { color: var(--c-fg); }
.bar__side--left { justify-self: start; }
.bar__side--right { justify-self: end; }

/* --- Picker: due ruote affiancate --------------------------------------- */

.picker {
  position: relative;
  width: var(--pick-w);
  min-width: 0;
  height: var(--wheel-h);
  align-self: center;
  justify-self: center;
  display: grid;
  /* sinistra le sezioni, destra i titoli */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  column-gap: clamp(14px, 2.2vw, 36px);
}

/* la lente centrale attraversa entrambe le ruote */
.picker__window {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--item-h);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.wheel { position: relative; min-width: 0; outline-offset: -2px; }

.wheel__mask {
  height: var(--wheel-h);
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* prospettiva lunga = cilindro morbido, non un effetto 3D marcato */
  perspective: 1200px;
  perspective-origin: 50% 50%;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.wheel__mask::-webkit-scrollbar { display: none; }
.wheel__mask.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.wheel__list { transform-style: preserve-3d; }

/* Nessun bordo sulle voci: la linea grigia che scorreva insieme al testo
   era proprio questa. Restano solo i due filetti fissi della lente. */
.wheel__item {
  height: var(--item-h);
  display: flex;
  align-items: center;
  scroll-snap-align: center;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.wheel__item[hidden] { display: none; }

.wheel__label {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--c-dim);
  transition: color 0.18s var(--ease);
}

/* sezioni allineate a destra, titoli a sinistra: le due colonne si
   guardano attorno alla linea centrale */
.wheel--cats .wheel__item { justify-content: flex-end; padding-right: 0.7em; }
.wheel--projects .wheel__item { justify-content: flex-start; padding-left: 0.7em; }

.wheel--cats .wheel__label {
  font-family: var(--f-text);
  font-size: clamp(0.8rem, 1.3vw, 0.98rem);
  letter-spacing: 0.06em;
  /* minuscolo: le maiuscole spaziate irrigidivano la barra */
  text-transform: lowercase;
}

/* la voce al centro della lente è bianca: è la selezione corrente.
   `is-centre` viene messo dal JS a ogni fotogramma dello scorrimento,
   così l'evidenza segue il movimento invece di aspettare lo scatto. */
.wheel__item.is-centre .wheel__label { color: var(--c-fg); }

/* Su M.I.A.O. / Contatti il picker resta cliccabile ma si spegne: la voce
   centrale torna grigia. I filetti della lente invece NON si smorzano —
   a #313132 su nero sparivano del tutto e la barra sembrava spezzata. */
.bar.is-muted .wheel__item.is-centre .wheel__label { color: var(--c-dim); }

/* --- Bottone mobile con il titolo corrente ------------------------------ */

.bar__now {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  min-width: 0;
  padding: 0.6em 1em;
  font-family: var(--f-text);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--c-fg);
}
.bar__now-label {
  display: block;
  max-width: 48vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 0.35em;
}

/* =========================================================================
   TENDINA (tablet e mobile)
   Barra sottile in basso; la ruota dei titoli vive qui dentro e sale solo
   quando serve. Il JS ci trasloca lo stesso `.picker` del desktop.
   ========================================================================= */

/* z-index sotto la barra: così il cassetto scende DIETRO di essa e sparisce
   scivolandoci sotto. Sopra, in chiusura, lo si vedeva passare davanti alla
   barra per un istante prima di scomparire di colpo. */
.tendina {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bar-h) + var(--safe-b));
  z-index: 35;
  background: var(--c-bg); /* ripiego dove la sfocatura non c'è */
  padding: 0 var(--gutter) 0.8rem;

  /* Il cassetto non SCORRE: si SCOPRE. `inset(100% 0 0 0)` taglia tutto; man
     mano che il valore cala, la parte visibile cresce verso l'alto a partire
     dal bordo inferiore del pannello — che è esattamente il bordo superiore
     della barra. L'apertura avviene lì.

     Con lo scorrimento il pannello intero viaggiava da sotto la barra e il
     testo saliva con lui: sembrava arrivare dal fondo dello schermo. Così
     invece il contenuto resta fermo e viene semplicemente svelato. */
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.tendina[hidden] { display: none; }

/* NIENTE `transition` qui: il movimento lo calcola il JS con una molla.
   Una transizione CSS ha una durata fissa e una curva fissa, quindi se la
   interrompi a metà riparte con la stessa curva da capo — e si sente che è
   un'animazione, non un oggetto. La molla invece conserva la velocità: se
   richiudi mentre si sta aprendo, inverte da dove si trova. */

/* Il contenuto arriva un attimo dopo il bordo che lo scopre: è il ritardo
   che dà l'impressione di peso. Lo spostamento lo mette il JS. */
.tendina__head,
.tendina__pick { will-change: transform; }

/* Il cassetto sfoca ESATTAMENTE come la barra: stesso raggio, stesso velo.
   Con valori diversi le due superfici si vedevano come due lastre
   sovrapposte, con un gradino netto sulla linea di contatto. Uguali,
   leggono come un'unica superficie che è cresciuta verso l'alto.

   Questo blocco deve stare dopo la regola qui sopra: a parità di
   specificità vince l'ultima dichiarazione, e il fondo nero pieno
   cancellerebbe il velo traslucido su cui la sfocatura si appoggia. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tendina {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(0.7);
    backdrop-filter: blur(var(--blur)) saturate(0.7);
  }
}

/* Lastra invisibile: serve solo a chiudere il cassetto toccando fuori.
   NON scurisce più il contenuto. Lo scurimento era un secondo strato animato
   con tempi propri, e in chiusura svaniva prima che il cassetto finisse di
   scendere: siccome il cassetto è traslucido, il suo aspetto cambiava a metà
   corsa. Il cassetto si legge già grazie al proprio velo e alla sfocatura,
   esattamente come la barra — che infatti non scurisce niente. */
.tendina__ombra {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: transparent;
}
.tendina__ombra[hidden] { display: none; }

.tendina__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tendina__close {
  font-family: var(--f-mark);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-dim);
  padding: 0.3em 0.4em;
  min-width: 44px;
  min-height: 44px;
}

.archive__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}
/* separatore fra le sezioni: una barra sottile, non uno spazio muto */
.archive__cat + .archive__cat::before {
  content: "|";
  color: var(--c-rule);
  padding-inline: 0.85em;
}
.archive__cat {
  font-family: var(--f-text);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--c-dim);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.archive__cat[aria-selected="true"] { color: var(--c-fg); }

/* --- il picker quando abita la tendina ---------------------------------- */
/* NIENTE padding qui: la lente è posizionata al 50% del `.picker`, quindi
   qualunque scarto fra l'altezza del picker e quella della ruota la fa
   cadere fuori centro. Lo spazio lo mette la testa della tendina. */
.tendina .picker {
  width: 100%;
  height: var(--wheel-h);
  grid-template-columns: 1fr; /* una colonna: le sezioni sono già in testa */
}
.tendina__head { margin-bottom: 0.5rem; }
.tendina .wheel--cats { display: none; }
.tendina .wheel__mask {
  height: var(--wheel-h);
  /* dita, non cursore: righe più alte e più voci a vista */
  cursor: default;
}
.tendina .wheel--projects .wheel__item {
  justify-content: center;
  padding-inline: 0;
  height: var(--item-h-touch);
}
.tendina .wheel__label { font-size: 1.15rem; }
.tendina .picker__window {
  height: var(--item-h-touch);
  left: -0.6rem;
  right: -0.6rem;
}

/* =========================================================================
   ADATTIVO
   ========================================================================= */

/* Tablet: barra invariata ma ruote più strette e testo più compatto */
@media (max-width: 900px) {
  .picker { column-gap: 14px; }
  .bar__side { padding-inline: clamp(16px, 3vw, 32px); }
}

/* Il cassetto scatta solo sotto i 600px. Fra 600 e 900 — cioè sul tablet —
   c'è ancora spazio per le due ruote nella barra, e tenerle è meglio che
   nascondere tutto dietro un tocco. */
@media (max-width: 600px) {
  .bar .picker { display: none; }
  .tendina .picker { display: grid; }
  .bar__now { display: flex; }
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__side { padding-inline: 18px; font-size: 1.15rem; }

  .panel { padding-inline-end: 22px; }
  .panel--intro,
  .panel--text { max-width: 84vw; }
  .intro__meta { grid-template-columns: 1fr 1fr; }
  .panel--media img,
  .panel--media .ph { max-width: 88vw; }
  .rail { padding-inline: 22px; }
}

/* Schermi molto stretti: una sola colonna di metadati */
@media (max-width: 420px) {
  .intro__meta { grid-template-columns: 1fr; }
}

/* Puntatore grosso (dita): voci più alte nell'archivio */
@media (hover: none) {
  .rail { cursor: default; }
  .wheel__mask { cursor: default; }
}

/* --- Fallback senza JS -------------------------------------------------- */

.noscript-nav {
  position: fixed;
  inset: auto 0 calc(var(--bar-h) + var(--safe-b)) 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  justify-content: center;
  padding: 0.8rem var(--gutter);
  background: var(--c-bg);
  border-top: 1px solid var(--c-rule);
  font-family: var(--f-ui);
  font-size: 0.85rem;
}
.noscript-nav a { border-bottom: 1px solid var(--c-rule); }

.no-js,
.no-js body { overflow: auto; height: auto; }
.no-js .screens {
  position: static;
  overflow: visible;
  padding-bottom: calc(var(--bar-h) * 3);
}
.no-js .screen {
  position: static;
  height: 78vh;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-bottom: 1px solid var(--c-rule);
}
.no-js .picker,
.no-js .bar__now,
.no-js .rail__progress { display: none; }
.no-js .screen--static { height: auto; }


/* =========================================================================
   M.I.A.O. SU TELEFONO
   Stesso markup, orientamento diverso: il rail smette di essere una fila
   orizzontale e diventa una colonna che si scorre col pollice. Su uno
   schermo stretto quattro pannelli affiancati costringevano a leggere
   frasi larghe cinque parole.
   ========================================================================= */

@media (max-width: 600px) {
  .screen[data-slug="miao"] .rail {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    cursor: default;
    padding-block: clamp(20px, 5vh, 40px)
                   calc(var(--bar-h) + var(--safe-b) + 24px);
  }
  .screen[data-slug="miao"] .panel {
    height: auto;
    width: auto;
    max-width: none;
    padding: 0 0 clamp(28px, 5vh, 44px);
  }
  .screen[data-slug="miao"] .intro { width: auto; }
  .screen[data-slug="miao"] .rail__progress { display: none; }
  /* il filetto di posizione non ha senso quando non si scorre in orizzontale */
  .screen[data-slug="miao"] + .rail__progress { display: none; }
}