/* ============================================================
   bluestudio — pagine caso studio (progetti/)
   Si appoggia a css/style.css (token, nav, footer, varco fra
   pagine) e a css/servizio.css (.ssez, .swrap, .ssec, .snota,
   .vriga, .sdark, .sgall, .scta__link e i grafici).
   Qui c'è solo ciò che è proprio del racconto di un progetto.
   Prefisso `k`: c era già occupato (.cap, .cursor, .cpasso).
   ============================================================ */

/* ------------------------------------------------------------
   COPERTINA — è la carta del deck in home, ingrandita: stesso
   gradiente, stessa disposizione (categoria in alto a sinistra,
   indice in outline a destra, titolo in basso). Chi clicca la
   carta deve ritrovarsela davanti, non atterrare altrove.
   ------------------------------------------------------------ */
.khero {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.khero__media {
  position: absolute; inset: -6% 0 0;
  height: 112%;
  will-change: transform;
}
.khero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 20, 0.62), transparent 52%);
}
/* gli stessi quattro fondi delle carte in home (.plate__media--N) */
.khero--1 .khero__media { background: linear-gradient(135deg, #00075D 0%, #2a34b8 55%, #8891e6 130%); }
.khero--2 .khero__media { background: linear-gradient(210deg, #16171a 0%, #00075D 75%, #2a34b8 130%); }
.khero--3 .khero__media { background: linear-gradient(150deg, #c6c9e8 -10%, #4a55d2 45%, #00075D 100%); }
.khero--4 .khero__media { background: linear-gradient(115deg, #05082e 0%, #00075D 50%, #4a55d2 115%); }

.khero__index {
  position: absolute; top: 3vh; right: var(--pad);
  font-size: clamp(8rem, 24vw, 22rem);
  font-weight: 400; line-height: 1;
  /* pieno, in accento, come la carta corrispondente nel deck della home */
  color: var(--accent);
  letter-spacing: -0.05em;
  user-select: none;
}
.khero__testo {
  position: absolute; inset: 0;
  /* in alto lo spazio della nav: qui la copertina è la prima cosa della
     pagina, e la riga di categoria finirebbe sotto il wordmark */
  padding: clamp(5.5rem, 13vh, 8rem) var(--pad) 6vh;
  display: flex; flex-direction: column;
  z-index: 1;
}
.khero__eti {
  margin-bottom: auto;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.khero__cat { font-size: 0.95rem; font-weight: 500; }
.khero__anno { font-size: 0.85rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.khero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 7.4rem);
  font-weight: 300; line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 20ch;
}
.khero__mask { display: block; overflow: hidden; }
.khero__line { display: block; will-change: transform; }
.khero__sotto {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  opacity: 0.82;
}
.khero__hint {
  position: absolute; right: var(--pad); bottom: 6vh;
  z-index: 1;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em;
  opacity: 0.5;
}
@media (max-width: 720px) {
  .khero__hint { display: none; }
  .khero__index { font-size: 9rem; top: 2vh; }
}

/* le liste del caso sono elenchi per struttura, non per numerazione:
   i numeri si vedono solo dove l'ordine significa (.kpun__num) */
.kmani__lista, .kesi__lista, .kpun__lista { list-style: none; }

/* ------------------------------------------------------------
   SEZIONI SU FONDO PIENO
   Il caso studio non è un articolo di giornale: alterna fasce
   piene e fasce chiare come il resto del sito. `ksu` rimappa i
   token dentro la sezione, così titoli, bordi e opacità dei
   figli si adattano da soli senza regole doppie — e il tema
   scuro continua a funzionare perché parte da --bg-block.
   Regola del ritmo: mai due fasce piene di fila.
   ------------------------------------------------------------ */
.ksu {
  --fg: #F7F8F8;
  --fg-strong: #FFFFFF;
  background: var(--bg-block);
  color: var(--on-block);
}
.ksu--brand {
  background: linear-gradient(118deg, #2E3DE0 0%, #1520B4 52%, #050D7A 100%);
}
/* una parola in outline, come nel manifesto della home */
.kpagina .ssec em { font-style: normal; color: var(--accent); }
.ksu .ssec em { color: var(--accent); }

/* ------------------------------------------------------------
   LA SCHEDA — didascalia da museo: righe, non riquadri
   ------------------------------------------------------------ */
.kscheda { padding-top: clamp(3rem, 7vh, 5rem); }
.kficha {
  border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  max-width: 62rem;
}
.kficha__riga {
  display: grid;
  grid-template-columns: minmax(8rem, 15rem) 1fr;
  gap: 0.4rem clamp(1rem, 4vw, 3rem);
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.kficha__riga dt {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.55;
  align-self: center;
}
.kficha__riga dd {
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.5;
  color: var(--fg-strong);
}
@media (max-width: 620px) {
  .kficha__riga { grid-template-columns: 1fr; padding: 0.8rem 0; }
}
/* l'avvertenza di anonimizzazione: fa parte del carattere del lavoro,
   quindi si legge — non è una postilla in fondo alla pagina */
.kavv {
  margin-top: 1.8rem;
  max-width: 58ch;
  padding-left: 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--fg) 22%, transparent);
  font-size: 0.92rem; line-height: 1.6; opacity: 0.72;
}

/* ------------------------------------------------------------
   LA FRASE — il principio che ha guidato il lavoro, a scala
   manifesto. Una per pagina: se ce ne fossero due non varrebbe
   niente nessuna delle due.
   ------------------------------------------------------------ */
.kdom__frase {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6.8vw, 5.6rem);
  /* pieno un po' più corposo: accanto a un peso 300 filiforme
     la parola in outline non si distingueva */
  font-weight: 420; line-height: 1.03; letter-spacing: -0.03em;
  color: var(--fg-strong);
  max-width: 22ch;
  text-transform: uppercase;
}
.kdom__frase em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px rgba(247, 248, 248, 0.85);
}
@media (max-width: 620px) {
  .kdom__frase em { -webkit-text-stroke-width: 1.4px; }
}
.kdom__nota {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  max-width: 52ch;
  margin-left: auto;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.7; opacity: 0.75;
}

/* ------------------------------------------------------------
   IL PROBLEMA — attacco grande e colonne sfalsate da rivista
   ------------------------------------------------------------ */
.kprob__attacco {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  font-weight: 320; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--fg-strong);
  max-width: 30ch;
  margin-bottom: clamp(2rem, 5vh, 3.4rem);
}
.kprob__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  max-width: 62rem;
}
.kprob__col { line-height: 1.75; opacity: 0.82; }
@media (min-width: 900px) {
  .kprob__col--giu { transform: translateY(2.4rem); }
}

/* ------------------------------------------------------------
   LE SCELTE — la torre delle pagine servizio, più la riga che
   dice cosa abbiamo scartato
   ------------------------------------------------------------ */
.vriga__alt {
  margin-top: 0.7rem;
  font-size: 0.95rem; line-height: 1.6;
  opacity: 0.6;
}
.vriga__alt span {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
  margin-right: 0.4rem;
}

/* ------------------------------------------------------------
   IL PASSAGGIO DI MANO — il testimone scende lungo la colonna.
   Il filo è una linea sola: il punto acceso è dove sta il lavoro
   mentre leggi.
   ------------------------------------------------------------ */
.kmani__lista {
  position: relative;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-left: clamp(1.6rem, 4vw, 3rem);
  max-width: 58rem;
}
.kmani__lista::before {
  content: '';
  position: absolute; left: 0; top: 0.6em; bottom: 3.4em;
  width: 1px;
  background: color-mix(in srgb, var(--on-block) 26%, transparent);
}
.kmano { position: relative; padding-bottom: clamp(2.6rem, 6vh, 4.4rem); }
.kmano:last-child { padding-bottom: 0; }
.kmano__punto {
  position: absolute;
  left: calc(clamp(1.6rem, 4vw, 3rem) * -1);
  top: 0.55em;
  width: 11px; height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-block) 38%, transparent);
  transition: background-color 0.5s var(--ease), scale 0.5s var(--ease);
}
.kmano.is-qui .kmano__punto { background: var(--accent); scale: 1.45; }
.kmano__chi {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--on-block);
  font-variation-settings: 'wght' 320;
  transition: font-variation-settings 0.5s var(--ease), opacity 0.5s var(--ease);
  opacity: 0.6;
}
.kmano.is-qui .kmano__chi { font-variation-settings: 'wght' 600; opacity: 1; }
.kmano__chi em {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.6;
  margin-top: 0.6rem;
}
/* etichetta e testo in due colonne: in linea, le righe successive
   rientravano sotto l'etichetta e il blocco si sfrangiava */
.kmano__riceve, .kmano__consegna {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.2rem 0.8rem;
  color: var(--on-block);
  max-width: 52ch;
  margin-top: 0.9rem;
  line-height: 1.65;
  opacity: 0.78;
}
.kmano__riceve span, .kmano__consegna span {
  padding-top: 0.35em;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.55;
}
@media (max-width: 560px) {
  .kmano__riceve, .kmano__consegna { grid-template-columns: 1fr; }
}
.kmano__consegna span { color: var(--accent); opacity: 1; }

/* ------------------------------------------------------------
   COM'È ANDATA — i risultati come frasi. Niente contatori in
   griglia: il dato senza il come si è misurato non vale nulla.
   ------------------------------------------------------------ */
.kesi__lista {
  display: grid;
  gap: clamp(1.8rem, 4vh, 3rem);
  max-width: 60rem;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.kesi__voce {
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}
.kesi__voce h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin-bottom: 0.7rem;
}
.kesi__voce p { line-height: 1.72; opacity: 0.82; max-width: 62ch; }
.kesi__fonte {
  margin-top: 0.5rem;
  font-size: 0.85rem; opacity: 0.55;
}
/* la regola dell'onestà, scritta dove si vede */
.konesta {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  max-width: 60ch;
  padding: 1.3rem 1.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg-strong) 7%, transparent);
  font-size: 0.95rem; line-height: 1.7; opacity: 0.85;
}

/* ------------------------------------------------------------
   LE QUESTIONI EMERSE — qui i numeri servono: sono priorità
   ------------------------------------------------------------ */
.kpun__lista {
  display: grid;
  gap: clamp(2rem, 5vh, 3.4rem);
  max-width: 64rem;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.kpun__voce {
  display: grid;
  /* colonna del numero a larghezza fissa: con `auto` i titoli si
     spostavano a destra passando da 01 a 03 */
  grid-template-columns: clamp(3rem, 6.5vw, 5.6rem) 1fr;
  gap: 0.4rem clamp(1.2rem, 3vw, 2.4rem);
}
.kpun__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 300; line-height: 0.85;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.kpun__voce h3 {
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.kpun__voce p { grid-column: 2; line-height: 1.72; opacity: 0.82; max-width: 62ch; margin-top: 0.5rem; }
@media (max-width: 620px) {
  .kpun__voce { grid-template-columns: 1fr; }
  .kpun__num { grid-row: auto; }
  .kpun__voce p { grid-column: 1; }
}
.kpun__chiusa {
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 54ch;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 320; line-height: 1.35;
  color: var(--fg-strong);
}

/* ------------------------------------------------------------
   I GRAFICI — stessa grammatica dei grafici delle pagine
   servizio (.scen__*, .wfall__*), qui affiancati
   ------------------------------------------------------------ */
.kdati__due {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
}
.kfig svg { display: block; width: 100%; height: auto; }
.kfig figcaption {
  margin-top: 0.9rem;
  font-size: 0.88rem; line-height: 1.65; opacity: 0.65;
  max-width: 46ch;
}
.kasse text {
  font-family: var(--font-sans);
  font-size: 12px; fill: var(--fg);
  opacity: 0.45; text-anchor: middle;
}
.kflus__linea { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.kflus__linea--nom { stroke: var(--fg-strong); }
.kflus__linea--att { stroke: var(--accent); }
.kflus__forbice { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.kdati__nota { margin-top: 1.6rem; font-size: 0.85rem; opacity: 0.55; }

/* legenda: sul telefono le etichette dentro il grafico diventano
   illeggibili e si accavallano alle curve — lì escono dal disegno */
.kleg { display: none; }
.kleg__p {
  display: inline-block;
  width: 1.1rem; height: 2px;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.kleg__p--esp { background: var(--fg-strong); }
.kleg__p--base { background: var(--accent); }
.kleg__p--cons { background: color-mix(in srgb, var(--fg) 45%, transparent); }
@media (max-width: 760px) {
  .kfig .scen__eti { display: none; }
  .kfig .kasse text { font-size: 20px; }
  .kleg {
    display: flex; flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin-top: 0.7rem;
    list-style: none;
    font-size: 0.85rem; opacity: 0.7;
  }
}

/* ------------------------------------------------------------
   CODA — da dove nasce il lavoro, la conversazione, il caso dopo
   ------------------------------------------------------------ */
.kcoda__serv {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  opacity: 0.75;
  /* stessa distanza dal titolo-collegamento delle pagine servizio */
  margin-bottom: clamp(2.6rem, 6vh, 4.2rem);
}
.kcoda__serv a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--fg-strong); font-weight: 500;
  opacity: 1;
}
.kcoda__serv a svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.kcoda__serv a:hover { color: var(--accent); }
.kcoda__serv a:hover svg { transform: translateX(4px); }
.kcoda__rel {
  margin-top: clamp(2.4rem, 6vh, 4rem);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6rem clamp(1rem, 2.5vw, 2rem);
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}
.kcoda__rel > span {
  opacity: 0.55; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.kcoda__rel a {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 400;
  color: var(--fg-strong);
  transition: color 0.35s var(--ease);
}
.kcoda__rel a:hover { color: var(--accent); }

/* ------------------------------------------------------------
   reduced-motion: niente da animare, tutto già a posto
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .kmano__punto { background: var(--accent); }
  .kmano__chi { opacity: 1; font-variation-settings: 'wght' 500; }
}