/* ============================================================
   STREET ART — pagina /6/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Qui c'e solo quello che questa
   pagina ha di suo; l'impalcatura (la tela, .el, le linee, i
   riquadri segnaposto, il comportamento in colonna sul telefono)
   sta in replica.css.

   Misure e colori rilevati dal sito live, tela 1024 x 1611.

   IL VERDE NON E UN COLORE PIATTO
   -------------------------------
   E fatto a strati: una foto di muro graffitato in fondo, sopra
   un velo bianco al 44%, sopra un velo verde chiaro al 51%, e poi
   le fasce verdi al 45% dietro ai testi. Se lo si sostituisse con
   una tinta unica si perderebbe la grana del muro, che e il punto.
   ============================================================ */

/* Il titolo del Readymag e in Druk Wide, che e a pagamento
   (Commercial Type) e non si puo ridistribuire. Al suo posto c'e
   Archivo, variabile in larghezza: portata a 125% di larghezza e
   peso 900 e la cosa piu vicina tra i caratteri liberi.
   NON e lo stesso font: la scelta definitiva e da decidere. */
@font-face {
  font-family: 'Archivo';
  src: url('../font/archivo-variabile.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

body[data-pagina="street-art"] {
  /* Colori misurati sul sito */
  --velo-bianco: rgba(255, 255, 255, 0.44);
  --velo-verde: rgba(178, 255, 225, 0.51);
  --fascia-verde: rgba(63, 147, 88, 0.45);

  /* Qui il tratteggio e nero, non bianco come nell'indice. */
  --tratto: #000000;

  background: var(--nero);
}

.tela--street .el,
.tela--street .linea { z-index: var(--z, auto); }

/* Qui le scatole delle linee sono alte 16, non 8: il tratto sta a +8. */
.tela--street .linea { --mezza: 8px; }

.tela--street {
  height: 1611px;
  background: var(--nero);
}

/* ---------- Gli strati del fondo -------------------------- */

/* La foto del muro, ripetuta tre volte a tre altezze diverse. */
.fondo-muro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Misurata sul sito: la grana sta al 15%. Senza questa riga
     la foto del muro copre la pagina invece di velarla. */
  opacity: 0.15;
}

/* Il collage delle foto sotto ai veli. */
.fondo-foto img { width: 100%; height: 100%; object-fit: cover; }

/* I due veli che sbiancano e inverdiscono tutto quello che sta
   sotto. L'ordine conta: prima il bianco, poi il verde. */
.velo-bianco { background: var(--velo-bianco); }
.velo-verde  { background: var(--velo-verde); }

/* Le fasce verdi dietro ai testi: alzano il contrasto del nero
   sul fondo chiazzato. */
.fascia { background: var(--fascia-verde); }

/* ---------- Titolo ---------------------------------------- */

/* Rilevato: 41 px, interlinea 76, spaziatura 4,9 px, nero,
   peso 700. In originale e Druk Wide. */
.titolo-pagina {
  font-family: 'Archivo', 'Arial Black', system-ui, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: 41px;
  line-height: 76px;
  letter-spacing: 4.9px;
  color: var(--nero);
  white-space: nowrap;
}

/* ---------- Testi ----------------------------------------- */

/* Courier New 9 px, spaziatura 2 px. Il grassetto per i titoli
   dei lavori, il tondo per le descrizioni. */
.t-intro,
.t-titolo,
.t-desc,
.t-etichetta {
  font-size: 9px;
  letter-spacing: 2px;
  line-height: 13px;
}

.t-intro    { font-weight: 700; color: var(--bianco); line-height: 15px; }
.t-titolo   { font-weight: 700; color: var(--nero); }
.t-desc     { font-weight: 400; color: var(--nero); }
.t-etichetta{ font-weight: 700; color: var(--nero); }

/* Il link all'articolo del giornale e bianco, non nero. */
.t-link { font-size: 9px; letter-spacing: 2px; line-height: 13px; color: var(--bianco); }
.t-link a { color: var(--bianco); text-decoration: underline; }
.t-link a:hover { color: var(--verde-link); }

/* I valori sotto le etichette: 8 px, interlinea 11, spaziatura 1,5. */
.t-valore {
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 1.5px;
  color: var(--nero);
  white-space: pre-line;
}

/* ---------- Le foto dei lavori ---------------------------- */

.foto { overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* Su Readymag ogni immagine e in `cover`, bozzetti compresi. Per i
   tre bozzetti non cambia nulla: il loro riquadro ha esattamente le
   proporzioni del file, quindi non viene ritagliato niente. Restano
   marcati `.foto--intera` per dire che sono quelli. */

/* ============================================================
   TELEFONO
   ------------------------------------------------------------
   Tutto in colonna. Il fondo a strati non ha senso in colonna —
   diventerebbe una pila di veli su niente — quindi resta solo la
   tinta verde risultante, e le foto dei lavori scendono a piena
   larghezza con la loro proporzione.
   ============================================================ */

@media (max-width: 899px) {

  body[data-pagina="street-art"] { background: #7fb98f; }

  .tela--street {
    height: auto;
    overflow: visible;
    background: #7fb98f;
  }

  /* Gli strati del fondo spariscono: sono impaginazione da tela. */
  .fondo-muro,
  .fondo-foto,
  .velo-bianco,
  .velo-verde,
  .fascia,
  /* anche i segnaposto dei video di fondo: appartengono agli
     strati, non a un lavoro, e in colonna non hanno un posto */
  .manca--fondo { display: none; }

  .titolo-pagina {
    position: static;
    width: auto;
    height: auto;
    font-size: clamp(28px, 9vw, 41px);
    line-height: 1.2;
    white-space: normal;
    padding: 24px 0 12px;
  }

  /* I testi tornano leggibili: a 9 px su un telefono non si legge
     niente, quindi qui salgono. E l'unico punto in cui la colonna
     si discosta dalle misure della tela. */
  .t-intro, .t-titolo, .t-desc, .t-etichetta, .t-link {
    position: static;
    width: auto;
    height: auto;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 1px;
  }

  .t-valore {
    position: static;
    width: auto;
    height: auto;
    font-size: 12px;
    line-height: 1.5;
  }

  .t-intro { color: var(--nero); margin-bottom: 16px; }
  .t-link a { color: var(--nero); }

  .foto {
    position: static;
    width: auto;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
    margin-bottom: 8px;
  }

  /* Un lavoro diventa un blocco: titolo, descrizione, scheda,
     foto. Lo spazio tra un lavoro e l'altro lo fa il margine. */
  .lavoro { margin-bottom: 32px; }
  .lavoro .t-titolo { display: block; font-size: 15px; margin-bottom: 6px; }
  .lavoro .t-desc { display: block; margin-bottom: 10px; }
  .lavoro .t-etichetta { display: block; margin-top: 10px; }
}

/* ---------- La freccia indietro --------------------------- */

.sa-indietro { color: var(--verde-scuro, #12301b); }
.sa-indietro:hover { color: var(--bianco); }