/* ============================================================
   HUDDLER — pagina /5/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Tela 1024 x 3480: la piu alta
   delle sei.

   E l'unica pagina che non parla monospazio. Il carattere e
   Be Vietnam Pro, che Leonardo ha gia nella cartella con la sua
   licenza OFL, in quattro pesi: 400 per il corpo, 800 per
   «Palette:», 900 per i titoloni di sezione.

   COLORI, MISURATI SUL SITO
   -------------------------
   petrolio #187979 · arancio #EE7443 · giallo #EFDB43 · bianco
   Il tratteggio qui e nero.

   Contrasti misurati: giallo su petrolio 3,68:1. Basta per i
   titoloni da 54 px (la soglia sul testo grande e 3:1) ma NON
   per i paragrafi da 15 px, che ne vorrebbero 4,5. E un difetto
   dell-originale: qui e replicato tale e quale, ma va segnalato
   e deciso insieme se sistemarlo nella fase dei miglioramenti.

   ATTENZIONE — ELEMENTI CHE SI MUOVONO CON LO SCROLL
   --------------------------------------------------
   Sei elementi di questa pagina sono scritti da Readymag a una x
   FUORI dalla tela (oltre 1024) e ci entrano scorrendo: la loro
   posizione dipende con continuita da quanto hai scrollato, e
   quindi una posizione «a riposo» non esiste.

   Le x usate qui sono quelle lette con la loro sezione centrata
   nello schermo, cioe come le vedi quando le stai guardando.
   Il titolo «Social e applicativi fisici» e l'unico allineato a
   occhio, per coerenza con «Logo» che gli sta sopra: e l'unico
   numero di questa pagina che non viene da una misura.
   ============================================================ */

@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('../font/be-vietnam-pro.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('../font/be-vietnam-pro-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('../font/be-vietnam-pro-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('../font/be-vietnam-pro-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

body[data-pagina="huddler"] {
  --petrolio: #187979;
  --arancio: #ee7443;
  --giallo: #efdb43;
  --tratto: #000000;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  background: var(--nero);
  font-family: var(--sans);
}

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

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

.tela--huddler {
  height: 3480px;
  background: var(--bianco);
  font-family: var(--sans);
}

/* ---------- Fasce e riquadri ------------------------------ */

.h-petrolio { background: var(--petrolio); }
.h-arancio  { background: var(--arancio); }
.h-bianco   { background: var(--bianco); }

/* I tre campioni della palette sono contenuto, non fasce: hanno
   una classe loro perche in colonna devono restare. */
.h-campione--petrolio { background: var(--petrolio); }
.h-campione--arancio  { background: var(--arancio); }
.h-campione--giallo   { background: var(--giallo); }

/* Il riquadro della palette: bianco pieno, angoli smussati, con il
   filo nero che lo stacca dal verde.

   Sul Readymag e bianco con il bordo arancione e angoli vivi
   (`radius: 0`): lo smusso e una scelta tua, non un rilievo. */
.h-riquadro {
  background: var(--bianco);
  border-radius: 24px;
}

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

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

/* La scritta HUDDLER verticale e il nastro giallo sono ruotati.
   La rotazione avviene attorno al centro, come su Readymag. */
.h-ruota { transform: rotate(calc(var(--rot) * 1deg)); }

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

/* Corpo della testata: 11 px, interlinea 18, nero su bianco. */
.h-testo {
  font-size: 11px;
  line-height: 18px;
  color: var(--nero);
  white-space: pre-line;
}

/* LA RIGA VUOTA IN CIMA
   Sul Readymag i tre testi della testata cominciano con una riga
   vuota (un blocco con dentro solo un carattere invisibile), e non
   hanno righe vuote dopo «Team:», dopo «Programmi utilizzati:» e fra
   i due paragrafi. Cosi la prima riga scritta cade SOTTO le due
   linee tratteggiate di y 16 e 24, e l-ultima SOPRA quelle di 168 e
   176. La replica aveva le righe vuote nel posto sbagliato: la prima
   riga attraversava la linea di 24.
   La riga vuota si aggiunge qui e solo da schermo largo: in colonna
   i testi non stanno fra le linee e non serve. */
@media (min-width: 900px) {
  .h-testo::before { content: "\A"; }
}

/* I paragrafi sul petrolio e sul giallo: 15 px, interlinea 26. */
.h-corpo {
  font-size: 15px;
  line-height: 26px;
  color: var(--giallo);
  white-space: pre-line;
}

/* I titoloni di sezione: 54 px, interlinea 90, peso 900. */
.h-titolo {
  font-size: 54px;
  line-height: 90px;
  font-weight: 900;
  color: var(--giallo);
  margin: 0;
  white-space: nowrap;
}

/* «Palette:» — 23 px, interlinea 38, peso 800, arancio. */
.h-etichetta {
  font-size: 23px;
  line-height: 38px;
  font-weight: 800;
  color: var(--arancio);
  margin: 0;
}

/* Il link a Behance, in fondo: petrolio, centrato. */
.h-link {
  font-size: 15px;
  line-height: 26px;
  color: var(--petrolio);
  text-align: center;
  margin: 0;
}

.h-link a { color: var(--petrolio); text-decoration: underline; }
.h-link a:hover { color: var(--arancio); }

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

/* Il widget della freccia sul Readymag dichiara z 313, ma li si
   vede **sopra** al rettangolo bianco (327) e alla colonna
   "Programmi utilizzati:" (330): i widget stanno in contesti di
   impilamento annidati e il numero scritto non e l'ordine finale.
   Qui i numeri sono tutti nello stesso contesto, quindi 313 la
   mandava sotto al bianco: invisibile e non cliccabile, cioe senza
   via di ritorno. Il massimo della pagina e 338: 400 la tiene sopra
   comunque, come nell'originale. */
.h-indietro {
  display: grid;
  place-items: center;
  color: var(--nero);
}

/* Solo lo z-index ha bisogno del peso maggiore, per battere la
   regola generica qui sopra. */
.tela--huddler .h-indietro { z-index: 400; }

.h-indietro:hover { color: var(--arancio); }

/* ============================================================
   TELEFONO
   ------------------------------------------------------------
   Tutto in colonna. Le fasce colorate e i nastri ruotati sono
   impaginazione da tela: spariscono. Restano i testi, le
   immagini e i campioni di colore, che sono contenuto.
   ============================================================ */

@media (max-width: 899px) {

  body[data-pagina="huddler"] { background: var(--bianco); }

  .tela--huddler { height: auto; overflow: visible; background: var(--bianco); }

  /* Fasce, nastro e riquadro sono impaginazione da tela: spariscono. */
  .h-petrolio, .h-arancio, .h-bianco, .h-nastro,
  .h-riquadro { display: none; }

  /* IL MARCHIO HUDDLER
     E un-immagine verticale (131 x 467) che sulla tela sta ruotata
     di 90 gradi. Prima la nascondevo, e la pagina restava senza il
     suo nome. Qui la rotazione si sposta dal riquadro all-immagine:
     il riquadro prende la proporzione di come si vede DOPO la
     rotazione (467:131) e l-immagine ci gira dentro.

     `height: calc(100% * 467 / 131)` fa si che l-altezza
     dell-immagine sia esattamente la larghezza del riquadro: girata
     di 90 gradi, quell-altezza diventa la larghezza e il conto
     torna a qualunque schermo. */
  /* .h-img piu avanti impone aspect-ratio var(--w)/var(--h), cioe
     131/467: serve piu peso per ribaltarlo. */
  /* Il marchio e giallo: su bianco sparisce. Gli si mette sotto la
     fascia petrolio, come quella su cui poggia sulla tela. */
  .h-img.h-marchio {
    background: var(--petrolio);
    display: block;
    position: relative;
    left: auto;   /* se no riaccende il left della tela: --x 447 */
    top: auto;
    aspect-ratio: 467 / 131;
    box-sizing: border-box;   /* niente padding: con il padding il 100%
                                 dell-immagine si misura sulla scatola
                                 sbagliata e la scritta esce a destra */
    overflow: hidden;
    transform: none;
    margin: 16px 0;
  }

  .h-img.h-marchio img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    max-width: none;
    height: calc(100% * 467 / 131);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .h-testo, .h-corpo, .h-titolo, .h-etichetta, .h-link, .h-img {
    position: static;
    width: auto;
    height: auto;
  }

  .h-titolo {
    font-size: clamp(30px, 9vw, 54px);
    line-height: 1.2;
    white-space: normal;
    color: var(--petrolio);
    margin: 32px 0 12px;
  }

  .h-etichetta { margin: 24px 0 8px; }

  /* Su bianco il giallo non si legge: i paragrafi che sulla tela
     stanno sul petrolio qui diventano neri. Contrasto misurato:
     giallo #EFDB43 su bianco fa 1,41:1 — illeggibile. */
  .h-corpo { color: var(--nero); font-size: 15px; line-height: 1.7; margin: 12px 0; }

  .h-testo { font-size: 14px; line-height: 1.7; margin: 12px 0; }

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

  /* I tre campioni restano: sono il contenuto della palette. */
  .h-campione {
    position: static;
    width: auto;
    height: 44px;
    display: block;
    margin-bottom: 6px;
  }

  .h-link { margin: 24px 0 40px; }

}