/* ============================================================
   STREETWEAR DESIGN — pagina /7/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Tela 1024 x 1448, fondo bianco.
   Rilevata di nuovo dopo l'aggiornamento del Readymag (15
   settembre 2026): 48 widget, modello in
   rilievi/readymag/rm-streetwear.json.

   COM'E FATTA ADESSO
   ------------------
   In cima il titolo e le cinque GIF dei modelli, come prima. Sotto,
   al posto del cantiere, tre righe: ognuna una grafica e il capo che
   la porta, con una fascia rossa (498 x 50) e una didascalia, divise
   da strisce blu (498 x 8) e da linee tratteggiate.

   Il titolo e in Druk Wide come Street art: a pagamento, qui
   sostituito con Archivo. Vedi la nota in street-art.css.
   ============================================================ */

@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="streetwear"] {
  --tratto: #000000;
  --rosso-fascia: #ff0000;
  --blu-striscia: #002aff;
  background: var(--bianco);
}

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

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

/* 1448 come sul Readymag, anche se la terza riga va oltre (fino a
   1751): la tela la taglia, come l'originale. */
.tela--streetwear {
  height: 1448px;
  background: var(--bianco);
}

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

/* Druk Wide 41 px, interlinea 76, spaziatura 4,9, nero,
   centrato. Stessa impostazione di Street art. */
.s-titolo {
  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);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

/* ---------- Fasce e didascalie ---------------------------- */

.s-rosso { background: var(--rosso-fascia); }
.s-blu   { background: var(--blu-striscia); }

/* Courier New 9 px, interlinea 13, spaziatura 2, nero. */
.s-testo {
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 2px;
  color: var(--nero);
  margin: 0;
}

/* ---------- Immagini -------------------------------------- */

.s-img img { width: 100%; height: 100%; object-fit: cover; }

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

.s-indietro { color: var(--nero); }
.s-indietro:hover { color: var(--blu); }

/* ============================================================
   TELEFONO
   ============================================================ */

@media (max-width: 899px) {

  .tela--streetwear { height: auto; }

  /* Fasce e linee incorniciano le righe sulla tela: in colonna le
     quindici orizzontali finirebbero ammucchiate sotto al titolo. */
  .s-rosso, .s-blu, .tela--streetwear .linea--oriz { display: none; }

  .s-titolo, .s-testo, .s-img {
    position: static;
    width: auto;
    height: auto;
  }

  .s-titolo {
    font-size: clamp(26px, 8vw, 41px);
    line-height: 1.2;
    white-space: normal;
    padding: 28px 0 8px;
  }

  .s-testo { font-size: 13px; line-height: 1.6; letter-spacing: 1px; margin: 24px 0 12px; }

  .s-img {
    aspect-ratio: var(--w) / var(--h);
    margin-bottom: 12px;
  }

}