/* ------------------------------------------------------------------
       CSS SPECIFICO CASO STUDIO — stesso blocco replicato sui casi.
       Solo token del design system: css/style.css resta intatto.
       ------------------------------------------------------------------ */

    /* Scheda progetto: da colonna a riga orizzontale su desktop */
    @media (min-width: 768px) {
      .cs-facts { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-xl); }
    }

    /* Capitolo del racconto: marker numerico sticky + colonna di lettura */
    .cs-chapter { border-top: 1px solid var(--line); padding-block: var(--space-2xl); }
    .cs-chapter__grid { display: grid; gap: var(--space-l); }
    @media (min-width: 900px) {
      .cs-chapter__grid { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3xl); }
      .cs-chapter__marker { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
    }
    .cs-chapter__marker {
      display: flex; align-items: baseline; gap: var(--space-xs);
      font-size: var(--size-h3); font-stretch: 125%; font-weight: 750;
      line-height: 1; color: var(--cobalt);
    }
    .cs-chapter__marker small {
      font-size: var(--size-caption); font-stretch: 100%; font-weight: 600;
      letter-spacing: var(--tracking-caps); color: var(--ink-soft);
    }
    .cs-chapter .prose > h2:first-of-type { margin-top: 0; }

    /* Pull-quote: la decisione chiave, tipografia come immagine */
    .cs-pull {
      margin-block: var(--space-xl);
      padding-block: var(--space-l);
      border-block: 1px solid var(--line);
      font-size: var(--size-h2); font-stretch: 118%; font-weight: 720;
      letter-spacing: -0.015em; line-height: 1.25;
      text-wrap: balance; max-width: 24em;
    }

    .cs-figure { margin-block: var(--space-xl); }
    .cs-chapter__grid > .cs-figure { grid-column: 1 / -1; margin-block: var(--space-2xl); }
    .cs-figure > figcaption {
      margin-top: var(--space-s);
      font-size: var(--size-caption); color: var(--ink-soft);
      max-width: 65ch;
    }

    /* Immagini di capitolo: placeholder generati in img/portfolio/<progetto>/
       (01.jpg, 02.jpg, ...). Si sostituiscono sovrascrivendo il file con la
       foto reale, stesso nome: il markup non cambia. */
    .cs-media {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius-m);
      border: 1px solid var(--line);
    }
    .cs-media--portrait { max-width: 30rem; margin-inline: auto; }

    /* Un capitolo può ospitare un VIDEO al posto dell'immagine: stessa
       cornice delle foto. Parte da solo, muto e in loop (`autoplay muted
       loop playsinline`), così si vede subito che è un video e non un fermo
       immagine; `poster` copre l'attesa del primo fotogramma. I file sono gli
       originali del founder (qualità piena): da comprimere al deploy. */
    video.cs-media { background: var(--ink); }

    /* Navigazione fra i casi (anello precedente/successivo) */
    .cs-casenav { border-top: 1px solid var(--line); }
    .cs-casenav a {
      display: grid; gap: var(--space-2xs);
      padding: var(--space-l) var(--space-xs);
      border-bottom: 1px solid var(--line);
      text-decoration: none; color: inherit;
      transition: background-color var(--dur-fast) ease;
    }
    .cs-casenav__dir { font-size: var(--size-caption); font-weight: 600; color: var(--ink-soft); }
    .cs-casenav__title {
      font-size: var(--size-h3); font-stretch: 115%; font-weight: 700;
      transition: color var(--dur-fast) ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .cs-casenav a:hover { background-color: var(--paper); }
      .cs-casenav a:hover .cs-casenav__title { color: var(--cobalt); }
    }